Merge matrix-react-sdk into element-web

Merge remote-tracking branch 'repomerge/t3chguy/repomerge' into t3chguy/repo-merge

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

test/unit-tests/components/views/typography/Caption-test.tsx

@@ -0,0 +1,40 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React from "react";
+import { render } from "jest-matrix-react";
+
+import { Caption } from "../../../../../src/components/views/typography/Caption";
+
+describe("<Caption />", () => {
+    const defaultProps = {
+        "children": "test",
+        "data-testid": "test test id",
+    };
+    const getComponent = (props = {}) => <Caption {...defaultProps} {...props} />;
+
+    it("renders plain text children", () => {
+        const { container } = render(getComponent());
+        expect({ container }).toMatchSnapshot();
+    });
+
+    it("renders an error message", () => {
+        const { container } = render(getComponent({ isError: true }));
+        expect({ container }).toMatchSnapshot();
+    });
+
+    it("renders react children", () => {
+        const children = (
+            <>
+                Test <b>test but bold</b>
+            </>
+        );
+        const { container } = render(getComponent({ children }));
+        expect({ container }).toMatchSnapshot();
+    });
+});

test/unit-tests/components/views/typography/Heading-test.tsx

@@ -0,0 +1,41 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { render } from "jest-matrix-react";
+import React from "react";
+
+import Heading from "../../../../../src/components/views/typography/Heading";
+describe("<Heading />", () => {
+    const defaultProps = {
+        "size": "1",
+        "children": <div>test</div>,
+        "data-testid": "test",
+        "className": "test",
+    } as any;
+    const getComponent = (props = {}) => {
+        return render(<Heading {...defaultProps} {...props} />);
+    };
+
+    it("renders h1 with correct attributes", () => {
+        expect(getComponent({ size: "1" }).asFragment()).toMatchSnapshot();
+    });
+    it("renders h2 with correct attributes", () => {
+        expect(getComponent({ size: "2" }).asFragment()).toMatchSnapshot();
+    });
+    it("renders h3 with correct attributes", () => {
+        expect(getComponent({ size: "3" }).asFragment()).toMatchSnapshot();
+    });
+
+    it("renders h4 with correct attributes", () => {
+        expect(getComponent({ size: "4" }).asFragment()).toMatchSnapshot();
+    });
+
+    it("can have different appearance to its heading level", () => {
+        expect(getComponent({ size: "4", as: "h1" }).asFragment()).toMatchSnapshot();
+    });
+});

test/unit-tests/components/views/typography/__snapshots__/Caption-test.tsx.snap

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Caption /> renders an error message 1`] = `
+{
+  "container": <div>
+    <span
+      class="mx_Caption mx_Caption_error"
+      data-testid="test test id"
+    >
+      test
+    </span>
+  </div>,
+}
+`;
+
+exports[`<Caption /> renders plain text children 1`] = `
+{
+  "container": <div>
+    <span
+      class="mx_Caption"
+      data-testid="test test id"
+    >
+      test
+    </span>
+  </div>,
+}
+`;
+
+exports[`<Caption /> renders react children 1`] = `
+{
+  "container": <div>
+    <span
+      class="mx_Caption"
+      data-testid="test test id"
+    >
+      Test 
+      <b>
+        test but bold
+      </b>
+    </span>
+  </div>,
+}
+`;

test/unit-tests/components/views/typography/__snapshots__/Heading-test.tsx.snap

@@ -0,0 +1,66 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Heading /> can have different appearance to its heading level 1`] = `
+<DocumentFragment>
+  <h1
+    class="mx_Heading_h4 test"
+    data-testid="test"
+  >
+    <div>
+      test
+    </div>
+  </h1>
+</DocumentFragment>
+`;
+
+exports[`<Heading /> renders h1 with correct attributes 1`] = `
+<DocumentFragment>
+  <h1
+    class="mx_Heading_h1 test"
+    data-testid="test"
+  >
+    <div>
+      test
+    </div>
+  </h1>
+</DocumentFragment>
+`;
+
+exports[`<Heading /> renders h2 with correct attributes 1`] = `
+<DocumentFragment>
+  <h2
+    class="mx_Heading_h2 test"
+    data-testid="test"
+  >
+    <div>
+      test
+    </div>
+  </h2>
+</DocumentFragment>
+`;
+
+exports[`<Heading /> renders h3 with correct attributes 1`] = `
+<DocumentFragment>
+  <h3
+    class="mx_Heading_h3 test"
+    data-testid="test"
+  >
+    <div>
+      test
+    </div>
+  </h3>
+</DocumentFragment>
+`;
+
+exports[`<Heading /> renders h4 with correct attributes 1`] = `
+<DocumentFragment>
+  <h4
+    class="mx_Heading_h4 test"
+    data-testid="test"
+  >
+    <div>
+      test
+    </div>
+  </h4>
+</DocumentFragment>
+`;