Added API tests + added vitest.config.ts + added fallback of window.fetch with xmlhttprequest

.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

.env.test

@@ -0,0 +1 @@
+VITE_API_URL=http://localhost:5000

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",

src/App.tsx

@@ -240,15 +240,28 @@ class App extends React.Component<IAppProps> {
  * Fetch the configuration from the API
  * @returns {Configation} The model of the configuration for the application
  */
-async function fetchConfiguration(): Promise<Configuration> {
+export async function fetchConfiguration(): Promise<Configuration> {
   const url = `${import.meta.env.VITE_API_URL}`;
 
-  return await fetch(url, {
+  if (window.fetch) {
-    method: 'POST'
+    return await fetch(url, {
-  })
+      method: 'POST'
-    .then((response) =>
+    })
-      response.json()
+      .then((response) =>
-    ) as Configuration;
+        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;

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);
+  });
+});

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, '../../', ''));

vite.config.ts

@@ -1,18 +1,7 @@
-/// <reference types="vitest" />
-/// <reference types="vite/client" />
-
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  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
-  }
 });

vitest.config.ts

@@ -0,0 +1,16 @@
+/// <reference types="vitest" />
+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
+    }
+  }
+});