WIP: add tests by integrating mws + vitest

.apollo/router-config.yaml

@@ -44,11 +44,11 @@ apq:
 
 # # Uncomment 'preview_callback' to try HTTP callback protocal at the /graphql
 # # https://www.apollographql.com/docs/router/executing-operations/subscription-callback-protocol
-# subscription:
-#   mode:
-#     preview_callback:
-#       public_url: http://0.0.0.0:4000/callback # The router's public URL
-#       listen: 0.0.0.0:${env.PORT:-4000} # The IP address and port the router will listen on for subscription callbacks
-#       path: /callback # The path of the router's callback endpoint
-#       subgraphs: # The list of subgraphs that use the HTTP callback protocol
-#         - playback
+subscription:
+  mode:
+    preview_callback:
+      public_url: http://127.0.0.1:4000 # The router's public URL
+      listen: 0.0.0.0:${env.PORT:-4000} # The IP address and port the router will listen on for subscription callbacks
+      path: /callback # The path of the router's callback endpoint
+      subgraphs: # The list of subgraphs that use the HTTP callback protocol
+        - playback

.github/workflows/register_pq.yaml

@@ -0,0 +1,27 @@
+name: Register Persisted Queries
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - 'client/**'
+      - '.github/workflows/register_pq.yaml'
+      - 'persisted-query-manifest.config.ts'
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+jobs:
+  publish_persisted_queries:
+    name: Publish Playback schema to GraphOS
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Install Rover
+        run: |
+          curl -sSL https://rover.apollo.dev/nix/latest | sh
+          echo "$HOME/.rover/bin" >> $GITHUB_PATH
+      - name: Publish Operations Manifest
+        run: rover persisted-queries publish $APOLLO_GRAPH_REF --manifest ./client/src/apollo/persisted-query-manifest.json
+        env:
+          APOLLO_KEY: ${{ secrets.APOLLO_KEY }}
+          APOLLO_VCS_COMMIT: ${{ github.event.pull_request.head.sha }}
+          APOLLO_GRAPH_REF: ${{ secrets.APOLLO_GRAPH_REF }}

README.md

@@ -1,4 +1,6 @@
-# <a href="https://www.apollographql.com/"><img src="https://user-images.githubusercontent.com/841294/53402609-b97a2180-39ba-11e9-8100-812bab86357c.png" height="100" alt="Apollo logo"></a>
+<div align="center">
+  <a href="https://www.apollographql.com/"><img src="https://raw.githubusercontent.com/apollographql/apollo-client-devtools/main/assets/apollo-wordmark.svg" height="100" alt="Apollo Client"></a>
+</div>
 
 # React + Apollo Spotify Showcase
 

client/package.json

@@ -6,7 +6,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@apollo/client": "^3.8.0",
+    "@apollo/client": "^3.8.1",
     "@apollo/persisted-query-lists": "^1.0.0",
     "@radix-ui/react-context-menu": "^2.1.3",
     "@radix-ui/react-dialog": "^1.0.3",
@@ -18,23 +18,23 @@
     "@radix-ui/react-tabs": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.0.5",
     "@tanstack/react-table": "^8.9.1",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.5.2",
-    "@types/react": "^18.0.26",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/react": "^18.2.21",
     "@types/react-dom": "^18.0.9",
     "@wry/equality": "^0.5.3",
     "classnames": "^2.3.2",
     "date-fns": "^2.29.3",
     "deepmerge": "^4.3.0",
     "formik": "^2.2.9",
+    "graphql": "^16.8.1",
     "graphql-ws": "^5.12.0",
     "lodash": "^4.17.21",
     "lucide-react": "^0.124.0",
     "node-vibrant": "3.1.6",
     "prism-react-renderer": "^1.3.5",
     "prism-themes": "^1.9.0",
+    "prismjs": "^1.29.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-markdown": "^8.0.5",
@@ -49,7 +49,8 @@
     "start": "vite",
     "build": "tsc && vite build",
     "serve": "serve dist -s -n -L -p $PORT",
