@centreon/ui 26.10.8 → 26.10.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (77) hide show
  1. package/package.json +6 -3
  2. package/public/mockServiceWorker.js +31 -8
  3. package/src/Dashboard/Dashboard.browser.test.tsx +107 -0
  4. package/src/Form/CollapsibleGroup.tsx +6 -33
  5. package/src/Form/Form.browser.test.tsx +553 -0
  6. package/src/Form/Form.stories.tsx +102 -1
  7. package/src/Form/Form.tsx +4 -3
  8. package/src/Form/Inputs/ExclusiveCheckboxGroup.browser.test.tsx +304 -0
  9. package/src/Form/Inputs/Grid.browser.test.tsx +186 -0
  10. package/src/Form/Inputs/Grid.tsx +59 -12
  11. package/src/Form/Inputs/PasswordInput.browser.test.tsx +80 -0
  12. package/src/Form/Inputs/SegmentedButtons.browser.test.tsx +197 -0
  13. package/src/Form/Inputs/SegmentedButtons.tsx +38 -29
  14. package/src/Form/Inputs/Text.tsx +13 -1
  15. package/src/Form/Inputs/index.tsx +10 -52
  16. package/src/Form/Inputs/models.ts +6 -0
  17. package/src/Form/Section/FormSection.browser.test.tsx +174 -0
  18. package/src/Form/Section/FormSection.tsx +20 -6
  19. package/src/Form/Section/navigateToSection.ts +26 -8
  20. package/src/Form/Section/useActiveSection.ts +213 -0
  21. package/src/InputField/Number/Number.browser.test.tsx +109 -0
  22. package/src/InputField/Select/Autocomplete/Connected/Multi/MultiConnectedAutocompleteField.browser.test.tsx +250 -0
  23. package/src/InputField/Select/Autocomplete/Connected/index.test.tsx +37 -0
  24. package/src/InputField/Select/Autocomplete/Connected/index.tsx +56 -45
  25. package/src/Listing/Cell/DataCell.tsx +0 -2
  26. package/src/Listing/Listing.browser.test.tsx +476 -0
  27. package/src/Module/Module.browser.test.tsx +145 -0
  28. package/src/Pagination/Pagination.browser.test.tsx +184 -0
  29. package/src/RichTextEditor/RichTextEditor.browser.test.tsx +567 -0
  30. package/src/RichTextEditor/plugins/FloatingLinkEditorPlugin.tsx +3 -1
  31. package/src/TimePeriods/ResolutionTimePeriod.browser.test.tsx +143 -0
  32. package/src/TimePeriods/TimePeriods.browser.test.tsx +468 -0
  33. package/src/Typography/FluidTypography/FluidTypography.browser.test.tsx +54 -0
  34. package/src/api/useMutationQuery/useMutationQuery.browser.test.tsx +154 -0
  35. package/src/components/CollapsibleItem/CollapsibleItem.browser.test.tsx +120 -0
  36. package/src/components/CopyCommand/CopyCommand.browser.test.tsx +287 -0
  37. package/src/components/CrudPage/CrudPage.browser.test.tsx +659 -0
  38. package/src/components/DataTable/DataTable.browser.test.tsx +257 -0
  39. package/src/components/Form/AccessRights/AccessRights.browser.test.tsx +527 -0
  40. package/src/components/Header/PageHeader/PageHeader.stories.tsx +9 -0
  41. package/src/components/Header/PageHeader/PageHeaderMain.tsx +4 -2
  42. package/src/components/Header/PageHeader/PageHeaderTitle.tsx +61 -18
  43. package/src/components/ItemComposition/ItemComposition.browser.test.tsx +172 -0
  44. package/src/components/Layout/PageLayout.browser.test.tsx +114 -0
  45. package/src/components/Modal/ConfirmationModal/ConfirmationModal.browser.test.tsx +237 -0
  46. package/src/components/SortableEntriesList/SortableEntriesList.browser.test.tsx +981 -0
  47. package/src/components/Tabs/Tabs.browser.test.tsx +115 -0
  48. package/src/components/Tabs/Tabs.tsx +7 -1
  49. package/src/utils/useFullscreen/Fullscreen.browser.test.tsx +176 -0
  50. package/src/utils/useLocale/useLocale.browser.test.tsx +49 -0
  51. package/src/utils/useLocaleTimezoneDate/{LocaleTimezoneDate.cypress.spec.tsx → LocaleTimezoneDate.browser.test.tsx} +24 -11
  52. package/src/Dashboard/Dashboard.cypress.spec.tsx +0 -71
  53. package/src/Form/Form.cypress.spec.tsx +0 -306
  54. package/src/Form/Inputs/ExclusiveCheckboxGroup.cypress.spec.tsx +0 -236
  55. package/src/Form/Inputs/SegmentedButtons.cypress.spec.tsx +0 -101
  56. package/src/InputField/Number/Number.cypress.spec.tsx +0 -89
  57. package/src/InputField/Select/Autocomplete/Connected/Multi/MultiConnectedAutocompleteField.cypress.spec.tsx +0 -182
  58. package/src/Listing/Listing.cypress.spec.tsx +0 -304
  59. package/src/Module/Module.cypress.spec.tsx +0 -127
  60. package/src/Pagination/Pagination.cypress.spec.tsx +0 -140
  61. package/src/RichTextEditor/RichTextEditor.cypress.spec.tsx +0 -408
  62. package/src/TimePeriods/ResolutionTimePeriod.cypress.spec.tsx +0 -74
  63. package/src/TimePeriods/TimePeriods.cypress.spec.tsx +0 -488
  64. package/src/Typography/FluidTypography/FluidTypography.cypress.spec.tsx +0 -27
  65. package/src/api/useMutationQuery/useMutationQuery.cypress.spec.tsx +0 -93
  66. package/src/components/CollapsibleItem/CollapsibleItem.cypress.spec.tsx +0 -76
  67. package/src/components/CopyCommand/CopyCommand.cypress.spec.tsx +0 -167
  68. package/src/components/CrudPage/CrudPage.cypress.spec.tsx +0 -561
  69. package/src/components/DataTable/DataTable.cypress.spec.tsx +0 -174
  70. package/src/components/Form/AccessRights/AccessRights.cypress.spec.tsx +0 -376
  71. package/src/components/ItemComposition/ItemComposition.cypress.spec.tsx +0 -112
  72. package/src/components/Layout/PageLayout.cypress.spec.tsx +0 -64
  73. package/src/components/Modal/ConfirmationModal/ConfirmationModal.cypress.spec.tsx +0 -171
  74. package/src/components/SortableEntriesList/SortableEntriesList.cypress.spec.tsx +0 -792
  75. package/src/components/Tabs/Tabs.cypress.spec.tsx +0 -69
  76. package/src/utils/useFullscreen/Fullscreen.cypress.spec.tsx +0 -130
  77. package/src/utils/useLocale/useLocale.cypress.spec.tsx +0 -40
