Use semantic headings in user settings - discovery (#10838)

* allow testids in settings sections

* use semantic headings in LabsUserSettingsTab

* put back margin var

* use SettingsTab wrapper

* use semantic headings for deactivate acc section

* use semantic heading in manage integratios

* i18n

* use currentColor in warning-triangle svg, update use in RoomStatusBar

* use semantic headings for discovery section

* test manage integration settings

* test deactivate account section display

* remove SettingsFieldset margins

* threepids styles

* remove debug

* test discovery email and phone

test/components/views/settings/discovery/PhoneNumbers-test.tsx

@@ -18,18 +18,17 @@ import React from "react";
 import { render, screen } from "@testing-library/react";
 import { IThreepid, ThreepidMedium } from "matrix-js-sdk/src/@types/threepids";
 
-import { PhoneNumber } from "../../../../../src/components/views/settings/discovery/PhoneNumbers";
+import PhoneNumbers, { PhoneNumber } from "../../../../../src/components/views/settings/discovery/PhoneNumbers";
 
+const msisdn: IThreepid = {
+    medium: ThreepidMedium.Phone,
+    address: "+441111111111",
+    validated_at: 12345,
+    added_at: 12342,
+    bound: false,
+};
 describe("<PhoneNumber/>", () => {
     it("should track props.msisdn.bound changes", async () => {
-        const msisdn: IThreepid = {
-            medium: ThreepidMedium.Phone,
-            address: "+441111111111",
-            validated_at: 12345,
-            added_at: 12342,
-            bound: false,
-        };
-
         const { rerender } = render(<PhoneNumber msisdn={msisdn} />);
         await screen.findByText("Share");
 
@@ -38,3 +37,23 @@ describe("<PhoneNumber/>", () => {
         await screen.findByText("Revoke");
     });
 });
+
+describe("<PhoneNumbers />", () => {
+    it("should render a loader while loading", async () => {
+        const { container } = render(<PhoneNumbers msisdns={[msisdn]} isLoading={true} />);
+
+        expect(container).toMatchSnapshot();
+    });
+
+    it("should render phone numbers", async () => {
+        const { container } = render(<PhoneNumbers msisdns={[msisdn]} isLoading={false} />);
+
+        expect(container).toMatchSnapshot();
+    });
+
+    it("should handle no numbers", async () => {
+        const { container } = render(<PhoneNumbers msisdns={[]} isLoading={false} />);
+
+        expect(container).toMatchSnapshot();
+    });
+});