Skip to content

Commit 0618ac4

Browse files
joshdimantetojoshdimanteto
committed
Conditionally render the spares number #1591 
2 parents 8ded06d + ae65126 commit 0618ac4

16 files changed

+4010
-195
lines changed

‎src/apiConfigProvider.component.test.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,4 +84,25 @@ describe('APIConfigProvider', () => {
8484
JSON.stringify({})
8585
);
8686
});
87+
88+
it('settings are loaded (without spares 204 no content)', async () => {
89+
server.use(
90+
http.get('/v1/settings/spares-definition', () => {
91+
return HttpResponse.json(undefined, { status: 204 });
92+
})
93+
);
94+
renderComponent();
95+
96+
// Preloader is in a loading state when ConfigProvider is
97+
// loading the configuration.
98+
expect(screen.getByText('Loading...')).toBeInTheDocument();
99+
100+
await waitFor(() => {
101+
expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
102+
});
103+
expect(screen.getByTestId('settings')).toBeInTheDocument();
104+
expect(screen.getByTestId('settings')).toHaveTextContent(
105+
JSON.stringify({})
106+
);
107+
});
87108
});

‎src/catalogue/items/__snapshots__/catalogueItemsDetailsPanel.component.test.tsx.snap‎

Lines changed: 524 additions & 0 deletions
Large diffs are not rendered by default.

