-
Notifications
You must be signed in to change notification settings - Fork 355
/
tableeditable.spec.ts
217 lines (206 loc) · 11.6 KB
/
tableeditable.spec.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
describe('Table Simple Test', () => {
it('Navigate to demo section', () => {
cy.visit('http://localhost:3000/table-editable-demo-nav-link');
});
it('Verify table string', () => {
cy.get('caption').contains('Editable Table');
});
it('Check number of rows', () => {
cy.get('.pf-c-table')
.find('tr')
.should('have.length', 3);
});
it('Check number of columns', () => {
cy.get('thead')
.find('th')
.should('have.length', 6);
});
it('Check edit', () => {
cy.get(
'.pf-m-inline-editable > [data-label="Text input col 1"] > .pf-c-inline-edit__input > .pf-c-form-control'
).type('test');
cy.get(
'.pf-m-inline-editable > [data-label="Dropdown col 5"] > .pf-c-inline-edit__input > .pf-c-select > .pf-c-select__toggle > .pf-c-select__toggle-button'
).click();
cy.get(':nth-child(4) > .pf-c-check__label').click();
cy.get(
'.pf-m-inline-editable > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > :nth-child(1) > .pf-c-button'
).click();
cy.get(':nth-child(1) > [data-label="Text input col 1"] > .pf-c-inline-edit__value').should(
'have.text',
'Row 1 cell 1 contenttest'
);
cy.get(':nth-child(1) > [data-label="Dropdown col 5"] > .pf-c-inline-edit__value').should(
'have.text',
'Option 1, Option 3'
);
});
it('Check can cancel edit', () => {
cy.get(
'.pf-c-inline-edit tbody tr:nth-of-type(2) > .pf-c-table__inline-edit-action .pf-c-inline-edit__action.pf-m-enable-editable > .pf-c-button'
).click();
cy.get(
'.pf-m-inline-editable:nth-of-type(2) > [data-label="Text input col 4"] > .pf-c-inline-edit__input > .pf-c-form-control'
)
.clear()
.type('xyz');
cy.get(
'.pf-m-inline-editable:nth-of-type(2) > [data-label="Dropdown col 5"] > .pf-c-inline-edit__input > .pf-c-select > .pf-c-select__toggle > .pf-c-select__toggle-button'
).click();
cy.get('#uniqueIdRow2Cell5Option3 > .pf-c-select__menu-item').click();
cy.get(
'.pf-m-inline-editable:nth-of-type(2) > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > :nth-child(2) > .pf-c-button'
).click();
cy.get(
'.pf-c-inline-edit tbody tr:nth-of-type(2) > [data-label="Text input col 4"] .pf-c-inline-edit__value'
).should('have.text', 'Row 2 cell 4 content');
cy.get('.pf-c-inline-edit tbody tr:nth-of-type(2) > [data-label="Dropdown col 5"] .pf-c-inline-edit__value').should(
'have.text',
'Option 2'
);
});
it('Check failed validation displays error msg', () => {
cy.get(
'.pf-c-inline-edit tbody tr:nth-of-type(1) > .pf-c-table__inline-edit-action .pf-c-inline-edit__action.pf-m-enable-editable > .pf-c-button'
).click();
cy.get(
'.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 4"] > .pf-c-inline-edit__input > .pf-c-form-control'
)
.clear()
.type('foo');
cy.get(
'.pf-m-inline-editable:nth-of-type(1) > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > :nth-child(1) > .pf-c-button'
).click();
cy.get(
'.pf-c-inline-edit tbody tr:nth-of-type(1) > [data-label="Text input col 4"] .pf-c-inline-edit__input .pf-m-error'
).should('have.text', 'Value cannot be "foo", Value must be at least 7 characters');
cy.get(
'.pf-m-inline-editable:nth-of-type(1) > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > :nth-child(2) > .pf-c-button'
).click();
});
it('Check failed validation sets aria-invalid', () => {
cy.get(
'.pf-c-inline-edit tbody tr:nth-of-type(1) > .pf-c-table__inline-edit-action .pf-c-inline-edit__action.pf-m-enable-editable > .pf-c-button'
).click();
cy.get(
'.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 4"] > .pf-c-inline-edit__input > .pf-c-form-control'
)
.clear()
.type('xyz');
cy.get(
'.pf-m-inline-editable:nth-of-type(1) > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > :nth-child(1) > .pf-c-button'
).click();
cy.get(
'.pf-c-inline-edit tbody tr:nth-of-type(1) > [data-label="Text input col 4"] .pf-c-inline-edit__input .pf-c-form-control'
).should('have.attr', 'aria-invalid', 'true');
cy.get(
'.pf-m-inline-editable:nth-of-type(1) > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > :nth-child(2) > .pf-c-button'
).click();
});
it('Check errors are unique per cell', () => {
cy.get(
'.pf-c-inline-edit tbody tr:nth-of-type(1) > .pf-c-table__inline-edit-action .pf-c-inline-edit__action.pf-m-enable-editable > .pf-c-button'
).click(); // click the edit button
cy.get(
'.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 1"] > .pf-c-inline-edit__input > .pf-c-form-control'
)
.clear()
.type('foo'); // enter foo into first field
cy.get(
'.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 3"] > .pf-c-inline-edit__input > .pf-c-form-control'
).clear();
cy.get(
'.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 4"] > .pf-c-inline-edit__input > .pf-c-form-control'
)
.clear()
.type('xyz'); // enter xyz into last field
cy.get(
'.pf-m-inline-editable:nth-of-type(1) > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > :nth-child(1) > .pf-c-button'
).click(); // attempt to submit invalid entries
cy.get(
'.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 1"] > .pf-c-inline-edit__input > .pf-m-error'
).should('have.text', 'Value cannot be "foo", Value must be at least 7 characters'); // ensure first field receives relevant error texts
cy.get(
'.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 3"] > .pf-c-inline-edit__input > .pf-m-error'
).should('have.text', 'This field is required, Value must be at least 7 characters'); // ensure second field receives relevant error texts
cy.get(
'.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 4"] > .pf-c-inline-edit__input > .pf-m-error'
).should('have.text', 'Value must be at least 7 characters, Value cannot be xyz'); // ensure last field receives relevant error texts
cy.get(
'.pf-m-inline-editable:nth-of-type(1) > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > :nth-child(2) > .pf-c-button'
).click(); // cancel edit to revert row back to original state
});
it('Check relevant errors updated per cell each time row edit submission attempted', () => {
cy.get(
'.pf-c-inline-edit tbody tr:nth-of-type(1) > .pf-c-table__inline-edit-action .pf-c-inline-edit__action.pf-m-enable-editable > .pf-c-button'
).click(); // click the edit button
cy.get(
'.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 1"] > .pf-c-inline-edit__input > .pf-c-form-control'
)
.clear()
.type('foo'); // enter foo into first field
cy.get(
'.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 3"] > .pf-c-inline-edit__input > .pf-c-form-control'
).clear(); // clear the third field text
cy.get(
'.pf-m-inline-editable:nth-of-type(1) > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > :nth-child(1) > .pf-c-button'
).click(); // attempt to submit invalid entries
cy.get(
'.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 1"] > .pf-c-inline-edit__input > .pf-m-error'
).should('have.text', 'Value cannot be "foo", Value must be at least 7 characters'); // ensure first field receives relevant error texts
cy.get(
'.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 3"] > .pf-c-inline-edit__input > .pf-m-error'
).should('have.text', 'This field is required, Value must be at least 7 characters'); // ensure second field receives relevant error texts
cy.get(
'.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 1"] > .pf-c-inline-edit__input > .pf-c-form-control'
)
.clear()
.type('1234567'); // update first field to valid entry
cy.get(
'.pf-m-inline-editable:nth-of-type(1) > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > :nth-child(1) > .pf-c-button'
).click(); // attempt to submit invalid entries
cy.get(
'.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 1"] > .pf-c-inline-edit__input > .pf-c-form-control'
).should('have.attr', 'aria-invalid', 'false'); // ensure first field releases error text
cy.get(
'.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 3"] > .pf-c-inline-edit__input > .pf-m-error'
).should('have.text', 'This field is required, Value must be at least 7 characters'); // ensure third field STILL has relevant error texts
cy.get(
'.pf-m-inline-editable:nth-of-type(1) > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > :nth-child(2) > .pf-c-button'
).click(); // cancel edit to revert row back to original state
});
it('Check edit action buttons have default aria labels', () => {
cy.get(
'.pf-c-inline-edit tr:nth-of-type(1) > .pf-c-table__inline-edit-action .pf-c-inline-edit__action.pf-m-enable-editable > .pf-c-button'
).should('have.attr', 'aria-label', 'Place row 0 in edit mode'); // first row should have default aria-label for edit button
cy.get(
'.pf-c-inline-edit tr:nth-of-type(1) > .pf-c-table__inline-edit-action .pf-c-inline-edit__action.pf-m-enable-editable > .pf-c-button'
).click();
cy.get(
'.pf-c-inline-edit tr:nth-of-type(1) > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > .pf-c-inline-edit__action:first-of-type() > .pf-c-button'
).should('have.attr', 'aria-label', 'Save row edits for row 0'); // first row should have default aria-label for save button
cy.get(
'.pf-c-inline-edit tr:nth-of-type(1) > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > .pf-c-inline-edit__action:nth-of-type(2) > .pf-c-button'
).should('have.attr', 'aria-label', 'Cancel row edits for row 0'); // first row should have default aria-label for cancel button
cy.get(
'.pf-c-inline-edit tr:nth-of-type(1) > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > .pf-c-inline-edit__action:nth-of-type(2) > .pf-c-button'
).click(); // cancel edit to revert row back to original state
});
it('Check edit action buttons can have customized aria labels', () => {
cy.get(
'.pf-c-inline-edit tr:nth-of-type(2) > .pf-c-table__inline-edit-action .pf-c-inline-edit__action.pf-m-enable-editable > .pf-c-button'
).should('have.attr', 'aria-label', 'Edit row 1'); // first row should have customized aria-label for edit button
cy.get(
'.pf-c-inline-edit tr:nth-of-type(2) > .pf-c-table__inline-edit-action .pf-c-inline-edit__action.pf-m-enable-editable > .pf-c-button'
).click();
cy.get(
'.pf-c-inline-edit tr:nth-of-type(2) > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > .pf-c-inline-edit__action:first-of-type() > .pf-c-button'
).should('have.attr', 'aria-label', 'Save edits for row 1'); // first row should have customized aria-label for save button
cy.get(
'.pf-c-inline-edit tr:nth-of-type(2) > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > .pf-c-inline-edit__action:nth-of-type(2) > .pf-c-button'
).should('have.attr', 'aria-label', 'Cancel edits for row 1'); // first row should have customized aria-label for cancel button
cy.get(
'.pf-c-inline-edit tr:nth-of-type(2) > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > .pf-c-inline-edit__action:nth-of-type(2) > .pf-c-button'
).click(); // cancel edit to revert row back to original state
});
});