Typeguards!

Signed-off-by: Michael Telatynski <[email protected]>
element-hq · Oct 18, 2024 · e7fefc9 · e7fefc9
1 parent 1fc425a
commit e7fefc9
Show file tree

Hide file tree

Showing 4 changed files with 127 additions and 10 deletions.
diff --git a/src/components/views/dialogs/ChangelogDialog.tsx b/src/components/views/dialogs/ChangelogDialog.tsx
@@ -15,8 +15,8 @@ import Spinner from "../elements/Spinner";
 import Heading from "../typography/Heading";
 
 interface IProps {
-    newVersion: string;
-    version: string;
+    newVersion: DevelopVersionString;
+    version: DevelopVersionString;
     onFinished: (success: boolean) => void;
 }
 
@@ -32,6 +32,8 @@ interface Commit {
 
 const REPOS = ["element-hq/element-web", "matrix-org/matrix-js-sdk"] as const;
 
+export type DevelopVersionString = string & { _developVersionString: never };
+
 /*
  * Parse a version string is compatible with the Changelog dialog ([element-version]-js-[js-sdk-version])
  */
@@ -48,6 +50,10 @@ export function parseVersion(version: string): Record<(typeof REPOS)[number], st
     return null;
 }
 
+export function checkVersion(version: string): version is DevelopVersionString {
+    return parseVersion(version) !== null;
+}
+
 export default class ChangelogDialog extends React.Component<IProps, State> {
     public constructor(props: IProps) {
         super(props);
@@ -74,9 +80,8 @@ export default class ChangelogDialog extends React.Component<IProps, State> {
     }
 
     public componentDidMount(): void {
-        const commits = parseVersion(this.props.version);
-        const newCommits = parseVersion(this.props.newVersion);
-        if (commits == null || newCommits == null) return;
+        const commits = parseVersion(this.props.version)!;
+        const newCommits = parseVersion(this.props.newVersion)!;
 
         for (const repo of REPOS) {
             this.fetchChanges(repo, commits[repo], newCommits[repo]);

diff --git a/src/toasts/UpdateToast.tsx b/src/toasts/UpdateToast.tsx
@@ -13,7 +13,7 @@ import SdkConfig from "../SdkConfig";
 import GenericToast from "../components/views/toasts/GenericToast";
 import ToastStore from "../stores/ToastStore";
 import QuestionDialog from "../components/views/dialogs/QuestionDialog";
-import ChangelogDialog, { parseVersion } from "../components/views/dialogs/ChangelogDialog";
+import ChangelogDialog, { checkVersion } from "../components/views/dialogs/ChangelogDialog";
 import PlatformPeg from "../PlatformPeg";
 import Modal from "../Modal";
 
@@ -43,7 +43,7 @@ export const showToast = (version: string, newVersion: string, releaseNotes?: st
                 },
             });
         };
-    } else if (parseVersion(version) && parseVersion(newVersion)) {
+    } else if (checkVersion(version) && checkVersion(newVersion)) {
         onAccept = () => {
             Modal.createDialog(ChangelogDialog, {
                 version,

diff --git a/test/unit-tests/components/views/dialogs/ChangelogDialog-test.tsx b/test/unit-tests/components/views/dialogs/ChangelogDialog-test.tsx
@@ -10,7 +10,10 @@ import React from "react";
 import fetchMock from "fetch-mock-jest";
 import { render, screen, waitForElementToBeRemoved } from "jest-matrix-react";
 
-import ChangelogDialog, { parseVersion } from "../../../../../src/components/views/dialogs/ChangelogDialog";
+import ChangelogDialog, {
+    DevelopVersionString,
+    parseVersion,
+} from "../../../../../src/components/views/dialogs/ChangelogDialog";
 
 describe("<ChangelogDialog />", () => {
     it("should fetch github proxy url for each repo with old and new version strings", async () => {
@@ -64,8 +67,8 @@ describe("<ChangelogDialog />", () => {
             files: [],
         });
 
-        const newVersion = "newsha1-js-newsha3";
-        const oldVersion = "oldsha1-js-oldsha3";
+        const newVersion = "newsha1-js-newsha3" as DevelopVersionString;
+        const oldVersion = "oldsha1-js-oldsha3" as DevelopVersionString;
         const { asFragment } = render(
             <ChangelogDialog newVersion={newVersion} version={oldVersion} onFinished={jest.fn()} />,
         );

diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/ChangelogDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/ChangelogDialog-test.tsx.snap
@@ -1,5 +1,114 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`<ChangelogDialog /> should fail gracefully with invalid version strings 1`] = `
+<DocumentFragment>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+  <div
+    aria-describedby="mx_Dialog_content"
+    aria-labelledby="mx_BaseDialog_title"
+    class="mx_QuestionDialog mx_Dialog_fixedWidth"
+    data-focus-lock-disabled="false"
+    role="dialog"
+  >
+    <div
+      class="mx_Dialog_header"
+    >
+      <h1
+        class="mx_Heading_h3 mx_Dialog_title"
+        id="mx_BaseDialog_title"
+      >
+        Changelog
+      </h1>
+    </div>
+    <div
+      class="mx_Dialog_content"
+      id="mx_Dialog_content"
+    >
+      <div
+        class="mx_ChangelogDialog_content"
+      >
+        <div>
+          <h2
+            class="mx_Heading_h4"
+          >
+            element-hq/element-web
+          </h2>
+          <ul>
+            <div
+              class="mx_Spinner"
+            >
+              <div
+                aria-label="Loading…"
+                class="mx_Spinner_icon"
+                data-testid="spinner"
+                role="progressbar"
+                style="width: 32px; height: 32px;"
+              />
+            </div>
+          </ul>
+        </div>
+        <div>
+          <h2
+            class="mx_Heading_h4"
+          >
+            matrix-org/matrix-js-sdk
+          </h2>
+          <ul>
+            <div
+              class="mx_Spinner"
+            >
+              <div
+                aria-label="Loading…"
+                class="mx_Spinner_icon"
+                data-testid="spinner"
+                role="progressbar"
+                style="width: 32px; height: 32px;"
+              />
+            </div>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div
+      class="mx_Dialog_buttons"
+    >
+      <span
+        class="mx_Dialog_buttons_row"
+      >
+        <button
+          data-testid="dialog-cancel-button"
+          type="button"
+        >
+          Cancel
+        </button>
+        <button
+          class="mx_Dialog_primary"
+          data-testid="dialog-primary-button"
+          type="button"
+        >
+          Update
+        </button>
+      </span>
+    </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
 exports[`<ChangelogDialog /> should fetch github proxy url for each repo with old and new version strings 1`] = `
 <DocumentFragment>
   <div