@@ -1,174 +0,0 @@
1
- import Delete from '@mui/icons-material/Delete';
2
- import { Box } from '@mui/material';
3
-
4
- import { IconButton } from '../..';
5
- import { ColumnType } from '../../Listing/models';
6
- import { DataTable } from '.';
7
-
8
- const data = Array(5)
9
- .fill(0)
10
- .map((_, idx) => ({
11
- description: `Description ${idx}`,
12
- id: idx,
13
- title: `Entity ${idx}`
14
- }));
15
-
16
- const CardActions = (): JSX.Element => {
17
- return (
18
- <IconButton ariaLabel="Delete" onClick={cy.stub()} title="Delete">
19
- <Delete fontSize="small" />
20
- </IconButton>
21
- );
22
- };
23
-
24
- const initializeDataTableGrid = ({ hasActions, hasCardAction }): void => {
25
- cy.viewport(1200, 590);
26
- cy.mount({
27
- Component: (
28
- <DataTable variant="grid">
29
- {data.map(({ title, description }) => (
30
- <DataTable.Item
31
- Actions={<CardActions />}
32
- description={description}
33
- hasActions={hasActions}
34
- hasCardAction={hasCardAction}
35
- key={title}
36
- title={title}
37
- />
38
- ))}
39
- </DataTable>
40
- )
41
- });
42
- };
43
-
44
- const initializeDataTableEmpty = (canCreate = false): void => {
45
- cy.viewport(1200, 590);
46
- cy.mount({
47
- Component: (
48
- <DataTable isEmpty variant="grid">
49
- <DataTable.EmptyState
50
- canCreate={canCreate}
51
- labels={{
52
- actions: {
53
- create: 'Create'
54
- },
55
- description: 'Description',
56
- title: 'Welcome'
57
- }}
58
- onCreate={cy.stub()}
59
- />
60
- </DataTable>
61
- )
62
- });
63
- };
64
-
65
- const initializeDataTableListing = (): void => {
66
- cy.viewport(1200, 590);
67
- cy.mount({
68
- Component: (
69
- <Box sx={{ height: '100vh' }}>
70
- <DataTable variant="listing">
71
- <DataTable.Listing
72
- columns={[
73
- {
74
- getFormattedString: (row) => row.title,
75
- id: 'title',
76
- label: 'Title',
77
- type: ColumnType.string
78
- },
79
- {
80
- getFormattedString: (row) => row.description,
81
- id: 'description',
82
- label: 'Description',
83
- type: ColumnType.string
84
- }
85
- ]}
86
- rows={data}
87
- />
88
- </DataTable>
89
- </Box>
90
- )
91
- });
92
- };
93
-
94
- describe('DataTable: Grid', () => {
95
- it('displays items with title and description only', () => {
96
- initializeDataTableGrid({
97
- hasActions: false,
98
- hasCardAction: false
99
- });
100
-
101
- data.forEach(({ title, description }) => {
102
- cy.contains(title).should('be.visible');
103
- cy.contains(description).should('be.visible');
104
- });
105
-
106
- cy.makeSnapshot();
107
- });
108
-
109
- it('displays items with actions', () => {
110
- initializeDataTableGrid({
111
- hasActions: true,
112
- hasCardAction: false
113
- });
114
-
115
- cy.findAllByLabelText('Delete').should('have.length', 5);
116
-
117
- cy.makeSnapshot();
118
- });
119
-
120
- it('displays items with card action only', () => {
121
- initializeDataTableGrid({
122
- hasActions: false,
123
- hasCardAction: true
124
- });
125
-
126
- cy.findAllByLabelText('view').should('have.length', 5);
127
-
128
- cy.makeSnapshot();
129
- });
130
-
131
- it('displays items with card action and bottom actions', () => {
132
- initializeDataTableGrid({
133
- hasActions: true,
134
- hasCardAction: true
135
- });
136
-
137
- cy.findAllByLabelText('view').should('have.length', 5);
138
- cy.findAllByLabelText('Delete').should('have.length', 5);
139
-
140
- cy.makeSnapshot();
141
- });
142
- });
143
-
144
- describe('DataTable: Empty', () => {
145
- it('displays the title', () => {
146
- initializeDataTableEmpty();
147
-
148
- cy.contains('Welcome').should('be.visible');
149
-
150
- cy.makeSnapshot();
151
- });
152
-
153
- it('displays the title and the action button', () => {
154
- initializeDataTableEmpty(true);
155
-
156
- cy.contains('Welcome').should('be.visible');
157
- cy.contains('Create').should('be.visible');
158
-
159
- cy.makeSnapshot();
160
- });
161
- });
162
-
163
- describe('DataTable: Listing', () => {
164
- it('displays the listing', () => {
165
- initializeDataTableListing();
166
-
167
- data.forEach(({ title, description }) => {
168
- cy.contains(title).should('be.visible');
169
- cy.contains(description).should('be.visible');
170
- });
171
-
172
- cy.makeSnapshot();
173
- });
174
- });
@@ -1,376 +0,0 @@
1
- import { createStore, Provider } from 'jotai';
2
-
3
- import { Method, SnackbarProvider, TestQueryProvider } from '../../..';
4
- import { AccessRights } from './AccessRights';
5
- import {
6
- buildResult,
7
- emptyAccessRights,
8
- labels,
9
- roles,
10
- simpleAccessRights
11
- } from './storiesData';
12
-
13
- const initialize = ({
14
- initialValues = simpleAccessRights,
15
- loading = false
16
- }): unknown => {
17
- const cancel = cy.stub();
18
- const save = cy.stub().as('save');
19
- const change = cy.stub();
20
-
21
- cy.interceptAPIRequest({
22
- alias: 'getContacts',
23
- method: Method.GET,
24
- path: '**/contacts?**',
25
- response: buildResult(false)
26
- });
27
- cy.interceptAPIRequest({
28
- alias: 'getContactGroups',
29
- method: Method.GET,
30
- path: '**/contact-groups?**',
31
- response: buildResult(true)
32
- });
33
-
34
- cy.mount({
35
- Component: (
36
- <SnackbarProvider>
37
- <TestQueryProvider>
38
- <Provider store={createStore()}>
39
- <AccessRights
40
- cancel={cancel}
41
- endpoints={{
42
- contact: '/contacts',
43
- contactGroup: '/contact-groups'
44
- }}
45
- initialValues={initialValues}
46
- labels={labels}
47
- loading={loading}
48
- onChange={change}
49
- roles={roles}
50
- submit={save}
51
- />
52
- </Provider>
53
- </TestQueryProvider>
54
- </SnackbarProvider>
55
- )
56
- });
57
-
58
- return {
59
- cancel,
60
- change,
61
- save
62
- };
63
- };
64
-
65
- describe('Access rights', () => {
66
- it('displays the access rights in loading state', () => {
67
- initialize({ loading: true });
68
-
69
- cy.contains('Share dashboard with').should('be.visible');
70
- cy.contains('Contact').should('be.visible');
71
- cy.contains('Contact group').should('be.visible');
72
- cy.findByLabelText('Add a contact').should('be.visible');
73
- cy.findByTestId('add_role').should('be.disabled');
74
- cy.findByTestId('add').should('be.disabled');
75
- cy.findByLabelText('Cancel').should('be.visible');
76
- cy.findByLabelText('Save').should('be.visible');
77
-
78
- cy.makeSnapshot();
79
- });
80
-
81
- it('displays the access rights with an empty list', () => {
82
- initialize({ initialValues: emptyAccessRights });
83
-
84
- cy.contains('The contact list is empty').should('be.visible');
85
-
86
- cy.makeSnapshot();
87
- });
88
-
89
- it('displays the access rights list', () => {
90
- initialize({});
91
-
92
- simpleAccessRights.forEach(({ name, email, isContactGroup, role }) => {
93
- cy.contains(name).should('be.visible');
94
- cy.contains(email).should('be.visible');
95
- cy.get(`[data-groupChip="${name}"]`).should(
96
- isContactGroup ? 'be.visible' : 'not.exist'
97
- );
98
- cy.findByTestId(`role-${name}`).should('have.value', role);
99
- cy.findByTestId(`remove-${name}`).should('be.visible');
100
- });
101
-
102
- cy.makeSnapshot();
103
- });
104
-
105
- it('displays a removed chip when the corresponding icon is clicked', () => {
106
- initialize({});
107
-
108
- cy.findByTestId('remove-Erin Monahan').should(
109
- 'have.attr',
110
- 'data-removed',
111
- 'false'
112
- );
113
-
114
- cy.findByTestId('remove-Erin Monahan').click();
115
-
116
- cy.findByTestId('remove-Erin Monahan').should(
117
- 'have.attr',
118
- 'data-removed',
119
- 'true'
120
- );
121
- cy.contains(labels.list.removed).should('be.visible');
122
-
123
- cy.makeSnapshot();
124
- });
125
-
126
- it('restores the contact when the contact is removed and the corresponding icon is clicked', () => {
127
- initialize({});
128
-
129
- cy.findByTestId('remove-Erin Monahan').click();
130
-
131
- cy.findByTestId('remove-Erin Monahan').should(
132
- 'have.attr',
133
- 'data-removed',
134
- 'false'
135
- );
136
- cy.contains(labels.list.removed).should('not.exist');
137
-
138
- cy.makeSnapshot();
139
- });
140
-
141
- it('submits the new acces rights list without the removed contact', () => {
142
- const { save } = initialize({});
143
-
144
- cy.findByTestId('remove-Erin Monahan').click();
145
-
146
- cy.findByTestId('remove-Erin Monahan').should(
147
- 'have.attr',
148
- 'data-removed',
149
- 'true'
150
- );
151
- cy.contains(labels.list.removed).should('be.visible');
152
- cy.contains('1 removed').should('be.visible');
153
-
154
- cy.contains(labels.actions.save).click();
155
-
156
- cy.get('@save').then(() => {
157
- expect(save).to.have.been.called;
158
- });
159
-
160
- cy.makeSnapshot();
161
- });
162
-
163
- it('submits the new acces rights list with the updated contact', () => {
164
- const { save } = initialize({});
165
-
166
- cy.findByTestId('remove-Erin Monahan').click();
167
- cy.findByTestId('role-Erin Monahan').parent().click();
168
-
169
- cy.get('li[data-value="viewer"]').click();
170
- cy.contains(labels.list.updated).should('be.visible');
171
- cy.contains('1 updated').should('be.visible');
172
-
173
- cy.contains(labels.actions.save)
174
- .click()
175
- .then(() => {
176
- expect(save).to.have.been.called;
177
- });
178
-
179
- cy.makeSnapshot();
180
- });
181
-
182
- it('removes the updated chip when the contact role is updated and its initial role is assigned back', () => {
183
- initialize({});
184
-
185
- cy.findByTestId('role-Erin Monahan').parent().click();
186
-
187
- cy.get('li[data-value="viewer"]').click();
188
- cy.contains(labels.list.updated).should('be.visible');
189
-
190
- cy.get('li[data-value="editor"]').click();
191
- cy.contains(labels.list.updated).should('not.exist');
192
-
193
- cy.makeSnapshot();
194
- });
195
-
196
- it('retrieves contacts when the contact radio is selected', () => {
197
- initialize({});
198
-
199
- cy.contains(labels.add.contact).click();
200
- cy.findByLabelText(labels.add.autocompleteContact).click();
201
-
202
- cy.waitForRequest('@getContacts');
203
-
204
- cy.makeSnapshot();
205
- });
206
-
207
- it('retrieves contact groups when the contact group radio is selected', () => {
208
- initialize({});
209
-
210
- cy.contains(labels.add.contactGroup).click();
211
- cy.findByLabelText(labels.add.autocompleteContactGroup).click();
212
-
213
- cy.waitForRequest('@getContactGroups');
214
-
215
- cy.makeSnapshot();
216
- });
217
-
218
- it('adds the contact as viewer when a contact is selected and the corresponding button is clicked', () => {
219
- initialize({});
220
-
221
- cy.contains(labels.add.contact).click();
222
- cy.findByLabelText(labels.add.autocompleteContact).click();
223
-
224
- cy.waitForRequest('@getContacts');
225
-
226
- cy.contains('Entity 10').click();
227
-
228
- cy.findByTestId('add').click();
229
-
230
- cy.contains('Entity 10').should('be.visible');
231
-
232
- cy.findByTestId('role-Entity 10').should('have.value', 'viewer');
233
- cy.contains(labels.list.added).should('be.visible');
234
-
235
- cy.makeSnapshot();
236
- });
237
-
238
- it('adds the contact group as editor when a contact group is selected and the corresponding button is clicked', () => {
239
- initialize({});
240
-
241
- cy.contains(labels.add.contactGroup).click();
242
- cy.findByLabelText(labels.add.autocompleteContactGroup).click();
243
-
244
- cy.waitForRequest('@getContactGroups');
245
-
246
- cy.contains('Entity Group 10').click();
247
- cy.findByTestId('add_role').parent().click();
248
- cy.get('li[data-value="editor"]').click();
249
- cy.findByTestId('add').click();
250
-
251
- cy.contains('Entity Group 10').should('be.visible');
252
-
253
- cy.findByTestId('role-Entity Group 10').should('have.value', 'editor');
254
- cy.contains(labels.list.added).should('be.visible');
255
- cy.contains('2 added').should('be.visible');
256
-
257
- cy.makeSnapshot();
258
- });
259
-
260
- it('displays statistics when a contact is added, a contact is updated and a contact is removed', () => {
261
- initialize({});
262
-
263
- cy.contains(labels.add.contactGroup).click();
264
- cy.findByLabelText(labels.add.autocompleteContactGroup).click();
265
-
266
- cy.waitForRequest('@getContactGroups');
267
-
268
- cy.contains('Entity Group 11').click();
269
- cy.findByTestId('add_role').parent().click();
270
- cy.get('li[data-value="editor"]').click();
271
- cy.findByTestId('add').click();
272
-
273
- cy.contains('Entity Group 10').should('be.visible');
274
-
275
- cy.findByTestId('role-Erin Monahan').parent().click();
276
- cy.get('li[data-value="viewer"]').click();
277
-
278
- cy.findByTestId('remove-Maryann Ferry').click();
279
-
280
- cy.contains('3 added | 1 updated | 1 removed').should('be.visible');
281
-
282
- cy.makeSnapshot();
283
- });
284
-
285
- it('clears the autocomplete when a contact is selected and the contact type is changed', () => {
286
- initialize({});
287
-
288
- cy.contains(labels.add.contact).click();
289
- cy.findByLabelText(labels.add.autocompleteContact).click();
290
-
291
- cy.waitForRequest('@getContacts');
292
-
293
- cy.contains('Entity 11').click();
294
- cy.findByLabelText(labels.add.autocompleteContact).should(
295
- 'have.value',
296
- 'Entity 11'
297
- );
298
-
299
- cy.contains(labels.add.contactGroup).click();
300
- cy.findByLabelText(labels.add.autocompleteContactGroup).should(
301
- 'have.value',
302
- ''
303
- );
304
-
305
- cy.makeSnapshot();
306
- });
307
-
308
- it('removes the contact from the list when the contact has been to the list and the corresponding button is clicked', () => {
309
- initialize({});
310
-
311
- cy.contains(labels.add.contact).click();
312
- cy.findByLabelText(labels.add.autocompleteContact).click();
313
-
314
- cy.waitForRequest('@getContacts');
315
-
316
- cy.contains('Entity 11').click();
317
-
318
- cy.findByTestId('add').click();
319
-
320
- cy.contains('Entity 11').should('be.visible');
321
-
322
- cy.contains(labels.list.added).should('be.visible');
323
-
324
- cy.findByTestId('remove-Entity 11').click();
325
-
326
- cy.contains('Entity 11').should('not.exist');
327
- cy.contains('3 Added').should('not.exist');
328
-
329
- cy.makeSnapshot();
330
- });
331
-
332
- it('resets the role to "viewer" when the "editor" role is selected and a contact with "viewer" right is selected', () => {
333
- initialize({});
334
-
335
- cy.findByLabelText(labels.add.autocompleteContact).click();
336
-
337
- cy.waitForRequest('@getContacts');
338
-
339
- cy.contains('Entity 11').click();
340
-
341
- cy.findByTestId('add_role').parent().click();
342
- cy.get('li[data-value="editor"]').click();
343
-
344
- cy.findByLabelText(labels.add.autocompleteContact).click();
345
-
346
- cy.waitForRequest('@getContacts');
347
-
348
- cy.contains('Entity 12').click();
349
-
350
- cy.findByTestId('add_role').should('have.value', 'viewer');
351
-
352
- cy.makeSnapshot();
353
- });
354
-
355
- it('calls the change function when the corresponding prop is set and the form is updated', () => {
356
- const { change } = initialize({});
357
-
358
- cy.contains(labels.add.contact).click();
359
- cy.findByLabelText(labels.add.autocompleteContact).click();
360
-
361
- cy.waitForRequest('@getContacts');
362
-
363
- cy.contains('Entity 11').click();
364
-
365
- cy.findByTestId('add').click();
366
-
367
- cy.contains('Entity 11').should('be.visible');
368
-
369
- cy.findByTestId('role-Entity 11').should('have.value', 'viewer');
370
- cy.contains(labels.list.added)
371
- .should('be.visible')
372
- .then(() => {
373
- expect(change).to.have.callCount(2);
374
- });
375
- });
376
- });
@@ -1,112 +0,0 @@
1
- import { ItemComposition } from '.';
2
- import type { Props } from './ItemComposition';
3
-
4
- const initialize = ({
5
- deleteButtonHidden,
6
- ...props
7
- }: Partial<Props> & {
8
- deleteButtonHidden?: boolean;
9
- }): unknown => {
10
- const addItem = cy.stub();
11
- const deleteItem = cy.stub();
12
-
13
- cy.mount({
14
- Component: (
15
- <ItemComposition {...props} labelAdd="Add" onAddItem={addItem}>
16
- <ItemComposition.Item
17
- deleteButtonHidden={deleteButtonHidden}
18
- labelDelete="Delete"
19
- onDeleteItem={deleteItem}
20
- >
21
- <div>Item 1</div>
22
- </ItemComposition.Item>
23
- <ItemComposition.Item
24
- deleteButtonHidden={deleteButtonHidden}
25
- labelDelete="Delete"
26
- onDeleteItem={deleteItem}
27
- >
28
- <div>Item 2</div>
29
- </ItemComposition.Item>
30
- </ItemComposition>
31
- )
32
- });
33
-
34
- return {
35
- addItem,
36
- deleteItem
37
- };
38
- };
39
-
40
- describe('ItemComposition', () => {
41
- it('displays the component', () => {
42
- initialize({});
43
-
44
- cy.contains('Item 1').should('be.visible');
45
- cy.contains('Item 2').should('be.visible');
46
- cy.findAllByTestId('Delete').should('have.length', 2);
47
- cy.findByTestId('Add').should('be.enabled');
48
-
49
- cy.makeSnapshot();
50
- });
51
-
52
- it('displays the component with a secondary label', () => {
53
- initialize({ secondaryLabel: 'Secondary label' });
54
-
55
- cy.contains('Secondary label').should('be.visible');
56
-
57
- cy.makeSnapshot();
58
- });
59
-
60
- it('displays add button as hidden when the prop is set to true', () => {
61
- initialize({ addbuttonDisabled: true });
62
-
63
- cy.findByTestId('Add').should('be.disabled');
64
-
65
- cy.makeSnapshot();
66
- });
67
-
68
- it('does not display the add button when the prop is set to true', () => {
69
- initialize({ addButtonHidden: true });
70
-
71
- cy.findByTestId('Add').should('not.exist');
72
-
73
- cy.makeSnapshot();
74
- });
75
-
76
- it('does not display the delete button when the prop is set to true', () => {
77
- initialize({ deleteButtonHidden: true });
78
-
79
- cy.findByTestId('Delete').should('not.exist');
80
-
81
- cy.makeSnapshot();
82
- });
83
-
84
- it('calls the add function when the button is clicked', () => {
85
- const { addItem } = initialize({});
86
-
87
- cy.findByTestId('Add')
88
- .click()
89
- .then(() => {
90
- expect(addItem).to.have.been.calledWith();
91
- });
92
- });
93
-
94
- it('calls the delete function when the button is clicked', () => {
95
- const { deleteItem } = initialize({});
96
-
97
- cy.findAllByTestId('Delete')
98
- .eq(1)
99
- .click()
100
- .then(() => {
101
- expect(deleteItem).to.have.been.calledWith();
102
- });
103
- });
104
-
105
- it('displays items as linked when the prop is set to true', () => {
106
- initialize({ displayItemsAsLinked: true });
107
-
108
- cy.get('[data-linked]').should('be.visible');
109
-
110
- cy.makeSnapshot();
111
- });
112
- });