Skip to content

Commit

Permalink
Test updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@asanchezr
asanchezr committed Oct 6, 2023
1 parent 11e4aeb commit 1db335c
Show file tree
Hide file tree
Showing 3 changed files with 355 additions and 0 deletions.
105 changes: 105 additions & 0 deletions ...perty/tabs/propertyDetailsManagement/detail/summary/PropertyManagementDetailView.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
import { Claims } from '@/constants';
import { PropertyEditForms } from '@/features/mapSideBar/property/PropertyViewSelector';
import { mockLookups } from '@/mocks/lookups.mock';
import {
getMockApiPropertyManagement,
getMockApiPropertyManagementPurpose,
} from '@/mocks/propertyManagement.mock';
import { Api_PropertyManagement } from '@/models/api/Property';
import { lookupCodesSlice } from '@/store/slices/lookupCodes';
import { act, render, RenderOptions, userEvent } from '@/utils/test-utils';

import {
IPropertyManagementDetailViewProps,
PropertyManagementDetailView,
} from './PropertyManagementDetailView';

jest.mock('@react-keycloak/web');

const storeState = {
[lookupCodesSlice.name]: { lookupCodes: mockLookups },
};

const setEditManagementState = jest.fn();

describe('PropertyManagementDetailView component', () => {
const setup = (
renderOptions?: RenderOptions & { props?: Partial<IPropertyManagementDetailViewProps> },
) => {
renderOptions = renderOptions ?? {};
const utils = render(
<PropertyManagementDetailView
{...renderOptions.props}
setEditManagementState={setEditManagementState}
propertyManagement={
renderOptions.props?.propertyManagement ?? getMockApiPropertyManagement()
}
isLoading={renderOptions.props?.isLoading ?? false}
/>,
{
...renderOptions,
store: storeState,
useMockAuthentication: true,
},
);

return {
...utils,
};
};

afterEach(() => {
jest.clearAllMocks();
});

it('renders as expected when provided valid data object', () => {
const apiManagement: Api_PropertyManagement = {
...getMockApiPropertyManagement(),
managementPurposes: [getMockApiPropertyManagementPurpose()],
};
const { asFragment } = setup({ props: { propertyManagement: apiManagement } });
expect(asFragment()).toMatchSnapshot();
});

it('displays a loading spinner when loading', () => {
const { getByTestId } = setup({ props: { isLoading: true } });
const spinner = getByTestId('filter-backdrop-loading');
expect(spinner).toBeVisible();
});

it('displays existing values if they exist', () => {
const apiManagement: Api_PropertyManagement = {
...getMockApiPropertyManagement(),
managementPurposes: [getMockApiPropertyManagementPurpose()],
};
const { getByText } = setup({ props: { propertyManagement: apiManagement } });
expect(getByText('BC Ferries')).toBeVisible();
});

it('does not throw an exception for an invalid data object', () => {
const { getByText } = setup({ props: { propertyManagement: {} as Api_PropertyManagement } });
expect(getByText(/property purpose/i)).toBeVisible();
});

it('does not render the edit button if the user does not have management edit permissions', () => {
const { queryByTitle } = setup({ claims: [] });
const editButton = queryByTitle('Edit property management information');
expect(editButton).toBeNull();
});

it('renders the edit button if the user has management edit permissions', () => {
const { getByTitle } = setup({ claims: [Claims.MANAGEMENT_EDIT] });
const editButton = getByTitle('Edit property management information');
expect(editButton).toBeVisible();
});

it('switches to Edit mode when edit button is clicked', async () => {
const { getByTitle } = setup({ claims: [Claims.MANAGEMENT_EDIT] });
const editButton = getByTitle('Edit property management information');
await act(async () => userEvent.click(editButton));
expect(setEditManagementState).toHaveBeenCalledWith({
form: PropertyEditForms.UpdateManagementSummaryContainer,
childId: null,
});
});
});
2 changes: 2 additions & 0 deletions ...r/property/tabs/propertyDetailsManagement/detail/summary/PropertyManagementDetailView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,9 @@ export const PropertyManagementDetailView: React.FC<IPropertyManagementDetailVie
/>
)}
</StyledEditWrapper>

