Iterate

Signed-off-by: Michael Telatynski <[email protected]>

test/unit-tests/components/views/elements/AppTile-test.tsx

@@ -159,6 +159,8 @@ describe("AppTile", () => {
         await expect(renderResult.findByText("Example 1")).resolves.toBeInTheDocument();
         expect(ActiveWidgetStore.instance.isLive("1", "r1")).toBe(true);
 
+        const { asFragment } = renderResult;
+        expect(asFragment()).toMatchSnapshot();
         // We want to verify that as we change to room 2, we should close the
         // right panel and destroy the widget.
 

test/unit-tests/components/views/elements/__snapshots__/AppTile-test.tsx.snap

@@ -1,5 +1,75 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`AppTile destroys non-persisted right panel widget on room change 1`] = `
+<DocumentFragment>
+  <aside
+    class="mx_RightPanel"
+    id="mx_RightPanel"
+  >
+    <div
+      class="mx_BaseCard mx_WidgetCard"
+    >
+      <div
+        class="mx_BaseCard_header"
+      >
+        <div
+          class="mx_BaseCard_header_title"
+        >
+          <h4
+            class="mx_Heading_h4 mx_BaseCard_header_title_heading"
+          >
+            Example 1
+          </h4>
+          <div
+            aria-expanded="false"
+            aria-haspopup="true"
+            aria-label="Options"
+            class="mx_AccessibleButton mx_BaseCard_header_title_button--option"
+            role="button"
+            tabindex="0"
+          />
+        </div>
+        <button
+          aria-labelledby=":r0:"
+          class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
+          data-testid="base-card-close-button"
+          role="button"
+          style="--cpd-icon-button-size: 28px;"
+          tabindex="0"
+        >
+          <div
+            class="_indicator-icon_133tf_26"
+            style="--cpd-icon-button-size: 100%;"
+          >
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
+              />
+            </svg>
+          </div>
+        </button>
+      </div>
+      <div
+        class="mx_AppTileFullWidth"
+        id="1"
+      >
+        <div
+          class="mx_AppTile_persistedWrapper"
+        >
+          <div />
+        </div>
+      </div>
+    </div>
+  </aside>
+</DocumentFragment>
+`;
+
 exports[`AppTile for a persistent app should render 1`] = `
 <DocumentFragment>
   <div

test/unit-tests/vector/__snapshots__/init-test.ts.snap

@@ -3,11 +3,262 @@
 exports[`showError should match snapshot 1`] = `
 <div
   id="matrixchat"
-/>
+>
+  <div
+    class="mx_ErrorView cpd-theme-light"
+  >
+    <img
+      alt="Element"
+      class="mx_ErrorView_logo"
+      height="160"
+      src="themes/element/img/logos/element-app-logo.png"
+    />
+    <div
+      class="mx_ErrorView_container"
+    >
+      <h1
+        class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121"
+      >
+        Error title
+      </h1>
+      <p
+        class="_typography_yh5dq_162 _font-body-lg-regular_yh5dq_78"
+      >
+        msg1
+      </p>
+      <p
+        class="_typography_yh5dq_162 _font-body-lg-regular_yh5dq_78"
+      >
+        msg2
+      </p>
+    </div>
+  </div>
+</div>
 `;
 
 exports[`showIncompatibleBrowser should match snapshot 1`] = `
 <div
   id="matrixchat"
-/>
+>
+  <div
+    class="mx_ErrorView cpd-theme-light"
+  >
+    <img
+      alt="Element"
+      class="mx_ErrorView_logo"
+      height="160"
+      src="themes/element/img/logos/element-app-logo.png"
+    />
+    <div
+      class="mx_ErrorView_container"
+    >
+      <h1
+        class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121"
+      >
+        Element does not support this browser
+      </h1>
+      <p
+        class="_typography_yh5dq_162 _font-body-lg-regular_yh5dq_78"
+      >
+        Element uses some browser features which are not available in your current browser. If you continue, some features may stop working and there is a risk that you may lose data in the future.
+      </p>
+      <p
+        class="_typography_yh5dq_162 _font-body-lg-regular_yh5dq_78"
+      >
+        <span>
+          For the best experience, use 
+          <a
+            href="https://google.com/chrome"
+            rel="noreferrer noopener"
+            target="_blank"
+          >
+            Chrome
+          </a>
+          , 
+          <a
+            href="https://firefox.com"
+            rel="noreferrer noopener"
+            target="_blank"
+          >
+            Firefox
+          </a>
+          , 
+          <a
+            href="https://microsoft.com/edge"
+            rel="noreferrer noopener"
+            target="_blank"
+          >
+            Edge
+          </a>
+          , or 
+          <a
+            href="https://apple.com/safari"
+            rel="noreferrer noopener"
+            target="_blank"
+          >
+            Safari
+          </a>
+          .
+        </span>
+      </p>
+      <div
+        class="mx_Flex mx_ErrorView_buttons"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x);"
+      >
+        <button
+          class="_button_i91xf_17 _has-icon_i91xf_66"
+          data-kind="secondary"
+          data-size="sm"
+          role="button"
+          tabindex="0"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="20"
+            viewBox="0 0 24 24"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M5 3h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z"
+            />
+            <path
+              d="M15 3h5a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V6.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L17.586 5H15a1 1 0 1 1 0-2Z"
+            />
+          </svg>
+          Learn more
+        </button>
+        <button
+          class="_button_i91xf_17"
+          data-kind="primary"
+          data-size="sm"
+          role="button"
+          tabindex="0"
+        >
+          Continue anyway
+        </button>
+      </div>
+    </div>
+    <div
+      class="_separator_144s5_17"
+      data-kind="primary"
+      data-orientation="horizontal"
+      role="separator"
+    />
+    <h2
+      class="_typography_yh5dq_162 _font-heading-sm-semibold_yh5dq_102"
+    >
+      Use Element Desktop instead
+    </h2>
+    <div
+      class="mx_Flex"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x);"
+    >
+      <a
+        class="_button_i91xf_17 _has-icon_i91xf_66"
+        data-kind="secondary"
+        data-size="lg"
+        href="https://packages.element.io/desktop/install/macos/Element.dmg"
+        role="link"
+        tabindex="0"
+      >
+        <div
+          aria-hidden="true"
+          height="20"
+          width="20"
+        />
+        Mac
+      </a>
+      <a
+        class="_button_i91xf_17 _has-icon_i91xf_66"
+        data-kind="secondary"
+        data-size="lg"
+        href="https://packages.element.io/desktop/install/win32/x64/Element%20Setup.exe"
+        role="link"
+        tabindex="0"
+      >
+        <div
+          aria-hidden="true"
+          height="20"
+          width="20"
+        />
+        Windows (64-bit)
+      </a>
+      <a
+        class="_button_i91xf_17 _has-icon_i91xf_66"
+        data-kind="secondary"
+        data-size="lg"
+        href="https://packages.element.io/desktop/install/win32/ia32/Element%20Setup.exe"
+        role="link"
+        tabindex="0"
+      >
+        <div
+          aria-hidden="true"
+          height="20"
+          width="20"
+        />
+        Windows (32-bit)
+      </a>
+      <a
+        class="_button_i91xf_17 _has-icon_i91xf_66"
+        data-kind="secondary"
+        data-size="lg"
+        href="https://element.io/download#linux"
+        role="link"
+        tabindex="0"
+      >
+        <div
+          aria-hidden="true"
+          height="20"
+          width="20"
+        />
+        Linux
+      </a>
+    </div>
+    <h2
+      class="_typography_yh5dq_162 _font-heading-sm-semibold_yh5dq_102"
+    >
+      Or use our mobile app
+    </h2>
+    <div
+      class="mx_Flex"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-6x);"
+    >
+      <a
+        href="https://apps.apple.com/app/vector/id1083446067"
+        rel="noreferrer noopener"
+        target="_blank"
+      >
+        <img
+          alt="Apple App Store"
+          height="64"
+          src="themes/element/img/download/apple.svg"
+        />
+      </a>
+      <a
+        href="https://play.google.com/store/apps/details?id=im.vector.app"
+        rel="noreferrer noopener"
+        target="_blank"
+      >
+        <img
+          alt="Google Play Store"
+          height="64"
+          src="themes/element/img/download/google.svg"
+        />
+      </a>
+      <a
+        href="https://f-droid.org/repository/browse/?fdid=im.vector.app"
+        rel="noreferrer noopener"
+        target="_blank"
+      >
+        <img
+          alt="F-Droid"
+          height="64"
+          src="themes/element/img/download/fdroid.svg"
+        />
+      </a>
+    </div>
+  </div>
+</div>
 `;

test/unit-tests/vector/init-test.ts

@@ -6,7 +6,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import fetchMock from "fetch-mock-jest";
-import { waitFor } from "jest-matrix-react";
+import { waitFor, screen } from "jest-matrix-react";
 
 import { loadApp, showError, showIncompatibleBrowser } from "../../../src/vector/init.tsx";
 import SdkConfig from "../../../src/SdkConfig.ts";
@@ -24,6 +24,7 @@ describe("showIncompatibleBrowser", () => {
 
     it("should match snapshot", async () => {
         await showIncompatibleBrowser(jest.fn());
+        await screen.findByText("Element does not support this browser");
         expect(document.getElementById("matrixchat")).toMatchSnapshot();
     });
 });
@@ -33,6 +34,7 @@ describe("showError", () => {
 
     it("should match snapshot", async () => {
         await showError("Error title", ["msg1", "msg2"]);
+        await screen.findByText("Error title");
         expect(document.getElementById("matrixchat")).toMatchSnapshot();
     });
 });