From 05e9013c3bc1d5ab967640f49c796d196939aea6 Mon Sep 17 00:00:00 2001 From: Eric NGUYEN Date: Wed, 3 Aug 2022 16:03:39 +0200 Subject: [PATCH] Added API tests + added vitest.config.ts + added fallback of window.fetch with xmlhttprequest --- .drone.yml | 4 +++ .env.test | 1 + package-lock.json | 66 ------------------------------------------- src/App.tsx | 27 +++++++++++++----- src/test/api.test.tsx | 18 ++++++++++++ src/test/setup.ts | 4 +++ vite.config.ts | 13 +-------- vitest.config.ts | 16 +++++++++++ 8 files changed, 64 insertions(+), 85 deletions(-) create mode 100644 .env.test create mode 100644 src/test/api.test.tsx create mode 100644 vitest.config.ts diff --git a/.drone.yml b/.drone.yml index 341a6e4..9932066 100644 --- a/.drone.yml +++ b/.drone.yml @@ -6,6 +6,8 @@ steps: - name: test image: node:16 commands: + - curl https://bun.sh/install | bash + - bun run ../test-server.js - npm install - npm test @@ -17,5 +19,7 @@ steps: - name: test image: node commands: + - curl https://bun.sh/install | bash + - bun run ../test-server.js - npm install - npm test \ No newline at end of file diff --git a/.env.test b/.env.test new file mode 100644 index 0000000..9b4e331 --- /dev/null +++ b/.env.test @@ -0,0 +1 @@ +VITE_API_URL=http://localhost:5000 \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index ab2681d..3b90ace 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,6 @@ "devDependencies": { "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.3.0", - "@testing-library/react-hooks": "^8.0.1", "@testing-library/user-event": "^14.4.1", "@types/react": "^18.0.15", "@types/react-dom": "^18.0.6", @@ -924,36 +923,6 @@ "react-dom": "^18.0.0" } }, - "node_modules/@testing-library/react-hooks": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/@testing-library/react-hooks/-/react-hooks-8.0.1.tgz", - "integrity": "sha512-Aqhl2IVmLt8IovEVarNDFuJDVWVvhnr9/GCU6UUnrYXwgDFF9h2L2o2P9KBni1AST5sT6riAyoukFLyjQUgD/g==", - "dev": true, - "dependencies": { - "@babel/runtime": "^7.12.5", - "react-error-boundary": "^3.1.0" - }, - "engines": { - "node": ">=12" - }, - "peerDependencies": { - "@types/react": "^16.9.0 || ^17.0.0", - "react": "^16.9.0 || ^17.0.0", - "react-dom": "^16.9.0 || ^17.0.0", - "react-test-renderer": "^16.9.0 || ^17.0.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - }, - "react-dom": { - "optional": true - }, - "react-test-renderer": { - "optional": true - } - } - }, "node_modules/@testing-library/user-event": { "version": "14.4.1", "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.4.1.tgz", @@ -5078,22 +5047,6 @@ "react": "^18.2.0" } }, - "node_modules/react-error-boundary": { - "version": "3.1.4", - "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-3.1.4.tgz", - "integrity": "sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==", - "dev": true, - "dependencies": { - "@babel/runtime": "^7.12.5" - }, - "engines": { - "node": ">=10", - "npm": ">=6" - }, - "peerDependencies": { - "react": ">=16.13.1" - } - }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -6812,16 +6765,6 @@ "@types/react-dom": "^18.0.0" } }, - "@testing-library/react-hooks": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/@testing-library/react-hooks/-/react-hooks-8.0.1.tgz", - "integrity": "sha512-Aqhl2IVmLt8IovEVarNDFuJDVWVvhnr9/GCU6UUnrYXwgDFF9h2L2o2P9KBni1AST5sT6riAyoukFLyjQUgD/g==", - "dev": true, - "requires": { - "@babel/runtime": "^7.12.5", - "react-error-boundary": "^3.1.0" - } - }, "@testing-library/user-event": { "version": "14.4.1", "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.4.1.tgz", @@ -9720,15 +9663,6 @@ "scheduler": "^0.23.0" } }, - "react-error-boundary": { - "version": "3.1.4", - "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-3.1.4.tgz", - "integrity": "sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==", - "dev": true, - "requires": { - "@babel/runtime": "^7.12.5" - } - }, "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/src/App.tsx b/src/App.tsx index 88ff744..da989ac 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -240,15 +240,28 @@ class App extends React.Component { * Fetch the configuration from the API * @returns {Configation} The model of the configuration for the application */ -async function fetchConfiguration(): Promise { +export async function fetchConfiguration(): Promise { const url = `${import.meta.env.VITE_API_URL}`; - return await fetch(url, { - method: 'POST' - }) - .then((response) => - response.json() - ) as Configuration; + if (window.fetch) { + return await fetch(url, { + method: 'POST' + }) + .then((response) => + response.json() + ) as Configuration; + } + + return new Promise((resolve, reject) => { + const xhr = new XMLHttpRequest(); + xhr.open('POST', url, true); + xhr.onreadystatechange = function() { // Call a function when the state changes. + if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { + resolve(JSON.parse(this.responseText)); + } + }; + xhr.send(); + }); } export default App; diff --git a/src/test/api.test.tsx b/src/test/api.test.tsx new file mode 100644 index 0000000..19db6cc --- /dev/null +++ b/src/test/api.test.tsx @@ -0,0 +1,18 @@ +import { describe, test, expect } from 'vitest'; +import { fetchConfiguration } from '../App'; + +describe('API test', () => { + test('Load environment', () => { + const url = import.meta.env.VITE_API_URL; + expect(url).toBe('http://localhost:5000'); + }); + + test('Fetch configuration', async() => { + const configuration = await fetchConfiguration(); + expect(configuration.MainContainer).toBeDefined(); + expect(configuration.MainContainer.Height).toBeGreaterThan(0); + expect(configuration.MainContainer.Width).toBeGreaterThan(0); + expect(configuration.AvailableContainers.length).toBeGreaterThan(-1); + expect(configuration.AvailableSymbols.length).toBeGreaterThan(-1); + }); +}); diff --git a/src/test/setup.ts b/src/test/setup.ts index 7b0828b..1cff9af 100644 --- a/src/test/setup.ts +++ b/src/test/setup.ts @@ -1 +1,5 @@ import '@testing-library/jest-dom'; +import { loadEnv } from 'vite'; + +const mode = 'test'; +Object.assign(process.env, loadEnv(mode, '../../', '')); diff --git a/vite.config.ts b/vite.config.ts index 54ca0e5..6549182 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,18 +1,7 @@ -/// -/// - import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; // https://vitejs.dev/config/ export default defineConfig({ - plugins: [react()], - test: { - globals: true, - environment: 'jsdom', - setupFiles: './src/test/setup.ts', - // you might want to disable it, if you don't have tests that rely on CSS - // since parsing CSS is slow - css: false - } + plugins: [react()] }); diff --git a/vitest.config.ts b/vitest.config.ts new file mode 100644 index 0000000..4f85a7e --- /dev/null +++ b/vitest.config.ts @@ -0,0 +1,16 @@ +/// +import { defineConfig } from 'vite'; + +export default defineConfig({ + test: { + globals: true, + environment: 'jsdom', + setupFiles: './src/test/setup.ts', + // you might want to disable it, if you don't have tests that rely on CSS + // since parsing CSS is slow + css: false, + deps: { + registerNodeLoader: false + } + } +});