Skip to content

Commit

Permalink
fix: fixes for all dashboard tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@tthvo
tthvo committed Sep 11, 2024
1 parent 24f57ba commit ab393d9
Show file tree
Hide file tree
Showing 6 changed files with 867 additions and 182 deletions.
50 changes: 36 additions & 14 deletions src/test/Dashboard/AutomatedAnalysis/AutomatedAnalysisCard.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ import { defaultAutomatedAnalysisRecordingConfig } from '@app/Shared/Services/se
import { automatedAnalysisConfigToRecordingAttributes } from '@app/Shared/Services/service.utils';
import { defaultServices } from '@app/Shared/Services/Services';
import '@testing-library/jest-dom';
import { cleanup, screen, waitFor } from '@testing-library/react';
import { act, cleanup, screen, waitFor, within } from '@testing-library/react';
import { of } from 'rxjs';
import { basePreloadedState, render, testT } from '../../utils';

Expand Down Expand Up @@ -480,7 +480,7 @@ describe('<AutomatedAnalysisCard />', () => {
jest.spyOn(defaultServices.api, 'graphql').mockReturnValueOnce(of(mockActiveRecordingsResponse));

jest.spyOn(defaultServices.reports, 'reportJson').mockReturnValueOnce(of(mockFilteredEvaluations));
const { user } = render({
const { user, container } = render({
routerConfigs: {
routes: [
{
Expand Down Expand Up @@ -523,16 +523,39 @@ describe('<AutomatedAnalysisCard />', () => {
expect(screen.getByText(evaluation.topic)).toBeInTheDocument();
});

const nameFilter = screen.getByRole('button', { name: 'Name' });
await user.click(nameFilter);
const filterToggle = screen.getByText(testT('NAME', { ns: 'common' }));

await act(async () => {
await user.click(filterToggle);
});

const topic = screen.getByRole('menuitem', { name: /topic/i });
await user.click(topic);
const selectMenu = await screen.findByRole('menu');
expect(selectMenu).toBeInTheDocument();
expect(selectMenu).toBeVisible();

const filterByTopic = screen.getByRole('textbox', { name: /filter by topic\.\.\./i });
const topic = within(selectMenu).getByText('Topic');

await user.type(filterByTopic, 'fakeTopic');
await user.click(screen.getByRole('option', { name: /faketopic/i }));
await act(async () => {
await user.click(topic);
});

await waitFor(() => expect(selectMenu).not.toBeInTheDocument());

const filterByTopic = container.querySelector("input[placeholder='Filter by topic...']") as HTMLInputElement;

await act(async () => {
await user.type(filterByTopic, 'fakeTopic');
});

const optionMenu = await screen.findByRole('listbox');
expect(optionMenu).toBeInTheDocument();
expect(optionMenu).toBeVisible();

await act(async () => {
await user.click(within(optionMenu).getByText(/faketopic/i));
});

await waitFor(() => expect(optionMenu).not.toBeInTheDocument());

mockFilteredEvaluations
.filter((evaluation) => evaluation.topic == 'fakeTopic')
Expand Down Expand Up @@ -560,14 +583,13 @@ describe('<AutomatedAnalysisCard />', () => {
preloadedState: preloadedState,
});

const listViewSwitch = screen.getByRole('checkbox', {
name: testT('AutomatedAnalysisCard.TOOLBAR.SWITCH.LIST_VIEW.LABEL'),
});
expect(listViewSwitch).toBeInTheDocument();
const listViewToggle = screen.getByText('List view');
expect(listViewToggle).toBeInTheDocument();
expect(listViewToggle).toBeVisible();

expect(screen.queryByText('AutomatedAnalysisCardList')).not.toBeInTheDocument(); // Mocked list view

await user.click(listViewSwitch);
await user.click(listViewToggle);

expect(screen.getByText('AutomatedAnalysisCardList')).toBeInTheDocument();
});
Expand Down
3 changes: 2 additions & 1 deletion src/test/Dashboard/AutomatedAnalysis/AutomatedAnalysisCardList.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
*/
import { AutomatedAnalysisCardList } from '@app/Dashboard/AutomatedAnalysis/AutomatedAnalysisCardList';
import { AnalysisResult, CategorizedRuleEvaluations } from '@app/Shared/Services/api.types';
import { renderSnapshot } from '@test/utils';
import { createMockForPFTableRef, renderSnapshot } from '@test/utils';

const mockRuleEvaluation1: AnalysisResult = {
name: 'rule1',
Expand Down Expand Up @@ -91,6 +91,7 @@ describe('<AutomatedAnalysisCardList />', () => {
},
],
},
createNodeMock: createMockForPFTableRef
});
expect(tree?.toJSON()).toMatchSnapshot();
});
Expand Down
78 changes: 50 additions & 28 deletions src/test/Dashboard/AutomatedAnalysis/Filters/AutomatedAnalysisNameFilter.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@

import { AutomatedAnalysisNameFilter } from '@app/Dashboard/AutomatedAnalysis/Filters/AutomatedAnalysisNameFilter';
import { AnalysisResult, CategorizedRuleEvaluations } from '@app/Shared/Services/api.types';
import { cleanup, screen, within } from '@testing-library/react';
import { act, cleanup, screen, waitFor, within } from '@testing-library/react';
import { render } from '../../../utils';

const mockRuleEvaluation1: AnalysisResult = {
Expand Down Expand Up @@ -118,7 +118,7 @@ describe('<AutomatedAnalysisNameFilter />', () => {
afterEach(cleanup);

it('display name selections when text input is clicked', async () => {
const { user } = render({
const { user, container } = render({
routerConfigs: {
routes: [
{
Expand All @@ -134,13 +134,16 @@ describe('<AutomatedAnalysisNameFilter />', () => {
],
},
});
const nameInput = screen.getByLabelText('Filter by name...');

const nameInput = container.querySelector("input[placeholder='Filter by name...']") as HTMLInputElement;
expect(nameInput).toBeInTheDocument();
expect(nameInput).toBeVisible();

await user.click(nameInput);
await act(async () => {
await user.click(nameInput);
});

const selectMenu = await screen.findByRole('listbox', { name: 'Filter by name' });
const selectMenu = await screen.findByRole('listbox');
expect(selectMenu).toBeInTheDocument();
expect(selectMenu).toBeVisible();

Expand Down Expand Up @@ -168,13 +171,16 @@ describe('<AutomatedAnalysisNameFilter />', () => {
],
},
});
const dropDownArrow = screen.getByRole('button', { name: 'Options menu' });

const dropDownArrow = screen.getByRole('button', { name: 'Menu toggle' });
expect(dropDownArrow).toBeInTheDocument();
expect(dropDownArrow).toBeVisible();

await user.click(dropDownArrow);
await act(async () => {
await user.click(dropDownArrow);
});

const selectMenu = await screen.findByRole('listbox', { name: 'Filter by name' });
const selectMenu = await screen.findByRole('listbox');
expect(selectMenu).toBeInTheDocument();
expect(selectMenu).toBeVisible();

Expand Down Expand Up @@ -203,13 +209,15 @@ describe('<AutomatedAnalysisNameFilter />', () => {
},
});

const dropDownArrow = screen.getByRole('button', { name: 'Options menu' });
const dropDownArrow = screen.getByRole('button', { name: 'Menu toggle' });
expect(dropDownArrow).toBeInTheDocument();
expect(dropDownArrow).toBeVisible();

await user.click(dropDownArrow);
await act(async () => {
await user.click(dropDownArrow);
});

const selectMenu = await screen.findByRole('listbox', { name: 'Filter by name' });
const selectMenu = await screen.findByRole('listbox');
expect(selectMenu).toBeInTheDocument();
expect(selectMenu).toBeVisible();

Expand All @@ -219,13 +227,16 @@ describe('<AutomatedAnalysisNameFilter />', () => {
expect(option).toBeVisible();
});

await user.click(dropDownArrow);
expect(selectMenu).not.toBeInTheDocument();
await act(async () => {
await user.click(dropDownArrow);
});

await waitFor(() => expect(selectMenu).not.toBeInTheDocument());
expect(selectMenu).not.toBeVisible();
});

it('should close selection menu when toggled with text input', async () => {
const { user } = render({
const { user, container } = render({
routerConfigs: {
routes: [
{
Expand All @@ -242,13 +253,15 @@ describe('<AutomatedAnalysisNameFilter />', () => {
},
});

const nameInput = screen.getByLabelText('Filter by name...');
const nameInput = container.querySelector("input[placeholder='Filter by name...']") as HTMLInputElement;
expect(nameInput).toBeInTheDocument();
expect(nameInput).toBeVisible();

await user.click(nameInput);
await act(async () => {
await user.click(nameInput);
});

const selectMenu = await screen.findByRole('listbox', { name: 'Filter by name' });
const selectMenu = await screen.findByRole('listbox');
expect(selectMenu).toBeInTheDocument();
expect(selectMenu).toBeVisible();

Expand All @@ -258,13 +271,16 @@ describe('<AutomatedAnalysisNameFilter />', () => {
expect(option).toBeVisible();
});

await user.click(nameInput);
expect(selectMenu).not.toBeInTheDocument();
await act(async () => {
await user.click(nameInput);
});

await waitFor(() => expect(selectMenu).not.toBeInTheDocument());
expect(selectMenu).not.toBeVisible();
});

it('should not display selected names', async () => {
const { user } = render({
const { user, container } = render({
routerConfigs: {
routes: [
{
Expand All @@ -281,13 +297,15 @@ describe('<AutomatedAnalysisNameFilter />', () => {
},
});

const nameInput = screen.getByLabelText('Filter by name...');
const nameInput = container.querySelector("input[placeholder='Filter by name...']") as HTMLInputElement;
expect(nameInput).toBeInTheDocument();
expect(nameInput).toBeVisible();

await user.click(nameInput);
await act(async () => {
await user.click(nameInput);
});

const selectMenu = await screen.findByRole('listbox', { name: 'Filter by name' });
const selectMenu = await screen.findByRole('listbox');
expect(selectMenu).toBeInTheDocument();
expect(selectMenu).toBeVisible();

Expand All @@ -298,7 +316,7 @@ describe('<AutomatedAnalysisNameFilter />', () => {
it('should select a name when a name option is clicked', async () => {
const submitNameInput = jest.fn((nameInput) => emptyFilteredNames.push(nameInput));

const { user } = render({
const { user, container } = render({
routerConfigs: {
routes: [
{
Expand All @@ -315,13 +333,15 @@ describe('<AutomatedAnalysisNameFilter />', () => {
},
});

const nameInput = screen.getByLabelText('Filter by name...');
const nameInput = container.querySelector("input[placeholder='Filter by name...']") as HTMLInputElement;
expect(nameInput).toBeInTheDocument();
expect(nameInput).toBeVisible();

await user.click(nameInput);
await act(async () => {
await user.click(nameInput);
});

const selectMenu = await screen.findByRole('listbox', { name: 'Filter by name' });
const selectMenu = await screen.findByRole('listbox');
expect(selectMenu).toBeInTheDocument();
expect(selectMenu).toBeVisible();

Expand All @@ -331,7 +351,9 @@ describe('<AutomatedAnalysisNameFilter />', () => {
expect(option).toBeVisible();
});

await user.selectOptions(selectMenu, mockRuleEvaluation1.name);
await act(async () => {
await user.click(screen.getByText(mockRuleEvaluation1.name));
});

expect(submitNameInput).toBeCalledTimes(1);
expect(submitNameInput).toBeCalledWith(mockRuleEvaluation1.name);
Expand Down
Loading

0 comments on commit ab393d9

Please sign in to comment.