Latest Experiments Section

portal/mock-server/src/all-experiments.json

@@ -37,7 +37,7 @@
       {
         "id": 359,
         "algorithm": "p256_kyber512",
-        "iterations": 1000,
+        "iterations": 10000,
         "message_size": 1024
       },
       {

portal/package.json

@@ -117,7 +117,8 @@
       "<rootDir>/src/index.tsx",
       "<rootDir>/src/reportWebVitals.ts",
       "<rootDir>/src/setupProxy.js",
-      "<rootDir>/src/environments/*.*"
+      "<rootDir>/src/environments/*.*",
+      "<rootDir>/src/gh-pages"
     ]
   }
 }

portal/src/app/components/all-experiments/Experiments.test.tsx

@@ -1,44 +1,102 @@
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import { Experiments } from './Experiments';
 import { useExperimentsData } from './hooks';
 import { FetchDataStatus, useFetch } from '../../shared/hooks/useFetch';
+import React from 'react';
+import { ExperimentData } from './models/experiments.interface';
+import { DeleteExperimentModal, DeleteExperimentModalProps } from '../home/components/experiment/components/delete-experiment-modal';
+import { Button } from '../../shared/components/att-button';
+import { MOCK_DATA_FOR_ALL_EXPERIMENTS, MOCK_EXPERIMENTS_DATA_FOR_ALL_EXPERIMENTS } from './__mocks__/mocks';
+import { ALL_EXPERIMENTS_TABLE_EN } from './translate/en';
 
 jest.mock('./hooks');
