add selection panel tests

client/src/components/LandingPage/__tests__/LandingPage.test.tsx

@@ -57,7 +57,7 @@ test('should enable Start Testing when test suite is selected', () => {
     </BrowserRouter>
   );
 
-  const testSuiteElement = screen.getAllByTestId('testing-suite-option')[0];
+  const testSuiteElement = screen.getAllByTestId('list-option')[0];
   const buttonElement = screen.getByTestId('go-button');
 
   userEvent.click(testSuiteElement);

client/src/components/RequestDetailModal/__mocked_data__/mockData.ts

@@ -55,3 +55,12 @@ export const codeResponseWithJSON: Request = {
   response_body:
     '{"resourceType": "OperationOutcome", "issue": [ {"severity": "error", "code": "processing", "diagnostics": "Bearer token is invalid or not supplied Supplied Bearer Token: null" } ]}',
 };
+
+export const mockedUpdateRequest = (requestId: string, resultId: string, request: Request) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const data = [requestId, resultId, request];
+};
+
+export const mockedRequestFunctions = {
+  updateRequest: mockedUpdateRequest,
+};

client/src/components/TestSuite/TestRunButton/__mocked_data__/mockData.ts

@@ -6,7 +6,8 @@ import {
 import { RunnableType } from '~/models/testSuiteModels';
 
 export const mockedRunTests = (runnableType: RunnableType, runnableId: string) => {
-  console.log(runnableType, runnableId);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const data = [runnableType, runnableId];
 };
 
 export const mockedTestRunButtonData = {

client/src/components/TestSuite/TestSuiteDetails/__tests__/TestSuiteDetailsPanel.test.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { render, screen } from '@testing-library/react';
+import { SnackbarProvider } from 'notistack';
+import ThemeProvider from 'components/ThemeProvider';
+import TestSuiteDetailsPanel from '~/components/TestSuite//TestSuiteDetails/TestSuiteDetailsPanel';
+import { mockedTestSuite } from '~/components/_common/__mocked_data__/mockData';
+import { mockedRunTests } from '~/components/TestSuite/TestRunButton/__mocked_data__/mockData';
+import { mockedRequestFunctions } from '~/components/RequestDetailModal/__mocked_data__/mockData';
+
+test('renders TestSuiteDetailsPanel for test suite', () => {
+  render(
+    <MemoryRouter>
+      <ThemeProvider>
+        <SnackbarProvider>
+          <TestSuiteDetailsPanel
+            runnable={mockedTestSuite}
+            runTests={mockedRunTests}
+            updateRequest={mockedRequestFunctions.updateRequest}
+          />
+        </SnackbarProvider>
+      </ThemeProvider>
+    </MemoryRouter>
+  );
+
+  const suiteTitleElement = screen.getByText(mockedTestSuite.title);
+  expect(suiteTitleElement).toBeInTheDocument();
+
+  const groupTitles = mockedTestSuite.test_groups?.map((group) => group.title) || [];
+  groupTitles.forEach((groupTitle) => {
+    const groupTitleElement = screen.getByText(groupTitle);
+    expect(groupTitleElement).toBeInTheDocument();
+  });
+});

client/src/components/TestSuite/TestSuiteDetails/__tests__/TestSuiteReport.test.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { render, screen } from '@testing-library/react';
+import { SnackbarProvider } from 'notistack';
+import ThemeProvider from 'components/ThemeProvider';
+import TestSuiteReport from '../TestSuiteReport';
+import { mockedTestSuite } from '~/components/_common/__mocked_data__/mockData';
+
+test('renders TestSuiteReport', () => {
+  render(
+    <MemoryRouter>
+      <ThemeProvider>
+        <SnackbarProvider>
+          <TestSuiteReport testSuite={mockedTestSuite} />
+        </SnackbarProvider>
+      </ThemeProvider>
+    </MemoryRouter>
+  );
+
+  const reportTitleElement = screen.getByText(`${mockedTestSuite.title} Report`);
+  expect(reportTitleElement).toBeInTheDocument();
+});

client/src/components/_common/SelectionPanel/ListSelection.tsx

@@ -21,7 +21,7 @@ const ListSelection: FC<ListSelectionProps> = ({ options, setSelection: setParen
     <Box px={2} py={1}>
       {options.map((option) => (
         <ListItemButton
-          data-testid="testing-suite-option"
+          data-testid="list-option"
           selected={selectedListOption === option.id}
           onClick={() => selectOption(option.id)}
           classes={{ selected: classes.selectedItem }}

client/src/components/_common/SelectionPanel/RadioSelection.tsx

@@ -62,11 +62,12 @@ const RadioSelection: FC<RadioSelectionProps> = ({
               option.list_options && option.list_options.length && option.list_options[0].value
             }
             name={`radio-group-${option.id}`}
+            data-testid="radio-option-group"
           >
             {option?.list_options?.map((choice, k) => (
               <FormControlLabel
                 value={choice.value}
-                control={<Radio size="small" />}
+                control={<Radio size="small" data-testid="radio-option-button" />}
                 label={choice.label}
                 key={`radio-button-${k}`}
                 onClick={() => {

client/src/components/_common/SelectionPanel/SelectionPanel.tsx

@@ -86,7 +86,11 @@ const SelectionPanel: FC<SelectionPanelProps> = ({
         </Box>
 
         <Box overflow="auto">
-          {options ? renderSelection() : <Typography mt={2}> No options available.</Typography>}
+          {options && options.length > 0 ? (
+            renderSelection()
+          ) : (
+            <Typography mt={2}> No options available.</Typography>
+          )}
         </Box>
 
         <Box px={2}>

client/src/components/_common/SelectionPanel/__mocked_data__/mockData.ts

@@ -0,0 +1,45 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import {
+  ListOption,
+  ListOptionSelection,
+  RadioOption,
+  RadioOptionSelection,
+} from '~/models/selectionModels';
+
+export const mockedListOptions: ListOption[] = [
+  { id: 'one', title: 'One' },
+  { id: 'two', title: 'Two' },
+];
+
+export const mockedRadioOptions: RadioOption[] = [
+  {
+    id: 'one',
+    title: 'One',
+    description: 'Option One Description',
+    list_options: [
+      { label: 'Choice A', id: 'choice-a', value: 'a' },
+      { label: 'Choice B', id: 'choice-b', value: 'b' },
+    ],
+  },
+  {
+    id: 'two',
+    title: 'Two',
+    description: 'Option Two Description',
+    list_options: [
+      { label: 'Choice C', id: 'choice-c', value: 'c' },
+      { label: 'Choice D', id: 'choice-d', value: 'd' },
+    ],
+  },
+];
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const mockedSetSelected = (selected: ListOptionSelection | RadioOptionSelection[]) => {};
+
+export const mockedSubmit = () => {};
+
+export const mockedSelectionPanelData = {
+  listOptions: mockedListOptions,
+  radioOptions: mockedRadioOptions,
+  setSelected: mockedSetSelected,
+  submitAction: mockedSubmit,
+};

client/src/components/_common/SelectionPanel/__tests__/SelectionPanel.test.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
+import { render, screen, waitFor } from '@testing-library/react';
+import ThemeProvider from 'components/ThemeProvider';
+import { mockedSelectionPanelData } from '../__mocked_data__/mockData';
+import SelectionPanel from '../SelectionPanel';
+import userEvent from '@testing-library/user-event';
+import { vi } from 'vitest';
+
+describe('SelectionPanel component', () => {
+  test('renders SelectionPanel for list options', () => {
+    render(
+      <BrowserRouter>
+        <ThemeProvider>
+          <SelectionPanel
+            title="Selection Title"
+            options={mockedSelectionPanelData.listOptions}
+            setSelection={mockedSelectionPanelData.setSelected}
+            submitAction={mockedSelectionPanelData.submitAction}
+            submitText="Submit"
+          />
+        </ThemeProvider>
+      </BrowserRouter>
+    );
+
+    const options = screen.getAllByTestId('list-option');
+    expect(options.length).toEqual(mockedSelectionPanelData.listOptions.length);
+  });
+
+  test('renders SelectionPanel for radio options', () => {
+    render(
+      <BrowserRouter>
+        <ThemeProvider>
+          <SelectionPanel
+            title="Selection Title"
+            options={mockedSelectionPanelData.radioOptions}
+            setSelection={mockedSelectionPanelData.setSelected}
+            submitAction={mockedSelectionPanelData.submitAction}
+            submitText="Submit"
+          />
+        </ThemeProvider>
+      </BrowserRouter>
+    );
+
+    const options = screen.getAllByTestId('radio-option-group');
+    expect(options.length).toEqual(mockedSelectionPanelData.radioOptions.length);
+
+    const radioButtonCount = mockedSelectionPanelData.radioOptions
+      .map((option) => option.list_options)
+      .flat().length;
+    const buttons = screen.getAllByTestId('radio-option-button');
+    expect(buttons.length).toEqual(radioButtonCount);
+  });
+
+  test('clicking submit calls submitAction', async () => {
+    const submitAction = vi.spyOn(mockedSelectionPanelData, 'submitAction');
+
+    render(
+      <BrowserRouter>
+        <ThemeProvider>
+          <SelectionPanel
+            title="Selection Title"
+            options={mockedSelectionPanelData.listOptions}
+            setSelection={mockedSelectionPanelData.setSelected}
+            submitAction={mockedSelectionPanelData.submitAction}
+            submitText="Submit"
+          />
+        </ThemeProvider>
+      </BrowserRouter>
+    );
+
+    const submitButton = screen.getByText('Submit');
+    userEvent.click(submitButton);
+    expect(submitAction).toBeCalledTimes(0); // should be disabled with no selection
+
+    const options = screen.getAllByTestId('list-option');
+    userEvent.click(options[0]); // select first option
+    userEvent.click(submitButton);
+    await waitFor(() => expect(submitAction).toBeCalled());
+  });
+});

client/src/models/selectionModels.ts

@@ -2,7 +2,7 @@ import { SuiteOptionChoice } from './testSuiteModels';
 
 export type Option = {
   id: string;
-  title?: string;
+  title: string;
 };
 
 export type ListOption = Option;

client/src/models/testSuiteModels.ts

@@ -73,7 +73,7 @@ export interface Result {
 
 export interface SuiteOption extends Option {
   id: string;
-  title?: string;
+  title: string;
   description?: string;
   list_options?: SuiteOptionChoice[];
   value?: string;