feat: show call participants in room list (Discord-style)

apps/web/test/unit-tests/components/views/settings/shared/SettingsSubsection-test.tsx

@@ -0,0 +1,51 @@
+/*
+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 OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React from "react";
+import { render } from "jest-matrix-react";
+
+import { SettingsSubsection } from "../../../../../../src/components/views/settings/shared/SettingsSubsection";
+
+describe("<SettingsSubsection />", () => {
+    const defaultProps = {
+        heading: "Test",
+        children: <div>test settings content</div>,
+    };
+    const getComponent = (props = {}): React.ReactElement => <SettingsSubsection {...defaultProps} {...props} />;
+
+    it("renders with plain text heading", () => {
+        const { container } = render(getComponent());
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders with react element heading", () => {
+        const heading = <h3>This is the heading</h3>;
+        const { container } = render(getComponent({ heading }));
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders without description", () => {
+        const { container } = render(getComponent());
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders with plain text description", () => {
+        const { container } = render(getComponent({ description: "This describes the subsection" }));
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders with react element description", () => {
+        const description = (
+            <p>
+                This describes the section <a href="/#">link</a>
+            </p>
+        );
+        const { container } = render(getComponent({ description }));
+        expect(container).toMatchSnapshot();
+    });
+});

apps/web/test/unit-tests/components/views/settings/shared/SettingsSubsectionHeading-test.tsx

@@ -0,0 +1,30 @@
+/*
+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 OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { render } from "jest-matrix-react";
+import React from "react";
+
+import { SettingsSubsectionHeading } from "../../../../../../src/components/views/settings/shared/SettingsSubsectionHeading";
+
+describe("<SettingsSubsectionHeading />", () => {
+    const defaultProps = {
+        heading: "test",
+    };
+    const getComponent = (props = {}) => render(<SettingsSubsectionHeading {...defaultProps} {...props} />);
+
+    it("renders without children", () => {
+        const { container } = getComponent();
+        expect({ container }).toMatchSnapshot();
+    });
+
+    it("renders with children", () => {
+        const children = <a href="/#">test</a>;
+        const { container } = getComponent({ children });
+        expect({ container }).toMatchSnapshot();
+    });
+});

apps/web/test/unit-tests/components/views/settings/shared/__snapshots__/SettingsSubsection-test.tsx.snap

@@ -0,0 +1,145 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`<SettingsSubsection /> renders with plain text description 1`] = `
+<div>
+  <div
+    class="mx_SettingsSubsection"
+  >
+    <div
+      class="mx_SettingsSubsectionHeading"
+    >
+      <h2
+        class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
+      >
+        Test
+      </h2>
+    </div>
+    <div
+      class="mx_SettingsSubsection_description"
+    >
+      <div
+        class="mx_SettingsSubsection_text"
+      >
+        This describes the subsection
+      </div>
+    </div>
+    <div
+      class="mx_SettingsSubsection_content"
+    >
+      <div>
+        test settings content
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<SettingsSubsection /> renders with plain text heading 1`] = `
+<div>
+  <div
+    class="mx_SettingsSubsection"
+  >
+    <div
+      class="mx_SettingsSubsectionHeading"
+    >
+      <h2
+        class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
+      >
+        Test
+      </h2>
+    </div>
+    <div
+      class="mx_SettingsSubsection_content"
+    >
+      <div>
+        test settings content
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<SettingsSubsection /> renders with react element description 1`] = `
+<div>
+  <div
+    class="mx_SettingsSubsection"
+  >
+    <div
+      class="mx_SettingsSubsectionHeading"
+    >
+      <h2
+        class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
+      >
+        Test
+      </h2>
+    </div>
+    <div
+      class="mx_SettingsSubsection_description"
+    >
+      <div
+        class="mx_SettingsSubsection_text"
+      >
+        <p>
+          This describes the section 
+          <a
+            href="/#"
+          >
+            link
+          </a>
+        </p>
+      </div>
+    </div>
+    <div
+      class="mx_SettingsSubsection_content"
+    >
+      <div>
+        test settings content
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<SettingsSubsection /> renders with react element heading 1`] = `
+<div>
+  <div
+    class="mx_SettingsSubsection"
+  >
+    <h3>
+      This is the heading
+    </h3>
+    <div
+      class="mx_SettingsSubsection_content"
+    >
+      <div>
+        test settings content
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<SettingsSubsection /> renders without description 1`] = `
+<div>
+  <div
+    class="mx_SettingsSubsection"
+  >
+    <div
+      class="mx_SettingsSubsectionHeading"
+    >
+      <h2
+        class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
+      >
+        Test
+      </h2>
+    </div>
+    <div
+      class="mx_SettingsSubsection_content"
+    >
+      <div>
+        test settings content
+      </div>
+    </div>
+  </div>
+</div>
+`;

apps/web/test/unit-tests/components/views/settings/shared/__snapshots__/SettingsSubsectionHeading-test.tsx.snap

@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`<SettingsSubsectionHeading /> renders with children 1`] = `
+{
+  "container": <div>
+    <div
+      class="mx_SettingsSubsectionHeading"
+    >
+      <h2
+        class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
+      >
+        test
+      </h2>
+      <a
+        href="/#"
+      >
+        test
+      </a>
+    </div>
+  </div>,
+}
+`;
+
+exports[`<SettingsSubsectionHeading /> renders without children 1`] = `
+{
+  "container": <div>
+    <div
+      class="mx_SettingsSubsectionHeading"
+    >
+      <h2
+        class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
+      >
+        test
+      </h2>
+    </div>
+  </div>,
+}
+`;