+jest.mock('../../shared/components/att-button');
+jest.mock('../../shared/components/qujata-table');
+jest.mock('../home/components/experiment/components/delete-experiment-modal');
 jest.mock('../../shared/hooks/useFetch');
 jest.mock('react-router-dom', () => ({
   useNavigate: jest.fn(),
 }));
 
 describe('Experiments', () => {
-  it('renders correctly', () => {
+  let mockCheckedRows = { 15: true, 16: false, 17: true };
+  let mockExperimentsData: ExperimentData[] = MOCK_EXPERIMENTS_DATA_FOR_ALL_EXPERIMENTS;
+
+  beforeEach(() => {
+    const setExperimentsData = jest.fn((newData) => {
+      (typeof newData === 'function')
+        ? mockExperimentsData = newData(mockExperimentsData)
+        : mockExperimentsData = newData;
+    });
+    const setCheckedRows = jest.fn((newData) => {
+      (typeof newData === 'function')
+        ? mockCheckedRows = newData(mockCheckedRows)
+        : mockCheckedRows = newData;
+    });
+    jest.spyOn(React, 'useState')
+      .mockImplementationOnce(() => [true, jest.fn()])
+      .mockImplementationOnce(() => [{ 15: true, 16: false, 17: true }, setCheckedRows])
+      .mockImplementationOnce(() => [mockExperimentsData, setExperimentsData])
+      .mockImplementationOnce(() => [[], jest.fn()]);
+
+    (useFetch as jest.Mock).mockReturnValue({
+      post: jest.fn(),
+      status: FetchDataStatus.Success,
+      error: null,
+      cancelRequest: jest.fn(),
+    });
     (useExperimentsData as jest.Mock).mockReturnValue({
-      test_suites: [{
-        id: 15,
-        name: "Experiment 1",
-        end_time: 1705240065192,
-        test_runs: [
-          {
-            id: 354,
-            algorithm: "prime256v1",
-            iterations: 100
-          },
-          {
-            id: 355,
-            algorithm: "prime256v1",
-            iterations: 500
-          }
-        ]
-      }],
-      status: FetchDataStatus.Fetching,
+      testSuites: MOCK_DATA_FOR_ALL_EXPERIMENTS,
+      status: FetchDataStatus.Success,
     });
+    (Button as jest.Mock).mockImplementation(({ onButtonClick }) => {
+      const handleDeleteClick: React.MouseEventHandler<HTMLDivElement> = (event) => {
+        onButtonClick(event);
+      }
+      return <div onClick={handleDeleteClick} data-testid='button_id'>DeleteExperimentModal</div>;
+    });
+    (DeleteExperimentModal as jest.Mock).mockImplementation((props: DeleteExperimentModalProps) => {
+      function handleCloseDeleteExperimentModal() {
+        props.onClose(true);
+      }
+      function handleCloseDeleteExperimentNoDataModal() {
+        props.onClose(false);
+      }
+      return (
+        <>
+          <div onClick={handleCloseDeleteExperimentModal} data-testid='delete_experiment_modal'>DeleteExperimentModal</div>
+          <div onClick={handleCloseDeleteExperimentNoDataModal} data-testid='delete_experiment_no_data_modal'>DeleteExperimentModal</div>
+        </>
+      );
+    });
+  });
+
+  test('renders Experiments correctly', () => {
+    const { container, getByTestId } = render(<Experiments />);
+
+    const buttonElement: HTMLElement = getByTestId('button_id');
+    const deleteExperimentModal: HTMLElement = getByTestId('delete_experiment_modal');
+    const deleteExperimentNoDataModal: HTMLElement = getByTestId('delete_experiment_no_data_modal');
+    fireEvent.click(buttonElement);
+    fireEvent.click(deleteExperimentModal);
+    fireEvent.click(deleteExperimentNoDataModal);
+
+    expect(container).toBeTruthy();
+  });
+
+  test('renders Experiments while still fetching', () => {
     (useFetch as jest.Mock).mockReturnValue({
       post: jest.fn(),
       status: FetchDataStatus.Fetching,
       error: null,
       cancelRequest: jest.fn(),
     });
+    (useExperimentsData as jest.Mock).mockReturnValue({
+      testSuites: undefined,
+      status: FetchDataStatus.Fetching,
+    });
 
-    const { container } = render(<Experiments />);
-    expect(container).toMatchSnapshot();
+    const { container } = render(<Experiments />);;
+    expect(container).toBeTruthy();
   });
 });

portal/src/app/components/all-experiments/Experiments.tsx

@@ -5,7 +5,7 @@ import { IUseExperimentsData, useExperimentsData } from './hooks';
 import { FetchDataStatus, IHttp, useFetch } from '../../shared/hooks/useFetch';
 import { ALL_EXPERIMENTS_TABLE_EN } from './translate/en';
 import { CellContext } from '@tanstack/react-table';
-import { Table } from '../../shared/components/table';
+import { QujataTable, TableColumn } from '../../shared/components/qujata-table';
 import { Button, ButtonActionType, ButtonSize, ButtonStyleType } from '../../shared/components/att-button';
 import { APIS } from '../../apis';
 import { useNavigate } from 'react-router-dom';
@@ -82,7 +82,7 @@ export const Experiments: React.FC = () => {
     navigate('/qujata', { state: { row } });
   }, [navigate]);
 
-  const headers = useMemo(() => {
+  const headers: TableColumn<ExperimentData>[] = useMemo(() => {
     const columnDefs = [
       { 
         id: ALL_EXPERIMENTS_TABLE_EN.TABLE_COLUMNS.CHECKBOX,
@@ -186,7 +186,7 @@ export const Experiments: React.FC = () => {
             )}
           </div>
         }
-        {experimentsData.length > 0 && <Table className={styles.experiments_table} headers={headers} data={experimentsData} />}
+        {experimentsData.length > 0 && <QujataTable className={styles.experiments_table} headers={headers} data={experimentsData} />}
         {openDeleteModal && <DeleteExperimentModal name={checkedExperimentNames} onClose={handleCloseDeleteExperimentModal} />}
        </>
     </div>

portal/src/app/components/all-experiments/__mocks__/mocks.ts

@@ -0,0 +1,63 @@
+import { Experiment, ExperimentData } from "../models/experiments.interface";
+
+export const MOCK_DATA_FOR_ALL_EXPERIMENTS: Experiment[] = [
+  {
+    id: 17,
+    name: "Experiment 3",
+    end_time: 1705389926549,
+    test_runs: [
+      {
+        id: 366,
+        algorithm: "prime256v1",
+        iterations: 500,
+        message_size: 256
+      },
+      {
+        id: 367,
+        algorithm: "bikel3",
+        iterations: 1000,
+        message_size: 2048
+      },
+      {
+        id: 368,
+        algorithm: "p256_kyber512",
+        iterations: 10000,
+        message_size: 1024
+      },
+      {
+        id: 369,
+        algorithm: "prime256v1",
+        iterations: 5000,
+        message_size: 512
+      }
+    ]
+  },
+  {
+    id: 18,
+    name: "Experiment 4",
+    end_time: 1705389926549,
+    test_runs: [
+      {
+        id: 370,
+        algorithm: "kyber512",
+        iterations: 500,
+        message_size: 1024
+      },
+      {
+        id: 371,
+        algorithm: "kyber512",
+        iterations: 1000,
+        message_size: 2048
+      }
+    ]
+  }
+];
+
+export const MOCK_EXPERIMENTS_DATA_FOR_ALL_EXPERIMENTS: ExperimentData[] = [{
+  id: 15,
+  name: 'test',
+  algorithms: ['algo1', 'algo2'],
+  iterations: [100, 500],
+  message_sizes: [1024, 2048],
+  end_time: 1234
+}];