‎src/catalogue/items/__snapshots__/catalogueItemsPage.component.test.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -217,7 +217,7 @@ exports[`CatalogueItemsPage > renders a catalogue items page correctly 1`] = `
217217
>
218218
<table
219219
class="MuiTable-root MuiTable-stickyHeader css-1gcyac0-MuiTable-root"
220-
style="--header-mrt_row_actions-size: 70; --col-mrt_row_actions-size: 70; --header-mrt_row_select-size: 60; --col-mrt_row_select-size: 60; --header-catalogueItem_name-size: 200; --col-catalogueItem_name-size: 200; --header-catalogueItem_modified_time-size: 350; --col-catalogueItem_modified_time-size: 350; --header-View_Items-size: 200; --col-View_Items-size: 200; --header-catalogueItem_number_of_spares-size: 350; --col-catalogueItem_number_of_spares-size: 350; --header-catalogueItem_description-size: 250; --col-catalogueItem_description-size: 250; --header-catalogueItem_is_obsolete-size: 200; --col-catalogueItem_is_obsolete-size: 200; --header-catalogueItem_obsolete_replacement_catalogue_item_id-size: 275; --col-catalogueItem_obsolete_replacement_catalogue_item_id-size: 275; --header-catalogueItem_obsolete_reason-size: 225; --col-catalogueItem_obsolete_reason-size: 225; --header-catalogueItem_properties_1-size: 250; --col-catalogueItem_properties_1-size: 250; --header-catalogueItem_properties_2-size: 250; --col-catalogueItem_properties_2-size: 250; --header-catalogueItem_properties_3-size: 250; --col-catalogueItem_properties_3-size: 250; --header-catalogueItem_properties_4-size: 250; --col-catalogueItem_properties_4-size: 250; --header-catalogueItem_properties_5-size: 250; --col-catalogueItem_properties_5-size: 250; --header-catalogueItem_properties_6-size: 250; --col-catalogueItem_properties_6-size: 250; --header-catalogueItem_cost_gbp-size: 250; --col-catalogueItem_cost_gbp-size: 250; --header-catalogueItem_cost_to_rework_gbp-size: 250; --col-catalogueItem_cost_to_rework_gbp-size: 250; --header-catalogueItem_days_to_replace-size: 275; --col-catalogueItem_days_to_replace-size: 275; --header-catalogueItem_days_to_rework-size: 250; --col-catalogueItem_days_to_rework-size: 250; --header-catalogueItem_expected_lifetime_days-size: 300; --col-catalogueItem_expected_lifetime_days-size: 300; --header-catalogueItem_drawing_number-size: 250; --col-catalogueItem_drawing_number-size: 250; --header-catalogueItem_drawing_link-size: 250; --col-catalogueItem_drawing_link-size: 250; --header-catalogueItem_item_model_number-size: 250; --col-catalogueItem_item_model_number-size: 250; --header-manufacturer_name-size: 350; --col-manufacturer_name-size: 350; --header-manufacturer_url-size: 250; --col-manufacturer_url-size: 250; --header-manufacturer_address-size: 300; --col-manufacturer_address-size: 300; --header-manufacturer_telephone-size: 300; --col-manufacturer_telephone-size: 300; --header-catalogueItem_notes-size: 250; --col-catalogueItem_notes-size: 250; --header-mrt_row_spacer-size: 40; --col-mrt_row_spacer-size: 40;"
220+
style="--header-mrt_row_actions-size: 70; --col-mrt_row_actions-size: 70; --header-mrt_row_select-size: 60; --col-mrt_row_select-size: 60; --header-catalogueItem_name-size: 200; --col-catalogueItem_name-size: 200; --header-catalogueItem_modified_time-size: 350; --col-catalogueItem_modified_time-size: 350; --header-View_Items-size: 200; --col-View_Items-size: 200; --header-catalogueItem_description-size: 250; --col-catalogueItem_description-size: 250; --header-catalogueItem_is_obsolete-size: 200; --col-catalogueItem_is_obsolete-size: 200; --header-catalogueItem_obsolete_replacement_catalogue_item_id-size: 275; --col-catalogueItem_obsolete_replacement_catalogue_item_id-size: 275; --header-catalogueItem_obsolete_reason-size: 225; --col-catalogueItem_obsolete_reason-size: 225; --header-catalogueItem_properties_1-size: 250; --col-catalogueItem_properties_1-size: 250; --header-catalogueItem_properties_2-size: 250; --col-catalogueItem_properties_2-size: 250; --header-catalogueItem_properties_3-size: 250; --col-catalogueItem_properties_3-size: 250; --header-catalogueItem_properties_4-size: 250; --col-catalogueItem_properties_4-size: 250; --header-catalogueItem_properties_5-size: 250; --col-catalogueItem_properties_5-size: 250; --header-catalogueItem_properties_6-size: 250; --col-catalogueItem_properties_6-size: 250; --header-catalogueItem_cost_gbp-size: 250; --col-catalogueItem_cost_gbp-size: 250; --header-catalogueItem_cost_to_rework_gbp-size: 250; --col-catalogueItem_cost_to_rework_gbp-size: 250; --header-catalogueItem_days_to_replace-size: 275; --col-catalogueItem_days_to_replace-size: 275; --header-catalogueItem_days_to_rework-size: 250; --col-catalogueItem_days_to_rework-size: 250; --header-catalogueItem_expected_lifetime_days-size: 300; --col-catalogueItem_expected_lifetime_days-size: 300; --header-catalogueItem_drawing_number-size: 250; --col-catalogueItem_drawing_number-size: 250; --header-catalogueItem_drawing_link-size: 250; --col-catalogueItem_drawing_link-size: 250; --header-catalogueItem_item_model_number-size: 250; --col-catalogueItem_item_model_number-size: 250; --header-manufacturer_name-size: 350; --col-manufacturer_name-size: 350; --header-manufacturer_url-size: 250; --col-manufacturer_url-size: 250; --header-manufacturer_address-size: 300; --col-manufacturer_address-size: 300; --header-manufacturer_telephone-size: 300; --col-manufacturer_telephone-size: 300; --header-catalogueItem_notes-size: 250; --col-catalogueItem_notes-size: 250; --header-mrt_row_spacer-size: 40; --col-mrt_row_spacer-size: 40;"
221221
>
222222
<thead
223223
class="MuiTableHead-root css-7psuou-MuiTableHead-root"

‎src/catalogue/items/__snapshots__/catalogueItemsTable.component.test.tsx.snap‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -332,12 +332,12 @@ exports[`Catalogue Items Table > renders the dense table correctly 1`] = `
332332
</span>
333333
</div>
334334
<input
335-
aria-describedby=":r41c:-helper-text"
335+
aria-describedby=":r44d:-helper-text"
336336
aria-invalid="false"
337337
aria-label="Filter by Name"
338338
autocomplete="off"
339339
class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd css-110vr2a-MuiInputBase-input-MuiInput-input"
340-
id=":r41c:"
340+
id=":r44d:"
341341
placeholder="Filter by Name"
342342
title="Filter by Name"
343343
type="text"
@@ -375,7 +375,7 @@ exports[`Catalogue Items Table > renders the dense table correctly 1`] = `
375375
</div>
376376
<p
377377
class="MuiFormHelperText-root MuiFormHelperText-sizeMedium css-v98l45-MuiFormHelperText-root"
378-
id=":r41c:-helper-text"
378+
id=":r44d:-helper-text"
379379
>
380380
<label>
381381
Filter Mode: Fuzzy
@@ -489,11 +489,11 @@ exports[`Catalogue Items Table > renders the dense table correctly 1`] = `
489489
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd css-6h9cc6-MuiInputBase-root-MuiInput-root"
490490
>
491491
<input
492-
aria-describedby=":r41l:-helper-text"
492+
aria-describedby=":r44m:-helper-text"
493493
aria-invalid="false"
494494
autocomplete="off"
495495
class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-1yrc8ca-MuiInputBase-input-MuiInput-input"
496-
id=":r41l:"
496+
id=":r44m:"
497497
inputmode="text"
498498
placeholder="Min"
499499
type="text"
@@ -524,7 +524,7 @@ exports[`Catalogue Items Table > renders the dense table correctly 1`] = `
524524
</div>
525525
<p
526526
class="MuiFormHelperText-root MuiFormHelperText-sizeMedium css-18y2hez-MuiFormHelperText-root"
527-
id=":r41l:-helper-text"
527+
id=":r44m:-helper-text"
528528
>
529529
<label>
530530
Filter Mode: Between Inclusive
@@ -541,7 +541,7 @@ exports[`Catalogue Items Table > renders the dense table correctly 1`] = `
541541
aria-invalid="false"
542542
autocomplete="off"
543543
class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-1yrc8ca-MuiInputBase-input-MuiInput-input"
544-
id=":r41o:"
544+
id=":r44p:"
545545
inputmode="text"
546546
placeholder="Max"
547547
type="text"
@@ -1118,7 +1118,7 @@ exports[`Catalogue Items Table > renders the dense table correctly 1`] = `
11181118
>
11191119
<label
11201120
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-animated MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-animated css-10j3yc8-MuiFormLabel-root-MuiInputLabel-root"
1121-
for="mrt-rows-per-page-:r411:"
1121+
for="mrt-rows-per-page-:r442:"
11221122
>
11231123
Rows per page
11241124
</label>
@@ -1139,7 +1139,7 @@ exports[`Catalogue Items Table > renders the dense table correctly 1`] = `
11391139
aria-hidden="true"
11401140
aria-invalid="false"
11411141
class="MuiSelect-nativeInput css-j0riat-MuiSelect-nativeInput"
1142-
id="mrt-rows-per-page-:r411:"
1142+
id="mrt-rows-per-page-:r442:"
11431143
tabindex="-1"
11441144
value="5"
11451145
/>

