From bec66feb8e05e8973397425a3b54dadf4d8ccca2 Mon Sep 17 00:00:00 2001 From: Eddie Date: Mon, 13 May 2024 11:21:37 +0800 Subject: [PATCH 01/12] feat: Install graphql client dependencies --- frontend/package-lock.json | 216 +++++++++++++++++++++++++++++++++++-- frontend/package.json | 2 + 2 files changed, 211 insertions(+), 7 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 0de6f0c..3534e23 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -8,6 +8,8 @@ "name": "frontend", "version": "0.1.0", "dependencies": { + "@apollo/client": "^3.10.3", + "graphql": "^16.8.1", "next": "14.2.3", "react": "^18", "react-dom": "^18" @@ -58,6 +60,48 @@ "node": ">=6.0.0" } }, + "node_modules/@apollo/client": { + "version": "3.10.3", + "resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.10.3.tgz", + "integrity": "sha512-4EIgZnFmRO1laWv3NCxlVIxcvimG63djuAXvyXhpQH3wkNMv9SykrasKRN08+z+cn/fVisBOLmkSRdyNyP9f4A==", + "dependencies": { + "@graphql-typed-document-node/core": "^3.1.1", + "@wry/caches": "^1.0.0", + "@wry/equality": "^0.5.6", + "@wry/trie": "^0.5.0", + "graphql-tag": "^2.12.6", + "hoist-non-react-statics": "^3.3.2", + "optimism": "^0.18.0", + "prop-types": "^15.7.2", + "rehackt": "^0.1.0", + "response-iterator": "^0.2.6", + "symbol-observable": "^4.0.0", + "ts-invariant": "^0.10.3", + "tslib": "^2.3.0", + "zen-observable-ts": "^1.2.5" + }, + "peerDependencies": { + "graphql": "^15.0.0 || ^16.0.0", + "graphql-ws": "^5.5.5", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", + "subscriptions-transport-ws": "^0.9.0 || ^0.11.0" + }, + "peerDependenciesMeta": { + "graphql-ws": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + }, + "subscriptions-transport-ws": { + "optional": true + } + } + }, "node_modules/@babel/code-frame": { "version": "7.24.2", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.2.tgz", @@ -726,6 +770,14 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@graphql-typed-document-node/core": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/@graphql-typed-document-node/core/-/core-3.2.0.tgz", + "integrity": "sha512-mB9oAsNCm9aM3/SOv4YtBMqZbYj10R7dkq8byBqxGY/ncFwhf2oQzMV+LCRlWoDSEBJ3COiR1yeDvMtsoOsuFQ==", + "peerDependencies": { + "graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.14", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", @@ -1753,13 +1805,13 @@ "version": "15.7.12", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz", "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==", - "dev": true + "devOptional": true }, "node_modules/@types/react": { "version": "18.3.2", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.2.tgz", "integrity": "sha512-Btgg89dAnqD4vV7R3hlwOxgqobUQKgx3MmrQRi0yYbs/P0ym8XozIAlkqVilPqHQwXs4e9Tf63rrCgl58BcO4w==", - "dev": true, + "devOptional": true, "dependencies": { "@types/prop-types": "*", "csstype": "^3.0.2" @@ -1934,6 +1986,50 @@ "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==", "dev": true }, + "node_modules/@wry/caches": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@wry/caches/-/caches-1.0.1.tgz", + "integrity": "sha512-bXuaUNLVVkD20wcGBWRyo7j9N3TxePEWFZj2Y+r9OoUzfqmavM84+mFykRicNsBqatba5JLay1t48wxaXaWnlA==", + "dependencies": { + "tslib": "^2.3.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/@wry/context": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@wry/context/-/context-0.7.4.tgz", + "integrity": "sha512-jmT7Sb4ZQWI5iyu3lobQxICu2nC/vbUhP0vIdd6tHC9PTfenmRmuIFqktc6GH9cgi+ZHnsLWPvfSvc4DrYmKiQ==", + "dependencies": { + "tslib": "^2.3.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/@wry/equality": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/@wry/equality/-/equality-0.5.7.tgz", + "integrity": "sha512-BRFORjsTuQv5gxcXsuDXx6oGRhuVsEGwZy6LOzRRfgu+eSfxbhUQ9L9YtSEIuIjY/o7g3iWFjrc5eSY1GXP2Dw==", + "dependencies": { + "tslib": "^2.3.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/@wry/trie": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/@wry/trie/-/trie-0.5.0.tgz", + "integrity": "sha512-FNoYzHawTMk/6KMQoEG5O4PuioX19UbwdQKF44yw0nLfOypfQdjtfZzo/UIJWAJ23sNIFbD1Ug9lbaDGMwbqQA==", + "dependencies": { + "tslib": "^2.3.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/abab": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz", @@ -2878,7 +2974,7 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "dev": true + "devOptional": true }, "node_modules/damerau-levenshtein": { "version": "1.0.8", @@ -4309,6 +4405,28 @@ "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==", "dev": true }, + "node_modules/graphql": { + "version": "16.8.1", + "resolved": "https://registry.npmjs.org/graphql/-/graphql-16.8.1.tgz", + "integrity": "sha512-59LZHPdGZVh695Ud9lRzPBVTtlX9ZCV150Er2W43ro37wVof0ctenSaskPPjN7lVTIN8mSZt8PHUNKZuNQUuxw==", + "engines": { + "node": "^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0" + } + }, + "node_modules/graphql-tag": { + "version": "2.12.6", + "resolved": "https://registry.npmjs.org/graphql-tag/-/graphql-tag-2.12.6.tgz", + "integrity": "sha512-FdSNcu2QQcWnM2VNvSCCDCVS5PpPqpzgFT8+GXzqJuoDd0CBncxCY278u4mhRO7tMgo2JjgJA5aZ+nWSQ/Z+xg==", + "dependencies": { + "tslib": "^2.1.0" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "graphql": "^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0" + } + }, "node_modules/has-bigints": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz", @@ -4390,6 +4508,14 @@ "node": ">= 0.4" } }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dependencies": { + "react-is": "^16.7.0" + } + }, "node_modules/html-encoding-sniffer": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz", @@ -6519,7 +6645,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -6673,6 +6798,28 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/optimism": { + "version": "0.18.0", + "resolved": "https://registry.npmjs.org/optimism/-/optimism-0.18.0.tgz", + "integrity": "sha512-tGn8+REwLRNFnb9WmcY5IfpOqeX2kpaYJ1s6Ae3mn12AeydLkR3j+jSCmVQFoXqU8D41PAJ1RG1rCRNWmNZVmQ==", + "dependencies": { + "@wry/caches": "^1.0.0", + "@wry/context": "^0.7.0", + "@wry/trie": "^0.4.3", + "tslib": "^2.3.0" + } + }, + "node_modules/optimism/node_modules/@wry/trie": { + "version": "0.4.3", + "resolved": "https://registry.npmjs.org/@wry/trie/-/trie-0.4.3.tgz", + "integrity": "sha512-I6bHwH0fSf6RqQcnnXLJKhkSXG45MFral3GxPaY4uAl0LYDZM+YDVDAiU9bYwjTuysy1S0IeecWtmq1SZA3M1w==", + "dependencies": { + "tslib": "^2.3.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/optionator": { "version": "0.9.4", "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz", @@ -7144,7 +7291,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -7234,8 +7380,7 @@ "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "node_modules/read-cache": { "version": "1.0.0", @@ -7316,6 +7461,23 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/rehackt": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/rehackt/-/rehackt-0.1.0.tgz", + "integrity": "sha512-7kRDOuLHB87D/JESKxQoRwv4DzbIdwkAGQ7p6QKGdVlY1IZheUnVhlk/4UZlNUVxdAXpyxikE3URsG067ybVzw==", + "peerDependencies": { + "@types/react": "*", + "react": "*" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "react": { + "optional": true + } + } + }, "node_modules/require-directory": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", @@ -7396,6 +7558,14 @@ "node": ">=10" } }, + "node_modules/response-iterator": { + "version": "0.2.6", + "resolved": "https://registry.npmjs.org/response-iterator/-/response-iterator-0.2.6.tgz", + "integrity": "sha512-pVzEEzrsg23Sh053rmDUvLSkGXluZio0qu8VT6ukrYuvtjVfCbDZH9d6PGXb8HZfzdNZt8feXv/jvUzlhRgLnw==", + "engines": { + "node": ">=0.8" + } + }, "node_modules/reusify": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz", @@ -7985,6 +8155,14 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/symbol-observable": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-4.0.0.tgz", + "integrity": "sha512-b19dMThMV4HVFynSAM1++gBHAbk2Tc/osgLIBZMKsyqh34jb2e8Os7T6ZW/Bt3pJFdBTd2JwAnAAEQV7rSNvcQ==", + "engines": { + "node": ">=0.10" + } + }, "node_modules/symbol-tree": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", @@ -8170,6 +8348,17 @@ "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==", "dev": true }, + "node_modules/ts-invariant": { + "version": "0.10.3", + "resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.10.3.tgz", + "integrity": "sha512-uivwYcQaxAucv1CzRp2n/QdYPo4ILf9VXgH19zEIjFx2EJufV16P0JtJVpYHy89DItG6Kwj2oIUjrcK5au+4tQ==", + "dependencies": { + "tslib": "^2.1.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/tsconfig-paths": { "version": "3.15.0", "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz", @@ -8812,6 +9001,19 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/zen-observable": { + "version": "0.8.15", + "resolved": "https://registry.npmjs.org/zen-observable/-/zen-observable-0.8.15.tgz", + "integrity": "sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ==" + }, + "node_modules/zen-observable-ts": { + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/zen-observable-ts/-/zen-observable-ts-1.2.5.tgz", + "integrity": "sha512-QZWQekv6iB72Naeake9hS1KxHlotfRpe+WGNbNx5/ta+R3DNjVO2bswf63gXlWDcs+EMd7XY8HfVQyP1X6T4Zg==", + "dependencies": { + "zen-observable": "0.8.15" + } } } } diff --git a/frontend/package.json b/frontend/package.json index 98bd7fe..67656ca 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -11,6 +11,8 @@ "test:watch": "jest --watch" }, "dependencies": { + "@apollo/client": "^3.10.3", + "graphql": "^16.8.1", "next": "14.2.3", "react": "^18", "react-dom": "^18" From 881f55aef7c25c40ca28b9f4e5062039b8e536ca Mon Sep 17 00:00:00 2001 From: Eddie Date: Mon, 13 May 2024 14:51:54 +0800 Subject: [PATCH 02/12] fix: Change port for backend --- backend/src/main.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/backend/src/main.ts b/backend/src/main.ts index a01b32f..3d31717 100644 --- a/backend/src/main.ts +++ b/backend/src/main.ts @@ -5,6 +5,6 @@ import { ValidationPipe } from '@nestjs/common'; async function bootstrap() { const app = await NestFactory.create(AppModule); app.useGlobalPipes(new ValidationPipe()); - await app.listen(3000); + await app.listen(3001); } bootstrap(); From 2c85cc2eb12eb6fc06c698b3aa6eb92ea7565fa8 Mon Sep 17 00:00:00 2001 From: Eddie Date: Tue, 14 May 2024 11:00:20 +0800 Subject: [PATCH 03/12] feat: Add GraphQL Context Provider for backend integration Testing was doing with TDD in mind, but also trying to understand the component life cycle. Goal here was to test the component without mocking the graphql client and provider Thoughts with mocks: * Codegen to add the types from Graphql backend is available, but no data. * No need to setup backend server to test with mocks * Render would respond immediately instead of waiting for async http requests * Coupled to backend with mocks * Easier to test but will draw a box around complete actual usage of the component Thoughts for calling backend: * Backend needs to be started for tests to run successfully * Required cross-fetch to polly fill jest tests not using actualy fetch api * Tests are slower for async rendering in tests * Understanding of render cycle and async testing in Jest and Testing React * Fitness test for frontend and server interaction * Testing backend compatability and changes * Test how the component is used for react life cycles * Might be able to test complete page without cypress. * Snapshot tests are more reliable --- .../PokemonAPIProvider.spec.tsx | 77 +++++++++++++++++++ .../PokemonAPIProvider/PokeonAPIProvider.tsx | 22 ++++++ 2 files changed, 99 insertions(+) create mode 100644 frontend/src/components/PokemonAPIProvider/PokemonAPIProvider.spec.tsx create mode 100644 frontend/src/components/PokemonAPIProvider/PokeonAPIProvider.tsx diff --git a/frontend/src/components/PokemonAPIProvider/PokemonAPIProvider.spec.tsx b/frontend/src/components/PokemonAPIProvider/PokemonAPIProvider.spec.tsx new file mode 100644 index 0000000..ed59725 --- /dev/null +++ b/frontend/src/components/PokemonAPIProvider/PokemonAPIProvider.spec.tsx @@ -0,0 +1,77 @@ +import { render, renderHook, screen, waitFor } from "@testing-library/react"; +import PokemonAPIProvider from "./PokeonAPIProvider"; +import { gql, useQuery } from "@apollo/client"; + +describe("Pokemon API Provider", () => { + it("should query pokemon api", async () => { + const { result, rerender } = renderHook( + () => { + return useQuery( + gql` + query GetPokemon { + pokemon(name: "gengar") { + id + name + image + } + } + `, + { + fetchPolicy: "network-only", + errorPolicy: "none", + } + ); + }, + { + wrapper: PokemonAPIProvider + } + ); + expect(result.current.loading).toBe(true); + await waitFor(() => expect(result.current.loading).toBe(false)); + + expect(result.current.data.pokemon).toBeDefined(); + expect(result.current.error).toBeUndefined(); + }); + it("should have children", async () => { + function Pokemon() { + const { data } = useQuery(gql` + query GetPokemon { + pokemon(name: "gengar") { + id + name + image + } + } + `); + + return ( + <> + {data && ( +
+

+ {data.pokemon.id}: {data.pokemon.name} +

+ +
+ )} + + ); + } + + render( + + + , + {} + ); + + await waitFor( + () => { + expect( + screen.getByRole("img", {name: 'gengar'}) + ).toBeInTheDocument(); + expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument(); + } + ); + }); +}); diff --git a/frontend/src/components/PokemonAPIProvider/PokeonAPIProvider.tsx b/frontend/src/components/PokemonAPIProvider/PokeonAPIProvider.tsx new file mode 100644 index 0000000..8c42765 --- /dev/null +++ b/frontend/src/components/PokemonAPIProvider/PokeonAPIProvider.tsx @@ -0,0 +1,22 @@ +"use client"; +import { + ApolloClient, + ApolloProvider, + InMemoryCache, + HttpLink, +} from "@apollo/client"; +import React from "react"; +import { ReactNode } from "react"; + +const PokemonAPIProvider = ({ children }: { children: ReactNode }) => { + const cache = new InMemoryCache(); + + const client = new ApolloClient({ + cache: cache, + uri: "http://localhost:3001/graphql", // TODO this will eventually be set by nodeenv + }); + + return {children}; +}; + +export default PokemonAPIProvider; From 79cff5f6c732efa70cb0a7efe313a7168f032d78 Mon Sep 17 00:00:00 2001 From: Eddie Date: Tue, 14 May 2024 11:40:17 +0800 Subject: [PATCH 04/12] config: Add Backend Start dependency for test run --- .github/workflows/Frontend.yml | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/.github/workflows/Frontend.yml b/.github/workflows/Frontend.yml index 8e27a65..e45d6b9 100644 --- a/.github/workflows/Frontend.yml +++ b/.github/workflows/Frontend.yml @@ -31,14 +31,24 @@ jobs: # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ steps: - - uses: actions/checkout@v4 + - name: Checkout + uses: actions/checkout@v4 - name: Use Node.js ${{ matrix.node-version }} uses: actions/setup-node@v4 with: node-version: ${{ matrix.node-version }} cache: 'npm' cache-dependency-path: ./frontend/package-lock.json - - run: npm ci - - run: npm run lint - - run: npm run build - - run: npm test -- --coverage + - name: Install Backend Dependencies + run: | + npm ci --prefix $REPOS/backend && + npm run build --prefix $REPOS/backend && + npm start:prod --prefix $REPOS/backend + working-directory: ../backend + - name: Install Frontend Dependencies + run: | + npm ci && + npm run lint && + npm run build + - name: Run Jest Test + run: npm test -- --coverage From a0d000cbdb6a2312d0eb531bacb57f19dfcc0c33 Mon Sep 17 00:00:00 2001 From: Eddie Date: Tue, 14 May 2024 11:42:16 +0800 Subject: [PATCH 05/12] fix: Favour working directory over npm flags --- .github/workflows/Frontend.yml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/workflows/Frontend.yml b/.github/workflows/Frontend.yml index e45d6b9..4b714e5 100644 --- a/.github/workflows/Frontend.yml +++ b/.github/workflows/Frontend.yml @@ -41,9 +41,9 @@ jobs: cache-dependency-path: ./frontend/package-lock.json - name: Install Backend Dependencies run: | - npm ci --prefix $REPOS/backend && - npm run build --prefix $REPOS/backend && - npm start:prod --prefix $REPOS/backend + npm ci --prefix && + npm run build && + npm start:prod working-directory: ../backend - name: Install Frontend Dependencies run: | From 7a419de1bc7de78c10605dab00f04db3b902f261 Mon Sep 17 00:00:00 2001 From: Eddie Date: Tue, 14 May 2024 11:44:05 +0800 Subject: [PATCH 06/12] fix: Backend working directory path --- .github/workflows/Frontend.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/Frontend.yml b/.github/workflows/Frontend.yml index 4b714e5..857b29f 100644 --- a/.github/workflows/Frontend.yml +++ b/.github/workflows/Frontend.yml @@ -44,7 +44,7 @@ jobs: npm ci --prefix && npm run build && npm start:prod - working-directory: ../backend + working-directory: ./backend - name: Install Frontend Dependencies run: | npm ci && From a2a24294b33bd386a17970ea8f3838c900460bce Mon Sep 17 00:00:00 2001 From: Eddie Date: Tue, 14 May 2024 11:46:06 +0800 Subject: [PATCH 07/12] fix: backend start command --- .github/workflows/Frontend.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/Frontend.yml b/.github/workflows/Frontend.yml index 857b29f..46cc901 100644 --- a/.github/workflows/Frontend.yml +++ b/.github/workflows/Frontend.yml @@ -43,7 +43,7 @@ jobs: run: | npm ci --prefix && npm run build && - npm start:prod + npm run start:prod working-directory: ./backend - name: Install Frontend Dependencies run: | From be19ab837ade5a799c5dbe3a9eca8d89ff34276f Mon Sep 17 00:00:00 2001 From: Eddie Date: Tue, 14 May 2024 11:47:23 +0800 Subject: [PATCH 08/12] fix: npm ci command typo --- .github/workflows/Frontend.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/Frontend.yml b/.github/workflows/Frontend.yml index 46cc901..305ca8a 100644 --- a/.github/workflows/Frontend.yml +++ b/.github/workflows/Frontend.yml @@ -41,7 +41,7 @@ jobs: cache-dependency-path: ./frontend/package-lock.json - name: Install Backend Dependencies run: | - npm ci --prefix && + npm ci && npm run build && npm run start:prod working-directory: ./backend From afacd139fa715d9eb2dc9c30dd689b54f4df7566 Mon Sep 17 00:00:00 2001 From: Eddie Date: Tue, 14 May 2024 11:52:35 +0800 Subject: [PATCH 09/12] fix: Backend path to prod build --- backend/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/backend/package.json b/backend/package.json index d232c9e..45bda7d 100644 --- a/backend/package.json +++ b/backend/package.json @@ -11,7 +11,7 @@ "start": "nest start", "start:dev": "nest start --watch", "start:debug": "nest start --debug --watch", - "start:prod": "node dist/main", + "start:prod": "node dist/src/main", "test": "jest", "test:watch": "jest --watch", "test:cov": "jest --coverage", From 03f5a8291d7a1480a592bea18dbd18d38f7f1be3 Mon Sep 17 00:00:00 2001 From: Eddie Date: Tue, 14 May 2024 12:01:12 +0800 Subject: [PATCH 10/12] fix: Run backend server only when test is run --- .github/workflows/Frontend.yml | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/.github/workflows/Frontend.yml b/.github/workflows/Frontend.yml index 305ca8a..275a6c5 100644 --- a/.github/workflows/Frontend.yml +++ b/.github/workflows/Frontend.yml @@ -42,8 +42,7 @@ jobs: - name: Install Backend Dependencies run: | npm ci && - npm run build && - npm run start:prod + npm run build working-directory: ./backend - name: Install Frontend Dependencies run: | @@ -51,4 +50,6 @@ jobs: npm run lint && npm run build - name: Run Jest Test - run: npm test -- --coverage + run: | + npm run start:prod --prefix ../backend/ && + npm test -- --coverage From 980cf546bcc645782f28fa069b8ae0c3c20c31b5 Mon Sep 17 00:00:00 2001 From: Eddie Date: Tue, 14 May 2024 12:09:23 +0800 Subject: [PATCH 11/12] fix: Run server in background --- .github/workflows/Frontend.yml | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/.github/workflows/Frontend.yml b/.github/workflows/Frontend.yml index 275a6c5..b23258d 100644 --- a/.github/workflows/Frontend.yml +++ b/.github/workflows/Frontend.yml @@ -42,7 +42,8 @@ jobs: - name: Install Backend Dependencies run: | npm ci && - npm run build + npm run build && + npm run start:prod --prefix ../backend/ & working-directory: ./backend - name: Install Frontend Dependencies run: | @@ -50,6 +51,4 @@ jobs: npm run lint && npm run build - name: Run Jest Test - run: | - npm run start:prod --prefix ../backend/ && - npm test -- --coverage + run: npm test -- --coverage From a102a21b240a8c3f9ccf5c30cc276f189a6d79fc Mon Sep 17 00:00:00 2001 From: Eddie Date: Tue, 14 May 2024 16:02:35 +0800 Subject: [PATCH 12/12] fix: Add back cross fetch to pollyfil fetch api --- frontend/jest.setup.ts | 3 +- frontend/package-lock.json | 121 +++++++++++++++++++++++++++++++++++++ frontend/package.json | 1 + 3 files changed, 124 insertions(+), 1 deletion(-) diff --git a/frontend/jest.setup.ts b/frontend/jest.setup.ts index 331666c..48c09b5 100644 --- a/frontend/jest.setup.ts +++ b/frontend/jest.setup.ts @@ -1 +1,2 @@ -import '@testing-library/jest-dom'; \ No newline at end of file +import '@testing-library/jest-dom'; +import 'cross-fetch/polyfill'; diff --git a/frontend/package-lock.json b/frontend/package-lock.json index c92c82f..11e4ed0 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -22,6 +22,7 @@ "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", + "cross-fetch": "^4.0.0", "eslint": "^8", "eslint-config-next": "14.2.3", "jest": "^29.7.0", @@ -1532,6 +1533,21 @@ "glob": "10.3.10" } }, + "node_modules/@next/swc-darwin-arm64": { + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.3.tgz", + "integrity": "sha512-3pEYo/RaGqPP0YzwnlmPN2puaF2WMLM3apt5jLW2fFdXD9+pqcoTzRk+iZsf8ta7+quAe4Q6Ms0nR0SFGFdS1A==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10" + } + }, "node_modules/@next/swc-darwin-x64": { "version": "14.2.3", "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.3.tgz", @@ -1547,6 +1563,111 @@ "node": ">= 10" } }, + "node_modules/@next/swc-linux-arm64-gnu": { + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.3.tgz", + "integrity": "sha512-cuzCE/1G0ZSnTAHJPUT1rPgQx1w5tzSX7POXSLaS7w2nIUJUD+e25QoXD/hMfxbsT9rslEXugWypJMILBj/QsA==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-arm64-musl": { + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.3.tgz", + "integrity": "sha512-0D4/oMM2Y9Ta3nGuCcQN8jjJjmDPYpHX9OJzqk42NZGJocU2MqhBq5tWkJrUQOQY9N+In9xOdymzapM09GeiZw==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-x64-gnu": { + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.3.tgz", + "integrity": "sha512-ENPiNnBNDInBLyUU5ii8PMQh+4XLr4pG51tOp6aJ9xqFQ2iRI6IH0Ds2yJkAzNV1CfyagcyzPfROMViS2wOZ9w==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-x64-musl": { + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.3.tgz", + "integrity": "sha512-BTAbq0LnCbF5MtoM7I/9UeUu/8ZBY0i8SFjUMCbPDOLv+un67e2JgyN4pmgfXBwy/I+RHu8q+k+MCkDN6P9ViQ==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-arm64-msvc": { + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.3.tgz", + "integrity": "sha512-AEHIw/dhAMLNFJFJIJIyOFDzrzI5bAjI9J26gbO5xhAKHYTZ9Or04BesFPXiAYXDNdrwTP2dQceYA4dL1geu8A==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-ia32-msvc": { + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.3.tgz", + "integrity": "sha512-vga40n1q6aYb0CLrM+eEmisfKCR45ixQYXuBXxOOmmoV8sYST9k7E3US32FsY+CkkF7NtzdcebiFT4CHuMSyZw==", + "cpu": [ + "ia32" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-x64-msvc": { + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.3.tgz", + "integrity": "sha512-Q1/zm43RWynxrO7lW4ehciQVj+5ePBhOK+/K2P7pLFX3JaJ/IZVC69SHidrmZSOkqz7ECIOhhy7XhAFG4JYyHA==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", diff --git a/frontend/package.json b/frontend/package.json index 110e821..99b37a1 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -25,6 +25,7 @@ "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", + "cross-fetch": "^4.0.0", "eslint": "^8", "eslint-config-next": "14.2.3", "jest": "^29.7.0",