Skip to content

feat(DualListSelector): new demos and integration tests #10829

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tlabaj merged 2 commits into from
Sep 12, 2024
Merged

feat(DualListSelector): new demos and integration tests #10829

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
eb28eee
feat(DualListSelector): new demos in demo app
adamviktora Aug 1, 2024
3c810f6
test(DualListSelector): new integration tests
adamviktora Aug 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
108 changes: 108 additions & 0 deletions packages/react-integration/cypress/integration/duallistselectorbasic.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
describe('Dual List Selector Basic Demo Test', () => {
it('Navigate to demo section', () => {
cy.visit('http://localhost:3000/dual-list-selector-basic-demo-nav-link');
});

it('Verify existence', () => {
cy.get('.pf-v6-c-dual-list-selector').should('exist');
});

it('Verify default aria-labels, status, and titles', () => {
cy.get('.pf-m-available .pf-v6-c-dual-list-selector__title-text').contains('Available options');
cy.get('.pf-m-available .pf-v6-c-dual-list-selector__status-text').contains('0 of 4 options selected');

cy.get('.pf-v6-c-dual-list-selector__controls-item button').eq(1).should('have.attr', 'aria-label', 'Add all');
cy.get('.pf-v6-c-dual-list-selector__controls-item button')
.eq(0)
.should('have.attr', 'aria-label', 'Add selected')
.and('have.attr', 'disabled');
cy.get('.pf-v6-c-dual-list-selector__controls-item button')
.eq(3)
.should('have.attr', 'aria-label', 'Remove selected')
.and('have.attr', 'disabled');
cy.get('.pf-v6-c-dual-list-selector__controls-item button')
.eq(2)
.should('have.attr', 'aria-label', 'Remove all')
.and('have.attr', 'disabled');

cy.get('.pf-m-chosen .pf-v6-c-dual-list-selector__title-text').contains('Chosen options');
cy.get('.pf-m-chosen .pf-v6-c-dual-list-selector__status-text').contains('0 of 0 options selected');
});

it('Verify default value content', () => {
cy.get('.pf-v6-c-dual-list-selector__list').first().should('have.value', '');
cy.get('.pf-v6-c-dual-list-selector__list li').should('have.length', 4);
});

it('Verify selecting options', () => {
cy.get('.pf-v6-c-dual-list-selector__list-item .pf-m-selected').should('not.exist');
cy.get('.pf-v6-c-dual-list-selector__list-item').eq(0).click();
cy.get('.pf-v6-c-dual-list-selector__controls-item button').eq(0).and('not.have.attr', 'disabled');
cy.get('.pf-v6-c-dual-list-selector__list-item .pf-m-selected').should('exist');
cy.get('.pf-v6-c-dual-list-selector__list-item').eq(1).click();
cy.get('.pf-m-available .pf-v6-c-dual-list-selector__status-text').contains('2 of 4 options selected');
cy.get('.pf-v6-c-dual-list-selector__list-item .pf-m-selected').should('have.length', 2);
cy.get('.pf-v6-c-dual-list-selector__list-item').eq(0).click();
cy.get('.pf-v6-c-dual-list-selector__list-item .pf-m-selected').should('have.length', 1);
cy.get('.pf-m-available .pf-v6-c-dual-list-selector__status-text').contains('1 of 4 options selected');
});

it('Verify selecting and choosing options', () => {
cy.get('.pf-v6-c-dual-list-selector__controls-item').eq(0).click();
cy.get('.pf-v6-c-dual-list-selector__list').eq(0).find('li').should('have.length', 3);
cy.get('.pf-v6-c-dual-list-selector__list').eq(1).find('li').should('have.length', 1);
cy.get('.pf-v6-c-dual-list-selector__list-item').eq(1).click();

cy.get('.pf-v6-c-dual-list-selector__controls-item button').eq(1).should('not.have.attr', 'disabled');
cy.get('.pf-v6-c-dual-list-selector__controls-item button').eq(0).should('not.have.attr', 'disabled');
cy.get('.pf-v6-c-dual-list-selector__controls-item button').eq(3).should('have.attr', 'disabled');
cy.get('.pf-v6-c-dual-list-selector__controls-item button').eq(2).should('not.have.attr', 'disabled');

cy.get('.pf-m-available .pf-v6-c-dual-list-selector__status-text').contains('1 of 3 options selected');
cy.get('.pf-m-chosen .pf-v6-c-dual-list-selector__status-text').contains('0 of 1 options selected');

cy.get('.pf-v6-c-dual-list-selector__controls-item').eq(0).click();
cy.get('.pf-v6-c-tooltip').should('exist');
cy.get('.pf-v6-c-dual-list-selector__list').eq(0).find('li').should('have.length', 2);
cy.get('.pf-v6-c-dual-list-selector__list').eq(1).find('li').should('have.length', 2);

cy.get('.pf-m-available .pf-v6-c-dual-list-selector__status-text').contains('0 of 2 options selected');
cy.get('.pf-m-chosen .pf-v6-c-dual-list-selector__status-text').contains('0 of 2 options selected');
});

it('Verify removing all options', () => {
cy.get('.pf-v6-c-dual-list-selector__controls-item').eq(2).click();
cy.get('.pf-v6-c-tooltip').should('exist');
cy.get('.pf-v6-c-dual-list-selector__list').eq(0).find('li').should('have.length', 4);
cy.get('.pf-v6-c-dual-list-selector__list').eq(1).find('li').should('have.length', 0);
});

it('Verify choosing all options', () => {
cy.get('.pf-v6-c-dual-list-selector__controls-item').eq(1).click();
cy.get('.pf-v6-c-tooltip').should('exist');
cy.get('.pf-v6-c-dual-list-selector__list').eq(0).find('li').should('have.length', 0);
cy.get('.pf-v6-c-dual-list-selector__list').eq(1).find('li').should('have.length', 4);

cy.get('.pf-v6-c-dual-list-selector__controls-item button').eq(1).should('have.attr', 'disabled');
cy.get('.pf-v6-c-dual-list-selector__controls-item button').eq(0).should('have.attr', 'disabled');
cy.get('.pf-v6-c-dual-list-selector__controls-item button').eq(3).should('have.attr', 'disabled');
cy.get('.pf-v6-c-dual-list-selector__controls-item button').eq(2).should('not.have.attr', 'disabled');

cy.get('.pf-m-available .pf-v6-c-dual-list-selector__status-text').contains('0 of 0 options selected');
cy.get('.pf-m-chosen .pf-v6-c-dual-list-selector__status-text').contains('0 of 4 options selected');
});

it('Verify removing all options', () => {
cy.get('.pf-v6-c-dual-list-selector__controls-item').eq(2).click();
cy.get('.pf-v6-c-dual-list-selector__list').eq(0).find('li').should('have.length', 4);
cy.get('.pf-v6-c-dual-list-selector__list').eq(1).find('li').should('have.length', 0);

cy.get('.pf-v6-c-dual-list-selector__controls-item button').eq(1).should('not.have.attr', 'disabled');
cy.get('.pf-v6-c-dual-list-selector__controls-item button').eq(0).should('have.attr', 'disabled');
cy.get('.pf-v6-c-dual-list-selector__controls-item button').eq(3).should('have.attr', 'disabled');
cy.get('.pf-v6-c-dual-list-selector__controls-item button').eq(2).should('have.attr', 'disabled');

cy.get('.pf-m-available .pf-v6-c-dual-list-selector__status-text').contains('0 of 4 options selected');
cy.get('.pf-m-chosen .pf-v6-c-dual-list-selector__status-text').contains('0 of 0 options selected');
});
});
64 changes: 64 additions & 0 deletions packages/react-integration/cypress/integration/duallistselectortree.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
describe('Dual List Selector Tree Demo Test', () => {
it('Navigate to demo section', () => {
cy.visit('http://localhost:3000/dual-list-selector-tree-demo-nav-link');
});

it('Verify existence', () => {
cy.get('.pf-v6-c-dual-list-selector').should('exist');
});

it('Verify expanding options', () => {
cy.get('.pf-v6-c-dual-list-selector__list').eq(0).find('li').should('have.length', 3);
cy.get('.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__item-toggle').eq(0).click();
cy.get('.pf-v6-c-dual-list-selector__list-item').eq(0).should('have.class', 'pf-m-expanded');
cy.get('.pf-v6-c-dual-list-selector__list').eq(0).find('li').should('have.length', 6);
});

it('Verify available search works', () => {
cy.get('.pf-v6-c-dual-list-selector__list').eq(0).find('li').should('have.length', 6);
cy.get('.pf-v6-c-dual-list-selector__tools-filter input').eq(0).type('bre');
cy.get('.pf-v6-c-dual-list-selector__list').eq(0).find('li').should('have.length', 1);
cy.get('.pf-v6-c-dual-list-selector__tools-filter input').eq(0).type('{backspace}{backspace}{backspace}');
cy.get('.pf-v6-c-dual-list-selector__list').eq(0).find('li').should('have.length', 3);
});

it('Verify checkbox selects an option', () => {
cy.get('.pf-v6-c-dual-list-selector__controls-item button').eq(0).should('have.attr', 'disabled');
cy.get('.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__item-check').eq(1).click();
cy.get('.pf-v6-c-dual-list-selector__controls-item button').eq(0).should('not.have.attr', 'disabled');
cy.get('.pf-v6-c-dual-list-selector__controls-item button').eq(0).click();
cy.get('.pf-v6-c-dual-list-selector__list').eq(0).find('li').should('have.length', 2);
cy.get('.pf-v6-c-dual-list-selector__list').eq(1).find('li').should('have.length', 2);
});

xit('Verify add all filtered options works', () => {
cy.get('.pf-v6-c-dual-list-selector__list').eq(0).find('li').should('have.length', 2);
cy.get('.pf-v6-c-dual-list-selector__tools-filter input').eq(0).type('Fru');
cy.get('.pf-v6-c-dual-list-selector__list').eq(0).find('li').should('have.length', 1);
cy.get('.pf-v6-c-dual-list-selector__controls-item').eq(1).click();
cy.get('.pf-v6-c-dual-list-selector__list').eq(1).find('li').should('have.length', 3);
cy.get('.pf-v6-c-dual-list-selector__tools-filter input').eq(0).type('{backspace}{backspace}{backspace}');
cy.get('.pf-v6-c-dual-list-selector__list').eq(0).find('li').should('have.length', 1);
});

it('Verify chosen search works', () => {
cy.get('.pf-v6-c-dual-list-selector__controls-item').eq(1).click();
cy.get('.pf-v6-c-dual-list-selector__menu').eq(1).find('li').should('have.length', 4);
cy.get('.pf-v6-c-dual-list-selector__tools-filter input').eq(1).type('Pro');
cy.get('.pf-v6-c-dual-list-selector__item-toggle').eq(0).click();
cy.get('.pf-v6-c-dual-list-selector__menu').eq(1).find('li').should('have.length', 1);
});

xit('Verify remove all filtered options works', () => {
cy.get('.pf-v6-c-dual-list-selector__list').eq(0).find('li').should('have.length', 0);
cy.get('.pf-v6-c-dual-list-selector__list').eq(1).find('li').should('have.length', 1);
cy.get('.pf-v6-c-dual-list-selector__controls-item').eq(2).click();
cy.get('.pf-v6-c-dual-list-selector__list').eq(0).find('li').should('have.length', 1);
cy.get('.pf-v6-c-dual-list-selector__list').eq(1).find('li').should('have.length', 0);
cy.get('.pf-v6-c-dual-list-selector__tools-filter input').eq(1).type('{backspace}{backspace}{backspace}');
cy.get('.pf-v6-c-dual-list-selector__list').eq(1).find('li').should('have.length', 3);
cy.get('.pf-v6-c-dual-list-selector__controls-item').eq(2).click();
cy.get('.pf-v6-c-dual-list-selector__list').eq(0).find('li').should('have.length', 4);
cy.get('.pf-v6-c-dual-list-selector__list').eq(1).find('li').should('have.length', 0);
});
});
134 changes: 134 additions & 0 deletions packages/react-integration/cypress/integration/duallistselectorwithactions.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
describe('Dual List Selector deprecated With Actions Demo Test', () => {
it('Navigate to demo section', () => {
cy.visit('http://localhost:3000/dual-list-selector-with-actions-demo-nav-link');
});

it('Verify existence', () => {
cy.get('.pf-v6-c-dual-list-selector').should('exist');
});

it('Verify default value content', () => {
cy.get('.pf-v6-c-dual-list-selector__list').first().should('have.value', '');
cy.get('.pf-v6-c-dual-list-selector__list li').should('have.length', 4);
});

it('Verify custom aria-labels, status, and titles', () => {
cy.get('.pf-m-available .pf-v6-c-dual-list-selector__title-text').contains('Available options');
cy.get('.pf-m-available .pf-v6-c-dual-list-selector__status-text').contains('0 of 4 options selected');
cy.get('.pf-m-available .pf-v6-c-dual-list-selector__tools-filter input').should(
'have.attr',
'aria-label',
'Search input'
);
cy.get('.pf-m-available .pf-v6-c-dual-list-selector__list').should('have.attr', 'aria-labelledby');

cy.get('.pf-v6-c-dual-list-selector__controls-item button').eq(1).should('have.attr', 'aria-label', 'Add all');
cy.get('.pf-v6-c-dual-list-selector__controls-item button')
.eq(0)
.should('have.attr', 'aria-label', 'Add selected')
.and('have.attr', 'disabled');
cy.get('.pf-v6-c-dual-list-selector__controls-item button')
.eq(3)
.should('have.attr', 'aria-label', 'Remove selected')
.and('have.attr', 'disabled');
cy.get('.pf-v6-c-dual-list-selector__controls-item button')
.eq(2)
.should('have.attr', 'aria-label', 'Remove all')
.and('have.attr', 'disabled');

cy.get('.pf-m-chosen .pf-v6-c-dual-list-selector__title-text').contains('Chosen options');
cy.get('.pf-m-chosen .pf-v6-c-dual-list-selector__status-text').contains('0 of 0 options selected');
cy.get('.pf-m-chosen .pf-v6-c-dual-list-selector__tools-filter input').should(
'have.attr',
'aria-label',
'Search input'
);
});

it('Verify selecting options', () => {
cy.get('.pf-v6-c-dual-list-selector__list-item .pf-m-selected').should('not.exist');
cy.get('.pf-v6-c-dual-list-selector__list-item').eq(0).click();
cy.get('.pf-v6-c-dual-list-selector__list-item .pf-m-selected').should('exist');
cy.get('.pf-v6-c-dual-list-selector__list-item').eq(1).click();
cy.get('.pf-v6-c-dual-list-selector__list-item .pf-m-selected').should('have.length', 2);
cy.get('.pf-v6-c-dual-list-selector__list-item').eq(0).click();
cy.get('.pf-v6-c-dual-list-selector__list-item .pf-m-selected').should('have.length', 1);
});

it('Verify selecting and choosing options', () => {
cy.get('.pf-v6-c-dual-list-selector__controls-item').eq(0).click();
cy.get('.pf-v6-c-dual-list-selector__list').eq(0).find('li').should('have.length', 3);
cy.get('.pf-v6-c-dual-list-selector__list').eq(1).find('li').should('have.length', 1);
cy.get('.pf-v6-c-dual-list-selector__list-item').eq(1).click();
cy.get('.pf-v6-c-dual-list-selector__controls-item').eq(0).click();

cy.get('.pf-m-available .pf-v6-c-dual-list-selector__status-text').contains('0 of 2 options selected');
cy.get('.pf-m-chosen .pf-v6-c-dual-list-selector__status-text').contains('0 of 2 options selected');

cy.get('.pf-v6-c-dual-list-selector__list').eq(0).find('li').should('have.length', 2);
cy.get('.pf-v6-c-dual-list-selector__list').eq(1).find('li').should('have.length', 2);

cy.get('.pf-v6-c-dual-list-selector__list-item').eq(0).click();
cy.get('.pf-m-available .pf-v6-c-dual-list-selector__status-text').contains('1 of 2 options selected');
cy.get('.pf-v6-c-dual-list-selector__list-item').eq(0).click();
});

it('Verify removing all options', () => {
cy.get('.pf-v6-c-dual-list-selector__controls-item').eq(2).click();
cy.get('.pf-v6-c-dual-list-selector__menu').eq(0).find('li').should('have.length', 4);
cy.get('.pf-v6-c-dual-list-selector__menu').eq(1).find('li').should('have.length', 0);
cy.get('.pf-m-available .pf-v6-c-dual-list-selector__status-text').contains('0 of 4 options selected');
cy.get('.pf-m-chosen .pf-v6-c-dual-list-selector__status-text').contains('0 of 0 options selected');
});

it('Verify choosing all options', () => {
cy.get('.pf-v6-c-dual-list-selector__controls-item').eq(1).click();
cy.get('.pf-v6-c-dual-list-selector__menu').eq(0).find('li').should('have.length', 0);
cy.get('.pf-v6-c-dual-list-selector__menu').eq(1).find('li').should('have.length', 4);
cy.get('.pf-m-available .pf-v6-c-dual-list-selector__status-text').contains('0 of 0 options selected');
cy.get('.pf-m-chosen .pf-v6-c-dual-list-selector__status-text').contains('0 of 4 options selected');
});

it('Verify sort works', () => {
cy.get('.pf-m-chosen .pf-v6-c-dual-list-selector__list-item').last().contains('Option 4');
cy.get('.pf-m-chosen .pf-v6-c-dual-list-selector__tools-actions button').first().click();
cy.get('.pf-m-chosen .pf-v6-c-dual-list-selector__list-item').last().contains('Option 1');
cy.get('.pf-m-chosen .pf-v6-c-dual-list-selector__list-item').first().contains('Option 4');

cy.get('.pf-m-chosen .pf-v6-c-dual-list-selector__tools-actions button').first().click();
cy.get('.pf-m-chosen .pf-v6-c-dual-list-selector__list-item').last().contains('Option 4');
cy.get('.pf-m-chosen .pf-v6-c-dual-list-selector__list-item').first().contains('Option 1');
});

it('Verify chosen search works', () => {
cy.get('.pf-v6-c-dual-list-selector__list').eq(1).find('li').should('have.length', 4);
cy.get('.pf-v6-c-dual-list-selector__tools-filter input').eq(1).type('Option 1');
cy.get('.pf-v6-c-dual-list-selector__list').eq(1).find('li').should('have.length', 1);
});

it('Verify removing all options', () => {
cy.get('.pf-v6-c-dual-list-selector__tools-filter input')
.eq(1)
.type('{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}');
cy.get('.pf-v6-c-dual-list-selector__controls-item').eq(2).click();
cy.get('.pf-v6-c-dual-list-selector__menu').eq(0).find('li').should('have.length', 4);
cy.get('.pf-v6-c-dual-list-selector__menu').eq(1).find('li').should('have.length', 0);
});

it('Verify available search works', () => {
cy.get('.pf-v6-c-dual-list-selector__list').eq(0).find('li').should('have.length', 4);
cy.get('.pf-v6-c-dual-list-selector__tools-filter input').eq(0).type('Option 3');
cy.get('.pf-v6-c-dual-list-selector__list').eq(0).find('li').should('have.length', 1);
});

it('Verify adding all filtered options', () => {
cy.get('.pf-v6-c-dual-list-selector__list').eq(0).find('li').should('have.length', 1);
cy.get('.pf-v6-c-dual-list-selector__controls-item').eq(1).click();
cy.get('.pf-v6-c-dual-list-selector__list').eq(0).find('li').should('have.length', 0);
cy.get('.pf-v6-c-dual-list-selector__list').eq(1).find('li').should('have.length', 1);
cy.get('.pf-v6-c-dual-list-selector__tools-filter input')
.eq(0)
.type('{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}');
cy.get('.pf-v6-c-dual-list-selector__list').eq(0).find('li').should('have.length', 3);
});
});
15 changes: 15 additions & 0 deletions packages/react-integration/demo-app-ts/src/Demos.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,21 @@ export const Demos: DemoInterface[] = [
name: 'Dropdown Demo',
componentType: Examples.DropdownDemo
},
{
id: 'dual-list-selector-basic-demo',
name: 'DualListSelector basic Demo',
componentType: Examples.DualListSelectorBasicDemo
},
{
id: 'dual-list-selector-tree-demo',
name: 'DualListSelector Tree Demo',
componentType: Examples.DualListSelectorTreeDemo
},
{
id: 'dual-list-selector-with-actions-demo',
name: 'DualListSelector with actions Demo',
componentType: Examples.DualListSelectorWithActionsDemo
},
{
id: 'dual-list-selector-deprecated-basic-demo',
name: 'DualListSelector deprecated basic Demo',
Expand Down
Loading