maybe almost working ??

Signed-off-by: Antoine MAZEAS <[email protected]>

Author: antoinemzs

openbas-front/src/__tests__/components/common/ExportButton.test.tsx

@@ -1,8 +1,16 @@
 import ExportButton from '../../../components/common/ExportButton';
 import { act, render } from '@testing-library/react'; // @testing-library/dom is needed as well as it is a peer dependency of @testing-library/react
 import { describe, expect, it, vi } from 'vitest';
-import { getDefaultTags } from "../../fixtures/api-types.fixtures";
+import {createDefaultTags, createTagMap} from "../../fixtures/api-types.fixtures";
 import { faker } from '@faker-js/faker';
+import TestRootComponent from "../../fixtures/TestRootComponent";
+import type { TagHelper as TagHelperType } from '../../../actions/helper';
+import {fetchTags } from '../../../actions/Tag'
+import React from "react";
+import {useAppDispatch} from "../../../utils/hooks";
+import useDataLoader from "../../../utils/hooks/useDataLoader";
+import {fetchPlatformParameters} from "../../../actions/Application";
+import { store } from '../../../store'
 
 /* eslint-disable  @typescript-eslint/no-explicit-any */
 type testobj = { [key: string]: any };
@@ -15,28 +23,49 @@ function createObjWithDefaultKeys(objtype: string): testobj {
 }
 
 describe('Generic export button', () => {
-    const numberOfElements : number = 10;
-    const numberOfTags : number = 5;
     const exportType: string = "testobj"
+    const exportData: testobj[] = [
+        createObjWithDefaultKeys(exportType),
+        createObjWithDefaultKeys(exportType),
+        createObjWithDefaultKeys(exportType)
+    ]
+    const numberOfElements : number = exportData.length;
     const exportKeys = [
         `${exportType}_name`,
+        `${exportType}_tags`,
     ];
+    const tags = createDefaultTags(5);
+    const tagMap = createTagMap(tags);
+    for(let obj of exportData) {
+        obj[`${exportType}_tags`] = tags.map(t => t.tag_id);
+    }
     vi.mock(
-        '../../../../../../src/actions/Tag',
-        () => ({ fetchTags: () => getDefaultTags(numberOfTags)})
+        '../../../actions/Tag',
+        () => ({fetchTags: () => tagMap})
     );
 
-    it("does something", () => {
-        const { getByDisplayValue } = render(
-          <ExportButton totalElements={numberOfElements} exportProps={{
-              exportType: exportType,
-              exportKeys: exportKeys,
-              exportData: [createObjWithDefaultKeys(exportType)],
-              exportFileName: "export"
-              }} />,
+    useAppDispatch()(fetchTags())
+
+    it("does something", async () => {
+        const { getByRole } = render(
+            <TestRootComponent>
+                <ExportButton totalElements={numberOfElements} exportProps={{
+                    exportType: exportType,
+                    exportKeys: exportKeys,
+                    exportData: [createObjWithDefaultKeys(exportType)],
+                    exportFileName: "export.csv"
+                }} />
+            </TestRootComponent>,
         );
-        act(() => {
-            const firstname = getByDisplayValue("Export this list");
+        await act(async () => {
+            const firstname = getByRole("link");
+            if (firstname.onclick) {
+                const toto = await firstname.onclick(new MouseEvent("click"))
+                console.log("here it is");
+                console.log(firstname.href)
+                console.log(firstname);
+            }
+
             expect(firstname).toBeDefined();
         });
     });

openbas-front/src/__tests__/fixtures/TestContext.tsx

@@ -0,0 +1,6 @@
+import {createContext} from "react";
+
+const defaultValue = {}
+const TestContext = createContext(defaultValue)
+
+export default TestContext;

openbas-front/src/__tests__/fixtures/TestRootComponent.tsx

@@ -0,0 +1,28 @@
+import {store} from "../../store";
+import React from 'react';
+import ConnectedIntlProvider from "../../components/AppIntlProvider";
+import ConnectedThemeProvider from "../../components/AppThemeProvider";
+import {CssBaseline} from "@mui/material";
+import { Provider } from 'react-redux';
+import TestContext from './TestContext'
+import {APP_BASE_PATH} from "../../utils/Action";
+import {BrowserRouter} from "react-router";
+
+// @ts-ignore
+const TestRootComponent = ({children}) => {
+    let component;
+    return (<Provider store={store}>
+        <BrowserRouter basename={"to"}>
+        <TestContext.Provider value={{}}>
+            <ConnectedIntlProvider>
+                <ConnectedThemeProvider>
+                    <CssBaseline />
+                    {children}
+                </ConnectedThemeProvider>
+            </ConnectedIntlProvider>
+        </TestContext.Provider>
+        </BrowserRouter>
+    </Provider>);
+};
+
+export default TestRootComponent;

openbas-front/src/__tests__/fixtures/api-types.fixtures.ts

@@ -2,16 +2,16 @@ import { faker } from '@faker-js/faker';
 
 import { Exercise, Organization, Scenario, Tag } from '../../utils/api-types';
 
-export function getDefaultTags(numberTags: number) : Tag[] {
+export function createDefaultTags(numberTags: number) : Tag[] {
   return Array(numberTags).fill(null)
       .map<Tag>((x): Tag => {
         return { tag_id: faker.string.uuid(), tag_name: faker.lorem.sentence(), }
       });
 }
 
-export function createTagMap(numberTags: number): { [key: string]: Tag } {
+export function createTagMap(tags: Tag[]): { [key: string]: Tag } {
   const tagMap: { [key: string]: Tag } = {};
-  for (let tag of getDefaultTags(numberTags)) {
+  for (let tag of tags) {
     const id = tag.tag_id;
     tagMap[id] = tag;
   }

openbas-front/src/__tests__/utils/Environment.test.tsx

@@ -3,6 +3,7 @@ import { describe, expect, it } from 'vitest';
 
 import { exportData } from '../../utils/Environment';
 import {
+  createDefaultTags,
   createExercisesMap,
   createOrganisationsMap,
   createScenarioMap,
@@ -80,7 +81,7 @@ describe('exportData tests', () => {
         objtype,
         keys,
         [obj],
-        createTagMap(3),
+        createTagMap(createDefaultTags(3)),
       );
       const line = result[0];
       it('does not incorporate tags in line', () => {
@@ -90,7 +91,7 @@ describe('exportData tests', () => {
 
     describe('when object has tags', () => {
       const obj = createObjWithDefaultKeys(objtype);
-      const tagMap = createTagMap(3);
+      const tagMap = createTagMap(createDefaultTags(3));
       obj[`${objtype}_tags`] = Object.keys(tagMap);
 
       // the goal is to concatenate tag names in the export
@@ -122,7 +123,7 @@ describe('exportData tests', () => {
 
     describe('when object has unknown tag', () => {
       const obj = createObjWithDefaultKeys(objtype);
-      const tagMap = createTagMap(3);
+      const tagMap = createTagMap(createDefaultTags(3));
       obj[`${objtype}_tags`] = [faker.string.uuid(), faker.string.uuid()]; // not found in tag map
 
       // the goal is to concatenate tag names in the export

openbas-front/vitest.config.ts

@@ -6,9 +6,24 @@ import react from '@vitejs/plugin-react';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import jsdom from 'jsdom';
 import { defineConfig } from 'vitest/config';
+import {transformWithEsbuild} from "vite";
 
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    {
+      name: 'treat-js-files-as-jsx',
+      async transform(code, id) {
+        if (!id.match(/src\/.*\.js$/)) return null;
+        // Use the exposed transform from vite, instead of directly
+        // transforming with esbuild
+        return transformWithEsbuild(code, id, {
+          loader: 'jsx',
+          jsx: 'automatic',
+        });
+      },
+    },
+    react()
+  ],
   test: {
     environment: 'jsdom',
     include: ['src/__tests__/**/**/*.test.{ts,tsx}'],