Skip to content

Commit

Permalink
Test updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@asanchezr
asanchezr committed Sep 23, 2024
1 parent 68e4036 commit a528a0b
Show file tree
Hide file tree
Showing 6 changed files with 1,981 additions and 64 deletions.
48 changes: 28 additions & 20 deletions ...frontend/src/components/maps/leaflet/Control/AdvancedFilter/AdvancedFilterButton.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,10 @@ import AdvancedFilterButton, { IAdvanceFilterButtonProps } from './AdvancedFilte
const toggle = vi.fn();

describe('AdvancedFilterButton', () => {
const setup = async (
renderOptions: RenderOptions & { props?: IAdvanceFilterButtonProps } = {},
) => {
const setup = (renderOptions: RenderOptions & { props?: IAdvanceFilterButtonProps } = {}) => {
const props: IAdvanceFilterButtonProps = renderOptions.props || {
onToggle: toggle,
active: false,
};

// create a promise to wait for the map to be ready (which happens after initial render)
Expand All @@ -43,40 +42,49 @@ describe('AdvancedFilterButton', () => {
};

it('renders as expected', async () => {
const { asFragment } = await setup();
const { mapReady, asFragment } = setup();
await waitFor(() => mapReady);
expect(asFragment()).toMatchSnapshot();
});

it(`renders the advanced filter button in the 'closed' state by default`, async () => {
const { mapReady, getAdvancedFilterButton } = await setup();
const { mapReady, getAdvancedFilterButton } = setup();
await waitFor(() => mapReady);

const button = getAdvancedFilterButton();
expect(button).toBeInTheDocument();
expect(button.className).not.toContain('open');
expect(button).toBeVisible();
expect(button.classList).not.toContain('open');
});

it(`when filter bar is closed, clicking the button calls 'toggle' callback`, async () => {
const { mapReady, getAdvancedFilterButton } = await setup({
it(`calls 'toggle' callback when the button is clicked`, async () => {
const { mapReady, getAdvancedFilterButton } = setup({
props: { onToggle: toggle },
});
await waitFor(() => mapReady);

const button = getAdvancedFilterButton();
expect(button).toBeInTheDocument();
expect(button).toBeVisible();
await act(async () => userEvent.click(button));
expect(toggle).toHaveBeenCalled();
});

it(`when filter bar is open, clicking the button calls 'toggle' callback`, async () => {
const { mapReady, getAdvancedFilterButton } = await setup({
props: { onToggle: toggle },
});
await waitFor(() => mapReady);
it.each([
[true, '#FFFFFF', '#013366'],
[false, '#013366', '#FFFFFF'],
])(
`applies appropriate styling when 'active' prop value is '%s'`,
async (active: boolean, expectedCssColor: string, expectedCssBgColor: string) => {
const { mapReady, getAdvancedFilterButton } = setup({
props: { onToggle: toggle, active },
});
await waitFor(() => mapReady);

const button = getAdvancedFilterButton();
expect(button).toBeInTheDocument();
await act(async () => userEvent.click(button));
expect(toggle).toHaveBeenCalled();
});
const button = getAdvancedFilterButton();
expect(button).toBeVisible();
expect(button).toHaveStyle({
color: expectedCssColor,
'background-color': expectedCssBgColor,
});
},
);
});
4 changes: 2 additions & 2 deletions source/frontend/src/components/maps/leaflet/Control/AdvancedFilter/AdvancedFilterButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,9 @@ const ControlButton = styled(Button)<{ $active?: boolean }>`
width: 5.2rem;
height: 5.2rem;
background-color: ${({ theme, $active }) =>
$active ? theme.bcTokens.surfaceColorPrimaryButtonDefault : '#fff'};
$active ? theme.bcTokens.surfaceColorPrimaryButtonDefault : '#FFFFFF'};
color: ${({ theme, $active }) =>
$active ? '#fff' : theme.bcTokens.surfaceColorPrimaryButtonDefault};
$active ? '#FFFFFF' : theme.bcTokens.surfaceColorPrimaryButtonDefault};
border-color: ${({ theme }) => theme.bcTokens.surfaceColorPrimaryButtonDefault};
box-shadow: -0.2rem 0.1rem 0.4rem rgba(0, 0, 0, 0.2);
transition: 1s;
Expand Down
18 changes: 10 additions & 8 deletions ...ontend/src/components/maps/leaflet/Control/AdvancedFilter/FilterContentContainer.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,10 @@ import { FormikProps } from 'formik';
import { createMemoryHistory } from 'history';
import { forwardRef } from 'react';

import {
IMapStateMachineContext,
useMapStateMachine,
} from '@/components/common/mapFSM/MapStateMachineContext';
import { mockLookups } from '@/mocks/lookups.mock';
import { mapMachineBaseMock } from '@/mocks/mapFSM.mock';
import { lookupCodesSlice } from '@/store/slices/lookupCodes';
import { render, RenderOptions, waitFor } from '@/utils/test-utils';
import { act, render, RenderOptions } from '@/utils/test-utils';

import { FilterContentContainer, IFilterContentContainerProps } from './FilterContentContainer';
import { IFilterContentFormProps } from './FilterContentForm';
Expand Down Expand Up @@ -69,8 +65,14 @@ describe('FilterContentContainer component', () => {
it('fetches filter data from the api', async () => {
mockGetApi.execute.mockResolvedValue([1, 2]);
setup({});
viewProps.onChange(new PropertyFilterFormModel());
expect(mockGetApi.execute).toBeCalledWith(new PropertyFilterFormModel().toApi());
await waitFor(() => expect(mapMachineBaseMock.setVisiblePimsProperties).toBeCalledWith([1, 2]));
await act(async () => viewProps.onChange(new PropertyFilterFormModel()));
expect(mockGetApi.execute).toHaveBeenCalledWith(new PropertyFilterFormModel().toApi());
expect(mapMachineBaseMock.setVisiblePimsProperties).toHaveBeenCalledWith([1, 2]);
});

it(`resets the map filter state when "onReset" is called`, async () => {
setup({});
await act(async () => viewProps.onReset());
expect(mapMachineBaseMock.resetMapFilter).toHaveBeenCalled();
});
});
71 changes: 38 additions & 33 deletions ...ce/frontend/src/components/maps/leaflet/Control/AdvancedFilter/FilterContentForm.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,31 +13,25 @@ const storeState = {
[lookupCodesSlice.name]: { lookupCodes: mockLookups },
};

const mockGetApi = {
error: undefined,
response: undefined as ApiGen_Concepts_PropertyManagement | undefined,
execute: vi.fn(),
loading: false,
};

vi.mock('@/hooks/repositories/usePropertyManagementRepository', () => ({
usePropertyManagementRepository: () => {
return {
getPropertyManagement: mockGetApi,
};
},
}));
const onChange = vi.fn();
const onReset = vi.fn();

describe('FilterContentForm component', () => {
const onChange = vi.fn();

const setup = (renderOptions: RenderOptions & { props: IFilterContentFormProps }) => {
renderOptions = renderOptions ?? ({} as any);
const utils = render(<FilterContentForm {...renderOptions.props} />, {
...renderOptions,
store: storeState,
history,
});
const setup = (
renderOptions: RenderOptions & { props?: Partial<IFilterContentFormProps> } = {},
) => {
const utils = render(
<FilterContentForm
isLoading={renderOptions?.props?.isLoading ?? false}
onChange={renderOptions?.props?.onChange ?? onChange}
onReset={renderOptions?.props?.onReset ?? onReset}
/>,
{
...renderOptions,
store: storeState,
history,
},
);

return {
...utils,
Expand All @@ -48,27 +42,38 @@ describe('FilterContentForm component', () => {
vi.clearAllMocks();
});

it('renders as expected', async () => {
const { asFragment } = setup();
expect(asFragment()).toMatchSnapshot();
});

it('shows loading spinner when loading', () => {
mockGetApi.execute.mockResolvedValue(getMockApiPropertyManagement(1));
const { getByTestId } = setup({ props: { onChange, isLoading: true } });
const { getByTestId } = setup({ props: { isLoading: true } });
expect(getByTestId('filter-backdrop-loading')).toBeVisible();
});

it('displays filters when not loading', async () => {
const apiManagement = getMockApiPropertyManagement(1);
mockGetApi.response = apiManagement;
const { getByDisplayValue } = setup({ props: { onChange, isLoading: false } });
const { getByDisplayValue } = setup({ props: { isLoading: false } });

expect(getByDisplayValue('Select a highway')).toBeVisible();
expect(getByDisplayValue('Select Lease Transaction')).toBeVisible();
});

it('calls onChange when a filter is changed', async () => {
const apiManagement = getMockApiPropertyManagement(1);
mockGetApi.response = apiManagement;
const { getByTestId } = setup({ props: { onChange, isLoading: false } });
it(`calls "onChange" when a filter is changed`, async () => {
const { getByTestId } = setup({ props: { isLoading: false } });

await act(async () => {
userEvent.selectOptions(getByTestId('leasePayRcvblType'), ['all']);
expect(onChange).toBeCalled();
});
expect(onChange).toHaveBeenCalled();
});

it(`calls "onReset" when the reset button is clicked`, async () => {
const { getByTitle } = setup({ props: { isLoading: false } });

const resetButton = getByTitle('reset-button');
expect(resetButton).toBeVisible();
await act(async () => userEvent.click(resetButton));
expect(onReset).toHaveBeenCalled();
});
});
74 changes: 73 additions & 1 deletion ...ents/maps/leaflet/Control/AdvancedFilter/__snapshots__/AdvancedFilterButton.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,15 +50,37 @@ exports[`AdvancedFilterButton > renders as expected 1`] = `
.c0.btn:focus {
outline-width: 0.4rem;
outline-style: solid;
outline-color: var(--surface-color-primary-button-hover);
outline-offset: 1px;
box-shadow: none;
}
.c0.btn.btn-primary {
color: #FFFFFF;
background-color: #013366;
}
.c0.btn.btn-primary:hover,
.c0.btn.btn-primary:active,
.c0.btn.btn-primary:focus {
background-color: #1E5189;
}
.c0.btn.btn-secondary {
color: #013366;
background: none;
border-color: #013366;
}
.c0.btn.btn-secondary:hover,
.c0.btn.btn-secondary:active,
.c0.btn.btn-secondary:focus {
color: #FFFFFF;
background-color: #013366;
}
.c0.btn.btn-info {
color: #9F9D9C;
border: none;
background: none;
padding-left: 0.6rem;
Expand All @@ -68,20 +90,66 @@ exports[`AdvancedFilterButton > renders as expected 1`] = `
.c0.btn.btn-info:hover,
.c0.btn.btn-info:active,
.c0.btn.btn-info:focus {
color: var(--surface-color-primary-button-hover);
background: none;
}
.c0.btn.btn-light {
color: #FFFFFF;
background-color: #606060;
border: none;
}
.c0.btn.btn-light:hover,
.c0.btn.btn-light:active,
.c0.btn.btn-light:focus {
color: #FFFFFF;
background-color: #606060;
}
.c0.btn.btn-dark {
color: #FFFFFF;
background-color: #474543;
border: none;
}
.c0.btn.btn-dark:hover,
.c0.btn.btn-dark:active,
.c0.btn.btn-dark:focus {
color: #FFFFFF;
background-color: #474543;
}
.c0.btn.btn-danger {
color: #FFFFFF;
background-color: #CE3E39;
}
.c0.btn.btn-danger:hover,
.c0.btn.btn-danger:active,
.c0.btn.btn-danger:focus {
color: #FFFFFF;
background-color: #CE3E39;
}
.c0.btn.btn-warning {
color: #FFFFFF;
background-color: #FCBA19;
border-color: #FCBA19;
}
.c0.btn.btn-warning:hover,
.c0.btn.btn-warning:active,
.c0.btn.btn-warning:focus {
color: #FFFFFF;
border-color: #FCBA19;
background-color: #FCBA19;
}
.c0.btn.btn-link {
font-size: 1.6rem;
font-weight: 400;
color: var(--surface-color-primary-button-default);
background: none;
border: none;
-webkit-text-decoration: none;
Expand All @@ -103,6 +171,7 @@ exports[`AdvancedFilterButton > renders as expected 1`] = `
.c0.btn.btn-link:hover,
.c0.btn.btn-link:active,
.c0.btn.btn-link:focus {
color: var(--surface-color-primary-button-hover);
-webkit-text-decoration: underline;
text-decoration: underline;
border: none;
Expand All @@ -113,6 +182,7 @@ exports[`AdvancedFilterButton > renders as expected 1`] = `
.c0.btn.btn-link:disabled,
.c0.btn.btn-link.disabled {
color: #9F9D9C;
background: none;
pointer-events: none;
}
Expand Down Expand Up @@ -144,7 +214,9 @@ exports[`AdvancedFilterButton > renders as expected 1`] = `
.c1.btn {
width: 5.2rem;
height: 5.2rem;
background-color: #fff;
background-color: #FFFFFF;
color: #013366;
border-color: #013366;
box-shadow: -0.2rem 0.1rem 0.4rem rgba(0,0,0,0.2);
-webkit-transition: 1s;
transition: 1s;
Expand Down
Loading

0 comments on commit a528a0b

Please sign in to comment.