<LoadingBackdrop show={isLoading} />

<SectionField label="Property purpose">
<MultiselectTextList
values={
Expand Down
248 changes: 248 additions & 0 deletions ...DetailsManagement/detail/summary/__snapshots__/PropertyManagementDetailView.test.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,248 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`PropertyManagementDetailView component renders as expected when provided valid data object 1`] = `
<DocumentFragment>
<div
class="Toastify"
/>
<div />
.c2 {
float: right;
cursor: pointer;
}
.c3 {
text-align: right;
}
.c1 {
font-weight: bold;
border-bottom: 0.2rem solid;
margin-bottom: 2rem;
}
.c0 {
margin: 1.5rem;
padding: 1.5rem;
background-color: white;
text-align: left;
border-radius: 0.5rem;
}
.c5.required::before {
content: '*';
position: absolute;
top: 0.75rem;
left: 0rem;
}
.c4 {
font-weight: bold;
}
<div
class="c0 form-section"
>
<h2
class="c1"
>
<div
class="no-gutters row"
>
<div
class="col"
>
Summary
</div>
<div
class="col-1"
>
<svg
class="c2"
fill="currentColor"
height="1em"
stroke="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<title>
collapse-section
</title>
<path
d="M0 0h24v24H0z"
fill="none"
/>
<path
d="M7 14l5-5 5 5z"
/>
</svg>
</div>
</div>
</h2>
<div
class="collapse show"
>
<div
class="c3 mr-3 my-1"
/>
<div
class="pb-2 row"
>
<div
class="pr-0 text-left col-4"
>
<label
class="c4"
>
Property purpose:
</label>
</div>
<div
class="c5 text-left col"
>
<div>
<div
class="multiselect-container multiSelectContainer disable_ms "
id="multiselectContainerReact"
style="opacity: 1;"
>
<div
class="search-wrapper searchWrapper "
style="padding: 0px;"
>
<span
class="chip false disableSelection"
style="opacity: 1; background: rgb(242, 242, 242); border-radius: 4px; color: black; font-size: 16px; margin-right: 1em;"
>
BC Ferries
</span>
<input
autocomplete="off"
class="searchBox "
disabled=""
id="search_input"
name="search_name_input"
placeholder=""
type="text"
value=""
/>
</div>
<div
class="optionListContainer displayNone"
>
<ul
class="optionContainer"
>
<span
class="notFound"
>
No Options Available
</span>
</ul>
</div>
</div>
</div>
</div>
</div>
<div
class="pb-2 row"
>
<div
class="pr-0 text-left col-4"
>
<label
class="c4"
>
Lease/Licensed:
</label>
</div>
<div
class="c5 text-left col"
>
No active Lease/License
</div>
</div>
<div
class="pb-2 row"
>
<div
class="pr-0 text-left col-4"
>
<label
class="c4"
>
Utilities payable:
</label>
</div>
<div
class="c5 text-left col"
>
Unknown
</div>
</div>
<div
class="pb-2 row"
>
<div
class="pr-0 text-left col-4"
>
<label
class="c4"
>
Taxes payable:
</label>
</div>
<div
class="c5 text-left col"
>
Unknown
</div>
</div>
<div
class="pb-2 row"
>
<div
class="pr-0 text-left col-4"
>
<label
class="c4"
>
Additional details:
<span
class="ml-2"
>
<span
class="tooltip-icon"
data-testid="tooltip-icon-section-field-tooltip"
id="section-field-tooltip"
>
<svg
class="tooltip-icon"
fill="currentColor"
height="1em"
stroke="currentColor"
stroke-width="0"
viewBox="0 0 512 512"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"
/>
</svg>
</span>
</span>
</label>
</div>
<div
class="c5 text-left col-12"
>
test
</div>
</div>
</div>
</div>
</DocumentFragment>
`;

0 comments on commit 1db335c

Please sign in to comment.