-    "lint:types": "tsc --noEmit -p ./tsconfig.json"
+    "lint:types": "tsc --noEmit -p ./tsconfig.json",
+    "test": "NODE_ENV=test vitest"
   },
   "browserslist": {
     "production": [
@@ -66,20 +67,25 @@
   "devDependencies": {
     "@apollo/rover": "^0.16.2",
     "@mdx-js/rollup": "^2.3.0",
+    "@rollup/plugin-graphql": "^2.0.3",
     "@tailwindcss/line-clamp": "^0.4.2",
     "@types/mdx": "^2.0.3",
-    "@types/node": "^20.4.5",
+    "@types/node": "^20.5.7",
     "@types/prismjs": "^1.26.0",
-    "@vitejs/plugin-react": "^3.1.0",
+    "@vitejs/plugin-react": "^4.0.4",
     "autoprefixer": "^10.4.13",
     "babel-plugin-prismjs": "^2.1.0",
+    "jsdom": "^22.1.0",
+    "msw": "^1.3.1",
     "postcss": "^8.4.21",
     "remark-frontmatter": "^4.0.1",
     "remark-mdx-frontmatter": "^2.1.1",
     "tailwindcss": "^3.2.7",
     "type-fest": "^3.6.1",
-    "typescript": "^5.1.6",
-    "vite": "^4.4.4"
+    "typescript": "^5.2.2",
+    "vite": "^4.4.9",
+    "vitest": "^0.34.3",
+    "vitest-dom": "^0.1.0"
   },
   "volta": {
     "node": "18.16.1"

client/setupTests.ts

@@ -0,0 +1,8 @@
+import { beforeAll, afterAll, afterEach } from 'vitest';
+import { server } from './src/mocks/server';
+
+import 'vitest-dom/extend-expect';
+
+beforeAll(() => server.listen({ onUnhandledRequest: 'error' }));
+afterAll(() => server.close());
+afterEach(() => server.resetHandlers());

client/src/__tests__/IndexRoute.test.tsx

@@ -0,0 +1,25 @@
+import { expect, test, describe } from 'vitest';
+import { Suspense } from 'react';
+import { render, screen } from '@testing-library/react';
+import { ApolloProvider } from '@apollo/client';
+import * as IndexRoute from '../routes/index';
+import client from '../apollo/client';
+import { BrowserRouter } from 'react-router-dom';
+
+describe('IndexRoute', () => {
+  test('renders', async () => {
+    render(
+      <ApolloProvider client={client}>
+        <Suspense fallback={<IndexRoute.LoadingState />}>
+          <BrowserRouter>
+            <IndexRoute.RouteComponent />
+          </BrowserRouter>
+        </Suspense>
+      </ApolloProvider>
+    );
+
+    expect(await screen.findByText(/afternoon delight/i)).toBeInTheDocument();
+    expect(await screen.findByText(/this is my playlist/i)).toBeInTheDocument();
+    expect(await screen.findByText(/description/i)).toBeInTheDocument();
+  });
+});

client/src/apollo/client.ts

@@ -17,6 +17,7 @@ import introspection from './introspection.json';
 import libraryContains from '../fieldPolicies/libraryContains';
 import offsetConnectionPagination from '../fieldPolicies/offsetConnectionPagination';
 import cursorConnectionPagination from '../fieldPolicies/cursorConnectionPagination';
+import { ExecutableSchemaLink } from '../mocks/handlers';
 import { getAccessToken } from '../auth';
 import { version } from '../../package.json';
 import { persistedQueryModeVar } from '../vars';
@@ -68,9 +69,13 @@ const httpAuthLink = setContext(async ({ context }) => {
   };
 });
 
-const httpLink = createHttpLink({
-  uri: import.meta.env.VITE_SERVER_HOST,
-});
+const httpLink = split(
+  () => process.env.NODE_ENV === 'test',
+  ExecutableSchemaLink,
+  createHttpLink({
+    uri: import.meta.env.VITE_SERVER_HOST || 'http://localhost:4000/',
+  })
+);
 
 export default new ApolloClient({
   link: from([httpAuthLink, persistedQueries, httpLink]),

client/src/auth.ts

@@ -14,9 +14,12 @@
   refresh: STORAGE_KEYS.REFRESH_TOKEN,
 } as const;
 
 export const readToken = (tokenType: TokenType = 'access') => {
   try {
-    return localStorage.getItem(TOKEN_TO_STORAGE_KEYS[tokenType]);
+    // console.log(localStorage.getItem(TOKEN_TO_STORAGE_KEYS[tokenType]));
+    // return localStorage.getItem(TOKEN_TO_STORAGE_KEYS[tokenType]);
+    // TODO: mock localStorage
+    return 'abc';
   } catch (e) {
     return null;
   }

client/src/graphql.d.ts

@@ -0,0 +1,6 @@
+declare module '*.graphql' {
+  import { DocumentNode } from 'graphql';
+  const Schema: DocumentNode;
+
+  export = Schema;
+}

client/src/mocks/handlers.ts

@@ -0,0 +1,50 @@
+import { rest } from 'msw';
+import { buildSchema } from 'graphql';
+import { addMocksToSchema, createMockStore } from '@graphql-tools/mock';
+import { SchemaLink } from '@apollo/client/link/schema/index.js';
+import SpotifySchema from '../../schema.graphql';
+
+const mocks = {
+  Int: () => 6,
+  Float: () => 22.1,
+  String: () => 'string',
+};
+
+export const resolvers = {
+  FeaturedPlaylistConnection: {
+    message: () => 'Afternoon delight',
+    edges: () => [{}],
+  },
+  Image: {
+    url: () => 'https://spotify.com/image.png',
+  },
+  Playlist: {
+    id: () => 1,
+    name: () => 'This is my playlist',
+    description: () => 'A description',
+  },
+};
+
+const schema = buildSchema(SpotifySchema?.loc?.source.body || '');
+
+const store = createMockStore({ schema, mocks });
+
+export const ExecutableSchemaLink = new SchemaLink({
+  schema: addMocksToSchema({
+    schema,
+    store,
+    resolvers,
+  }),
+});
+
+export const handlers = [
+  rest.post('https://accounts.spotify.com/api/token', (req, res, ctx) => {
+    return res(
+      ctx.json({
+        expires_in: '10000000',
+        access_token: 'foo',
+        refresh_token: 'bar',
+      })
+    );
+  }),
+];

client/src/mocks/server.js

@@ -0,0 +1,5 @@
+import { setupServer } from 'msw/node';
+import { handlers } from './handlers';
+
+// This configures a request mocking server with the given request handlers.
+export const server = setupServer(...handlers);

client/src/routes/index.tsx

@@ -64,6 +64,7 @@ const PlaylistTileGrid = ({
   queryRef: QueryReference<IndexRouteQuery>;
 }) => {
   const { data } = useReadQuery(queryRef);
+  // console.log(data.featuredPlaylists.edges);
   return (
     <div className={containerStyles}>
       <PageTitle>{data.featuredPlaylists?.message}</PageTitle>

client/tsconfig.json

@@ -20,6 +20,6 @@
     "outDir": "dist",
     "jsx": "react-jsx"
   },
-  "include": ["src"],
+  "include": ["src", "./setupTests.ts"],
   "exclude": ["node_modules"]
 }

client/vite.config.ts

@@ -1,5 +1,6 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import graphql from '@rollup/plugin-graphql';
 
 export default defineConfig(async () => {
   const mdx = await import('@mdx-js/rollup');
@@ -12,6 +13,7 @@ export default defineConfig(async () => {
       port: process.env.PORT ?? 3000,
     },
     plugins: [
+      graphql(),
       mdx.default({
         remarkPlugins: [
           remarkFrontmatter.default,
@@ -38,5 +40,18 @@ export default defineConfig(async () => {
         },
       }),
     ],
+    test: {
+      globals: true,
+      environment: 'jsdom',
+      setupFiles: ['./setupTests.ts'],
+      // solves CJS/ESM dual package hazard issue with graphql
+      // whereby some imports resolve with CJS version and some the ESM version
+      // see: https://github.com/vitejs/vite/issues/7879#issuecomment-1349079757
+      server: {
+        deps: {
+          fallbackCJS: true,
+        },
+      },
+    },
   };
 });