Setup MSW

sandhose · sandhose · commit c3f15788be78 · 2024-11-12T18:01:31.000+01:00
diff --git a/frontend/codegen.ts b/frontend/codegen.ts
@@ -13,6 +13,7 @@ const config: CodegenConfig = {
   generates: {
     "./src/gql/": {
       preset: "client",
+      plugins: ["typescript-msw"],
       config: {
         useTypeImports: true,
         enumsAsTypes: true,
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -53,6 +53,7 @@
     "@graphql-codegen/add": "^5.0.3",
     "@graphql-codegen/cli": "^5.0.3",
     "@graphql-codegen/client-preset": "^4.5.0",
+    "@graphql-codegen/typescript-msw": "^3.0.0",
     "@graphql-codegen/urql-introspection": "^3.0.0",
     "@storybook/addon-essentials": "^8.4.2",
     "@storybook/react": "^8.4.2",
@@ -72,6 +73,7 @@
     "browserslist-to-esbuild": "^2.1.1",
     "happy-dom": "^15.11.2",
     "i18next-parser": "^9.0.2",
+    "msw": "^2.6.4",
     "postcss": "^8.4.49",
     "postcss-modules": "^6.0.1",
     "postcss-nesting": "^13.0.1",
diff --git a/frontend/src/components/Layout/Layout.tsx b/frontend/src/components/Layout/Layout.tsx
@@ -15,7 +15,7 @@ import { graphqlClient } from "../../graphql";
 import styles from "./Layout.module.css";
 
 const QUERY = graphql(/* GraphQL */ `
-  query FooterQuery {
+  query Footer {
     siteConfig {
       id
       ...Footer_siteConfig
diff --git a/frontend/src/components/UserProfile/UserEmailList.tsx b/frontend/src/components/UserProfile/UserEmailList.tsx
@@ -19,7 +19,7 @@ import PaginationControls from "../PaginationControls";
 import UserEmail from "../UserEmail";
 
 const QUERY = graphql(/* GraphQL */ `
-  query UserEmailListQuery(
+  query UserEmailList(
     $userId: ID!
     $first: Int
     $after: String
diff --git a/frontend/src/components/VerifyEmail/VerifyEmail.tsx b/frontend/src/components/VerifyEmail/VerifyEmail.tsx
@@ -23,7 +23,7 @@ const FRAGMENT = graphql(/* GraphQL */ `
 `);
 
 const VERIFY_EMAIL_MUTATION = graphql(/* GraphQL */ `
-  mutation VerifyEmail($id: ID!, $code: String!) {
+  mutation DoVerifyEmail($id: ID!, $code: String!) {
     verifyEmail(input: { userEmailId: $id, code: $code }) {
       status
 
diff --git a/frontend/src/gql/gql.ts b/frontend/src/gql/gql.ts
diff --git a/frontend/src/gql/graphql.ts b/frontend/src/gql/graphql.ts
diff --git a/frontend/src/routes/_account.index.tsx b/frontend/src/routes/_account.index.tsx
@@ -13,7 +13,7 @@ import { graphql } from "../gql";
 import { graphqlClient } from "../graphql";
 
 const QUERY = graphql(/* GraphQL */ `
-  query UserProfileQuery {
+  query UserProfile {
     viewer {
       __typename
       ... on User {
diff --git a/frontend/src/routes/_account.sessions.$id.tsx b/frontend/src/routes/_account.sessions.$id.tsx
@@ -11,7 +11,7 @@ import { graphql } from "../gql";
 import { graphqlClient } from "../graphql";
 
 const QUERY = graphql(/* GraphQL */ `
-  query SessionDetailQuery($id: ID!) {
+  query SessionDetail($id: ID!) {
     viewerSession {
       ... on Node {
         id
diff --git a/frontend/src/routes/_account.sessions.index.tsx b/frontend/src/routes/_account.sessions.index.tsx
@@ -21,7 +21,7 @@ import { getNinetyDaysAgo } from "../utils/dates";
 const PAGE_SIZE = 6;
 
 const QUERY = graphql(/* GraphQL */ `
-  query SessionsOverviewQuery {
+  query SessionsOverview {
     viewer {
       __typename
 
@@ -39,7 +39,7 @@ export const query = queryOptions({
 });
 
 const LIST_QUERY = graphql(/* GraphQL */ `
-  query AppSessionsListQuery(
+  query AppSessionsList(
     $before: String
     $after: String
     $first: Int
diff --git a/frontend/src/routes/clients.$id.tsx b/frontend/src/routes/clients.$id.tsx
@@ -11,7 +11,7 @@ import { graphql } from "../gql";
 import { graphqlClient } from "../graphql";
 
 const QUERY = graphql(/* GraphQL */ `
-  query OAuth2ClientQuery($id: ID!) {
+  query OAuth2Client($id: ID!) {
     oauth2Client(id: $id) {
       ...OAuth2Client_detail
     }
diff --git a/frontend/src/routes/devices.$.tsx b/frontend/src/routes/devices.$.tsx
@@ -15,7 +15,7 @@ import { graphql } from "../gql";
 import { graphqlClient } from "../graphql";
 
 const CURRENT_VIEWER_QUERY = graphql(/* GraphQL */ `
-  query CurrentViewerQuery {
+  query CurrentViewer {
     viewer {
       __typename
       ... on Node {
@@ -35,7 +35,7 @@ const currentViewerQuery = queryOptions({
 });
 
 const QUERY = graphql(/* GraphQL */ `
-  query DeviceRedirectQuery($deviceId: String!, $userId: ID!) {
+  query DeviceRedirect($deviceId: String!, $userId: ID!) {
     session(deviceId: $deviceId, userId: $userId) {
       __typename
       ... on Node {
diff --git a/frontend/src/routes/emails.$id.verify.tsx b/frontend/src/routes/emails.$id.verify.tsx
@@ -11,7 +11,7 @@ import { graphql } from "../gql";
 import { graphqlClient } from "../graphql";
 
 const QUERY = graphql(/* GraphQL */ `
-  query VerifyEmailQuery($id: ID!) {
+  query VerifyEmail($id: ID!) {
     userEmail(id: $id) {
       ...UserEmail_verifyEmail
     }
diff --git a/frontend/src/routes/password.change.index.tsx b/frontend/src/routes/password.change.index.tsx
@@ -11,7 +11,7 @@ import { graphql } from "../gql";
 import { graphqlClient } from "../graphql";
 
 const QUERY = graphql(/* GraphQL */ `
-  query PasswordChangeQuery {
+  query PasswordChange {
     viewer {
       __typename
       ... on Node {
diff --git a/frontend/src/routes/password.recovery.index.tsx b/frontend/src/routes/password.recovery.index.tsx
@@ -13,7 +13,7 @@ import { graphql } from "../gql";
 import { graphqlClient } from "../graphql";
 
 const QUERY = graphql(/* GraphQL */ `
-  query PasswordRecoveryQuery {
+  query PasswordRecovery {
     siteConfig {
       id
       ...PasswordCreationDoubleInput_siteConfig
diff --git a/frontend/src/routes/reset-cross-signing.index.tsx b/frontend/src/routes/reset-cross-signing.index.tsx
@@ -26,7 +26,7 @@ import { graphql } from "../gql";
 import { graphqlClient } from "../graphql";
 
 const CURRENT_VIEWER_QUERY = graphql(/* GraphQL */ `
-  query CurrentViewerQuery {
+  query CurrentViewer {
     viewer {
       __typename
       ... on Node {
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
@@ -155,7 +155,7 @@ export default defineConfig((env) => ({
 
   test: {
     globalSetup: "./vitest.global-setup.ts",
-    setupFiles: "./vitest.i18n-setup.ts",
+    setupFiles: ["./vitest.i18n-setup.ts", "./vitest.msw-setup.ts"],
     coverage: {
       provider: "v8",
       src: ["./src/"],
diff --git a/frontend/vitest.msw-setup.ts b/frontend/vitest.msw-setup.ts
@@ -0,0 +1,43 @@
+// Copyright 2024 New Vector Ltd.
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+// Please see LICENSE in the repository root for full details.
+
+import { HttpResponse } from "msw";
+import { setupServer } from "msw/node";
+import { afterAll, afterEach, beforeAll } from "vitest";
+import { FRAGMENT } from "./src/components/Footer/Footer";
+import { makeFragmentData } from "./src/gql";
+import { mockFooterQuery } from "./src/gql/graphql";
+
+const server = setupServer(
+  mockFooterQuery(() =>
+    HttpResponse.json({
+      data: {
+        siteConfig: {
+          id: "siteConfig",
+
+          ...makeFragmentData(
+            {
+              id: "siteConfig",
+              policyUri: "https://matrix.org/policy",
+              tosUri: "https://matrix.org/tos",
+              imprint:
+                "All Rights Reserved. The Super Chat name, logo and device are registered trade marks of BigCorp Ltd.",
+            },
+            FRAGMENT,
+          ),
+        },
+      },
+    }),
+  ),
+);
+
+// Start server before all tests
+beforeAll(() => server.listen({ onUnhandledRequest: "error" }));
+
+//  Close server after all tests
+afterAll(() => server.close());
+
+// Reset handlers after each test `important for test isolation`
+afterEach(() => server.resetHandlers());