‎src/catalogue/items/catalogueItemsDetailsPanel.component.test.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,10 @@ import {
77
} from '../../testUtils';
88

99
import userEvent, { UserEvent } from '@testing-library/user-event';
10+
import { http, HttpResponse } from 'msw';
1011
import { CatalogueCategory, CatalogueItem } from '../../api/api.types';
1112
import APIConfigProvider from '../../apiConfigProvider.component';
13+
import { server } from '../../mocks/server';
1214
import CatalogueItemsDetailsPanel, {
1315
CatalogueItemsDetailsPanelProps,
1416
} from './catalogueItemsDetailsPanel.component';
@@ -150,4 +152,24 @@ describe('Catalogue Items details panel', () => {
150152
);
151153
expect(view.asFragment()).toMatchSnapshot();
152154
});
155+
156+
it('renders details panel correctly (without spares)', async () => {
157+
server.use(
158+
http.get('/v1/settings/spares-definition', () => {
159+
return HttpResponse.json({ system_types: [] }, { status: 200 });
160+
})
161+
);
162+
163+
const view = createView();
164+
await waitFor(() => {
165+
expect(
166+
screen.getByRole('link', { name: 'Click here' })
167+
).toBeInTheDocument();
168+
});
169+
170+
await waitFor(() =>
171+
expect(screen.queryByRole('progressbar')).not.toBeInTheDocument()
172+
);
173+
expect(view.asFragment()).toMatchSnapshot();
174+
});
153175
});

