Skip to content

Commit

Permalink
Merge branch 'main' into 12520-table-batch-actions-type
Browse files Browse the repository at this point in the history
  • Loading branch information
@andreancardona
andreancardona authored Aug 7, 2023
2 parents ac5e558 + 379ea23 commit a3cb9c5
Show file tree
Hide file tree
Showing 41 changed files with 822 additions and 231 deletions.
13 changes: 6 additions & 7 deletions .github/workflows/deploy-packages.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,13 +112,12 @@ jobs:
registry-url: 'https://registry.npmjs.org'
- name: Update dependencies
run: |
yarn upgrade \
@carbon/elements@next \
@carbon/grid@next \
@carbon/themes@next \
@carbon/pictograms-react@next \
@carbon/icons-react@next \
@carbon/react@next
yarn workspace gatsby-theme-carbon up \
@carbon/elements \
@carbon/grid \
@carbon/themes \
@carbon/pictograms-react \
@carbon/react
- name: Generate token
uses: tibdex/github-app-token@v1
id: generate_token
Expand Down
Binary file removed .yarn/cache/@playwright-test-npm-1.28.0-20a17c7d04-5b90a4fd7a.zip
View file
Binary file not shown.
Binary file added .yarn/cache/@playwright-test-npm-1.36.2-0b5c09b329-659304e0bb.zip
View file
Binary file not shown.
Binary file removed .yarn/cache/playwright-core-npm-1.28.0-9bd034478b-4bd13bf83b.zip
View file
Binary file not shown.
Binary file added .yarn/cache/playwright-core-npm-1.36.2-37b679cd9b-2193ce802e.zip
View file
Binary file not shown.
371 changes: 371 additions & 0 deletions e2e/components/DataTable/DataTable-test.avt.e2e.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,371 @@
/**
* Copyright IBM Corp. 2016, 2023
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/

'use strict';

const { expect, test } = require('@playwright/test');
const { visitStory } = require('../../test-utils/storybook');

test.describe('DataTable @avt', () => {
test.describe('basic', () => {
test('default has no accessibility-checker violations', async ({
page,
}) => {
await visitStory(page, {
component: 'DataTable',
id: 'components-datatable-basic--default',
globals: {
theme: 'white',
},
});
await expect(page).toHaveNoACViolations(
'components-datatable-basic--default'
);
});
test('xl with two lines has no accessibility-checker violations', async ({
page,
}) => {
await visitStory(page, {
component: 'DataTable',
id: 'components-datatable-basic--xl-with-two-lines',
globals: {
theme: 'white',
},
});
await expect(page).toHaveNoACViolations(
'components-datatable-basic--xl-with-two-lines'
);
});
});

test.describe('batch actions', () => {
test('default has no accessibility-checker violations', async ({
page,
}) => {
await visitStory(page, {
component: 'DataTable',
id: 'components-datatable-batch-actions--default',
globals: {
theme: 'white',
},
});
await expect(page).toHaveNoACViolations(
'components-datatable-batch-actions--default'
);
});
});

test.describe('dynamic', () => {
test('default has no accessibility-checker violations', async ({
page,
}) => {
await visitStory(page, {
component: 'DataTable',
id: 'components-datatable-dynamic--default',
globals: {
theme: 'white',
},
});
await expect(page).toHaveNoACViolations(
'components-datatable-dynamic--default'
);
});

test('default keyboard navigation sequence', async ({ page }) => {
await visitStory(page, {
component: 'DataTable',
id: 'components-datatable-dynamic--default',
globals: {
theme: 'white',
},
});

await expect(page).toHaveNoACViolations(
'components-datatable-dynamic--default'
);

// Start off by manually focusing the search input
await page.getByRole('searchbox').focus();
await expect(page.getByRole('searchbox')).toBeFocused();

// Navigate to the gear/settings button
await page.keyboard.press('Tab');
await expect(
page.getByRole('button', { name: 'Settings' })
).toBeFocused();

// Navigate to the select all checkbox
await page.keyboard.press('Tab');
await expect(
page.getByRole('checkbox', { name: 'Select all rows' })
).toBeFocused();

// Pressing enter on the select all checkbox shouldn't do anything
await page.keyboard.press('Enter');
await expect(
page.getByRole('checkbox', { name: 'Select all rows' })
).not.toBeChecked();

// Pressing space should check the select all checkbox
await page.keyboard.press('Space');
await expect(
page.getByRole('checkbox', { name: 'Select all rows' })
).toBeChecked();

// Every checkbox should be checked
for (const checkbox of await page.getByRole('checkbox').all()) {
await expect(checkbox).toBeChecked();
}

// Pressing space should uncheck the select all checkbox
await page.keyboard.press('Space');
await expect(
page.getByRole('checkbox', { name: 'Select all rows' })
).not.toBeChecked();
// Every checkbox should no longer be checked
for (const checkbox of await page.getByRole('checkbox').all()) {
await expect(checkbox).not.toBeChecked();
}

// Navigate to the first expansion button
await page.keyboard.press('Tab');
await expect(
page.getByRole('button', { name: 'Expand current row' }).first()
).toBeFocused();
// Expand the first row
await page.keyboard.press('Space');
await expect(
page.getByRole('heading', { name: 'Expandable row content' }).first()
).toBeVisible();

// Navigate to the first row selection checkbox and check it
await page.keyboard.press('Tab');
await page.keyboard.press('Space');
await expect(page.getByText('1 item selected')).toBeVisible();

// Navigate backwards up into the batch action bar
await page.keyboard.press('Shift+Tab');
await page.keyboard.press('Shift+Tab');
await page.keyboard.press('Shift+Tab');
await page.keyboard.press('Shift+Tab');
await page.keyboard.press('Shift+Tab');
await page.keyboard.press('Shift+Tab');

await page
.getByRole('heading', { name: 'Expandable row content' })
.first()
.hover();
await expect(page).toHaveNoACViolations(
'components-datatable-dynamic--default---with-batch-actions-open-and-row-expanded'
);
await expect(page.getByRole('button', { name: 'Delete' })).toBeFocused();

// Navigate forwards through the batch action buttons
await page.keyboard.press('Tab');
await expect(page.getByRole('button', { name: 'Save' })).toBeFocused();
await page.keyboard.press('Tab');
await expect(
page.getByRole('button', { name: 'Download' })
).toBeFocused();
await page.keyboard.press('Tab');
await expect(page.getByRole('button', { name: 'Cancel' })).toBeFocused();
// Invoke the cancel button
await page.keyboard.press('Space');
await expect(page.getByText('1 item selected')).not.toBeVisible();
// Every checkbox should no longer be checked
for (const checkbox of await page.getByRole('checkbox').all()) {
await expect(checkbox).not.toBeChecked();
}
});
});

test.describe('expansion', () => {
test('default has no accessibility-checker violations', async ({
page,
}) => {
await visitStory(page, {
component: 'DataTable',
id: 'components-datatable-expansion--default',
globals: {
theme: 'white',
},
});
await expect(page).toHaveNoACViolations(
'components-datatable-expansion--default'
);
});
test('batch expansion has no accessibility-checker violations', async ({
page,
}) => {
await visitStory(page, {
component: 'DataTable',
id: 'components-datatable-expansion--batch-expansion',
globals: {
theme: 'white',
},
});
await expect(page).toHaveNoACViolations(
'components-datatable-expansion--batch-expansion'
);
});
});

test.describe('filtering', () => {
test('default has no accessibility-checker violations', async ({
page,
}) => {
await visitStory(page, {
component: 'DataTable',
id: 'components-datatable-filtering--default',
globals: {
theme: 'white',
},
});
await expect(page).toHaveNoACViolations(
'components-datatable-filtering--default'
);
});
});

test.describe('selection', () => {
test('default has no accessibility-checker violations', async ({
page,
}) => {
await visitStory(page, {
component: 'DataTable',
id: 'components-datatable-selection--default',
globals: {
theme: 'white',
},
});
await expect(page).toHaveNoACViolations(
'components-datatable-selection--default'
);
});
test('with-radio-expansion has no accessibility-checker violations', async ({
page,
}) => {
await visitStory(page, {
component: 'DataTable',
id: 'components-datatable-selection--with-radio-expansion',
globals: {
theme: 'white',
},
});
await expect(page).toHaveNoACViolations(
'components-datatable-selection--with-radio-expansion'
);
});
test('with-selection-and-sorting has no accessibility-checker violations', async ({
page,
}) => {
await visitStory(page, {
component: 'DataTable',
id: 'components-datatable-selection--with-selection-and-sorting',
globals: {
theme: 'white',
},
});
await expect(page).toHaveNoACViolations(
'components-datatable-selection--with-selection-and-sorting'
);
});
});

test.describe('skeleton', () => {
test('skeleton has no accessibility-checker violations', async ({
page,
}) => {
await visitStory(page, {
component: 'DataTable',
id: 'components-datatable-skeleton--skeleton',
globals: {
theme: 'white',
},
});
await expect(page).toHaveNoACViolations(
'components-datatable-skeleton--skeleton'
);
});
});

test.describe('sorting', () => {
test('default has no accessibility-checker violations', async ({
page,
}) => {
await visitStory(page, {
component: 'DataTable',
id: 'components-datatable-sorting--default',
globals: {
theme: 'white',
},
});
await expect(page).toHaveNoACViolations(
'components-datatable-sorting--default'
);
});
});

test.describe('toolbar', () => {
test('default has no accessibility-checker violations', async ({
page,
}) => {
await visitStory(page, {
component: 'DataTable',
id: 'components-datatable-toolbar--default',
globals: {
theme: 'white',
},
});
await expect(page).toHaveNoACViolations(
'components-datatable-toolbar--default'
);
});
test('persistent-toolbar has no accessibility-checker violations', async ({
page,
}) => {
await visitStory(page, {
component: 'DataTable',
id: 'components-datatable-toolbar--persistent-toolbar',
globals: {
theme: 'white',
},
});
await expect(page).toHaveNoACViolations(
'components-datatable-toolbar--persistent-toolbar'
);
});
test('small-persistent-toolbar has no accessibility-checker violations', async ({
page,
}) => {
await visitStory(page, {
component: 'DataTable',
id: 'components-datatable-toolbar--small-persistent-toolbar',
globals: {
theme: 'white',
},
});
await expect(page).toHaveNoACViolations(
'components-datatable-toolbar--small-persistent-toolbar'
);
});
test('with-overflow-menu has no accessibility-checker violations', async ({
page,
}) => {
await visitStory(page, {
component: 'DataTable',
id: 'components-datatable-toolbar--with-overflow-menu',
globals: {
theme: 'white',
},
});
await expect(page).toHaveNoACViolations(
'components-datatable-toolbar--with-overflow-menu'
);
});
});
});
Loading

0 comments on commit a3cb9c5

Please sign in to comment.