Skip to content

Commit 09d72ea

Browse files
adamviktoraadamviktora
authored
feat(DualListSelector): new demos and integration tests (#10829)
* feat(DualListSelector): new demos in demo app * test(DualListSelector): new integration tests
1 parent 2180d4f commit 09d72ea

File tree

8 files changed

+1217
-0
lines changed

8 files changed

+1217
-0
lines changed

‎packages/react-integration/cypress/integration/duallistselectorbasic.spec.ts‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
describe('Dual List Selector Basic Demo Test', () => {
2+
it('Navigate to demo section', () => {
3+
cy.visit('http://localhost:3000/dual-list-selector-basic-demo-nav-link');
4+
});
5+
6+
it('Verify existence', () => {
7+
cy.get('.pf-v6-c-dual-list-selector').should('exist');
8+
});
9+
10+
it('Verify default aria-labels, status, and titles', () => {
11+
cy.get('.pf-m-available .pf-v6-c-dual-list-selector__title-text').contains('Available options');
12+
cy.get('.pf-m-available .pf-v6-c-dual-list-selector__status-text').contains('0 of 4 options selected');
13+
14+
cy.get('.pf-v6-c-dual-list-selector__controls-item button').eq(1).should('have.attr', 'aria-label', 'Add all');
15+
cy.get('.pf-v6-c-dual-list-selector__controls-item button')
16+
.eq(0)
17+
.should('have.attr', 'aria-label', 'Add selected')
18+
.and('have.attr', 'disabled');
19+
cy.get('.pf-v6-c-dual-list-selector__controls-item button')
20+
.eq(3)
21+
.should('have.attr', 'aria-label', 'Remove selected')
22+
.and('have.attr', 'disabled');
23+
cy.get('.pf-v6-c-dual-list-selector__controls-item button')
24+
.eq(2)
25+
.should('have.attr', 'aria-label', 'Remove all')
26+
.and('have.attr', 'disabled');
27+
28+
cy.get('.pf-m-chosen .pf-v6-c-dual-list-selector__title-text').contains('Chosen options');
29+
cy.get('.pf-m-chosen .pf-v6-c-dual-list-selector__status-text').contains('0 of 0 options selected');
30+
});
31+
32+
it('Verify default value content', () => {
33+
cy.get('.pf-v6-c-dual-list-selector__list').first().should('have.value', '');
34+
cy.get('.pf-v6-c-dual-list-selector__list li').should('have.length', 4);
35+
});
36+
37+
it('Verify selecting options', () => {
38+
cy.get('.pf-v6-c-dual-list-selector__list-item .pf-m-selected').should('not.exist');
39+
cy.get('.pf-v6-c-dual-list-selector__list-item').eq(0).click();
40+
cy.get('.pf-v6-c-dual-list-selector__controls-item button').eq(0).and('not.have.attr', 'disabled');
41+
cy.get('.pf-v6-c-dual-list-selector__list-item .pf-m-selected').should('exist');
42+
cy.get('.pf-v6-c-dual-list-selector__list-item').eq(1).click();
43+
cy.get('.pf-m-available .pf-v6-c-dual-list-selector__status-text').contains('2 of 4 options selected');
44+
cy.get('.pf-v6-c-dual-list-selector__list-item .pf-m-selected').should('have.length', 2);
45+
cy.get('.pf-v6-c-dual-list-selector__list-item').eq(0).click();
46+
cy.get('.pf-v6-c-dual-list-selector__list-item .pf-m-selected').should('have.length', 1);
47+
cy.get('.pf-m-available .pf-v6-c-dual-list-selector__status-text').contains('1 of 4 options selected');
48+
});
49+
50+
it('Verify selecting and choosing options', () => {
51+
cy.get('.pf-v6-c-dual-list-selector__controls-item').eq(0).click();
52+
cy.get('.pf-v6-c-dual-list-selector__list').eq(0).find('li').should('have.length', 3);
53+
cy.get('.pf-v6-c-dual-list-selector__list').eq(1).find('li').should('have.length', 1);
54+
cy.get('.pf-v6-c-dual-list-selector__list-item').eq(1).click();
55+
56+
cy.get('.pf-v6-c-dual-list-selector__controls-item button').eq(1).should('not.have.attr', 'disabled');
57+
cy.get('.pf-v6-c-dual-list-selector__controls-item button').eq(0).should('not.have.attr', 'disabled');
58+
cy.get('.pf-v6-c-dual-list-selector__controls-item button').eq(3).should('have.attr', 'disabled');
59+
cy.get('.pf-v6-c-dual-list-selector__controls-item button').eq(2).should('not.have.attr', 'disabled');
60+
61+
cy.get('.pf-m-available .pf-v6-c-dual-list-selector__status-text').contains('1 of 3 options selected');
62+
cy.get('.pf-m-chosen .pf-v6-c-dual-list-selector__status-text').contains('0 of 1 options selected');
63+
64+
cy.get('.pf-v6-c-dual-list-selector__controls-item').eq(0).click();
65+
cy.get('.pf-v6-c-tooltip').should('exist');
66+
cy.get('.pf-v6-c-dual-list-selector__list').eq(0).find('li').should('have.length', 2);
67+
cy.get('.pf-v6-c-dual-list-selector__list').eq(1).find('li').should('have.length', 2);
68+
69+
cy.get('.pf-m-available .pf-v6-c-dual-list-selector__status-text').contains('0 of 2 options selected');
70+
cy.get('.pf-m-chosen .pf-v6-c-dual-list-selector__status-text').contains('0 of 2 options selected');
71+
});
72+
73+
it('Verify removing all options', () => {
74+
cy.get('.pf-v6-c-dual-list-selector__controls-item').eq(2).click();
75+
cy.get('.pf-v6-c-tooltip').should('exist');
76+
cy.get('.pf-v6-c-dual-list-selector__list').eq(0).find('li').should('have.length', 4);
77+
cy.get('.pf-v6-c-dual-list-selector__list').eq(1).find('li').should('have.length', 0);
78+
});
79+
80+
it('Verify choosing all options', () => {
81+
cy.get('.pf-v6-c-dual-list-selector__controls-item').eq(1).click();
82+
cy.get('.pf-v6-c-tooltip').should('exist');
83+
cy.get('.pf-v6-c-dual-list-selector__list').eq(0).find('li').should('have.length', 0);
84+
cy.get('.pf-v6-c-dual-list-selector__list').eq(1).find('li').should('have.length', 4);
85+
86+
cy.get('.pf-v6-c-dual-list-selector__controls-item button').eq(1).should('have.attr', 'disabled');
87+
cy.get('.pf-v6-c-dual-list-selector__controls-item button').eq(0).should('have.attr', 'disabled');
88+
cy.get('.pf-v6-c-dual-list-selector__controls-item button').eq(3).should('have.attr', 'disabled');
89+
cy.get('.pf-v6-c-dual-list-selector__controls-item button').eq(2).should('not.have.attr', 'disabled');
90+
91+
cy.get('.pf-m-available .pf-v6-c-dual-list-selector__status-text').contains('0 of 0 options selected');
92+
cy.get('.pf-m-chosen .pf-v6-c-dual-list-selector__status-text').contains('0 of 4 options selected');
93+
});
94+
95+
it('Verify removing all options', () => {
96+
cy.get('.pf-v6-c-dual-list-selector__controls-item').eq(2).click();
97+
cy.get('.pf-v6-c-dual-list-selector__list').eq(0).find('li').should('have.length', 4);
98+
cy.get('.pf-v6-c-dual-list-selector__list').eq(1).find('li').should('have.length', 0);
99+
100+
cy.get('.pf-v6-c-dual-list-selector__controls-item button').eq(1).should('not.have.attr', 'disabled');
101+
cy.get('.pf-v6-c-dual-list-selector__controls-item button').eq(0).should('have.attr', 'disabled');
102+
cy.get('.pf-v6-c-dual-list-selector__controls-item button').eq(3).should('have.attr', 'disabled');
103+
cy.get('.pf-v6-c-dual-list-selector__controls-item button').eq(2).should('have.attr', 'disabled');
104+
105+
cy.get('.pf-m-available .pf-v6-c-dual-list-selector__status-text').contains('0 of 4 options selected');
106+
cy.get('.pf-m-chosen .pf-v6-c-dual-list-selector__status-text').contains('0 of 0 options selected');
107+
});
108+
});

‎packages/react-integration/cypress/integration/duallistselectortree.spec.ts‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
describe('Dual List Selector Tree Demo Test', () => {
2+
it('Navigate to demo section', () => {
3+
cy.visit('http://localhost:3000/dual-list-selector-tree-demo-nav-link');
4+
});
5+
6+
it('Verify existence', () => {
7+
cy.get('.pf-v6-c-dual-list-selector').should('exist');
8+
});
9+
10+
it('Verify expanding options', () => {
11+
cy.get('.pf-v6-c-dual-list-selector__list').eq(0).find('li').should('have.length', 3);
12+
cy.get('.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__item-toggle').eq(0).click();
13+
cy.get('.pf-v6-c-dual-list-selector__list-item').eq(0).should('have.class', 'pf-m-expanded');
14+
cy.get('.pf-v6-c-dual-list-selector__list').eq(0).find('li').should('have.length', 6);
15+
});
16+
17+
it('Verify available search works', () => {
18+
cy.get('.pf-v6-c-dual-list-selector__list').eq(0).find('li').should('have.length', 6);
19+
cy.get('.pf-v6-c-dual-list-selector__tools-filter input').eq(0).type('bre');
20+
cy.get('.pf-v6-c-dual-list-selector__list').eq(0).find('li').should('have.length', 1);
21+
cy.get('.pf-v6-c-dual-list-selector__tools-filter input').eq(0).type('{backspace}{backspace}{backspace}');
22+
cy.get('.pf-v6-c-dual-list-selector__list').eq(0).find('li').should('have.length', 3);
23+
});
24+
25+
it('Verify checkbox selects an option', () => {
26+
cy.get('.pf-v6-c-dual-list-selector__controls-item button').eq(0).should('have.attr', 'disabled');
27+
cy.get('.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__item-check').eq(1).click();
28+
cy.get('.pf-v6-c-dual-list-selector__controls-item button').eq(0).should('not.have.attr', 'disabled');
29+
cy.get('.pf-v6-c-dual-list-selector__controls-item button').eq(0).click();
30+
cy.get('.pf-v6-c-dual-list-selector__list').eq(0).find('li').should('have.length', 2);
31+
cy.get('.pf-v6-c-dual-list-selector__list').eq(1).find('li').should('have.length', 2);
32+
});
33+
34+
xit('Verify add all filtered options works', () => {
35+
cy.get('.pf-v6-c-dual-list-selector__list').eq(0).find('li').should('have.length', 2);
36+
cy.get('.pf-v6-c-dual-list-selector__tools-filter input').eq(0).type('Fru');
37+
cy.get('.pf-v6-c-dual-list-selector__list').eq(0).find('li').should('have.length', 1);
38+
cy.get('.pf-v6-c-dual-list-selector__controls-item').eq(1).click();
39+
cy.get('.pf-v6-c-dual-list-selector__list').eq(1).find('li').should('have.length', 3);
40+
cy.get('.pf-v6-c-dual-list-selector__tools-filter input').eq(0).type('{backspace}{backspace}{backspace}');
41+
cy.get('.pf-v6-c-dual-list-selector__list').eq(0).find('li').should('have.length', 1);
42+
});
43+
44+
it('Verify chosen search works', () => {
45+
cy.get('.pf-v6-c-dual-list-selector__controls-item').eq(1).click();
46+
cy.get('.pf-v6-c-dual-list-selector__menu').eq(1).find('li').should('have.length', 4);
47+
cy.get('.pf-v6-c-dual-list-selector__tools-filter input').eq(1).type('Pro');
48+
cy.get('.pf-v6-c-dual-list-selector__item-toggle').eq(0).click();
49+
cy.get('.pf-v6-c-dual-list-selector__menu').eq(1).find('li').should('have.length', 1);
50+
});
51+
52+
xit('Verify remove all filtered options works', () => {
53+
cy.get('.pf-v6-c-dual-list-selector__list').eq(0).find('li').should('have.length', 0);
54+
cy.get('.pf-v6-c-dual-list-selector__list').eq(1).find('li').should('have.length', 1);
55+
cy.get('.pf-v6-c-dual-list-selector__controls-item').eq(2).click();
56+
cy.get('.pf-v6-c-dual-list-selector__list').eq(0).find('li').should('have.length', 1);
57+
cy.get('.pf-v6-c-dual-list-selector__list').eq(1).find('li').should('have.length', 0);
58+
cy.get('.pf-v6-c-dual-list-selector__tools-filter input').eq(1).type('{backspace}{backspace}{backspace}');
59+
cy.get('.pf-v6-c-dual-list-selector__list').eq(1).find('li').should('have.length', 3);
60+
cy.get('.pf-v6-c-dual-list-selector__controls-item').eq(2).click();
61+
cy.get('.pf-v6-c-dual-list-selector__list').eq(0).find('li').should('have.length', 4);
62+
cy.get('.pf-v6-c-dual-list-selector__list').eq(1).find('li').should('have.length', 0);
63+
});
64+
});

‎packages/react-integration/cypress/integration/duallistselectorwithactions.spec.ts‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
describe('Dual List Selector deprecated With Actions Demo Test', () => {
2+
it('Navigate to demo section', () => {
3+
cy.visit('http://localhost:3000/dual-list-selector-with-actions-demo-nav-link');
4+
});
5+
6+
it('Verify existence', () => {
7+
cy.get('.pf-v6-c-dual-list-selector').should('exist');
8+
});
9+
10+
it('Verify default value content', () => {
11+
cy.get('.pf-v6-c-dual-list-selector__list').first().should('have.value', '');
12+
cy.get('.pf-v6-c-dual-list-selector__list li').should('have.length', 4);
13+
});
14+
15+
it('Verify custom aria-labels, status, and titles', () => {
16+
cy.get('.pf-m-available .pf-v6-c-dual-list-selector__title-text').contains('Available options');
17+
cy.get('.pf-m-available .pf-v6-c-dual-list-selector__status-text').contains('0 of 4 options selected');
18+
cy.get('.pf-m-available .pf-v6-c-dual-list-selector__tools-filter input').should(
19+
'have.attr',
20+
'aria-label',
21+
'Search input'
22+
);
23+
cy.get('.pf-m-available .pf-v6-c-dual-list-selector__list').should('have.attr', 'aria-labelledby');
24+
25+
cy.get('.pf-v6-c-dual-list-selector__controls-item button').eq(1).should('have.attr', 'aria-label', 'Add all');
26+
cy.get('.pf-v6-c-dual-list-selector__controls-item button')
27+
.eq(0)
28+
.should('have.attr', 'aria-label', 'Add selected')
29+
.and('have.attr', 'disabled');
30+
cy.get('.pf-v6-c-dual-list-selector__controls-item button')
31+
.eq(3)
32+
.should('have.attr', 'aria-label', 'Remove selected')
33+
.and('have.attr', 'disabled');
34+
cy.get('.pf-v6-c-dual-list-selector__controls-item button')
35+
.eq(2)
36+
.should('have.attr', 'aria-label', 'Remove all')
37+
.and('have.attr', 'disabled');
38+
39+
cy.get('.pf-m-chosen .pf-v6-c-dual-list-selector__title-text').contains('Chosen options');
40+
cy.get('.pf-m-chosen .pf-v6-c-dual-list-selector__status-text').contains('0 of 0 options selected');
41+
cy.get('.pf-m-chosen .pf-v6-c-dual-list-selector__tools-filter input').should(
42+
'have.attr',
43+
'aria-label',
44+
'Search input'
45+
);
46+
});
47+
48+
it('Verify selecting options', () => {
49+
cy.get('.pf-v6-c-dual-list-selector__list-item .pf-m-selected').should('not.exist');
50+
cy.get('.pf-v6-c-dual-list-selector__list-item').eq(0).click();
51+
cy.get('.pf-v6-c-dual-list-selector__list-item .pf-m-selected').should('exist');
52+
cy.get('.pf-v6-c-dual-list-selector__list-item').eq(1).click();
53+
cy.get('.pf-v6-c-dual-list-selector__list-item .pf-m-selected').should('have.length', 2);
54+
cy.get('.pf-v6-c-dual-list-selector__list-item').eq(0).click();
55+
cy.get('.pf-v6-c-dual-list-selector__list-item .pf-m-selected').should('have.length', 1);
56+
});
57+
58+
it('Verify selecting and choosing options', () => {
59+
cy.get('.pf-v6-c-dual-list-selector__controls-item').eq(0).click();
60+
cy.get('.pf-v6-c-dual-list-selector__list').eq(0).find('li').should('have.length', 3);
61+
cy.get('.pf-v6-c-dual-list-selector__list').eq(1).find('li').should('have.length', 1);
62+
cy.get('.pf-v6-c-dual-list-selector__list-item').eq(1).click();
63+
cy.get('.pf-v6-c-dual-list-selector__controls-item').eq(0).click();
64+
65+
cy.get('.pf-m-available .pf-v6-c-dual-list-selector__status-text').contains('0 of 2 options selected');
66+
cy.get('.pf-m-chosen .pf-v6-c-dual-list-selector__status-text').contains('0 of 2 options selected');
67+
68+
cy.get('.pf-v6-c-dual-list-selector__list').eq(0).find('li').should('have.length', 2);
69+
cy.get('.pf-v6-c-dual-list-selector__list').eq(1).find('li').should('have.length', 2);
70+
71+
cy.get('.pf-v6-c-dual-list-selector__list-item').eq(0).click();
72+
cy.get('.pf-m-available .pf-v6-c-dual-list-selector__status-text').contains('1 of 2 options selected');
73+
cy.get('.pf-v6-c-dual-list-selector__list-item').eq(0).click();
74+
});
75+
76+
it('Verify removing all options', () => {
77+
cy.get('.pf-v6-c-dual-list-selector__controls-item').eq(2).click();
78+
cy.get('.pf-v6-c-dual-list-selector__menu').eq(0).find('li').should('have.length', 4);
79+
cy.get('.pf-v6-c-dual-list-selector__menu').eq(1).find('li').should('have.length', 0);
80+
cy.get('.pf-m-available .pf-v6-c-dual-list-selector__status-text').contains('0 of 4 options selected');
81+
cy.get('.pf-m-chosen .pf-v6-c-dual-list-selector__status-text').contains('0 of 0 options selected');
82+
});
83+
84+
it('Verify choosing all options', () => {
85+
cy.get('.pf-v6-c-dual-list-selector__controls-item').eq(1).click();
86+
cy.get('.pf-v6-c-dual-list-selector__menu').eq(0).find('li').should('have.length', 0);
87+
cy.get('.pf-v6-c-dual-list-selector__menu').eq(1).find('li').should('have.length', 4);
88+
cy.get('.pf-m-available .pf-v6-c-dual-list-selector__status-text').contains('0 of 0 options selected');
89+
cy.get('.pf-m-chosen .pf-v6-c-dual-list-selector__status-text').contains('0 of 4 options selected');
90+
});
91+
92+
it('Verify sort works', () => {
93+
cy.get('.pf-m-chosen .pf-v6-c-dual-list-selector__list-item').last().contains('Option 4');
94+
cy.get('.pf-m-chosen .pf-v6-c-dual-list-selector__tools-actions button').first().click();
95+
cy.get('.pf-m-chosen .pf-v6-c-dual-list-selector__list-item').last().contains('Option 1');
96+
cy.get('.pf-m-chosen .pf-v6-c-dual-list-selector__list-item').first().contains('Option 4');
97+
98+
cy.get('.pf-m-chosen .pf-v6-c-dual-list-selector__tools-actions button').first().click();
99+
cy.get('.pf-m-chosen .pf-v6-c-dual-list-selector__list-item').last().contains('Option 4');
100+
cy.get('.pf-m-chosen .pf-v6-c-dual-list-selector__list-item').first().contains('Option 1');
101+
});
102+
103+
it('Verify chosen search works', () => {
104+
cy.get('.pf-v6-c-dual-list-selector__list').eq(1).find('li').should('have.length', 4);
105+
cy.get('.pf-v6-c-dual-list-selector__tools-filter input').eq(1).type('Option 1');
106+
cy.get('.pf-v6-c-dual-list-selector__list').eq(1).find('li').should('have.length', 1);
107+
});
108+
109+
it('Verify removing all options', () => {
110+
cy.get('.pf-v6-c-dual-list-selector__tools-filter input')
111+
.eq(1)
112+
.type('{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}');
113+
cy.get('.pf-v6-c-dual-list-selector__controls-item').eq(2).click();
114+
cy.get('.pf-v6-c-dual-list-selector__menu').eq(0).find('li').should('have.length', 4);
115+
cy.get('.pf-v6-c-dual-list-selector__menu').eq(1).find('li').should('have.length', 0);
116+
});
117+
118+
it('Verify available search works', () => {
119+
cy.get('.pf-v6-c-dual-list-selector__list').eq(0).find('li').should('have.length', 4);
120+
cy.get('.pf-v6-c-dual-list-selector__tools-filter input').eq(0).type('Option 3');
121+
cy.get('.pf-v6-c-dual-list-selector__list').eq(0).find('li').should('have.length', 1);
122+
});
123+
124+
it('Verify adding all filtered options', () => {
125+
cy.get('.pf-v6-c-dual-list-selector__list').eq(0).find('li').should('have.length', 1);
126+
cy.get('.pf-v6-c-dual-list-selector__controls-item').eq(1).click();
127+
cy.get('.pf-v6-c-dual-list-selector__list').eq(0).find('li').should('have.length', 0);
128+
cy.get('.pf-v6-c-dual-list-selector__list').eq(1).find('li').should('have.length', 1);
129+
cy.get('.pf-v6-c-dual-list-selector__tools-filter input')
130+
.eq(0)
131+
.type('{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}');
132+
cy.get('.pf-v6-c-dual-list-selector__list').eq(0).find('li').should('have.length', 3);
133+
});
134+
});

‎packages/react-integration/demo-app-ts/src/Demos.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,21 @@ export const Demos: DemoInterface[] = [
142142
name: 'Dropdown Demo',
143143
componentType: Examples.DropdownDemo
144144
},
145+
{
146+
id: 'dual-list-selector-basic-demo',
147+
name: 'DualListSelector basic Demo',
148+
componentType: Examples.DualListSelectorBasicDemo
149+
},
150+
{
151+
id: 'dual-list-selector-tree-demo',
152+
name: 'DualListSelector Tree Demo',
153+
componentType: Examples.DualListSelectorTreeDemo
154+
},
155+
{
156+
id: 'dual-list-selector-with-actions-demo',
157+
name: 'DualListSelector with actions Demo',
158+
componentType: Examples.DualListSelectorWithActionsDemo
159+
},
145160
{
146161
id: 'dual-list-selector-deprecated-basic-demo',
147162
name: 'DualListSelector deprecated basic Demo',

0 commit comments

Comments
 (0)