‎src/catalogue/items/catalogueItemsDetailsPanel.component.tsx‎

Lines changed: 25 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,8 @@ function CatalogueItemsDetailsPanel(props: CatalogueItemsDetailsPanelProps) {
5353
const apiSettings = React.useContext(APISettingsContext);
5454
const sparesFilterState = apiSettings?.spares?.sparesFilterState;
5555

56+
const isSparesDefinitionDefined = !!apiSettings.spares;
57+
5658
const handleTabChange = (_event: React.SyntheticEvent, newValue: number) => {
5759
setTabValue(newValue);
5860
};
@@ -107,28 +109,30 @@ function CatalogueItemsDetailsPanel(props: CatalogueItemsDetailsPanelProps) {
107109
</Typography>
108110
</Grid>
109111
<Grid container spacing={0}>
110-
<Grid size={{ xs: 12, sm: 6 }}>
111-
<Typography
112-
sx={{
113-
color: 'text.primary',
114-
}}
115-
>
116-
Number of spares
117-
</Typography>
118-
<Typography
119-
sx={{
120-
color: 'text.secondary',
121-
}}
122-
>
123-
<MuiLink
124-
underline="hover"
125-
component={Link}
126-
to={`${catalogueItemIdData.id}/items${sparesFilterState}`}
112+
{isSparesDefinitionDefined && (
113+
<Grid size={{ xs: 12, sm: 6 }}>
114+
<Typography
115+
sx={{
116+
color: 'text.primary',
117+
}}
127118
>
128-
{catalogueItemIdData.number_of_spares}
129-
</MuiLink>
130-
</Typography>
131-
</Grid>
119+
Number of spares
120+
</Typography>
121+
<Typography
122+
sx={{
123+
color: 'text.secondary',
124+
}}
125+
>
126+
<MuiLink
127+
underline="hover"
128+
component={Link}
129+
to={`${catalogueItemIdData.id}/items${sparesFilterState}`}
130+
>
131+
{catalogueItemIdData.number_of_spares}
132+
</MuiLink>
133+
</Typography>
134+
</Grid>
135+
)}
132136
<Grid size={{ xs: 12, sm: 6 }}>
133137
<Typography
134138
sx={{

‎src/catalogue/items/catalogueItemsLandingPage.component.test.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -245,6 +245,23 @@ describe('Catalogue Items Landing Page', () => {
245245
);
246246
});
247247

248+
it('should not display spares number if spares definition is not defined', async () => {
249+
server.use(
250+
http.get('/v1/settings/spares-definition', () => {
251+
return HttpResponse.json({ system_types: [] }, { status: 200 });
252+
})
253+
);
254+
255+
createView('/catalogue/5/items/89');
256+
await waitFor(() =>
257+
expect(screen.queryByRole('progressbar')).not.toBeInTheDocument()
258+
);
259+
260+
await waitFor(() => {
261+
expect(screen.queryByText('Number of spares')).not.toBeInTheDocument();
262+
});
263+
});
264+
248265
it('landing page renders data correctly when optional values are null', async () => {
249266
createView('/catalogue/4/items/33');
250267

‎src/catalogue/items/catalogueItemsLandingPage.component.tsx‎

Lines changed: 26 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ function CatalogueItemsLandingPage() {
7070

7171
const apiSettings = React.useContext(APISettingsContext);
7272
const sparesFilterState = apiSettings?.spares?.sparesFilterState;
73+
const isSparesDefinitionDefined = !!apiSettings.spares;
7374

7475
const isParentCorrect =
7576
catalogueItemIdData?.catalogue_category_id === catalogueCategoryId;
@@ -197,31 +198,33 @@ function CatalogueItemsLandingPage() {
197198

198199
<Grid container size={12}>
199200
<Grid container spacing={1}>
200-
<Grid size={{ xs: 12, sm: 6, md: 4 }}>
201-
<Typography
202-
align="left"
203-
sx={{
204-
color: 'text.primary',
205-
}}
206-
>
207-
Number of spares
208-
</Typography>
201+
{isSparesDefinitionDefined && (
202+
<Grid size={{ xs: 12, sm: 6, md: 4 }}>
203+
<Typography
204+
align="left"
205+
sx={{
206+
color: 'text.primary',
207+
}}
208+
>
209+
Number of spares
210+
</Typography>
209211

210-
<Typography
211-
align="left"
212-
sx={{
213-
color: 'text.secondary',
214-
}}
215-
>
216-
<MuiLink
217-
underline="hover"
218-
component={Link}
219-
to={`items${sparesFilterState}`}
212+
<Typography
213+
align="left"
214+
sx={{
215+
color: 'text.secondary',
216+
}}
220217
>
221-
{catalogueItemIdData.number_of_spares}
222-
</MuiLink>
223-
</Typography>
224-
</Grid>
218+
<MuiLink
219+
underline="hover"
220+
component={Link}
221+
to={`items${sparesFilterState}`}
222+
>
223+
{catalogueItemIdData.number_of_spares}
224+
</MuiLink>
225+
</Typography>
226+
</Grid>
227+
)}
225228
<Grid size={{ xs: 12, sm: 6, md: 4 }}>
226229
<Typography
227230
align="left"

‎src/catalogue/items/catalogueItemsTable.component.test.tsx‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { fireEvent, screen, waitFor, within } from '@testing-library/react';
22
import userEvent, { UserEvent } from '@testing-library/user-event';
3+
import { http, HttpResponse } from 'msw';
34
import { CatalogueCategory } from '../../api/api.types';
45
import APIConfigProvider from '../../apiConfigProvider.component';
6+
import { server } from '../../mocks/server';
57
import {
68
getCatalogueCategoryById,
79
renderComponentWithRouterProvider,
@@ -52,12 +54,18 @@ describe('Catalogue Items Table', () => {
5254
vi.clearAllMocks();
5355
});
5456

55-
it('renders table correctly (section 1 due to column virtualisation )', async () => {
57+
it('renders table correctly (section 1 due to column virtualisation) and checks for number of spares column', async () => {
5658
createView();
5759
await waitFor(() => {
5860
expect(screen.getByText('Name')).toBeInTheDocument();
5961
});
6062
expect(screen.getByText('Last modified')).toBeInTheDocument();
63+
expect(screen.getByText('View Items')).toBeInTheDocument();
64+
65+
await user.click(screen.getByRole('button', { name: 'Show/Hide columns' }));
66+
await user.click(screen.getByText('Hide all'));
67+
68+
expect(screen.getByText('Number of spares')).toBeInTheDocument();
6169
});
6270

6371
it('renders table correctly (Cameras more details)', async () => {
@@ -904,4 +912,24 @@ describe('Catalogue Items Table', () => {
904912
expect(screen.getByDisplayValue('Details')).toBeInTheDocument();
905913
});
906914
});
915+
916+
it('renders table correctly (section 1 due to column virtualisation without spares)', async () => {
917+
server.use(
918+
http.get('/v1/settings/spares-definition', () => {
919+
return HttpResponse.json({ system_types: [] }, { status: 200 });
920+
})
921+
);
922+
923+
createView();
924+
await waitFor(() => {
925+
expect(screen.getByText('Name')).toBeInTheDocument();
926+
});
927+
928+
await user.click(screen.getByRole('button', { name: 'Show/Hide columns' }));
929+
await user.click(screen.getByText('Hide all'));
930+
931+
await waitFor(() => {
932+
expect(screen.queryByText('Number of spares')).not.toBeInTheDocument();
933+
});
934+
});
907935
});

0 commit comments

Comments
 (0)