diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index a4c73c38cdff..832bdfda0d5e 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -180,7 +180,10 @@ jobs: if: ${{ needs.vrt-runner.result != 'success' }} run: exit 1 - avt: + avt-runner: + strategy: + matrix: + shard: [1, 2, 3, 4] runs-on: ubuntu-latest steps: - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 #v4.1.1 @@ -210,7 +213,7 @@ jobs: run: | npx serve -l 3000 packages/react/storybook-static & pid=$! - echo ::set-output name=pid::"$pid" + echo "pid=$pid" >> $GITHUB_OUTPUT - uses: ./actions/wait-for-it with: URL: 'http://localhost:3000' @@ -218,7 +221,7 @@ jobs: - name: Run AVT if: github.repository == 'carbon-design-system/carbon' run: | - yarn playwright test --project chromium --grep @avt + yarn playwright test --project chromium --grep @avt --shard="${{ matrix.shard }}/4" - name: Stop storybook run: kill ${{ steps.storybook.outputs.pid }} - name: Upload test results @@ -227,3 +230,12 @@ jobs: with: name: playwright-avt-report path: .playwright + + avt: + if: ${{ always() }} + runs-on: ubuntu-latest + needs: avt-runner + steps: + - name: Check AVT Runner job status + if: ${{ needs.avt-runner.result != 'success' }} + run: exit 1 diff --git a/README.md b/README.md index 59462a443f5f..44ca44dd5d0a 100644 --- a/README.md +++ b/README.md @@ -85,186 +85,6 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Taylor Jones

πŸ’» πŸ“– ️️️️♿️

TJ Egan

πŸ’» πŸ“– πŸš‡ πŸ‘€ ️️️️♿️

Alessandra Davila

πŸ’» πŸ“– πŸ‘€ ️️️️♿️

Andrea N. Cardona

πŸ’» πŸ“– πŸ‘€ ️️️️♿️

Francine Lucca

πŸ’» πŸ“– πŸ‘€ ️️️️♿️

Scott Strubberg

πŸ’» πŸ“– πŸ‘€ ️️️️♿️

Alison Joseph

πŸ’» πŸ“– πŸ‘€ ️️️️♿️

Anna Gonzales

🎨 πŸ‘€

Lauren Rice

🎨 πŸ‘€

Josh Black

πŸ’» πŸ“– πŸš‡ πŸ‘€ ️️️️♿️

DAK

πŸ’» πŸ“– πŸ‘€ ️️️️♿️

Josefina Mancilla

πŸ’» πŸ“– πŸ‘€ ️️️️♿️

emyarod

πŸ’» πŸ“– πŸ‘€ ️️️️♿️

Eric Marcoux

πŸ’»

Vince Picone

πŸ’» πŸ“– πŸ‘€ ️️️️♿️

jillianhowarth

πŸ–‹ 🎨 πŸ‘€

Ricardo Henriquez

πŸ’» πŸ“– πŸ‘€ ️️️️♿️

johnbister

🎨 πŸ‘€

Dominik Brugger

πŸ’» 🚧

Jan Hassel

πŸ’» πŸ“– ️️️️♿️ 🎨

Alexander Lyon

πŸ’»

Rosie Z

πŸ’»

Nishith P

πŸ“–

Eric Charpentier

πŸ’»

Luiza Mendes

πŸ’» 🚧

Akmal Hakimi Mohd Zamri

πŸ’»

sanjitbauli

πŸ“–

Laszlo Moczo

πŸ’»

LMapes

πŸ–‹ πŸ“–

conradennis

🎨

Eric Liu

πŸ’» πŸ“–

Richard VΕ‘ianskΓ½

πŸ’»

Lee Chase

πŸ’» πŸ“–

Anton

πŸ’»

Panpan Lin

πŸ“–

Ashley Harrison

πŸ’»

Jen Downs

πŸ’» πŸ“– ️️️️♿️

Abdul Rehman

πŸ’»

MIchael Dudley

🎨

David Bradshaw

πŸ’»

Simon Finney

πŸ’» ️️️️♿️

Attila Bartha

πŸ’»

λ°°ν•˜λžŒ

πŸ’»

Yohanna Gadelrab

πŸ“–

Akira Sudoh

πŸ’» πŸ“– ️️️️♿️ πŸš‡

Oyinkan Oyetunmibi

πŸ“–

pbenson322

πŸ“–

Abbey Hart

πŸ’» πŸ“– ️️️️♿️

Lucas

πŸ’»

Dylan Klohr

πŸ“–

Gilli Sigurdsson

🎨

kennylam

πŸ’» ️️️️♿️

SΓ©bastien

πŸ’»

Dusan Milko

πŸ’»

Taras Polovyi

πŸ’»

Chris Connors

🎨 πŸ“–

David Conner

πŸ’» ️️️️♿️

Harish Mohanani

πŸ’»

Frivalszky-Mayer PΓ©ter

πŸ’» ️️️️♿️

s100

πŸ’»

Taranveer Virk

πŸ’»

Niall Cargill

πŸ“–

Matt Chapman

πŸ’»

Boston Cartwright

πŸ’»

DavidSCChen

πŸ’»

molyholy

πŸ’»

Scott Dickerson

πŸ’»

Evgeniy Podgaetskiy

πŸ’»

CassidyJensen

πŸ’» ️️️️♿️

Zsolt Lattmann

πŸ’»

Conrad Schmidt

πŸ’»

Ignacio Becerra

πŸ’»

Swapnil Patil

πŸ“–

Fei Z

πŸ’»

Ignas Ausiejus

πŸ“–

Ryan O. Mackey

πŸ’»

DΓ‘vid HalΓ‘sz

πŸ’»

Bill Guigue

πŸ’»

szymonbrandys

πŸ’»

Adam Alston

πŸ“–

Krithika S Udupa

πŸ“–

Eshin Griffith

πŸ’»

@RianTavaresOn

πŸ’» 🎨

ColbyJohnIBM

πŸ’»

HΓ₯kon

πŸ’» πŸ“–

Tanner Summers

πŸ’»

Zhen Wang

πŸ’» πŸ“–

Cathal Kenneally

πŸ’»

Joel Humberto GΓ³mez Paredes

πŸ’»

James Nash

πŸ’» πŸ“–

Jakub Faliszewski

πŸ’»

Nick Gong

πŸ’»

Hannele Valtanen

πŸ’»

Llam4u

πŸ’» πŸ›

G. Torres

πŸ’»

Fiona

πŸ’»

kindoflew

πŸ’»

Mario Gueyraud

πŸ’»

Dongjoon Lee

πŸ’»

ShankarV-CodeJunkie

πŸ’»

dario platania

πŸ’»

Mateusz KrzyΕΌanowski

πŸ’»

jpsorensen

πŸ’»

jae kaplan

πŸš‡

Sierra Wetmore

πŸ’»

kcprevatt

πŸ’»

Marcin Lewandowski

πŸ’»

remolueoend

πŸ’»

Jesse Hull

πŸ’» ️️️️♿️

Ashvin Warrier

πŸ’»

GalvinGao

πŸ’»

Bianca Sparxs

πŸ’»

Mahmoud Abdulazim

πŸ’»

Dave Steinberg

πŸ’»

Seong-Hyun Ryoo

πŸ’»

Pratik Karad

πŸ’» ️️️️♿️

Gerzon

πŸ’»

Guilherme Datilio Ribeiro

πŸ’» πŸ“– ️️️️♿️ πŸ‘€

Josef Kubíček

πŸ’»

Sunny Johal

πŸ’»

Steven Black

πŸ’» ️️️️♿️

Mark Judy

πŸ’»

Anton Tsymuk

πŸ’»

Mohammed Aslam P. A.

πŸ’» πŸ“–

Tony ZL

πŸ’»

Petr Kadlec

πŸ’»

David Ragsdale

πŸ’»

Hao Cheng

πŸ’»

cordesmj

πŸ’»

Aziz Chebbi

πŸ’»

MichaΕ‚ Konopski

πŸ’»

Omkar Ajagunde

πŸ’» πŸ“–

Aman Lajpal

πŸ’» πŸ“–

Niraj Sah

πŸ’»

Allison Ishida

πŸ’»

Alex Lewitt

πŸ’»

Tresau-IBM

πŸ’»
- diff --git a/e2e/components/accordion/accordion-test.avt.e2e.js b/e2e/components/Accordion/Accordion-test.avt.e2e.js similarity index 100% rename from e2e/components/accordion/accordion-test.avt.e2e.js rename to e2e/components/Accordion/Accordion-test.avt.e2e.js diff --git a/e2e/components/accordion/accordion-test.e2e.js b/e2e/components/Accordion/Accordion-test.e2e.js similarity index 100% rename from e2e/components/accordion/accordion-test.e2e.js rename to e2e/components/Accordion/Accordion-test.e2e.js diff --git a/e2e/components/AspectRatio/AspectRatio-test.avt.e2e.js b/e2e/components/AspectRatio/AspectRatio-test.avt.e2e.js new file mode 100644 index 000000000000..5562acdab60e --- /dev/null +++ b/e2e/components/AspectRatio/AspectRatio-test.avt.e2e.js @@ -0,0 +1,24 @@ +/** + * 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('AspectRatio @avt', () => { + test('@avt-default-state', async ({ page }) => { + await visitStory(page, { + component: 'AspectRatio', + id: 'components-aspectratio--default', + globals: { + theme: 'white', + }, + }); + await expect(page).toHaveNoACViolations('AspectRatio @avt-default-state'); + }); +}); diff --git a/e2e/components/AspectRatio/AspectRatio-test.e2e.js b/e2e/components/AspectRatio/AspectRatio-test.e2e.js index 662d8ca15c60..23fc3ea8f2c7 100644 --- a/e2e/components/AspectRatio/AspectRatio-test.e2e.js +++ b/e2e/components/AspectRatio/AspectRatio-test.e2e.js @@ -7,9 +7,9 @@ 'use strict'; -const { expect, test } = require('@playwright/test'); +const { test } = require('@playwright/test'); const { themes } = require('../../test-utils/env'); -const { snapshotStory, visitStory } = require('../../test-utils/storybook'); +const { snapshotStory } = require('../../test-utils/storybook'); test.describe('AspectRatio', () => { themes.forEach((theme) => { @@ -23,15 +23,4 @@ test.describe('AspectRatio', () => { }); }); }); - - test('accessibility-checker @avt', async ({ page }) => { - await visitStory(page, { - component: 'AspectRatio', - id: 'components-aspectratio--default', - globals: { - theme: 'white', - }, - }); - await expect(page).toHaveNoACViolations('AspectRatio'); - }); }); diff --git a/e2e/components/breadcrumb/breadcrumb-test.avt.e2e.js b/e2e/components/Breadcrumb/Breadcrumb-test.avt.e2e.js similarity index 97% rename from e2e/components/breadcrumb/breadcrumb-test.avt.e2e.js rename to e2e/components/Breadcrumb/Breadcrumb-test.avt.e2e.js index 36671ed5a883..2e1453801c42 100644 --- a/e2e/components/breadcrumb/breadcrumb-test.avt.e2e.js +++ b/e2e/components/Breadcrumb/Breadcrumb-test.avt.e2e.js @@ -19,7 +19,7 @@ test.describe('breadcrumb @avt', () => { theme: 'white', }, }); - await expect(page).toHaveNoACViolations('Breadcrumb'); + await expect(page).toHaveNoACViolations('Breadcrumb-default-state'); }); test('@avt-advanced-states with overflow menu', async ({ page }) => { diff --git a/e2e/components/breadcrumb/breadcrumb-test.e2e.js b/e2e/components/Breadcrumb/Breadcrumb-test.e2e.js similarity index 100% rename from e2e/components/breadcrumb/breadcrumb-test.e2e.js rename to e2e/components/Breadcrumb/Breadcrumb-test.e2e.js diff --git a/e2e/components/Button/Button-test.avt.e2e.js b/e2e/components/Button/Button-test.avt.e2e.js index 3c5213f7f117..3c3695d599e0 100644 --- a/e2e/components/Button/Button-test.avt.e2e.js +++ b/e2e/components/Button/Button-test.avt.e2e.js @@ -11,7 +11,7 @@ const { expect, test } = require('@playwright/test'); const { visitStory } = require('../../test-utils/storybook'); test.describe('Button @avt', () => { - test('accessibility-checker', async ({ page }) => { + test('@avt-default-state', async ({ page }) => { await visitStory(page, { component: 'Button', id: 'components-button--default', @@ -22,7 +22,7 @@ test.describe('Button @avt', () => { await expect(page).toHaveNoACViolations('Button'); }); - test('accessibility-checker button danger', async ({ page }) => { + test('@avt-advanced-states danger', async ({ page }) => { await visitStory(page, { component: 'Button', id: 'components-button--danger', @@ -33,7 +33,7 @@ test.describe('Button @avt', () => { await expect(page).toHaveNoACViolations('Button-danger'); }); - test('accessibility-checker button ghost', async ({ page }) => { + test('@avt-advanced-states ghost', async ({ page }) => { await visitStory(page, { component: 'Button', id: 'components-button--ghost', @@ -44,7 +44,7 @@ test.describe('Button @avt', () => { await expect(page).toHaveNoACViolations('Button-ghost'); }); - test('accessibility-checker button icon-button', async ({ page }) => { + test('@avt-advanced-states icon-button', async ({ page }) => { await visitStory(page, { component: 'Button', id: 'components-button--icon-button', @@ -55,7 +55,7 @@ test.describe('Button @avt', () => { await expect(page).toHaveNoACViolations('Button-icon-button'); }); - test('accessibility-checker button secondary', async ({ page }) => { + test('@avt-advanced-states secondary', async ({ page }) => { await visitStory(page, { component: 'Button', id: 'components-button--secondary', @@ -66,7 +66,7 @@ test.describe('Button @avt', () => { await expect(page).toHaveNoACViolations('Button-secondary'); }); - test('accessibility-checker button set-of-buttons', async ({ page }) => { + test('@avt-advanced-states set-of-buttons', async ({ page }) => { await visitStory(page, { component: 'Button', id: 'components-button--set-of-buttons', @@ -77,7 +77,7 @@ test.describe('Button @avt', () => { await expect(page).toHaveNoACViolations('Button-set-of-buttons'); }); - test('accessibility-checker button skeleton', async ({ page }) => { + test('@avt-advanced-states skeleton', async ({ page }) => { await visitStory(page, { component: 'Button', id: 'components-button--skeleton', @@ -88,7 +88,7 @@ test.describe('Button @avt', () => { await expect(page).toHaveNoACViolations('Button-skeleton'); }); - test('accessibility-checker button tertiary', async ({ page }) => { + test('@avt-advanced-states tertiary', async ({ page }) => { await visitStory(page, { component: 'Button', id: 'components-button--tertiary', @@ -99,7 +99,7 @@ test.describe('Button @avt', () => { await expect(page).toHaveNoACViolations('Button-tertiary'); }); - test('accessibility-checker disabled button', async ({ page }) => { + test('@avt-advanced-states disabled', async ({ page }) => { await visitStory(page, { component: 'Button', id: 'components-button--default', @@ -115,7 +115,7 @@ test.describe('Button @avt', () => { await expect(page).toHaveNoACViolations('Button-disabled'); }); - test('accessibility-checker keyboard interaction', async ({ page }) => { + test('@avt-keyboard-nav', async ({ page }) => { await visitStory(page, { component: 'Button', id: 'components-button--default', @@ -128,7 +128,7 @@ test.describe('Button @avt', () => { await expect(page.getByRole('button')).toBeFocused(); }); - test('accessibility-checker mouse interaction', async ({ page }) => { + test('@avt-advanced-states mouse interaction', async ({ page }) => { await visitStory(page, { component: 'Button', id: 'components-button--default', @@ -141,7 +141,7 @@ test.describe('Button @avt', () => { await expect(page.getByRole('button')).toBeFocused(); }); - test('accessibility-checker hover state', async ({ page }) => { + test('@avt-advanced-states hover state', async ({ page }) => { await visitStory(page, { component: 'Button', id: 'components-button--default', diff --git a/e2e/components/ClassPrefix/ClassPrefix-test.avt.e2e.js b/e2e/components/ClassPrefix/ClassPrefix-test.avt.e2e.js new file mode 100644 index 000000000000..eb202598dea4 --- /dev/null +++ b/e2e/components/ClassPrefix/ClassPrefix-test.avt.e2e.js @@ -0,0 +1,24 @@ +/** + * 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('ClassPrefix @avt', () => { + test('@avt-default-state', async ({ page }) => { + await visitStory(page, { + component: 'ClassPrefix', + id: 'components-classprefix--default', + globals: { + theme: 'white', + }, + }); + await expect(page).toHaveNoACViolations('ClassPrefix @avt-default-state'); + }); +}); diff --git a/e2e/components/ClassPrefix/ClassPrefix-test.e2e.js b/e2e/components/ClassPrefix/ClassPrefix-test.e2e.js index 84c159f3396d..82c47a96454a 100644 --- a/e2e/components/ClassPrefix/ClassPrefix-test.e2e.js +++ b/e2e/components/ClassPrefix/ClassPrefix-test.e2e.js @@ -6,9 +6,9 @@ */ 'use strict'; -const { expect, test } = require('@playwright/test'); +const { test } = require('@playwright/test'); const { themes } = require('../../test-utils/env'); -const { snapshotStory, visitStory } = require('../../test-utils/storybook'); +const { snapshotStory } = require('../../test-utils/storybook'); test.describe('ClassPrefix', () => { themes.forEach((theme) => { @@ -22,15 +22,4 @@ test.describe('ClassPrefix', () => { }); }); }); - - test('accessibility-checker @avt', async ({ page }) => { - await visitStory(page, { - component: 'ClassPrefix', - id: 'components-classprefix--default', - globals: { - theme: 'white', - }, - }); - await expect(page).toHaveNoACViolations('ClassPrefix'); - }); }); diff --git a/e2e/components/CodeSnippet/CodeSnippet-test.avt.e2e.js b/e2e/components/CodeSnippet/CodeSnippet-test.avt.e2e.js index e208e38fbf21..86eeb9792616 100644 --- a/e2e/components/CodeSnippet/CodeSnippet-test.avt.e2e.js +++ b/e2e/components/CodeSnippet/CodeSnippet-test.avt.e2e.js @@ -11,7 +11,7 @@ const { expect, test } = require('@playwright/test'); const { visitStory } = require('../../test-utils/storybook'); test.describe('CodeSnippet @avt', () => { - test('accessibility-checker CodeSnippet inline', async ({ page }) => { + test('@avt-default-state inline', async ({ page }) => { await visitStory(page, { component: 'CodeSnippet', id: 'components-codesnippet--inline', @@ -22,9 +22,7 @@ test.describe('CodeSnippet @avt', () => { await expect(page).toHaveNoACViolations('CodeSnippet inline'); }); - test('accessibility-checker CodeSnippet inline hover @avt', async ({ - page, - }) => { + test('@avt-advanced-states inline hover', async ({ page }) => { await visitStory(page, { component: 'CodeSnippet', id: 'components-codesnippet--inline', @@ -38,9 +36,7 @@ test.describe('CodeSnippet @avt', () => { await expect(page).toHaveNoACViolations('CodeSnippet inline hover'); }); - test('accessibility-checker CodeSnippet inline focused @avt', async ({ - page, - }) => { + test('@avt-advanced-states inline focused', async ({ page }) => { await visitStory(page, { component: 'CodeSnippet', id: 'components-codesnippet--inline', @@ -54,7 +50,8 @@ test.describe('CodeSnippet @avt', () => { await expect(page).toHaveNoACViolations('CodeSnippet inline focused'); }); - test('accessibility-checker CodeSnippet multiline @avt', async ({ page }) => { + // Skipping due to a11y violation issue #14237 + test.skip('@avt-default-state multiline', async ({ page }) => { await visitStory(page, { component: 'CodeSnippet', id: 'components-codesnippet--multiline', @@ -65,9 +62,7 @@ test.describe('CodeSnippet @avt', () => { await expect(page).toHaveNoACViolations('CodeSnippet multiline'); }); - test('accessibility-checker CodeSnippet singleline @avt', async ({ - page, - }) => { + test('@avt-default-state singleline', async ({ page }) => { await visitStory(page, { component: 'CodeSnippet', id: 'components-codesnippet--singleline', @@ -78,7 +73,7 @@ test.describe('CodeSnippet @avt', () => { await expect(page).toHaveNoACViolations('CodeSnippet singleline'); }); - test('accessibility-checker CodeSnippet skeleton @avt', async ({ page }) => { + test('@avt-advanced-states skeleton', async ({ page }) => { await visitStory(page, { component: 'CodeSnippet', id: 'components-codesnippet--skeleton', @@ -89,9 +84,7 @@ test.describe('CodeSnippet @avt', () => { await expect(page).toHaveNoACViolations('CodeSnippet skeleton'); }); - test('accessibility-checker CodeSnippet inline keyboard nav', async ({ - page, - }) => { + test('inline @avt-keyboard-nav', async ({ page }) => { await visitStory(page, { component: 'CodeSnippet', id: 'components-codesnippet--inline', @@ -110,9 +103,7 @@ test.describe('CodeSnippet @avt', () => { await expect(page.getByRole('tooltip')).toHaveText('Copied to clipboard'); }); - test('accessibility-checker CodeSnippet multiline keyboard nav', async ({ - page, - }) => { + test('multiline @avt-keyboard-nav', async ({ page }) => { await visitStory(page, { component: 'CodeSnippet', id: 'components-codesnippet--multiline', @@ -139,9 +130,7 @@ test.describe('CodeSnippet @avt', () => { await expect(page.getByText('Show more')).not.toBeVisible(); }); - test('accessibility-checker CodeSnippet singleline keyboard nav', async ({ - page, - }) => { + test('singleline @avt-keyboard-nav', async ({ page }) => { await visitStory(page, { component: 'CodeSnippet', id: 'components-codesnippet--singleline', diff --git a/e2e/components/ComboBox/ComboBox-test.avt.e2e.js b/e2e/components/ComboBox/ComboBox-test.avt.e2e.js index 8e0f4bb9f6f1..46c71130ec4d 100644 --- a/e2e/components/ComboBox/ComboBox-test.avt.e2e.js +++ b/e2e/components/ComboBox/ComboBox-test.avt.e2e.js @@ -11,7 +11,7 @@ const { expect, test } = require('@playwright/test'); const { visitStory } = require('../../test-utils/storybook'); test.describe('ComboBox @avt', () => { - test('accessibility-checker combobox', async ({ page }) => { + test('@avt-default-state', async ({ page }) => { await visitStory(page, { component: 'ComboBox', id: 'components-combobox--default', @@ -23,7 +23,7 @@ test.describe('ComboBox @avt', () => { }); // Skipping now due to AVT violation, possible false positive - test.skip('accessibility-checker open combobox', async ({ page }) => { + test.skip('@avt-advanced-states open', async ({ page }) => { await visitStory(page, { component: 'ComboBox', id: 'components-combobox--default', @@ -44,7 +44,7 @@ test.describe('ComboBox @avt', () => { await expect(page).toHaveNoACViolations('ComboBox-open'); }); - test('combobox - keyboard nav', async ({ page }) => { + test('@avt-keyboard-nav', async ({ page }) => { await visitStory(page, { component: 'ComboBox', id: 'components-combobox--default', diff --git a/e2e/components/ComboButton/ComboButton-test.avt.e2e.js b/e2e/components/ComboButton/ComboButton-test.avt.e2e.js index 111e5ee7be37..c3175d726dd0 100644 --- a/e2e/components/ComboButton/ComboButton-test.avt.e2e.js +++ b/e2e/components/ComboButton/ComboButton-test.avt.e2e.js @@ -11,7 +11,7 @@ import { expect, test } from '@playwright/test'; import { visitStory } from '../../test-utils/storybook'; test.describe('ComboButton @avt', () => { - test('@avt-default-state ComboButton', async ({ page }) => { + test('@avt-default-state', async ({ page }) => { await visitStory(page, { component: 'ComboButton', id: 'components-combobutton--default', @@ -19,7 +19,7 @@ test.describe('ComboButton @avt', () => { theme: 'white', }, }); - await expect(page).toHaveNoACViolations('ComboButton'); + await expect(page).toHaveNoACViolations('ComboButton @avt-default-state'); }); test('@avt-advanced-states ComboButton With Danger', async ({ page }) => { diff --git a/e2e/components/ComposedModal/ComposedModal-test.avt.e2e.js b/e2e/components/ComposedModal/ComposedModal-test.avt.e2e.js index 2e05a9a68c81..6e66641b44be 100644 --- a/e2e/components/ComposedModal/ComposedModal-test.avt.e2e.js +++ b/e2e/components/ComposedModal/ComposedModal-test.avt.e2e.js @@ -11,7 +11,7 @@ const { expect, test } = require('@playwright/test'); const { visitStory } = require('../../test-utils/storybook'); test.describe('ComposedModal @avt', () => { - test('@avt-default-state ComposedModal', async ({ page }) => { + test('@avt-default-state', async ({ page }) => { await visitStory(page, { component: 'ComposedModal', id: 'components-composedmodal--default', @@ -22,7 +22,7 @@ test.describe('ComposedModal @avt', () => { await expect(page).toHaveNoACViolations('ComposedModal'); }); - test('@avt-advanced-states ComposedModal Full Width', async ({ page }) => { + test('@avt-advanced-states Full Width', async ({ page }) => { await visitStory(page, { component: 'ComposedModal', id: 'components-composedmodal--full-width', @@ -33,10 +33,7 @@ test.describe('ComposedModal @avt', () => { await expect(page).toHaveNoACViolations('ComposedModal-full-width'); }); - // Skipping now due to AVT violation, possible false positive - test.skip('@avt-advanced-states ComposedModal Passive Modal', async ({ - page, - }) => { + test.skip('@avt-advanced-states Passive Modal', async ({ page }) => { await visitStory(page, { component: 'ComposedModal', id: 'components-composedmodal--passive-modal', @@ -47,9 +44,7 @@ test.describe('ComposedModal @avt', () => { await expect(page).toHaveNoACViolations('ComposedModal-passive-modal'); }); - test('@avt-advanced-states ComposedModal With state manager', async ({ - page, - }) => { + test('@avt-advanced-states With state manager', async ({ page }) => { await visitStory(page, { component: 'ComposedModal', id: 'components-composedmodal--with-state-manager', @@ -60,7 +55,7 @@ test.describe('ComposedModal @avt', () => { await expect(page).toHaveNoACViolations('ComposedModal-with-state-manager'); }); - test('@avt-keyboard-nav ComposedModal', async ({ page }) => { + test('@avt-keyboard-nav', async ({ page }) => { await visitStory(page, { component: 'ComposedModal', id: 'components-composedmodal--default', @@ -87,7 +82,7 @@ test.describe('ComposedModal @avt', () => { await expect(page.getByText('Account resource')).not.toBeVisible(); }); - test('@avt-keyboard-nav ComposedModal Full width', async ({ page }) => { + test('@avt-keyboard-nav Full width', async ({ page }) => { await visitStory(page, { component: 'ComposedModal', id: 'components-composedmodal--full-width', @@ -110,7 +105,7 @@ test.describe('ComposedModal @avt', () => { await expect(page.getByText('Full Width Modal')).not.toBeVisible(); }); - test('@avt-keyboard-nav ComposedModal Passive modal', async ({ page }) => { + test('@avt-keyboard-nav Passive modal', async ({ page }) => { await visitStory(page, { component: 'ComposedModal', id: 'components-composedmodal--passive-modal', @@ -130,9 +125,7 @@ test.describe('ComposedModal @avt', () => { ).not.toBeVisible(); }); - test('@avt-keyboard-nav ComposedModal With state manager', async ({ - page, - }) => { + test('@avt-keyboard-nav With state manager', async ({ page }) => { await visitStory(page, { component: 'ComposedModal', id: 'components-composedmodal--with-state-manager', diff --git a/e2e/components/ContainedList/ContainedList-test.avt.e2e.js b/e2e/components/ContainedList/ContainedList-test.avt.e2e.js index 3b06764cf21f..c09a75d64edb 100644 --- a/e2e/components/ContainedList/ContainedList-test.avt.e2e.js +++ b/e2e/components/ContainedList/ContainedList-test.avt.e2e.js @@ -11,7 +11,7 @@ import { expect, test } from '@playwright/test'; import { visitStory } from '../../test-utils/storybook'; test.describe('ContainedList @avt', () => { - test('@avt-default-state ContainedList', async ({ page }) => { + test('@avt-default-state', async ({ page }) => { await visitStory(page, { component: 'ContainedList', id: 'components-containedlist--default', @@ -22,9 +22,7 @@ test.describe('ContainedList @avt', () => { await expect(page).toHaveNoACViolations('ContainedList'); }); - test('@avt-advanced-states ContainedList Usage examples', async ({ - page, - }) => { + test('@avt-advanced-states Usage examples', async ({ page }) => { await visitStory(page, { component: 'ContainedList', id: 'components-containedlist--usage-examples', @@ -35,7 +33,7 @@ test.describe('ContainedList @avt', () => { await expect(page).toHaveNoACViolations('ContainedList-usage-examples'); }); - test('@avt-advanced-states ContainedList Disclosed', async ({ page }) => { + test('@avt-advanced-states Disclosed', async ({ page }) => { await visitStory(page, { component: 'ContainedList', id: 'components-containedlist--disclosed', @@ -46,7 +44,7 @@ test.describe('ContainedList @avt', () => { await expect(page).toHaveNoACViolations('ContainedList-disclosed'); }); - test('@avt-advanced-states ContainedList With actions', async ({ page }) => { + test('@avt-advanced-states With actions', async ({ page }) => { await visitStory(page, { component: 'ContainedList', id: 'components-containedlist--with-actions', @@ -57,23 +55,20 @@ test.describe('ContainedList @avt', () => { await expect(page).toHaveNoACViolations('ContainedList-with-actions'); }); - test.slow( - '@avt-advanced-states ContainedList With expandable search', - async ({ page }) => { - await visitStory(page, { - component: 'ContainedList', - id: 'components-containedlist--with-expandable-search', - globals: { - theme: 'white', - }, - }); - await expect(page).toHaveNoACViolations( - 'ContainedList-with-expandable-search' - ); - } - ); + test.slow('@avt-advanced-states With expandable search', async ({ page }) => { + await visitStory(page, { + component: 'ContainedList', + id: 'components-containedlist--with-expandable-search', + globals: { + theme: 'white', + }, + }); + await expect(page).toHaveNoACViolations( + 'ContainedList-with-expandable-search' + ); + }); - test('@avt-advanced-states ContainedList With icons', async ({ page }) => { + test('@avt-advanced-states With icons', async ({ page }) => { await visitStory(page, { component: 'ContainedList', id: 'components-containedlist--with-icons', @@ -84,9 +79,7 @@ test.describe('ContainedList @avt', () => { await expect(page).toHaveNoACViolations('ContainedList-with-icons'); }); - test('@avt-advanced-states ContainedList With interactive items', async ({ - page, - }) => { + test('@avt-advanced-states With interactive items', async ({ page }) => { await visitStory(page, { component: 'ContainedList', id: 'components-containedlist--with-interactive-items', @@ -99,7 +92,7 @@ test.describe('ContainedList @avt', () => { ); }); - test('@avt-advanced-states ContainedList With interactive items and actions', async ({ + test('@avt-advanced-states With interactive items and actions', async ({ page, }) => { await visitStory(page, { @@ -114,7 +107,7 @@ test.describe('ContainedList @avt', () => { ); }); - test('@avt-advanced-states ContainedList With Layer', async ({ page }) => { + test('@avt-advanced-states With Layer', async ({ page }) => { await visitStory(page, { component: 'ContainedList', id: 'components-containedlist--with-layer', @@ -125,9 +118,7 @@ test.describe('ContainedList @avt', () => { await expect(page).toHaveNoACViolations('ContainedList-with-layer'); }); - test('@avt-advanced-states ContainedList With list title decorators', async ({ - page, - }) => { + test('@avt-advanced-states With list title decorators', async ({ page }) => { await visitStory(page, { component: 'ContainedList', id: 'components-containedlist--with-list-title-decorators', @@ -140,9 +131,7 @@ test.describe('ContainedList @avt', () => { ); }); - test('@avt-advanced-states ContainedList With persistent search', async ({ - page, - }) => { + test('@avt-advanced-states With persistent search', async ({ page }) => { await visitStory(page, { component: 'ContainedList', id: 'components-containedlist--with-persistent-search', @@ -155,7 +144,7 @@ test.describe('ContainedList @avt', () => { ); }); - test('@avt-keyboard-nav ContainedList Usage examples', async ({ page }) => { + test('@avt-keyboard-nav Usage examples', async ({ page }) => { await visitStory(page, { component: 'ContainedList', id: 'components-containedlist--usage-examples', @@ -186,7 +175,7 @@ test.describe('ContainedList @avt', () => { await expect(page.getByText('Remove')).not.toBeVisible(); }); - test('@avt-keyboard-nav ContainedList With actions', async ({ page }) => { + test('@avt-keyboard-nav With actions', async ({ page }) => { await visitStory(page, { component: 'ContainedList', id: 'components-containedlist--with-actions', @@ -214,9 +203,7 @@ test.describe('ContainedList @avt', () => { ).toBeFocused(); }); - test('@avt-keyboard-nav ContainedList With expandable search', async ({ - page, - }) => { + test('@avt-keyboard-nav With expandable search', async ({ page }) => { await visitStory(page, { component: 'ContainedList', id: 'components-containedlist--with-expandable-search', @@ -240,9 +227,7 @@ test.describe('ContainedList @avt', () => { await expect(page.getByText('List item 1')).toBeVisible(); }); - test('@avt-keyboard-nav ContainedList With interactive items', async ({ - page, - }) => { + test('@avt-keyboard-nav With interactive items', async ({ page }) => { await visitStory(page, { component: 'ContainedList', id: 'components-containedlist--with-interactive-items', @@ -264,7 +249,7 @@ test.describe('ContainedList @avt', () => { ).toBeFocused(); }); - test('@avt-keyboard-nav ContainedList With interactive items and actions', async ({ + test('@avt-keyboard-nav With interactive items and actions', async ({ page, }) => { await visitStory(page, { @@ -299,9 +284,7 @@ test.describe('ContainedList @avt', () => { ).toBeFocused(); }); - test('@avt-keyboard-nav ContainedList With persistent search', async ({ - page, - }) => { + test('@avt-keyboard-nav With persistent search', async ({ page }) => { await visitStory(page, { component: 'ContainedList', id: 'components-containedlist--with-persistent-search', diff --git a/e2e/components/ContentSwitcher/ContentSwitcher-test.avt.e2e.js b/e2e/components/ContentSwitcher/ContentSwitcher-test.avt.e2e.js index 618bc1fcc0e0..77b604b40e96 100644 --- a/e2e/components/ContentSwitcher/ContentSwitcher-test.avt.e2e.js +++ b/e2e/components/ContentSwitcher/ContentSwitcher-test.avt.e2e.js @@ -22,7 +22,7 @@ test.describe('ContentSwitcher @avt', () => { await expect(page).toHaveNoACViolations('ContentSwitcher'); }); - test('@avt-advanced-states ComboButton Icon Only', async ({ page }) => { + test('@avt-advanced-states icon only', async ({ page }) => { await visitStory(page, { component: 'ContentSwitcher', id: 'components-contentswitcher--icon-only', diff --git a/e2e/components/ContentSwitcher/ContentSwitcher-test.e2e.js b/e2e/components/ContentSwitcher/ContentSwitcher-test.e2e.js index 492e7f2b6de9..b883eb1a6ff1 100644 --- a/e2e/components/ContentSwitcher/ContentSwitcher-test.e2e.js +++ b/e2e/components/ContentSwitcher/ContentSwitcher-test.e2e.js @@ -7,9 +7,9 @@ 'use strict'; -const { expect, test } = require('@playwright/test'); +const { test } = require('@playwright/test'); const { themes } = require('../../test-utils/env'); -const { snapshotStory, visitStory } = require('../../test-utils/storybook'); +const { snapshotStory } = require('../../test-utils/storybook'); test.describe('ContentSwitcher', () => { themes.forEach((theme) => { @@ -39,24 +39,4 @@ test.describe('ContentSwitcher', () => { }); }); }); - - test('accessibility-checker @avt', async ({ page }) => { - await visitStory(page, { - component: 'ContentSwitcher', - id: 'components-contentswitcher--default', - globals: { - theme: 'white', - }, - }); - await expect(page).toHaveNoACViolations('ContentSwitcher'); - - await visitStory(page, { - component: 'ContentSwitcher', - id: 'components-contentswitcher--icon-only', - globals: { - theme: 'white', - }, - }); - await expect(page).toHaveNoACViolations('ContentSwitcher-IconOnly'); - }); }); diff --git a/e2e/components/CopyButton/CopyButton-test.avt.e2e.js b/e2e/components/CopyButton/CopyButton-test.avt.e2e.js index 03f154c9cda8..62c5584c9e04 100644 --- a/e2e/components/CopyButton/CopyButton-test.avt.e2e.js +++ b/e2e/components/CopyButton/CopyButton-test.avt.e2e.js @@ -22,7 +22,7 @@ test.describe('CopyButton @avt', () => { await expect(page).toHaveNoACViolations('CopyButton @avt-default-state'); }); - test('@avt-keyboard-nav default', async ({ page }) => { + test('@avt-keyboard-nav', async ({ page }) => { await visitStory(page, { component: 'CopyButton', id: 'components-copybutton--default', diff --git a/e2e/components/DataTable/DataTable-test.avt.e2e.js b/e2e/components/DataTable/DataTable-test.avt.e2e.js index 3756fdaf860e..4303ed2439fd 100644 --- a/e2e/components/DataTable/DataTable-test.avt.e2e.js +++ b/e2e/components/DataTable/DataTable-test.avt.e2e.js @@ -12,9 +12,7 @@ const { visitStory } = require('../../test-utils/storybook'); test.describe('DataTable @avt', () => { test.describe('basic', () => { - test('default has no accessibility-checker violations', async ({ - page, - }) => { + test('@avt-default-state', async ({ page }) => { await visitStory(page, { component: 'DataTable', id: 'components-datatable-basic--default', @@ -26,9 +24,7 @@ test.describe('DataTable @avt', () => { 'components-datatable-basic--default' ); }); - test('xl with two lines has no accessibility-checker violations', async ({ - page, - }) => { + test('@avt-advanced-states xl with two lines', async ({ page }) => { await visitStory(page, { component: 'DataTable', id: 'components-datatable-basic--xl-with-two-lines', @@ -43,9 +39,7 @@ test.describe('DataTable @avt', () => { }); test.describe('batch actions', () => { - test('default has no accessibility-checker violations', async ({ - page, - }) => { + test('@avt-default-state', async ({ page }) => { await visitStory(page, { component: 'DataTable', id: 'components-datatable-batch-actions--default', @@ -60,9 +54,7 @@ test.describe('DataTable @avt', () => { }); test.describe('dynamic', () => { - test('default has no accessibility-checker violations', async ({ - page, - }) => { + test('@avt-default-state', async ({ page }) => { await visitStory(page, { component: 'DataTable', id: 'components-datatable-dynamic--default', @@ -71,11 +63,11 @@ test.describe('DataTable @avt', () => { }, }); await expect(page).toHaveNoACViolations( - 'components-datatable-dynamic--default' + 'components-datatable-dynamic--default-avt' ); }); - test('default keyboard navigation sequence', async ({ page }) => { + test('@avt-keyboard-nav', async ({ page }) => { await visitStory(page, { component: 'DataTable', id: 'components-datatable-dynamic--default', @@ -85,7 +77,7 @@ test.describe('DataTable @avt', () => { }); await expect(page).toHaveNoACViolations( - 'components-datatable-dynamic--default' + 'components-datatable-dynamic--default-keyboard-nav' ); // Start off by manually focusing the search input @@ -184,9 +176,7 @@ test.describe('DataTable @avt', () => { }); test.describe('expansion', () => { - test('default has no accessibility-checker violations', async ({ - page, - }) => { + test('@avt-default-state', async ({ page }) => { await visitStory(page, { component: 'DataTable', id: 'components-datatable-expansion--default', @@ -198,9 +188,7 @@ test.describe('DataTable @avt', () => { 'components-datatable-expansion--default' ); }); - test('batch expansion has no accessibility-checker violations', async ({ - page, - }) => { + test('@avt-advanced-states batch expansion', async ({ page }) => { await visitStory(page, { component: 'DataTable', id: 'components-datatable-expansion--batch-expansion', @@ -215,9 +203,7 @@ test.describe('DataTable @avt', () => { }); test.describe('filtering', () => { - test('default has no accessibility-checker violations', async ({ - page, - }) => { + test('@avt-default-state', async ({ page }) => { await visitStory(page, { component: 'DataTable', id: 'components-datatable-filtering--default', @@ -232,9 +218,7 @@ test.describe('DataTable @avt', () => { }); test.describe('selection', () => { - test('default has no accessibility-checker violations', async ({ - page, - }) => { + test('@avt-default-state', async ({ page }) => { await visitStory(page, { component: 'DataTable', id: 'components-datatable-selection--default', @@ -246,9 +230,7 @@ test.describe('DataTable @avt', () => { 'components-datatable-selection--default' ); }); - test('with-radio-expansion has no accessibility-checker violations', async ({ - page, - }) => { + test('@avt-advanced-states with-radio-expansion', async ({ page }) => { await visitStory(page, { component: 'DataTable', id: 'components-datatable-selection--with-radio-expansion', @@ -260,7 +242,7 @@ test.describe('DataTable @avt', () => { 'components-datatable-selection--with-radio-expansion' ); }); - test('with-selection-and-sorting has no accessibility-checker violations', async ({ + test('@avt-advanced-states with-selection-and-sorting', async ({ page, }) => { await visitStory(page, { @@ -277,9 +259,7 @@ test.describe('DataTable @avt', () => { }); test.describe('skeleton', () => { - test('skeleton has no accessibility-checker violations', async ({ - page, - }) => { + test('@avt-default-state skeleton', async ({ page }) => { await visitStory(page, { component: 'DataTable', id: 'components-datatable-skeleton--skeleton', @@ -294,9 +274,7 @@ test.describe('DataTable @avt', () => { }); test.describe('sorting', () => { - test('default has no accessibility-checker violations', async ({ - page, - }) => { + test('@avt-default-state', async ({ page }) => { await visitStory(page, { component: 'DataTable', id: 'components-datatable-sorting--default', @@ -311,9 +289,7 @@ test.describe('DataTable @avt', () => { }); test.describe('toolbar', () => { - test('default has no accessibility-checker violations', async ({ - page, - }) => { + test('@avt-default-state', async ({ page }) => { await visitStory(page, { component: 'DataTable', id: 'components-datatable-toolbar--default', @@ -325,9 +301,7 @@ test.describe('DataTable @avt', () => { 'components-datatable-toolbar--default' ); }); - test('persistent-toolbar has no accessibility-checker violations', async ({ - page, - }) => { + test('@avt-advanced-states persistent-toolbar', async ({ page }) => { await visitStory(page, { component: 'DataTable', id: 'components-datatable-toolbar--persistent-toolbar', @@ -339,9 +313,7 @@ test.describe('DataTable @avt', () => { 'components-datatable-toolbar--persistent-toolbar' ); }); - test('small-persistent-toolbar has no accessibility-checker violations', async ({ - page, - }) => { + test('@avt-advanced-states small-persistent-toolbar', async ({ page }) => { await visitStory(page, { component: 'DataTable', id: 'components-datatable-toolbar--small-persistent-toolbar', @@ -353,9 +325,7 @@ test.describe('DataTable @avt', () => { 'components-datatable-toolbar--small-persistent-toolbar' ); }); - test('with-overflow-menu has no accessibility-checker violations', async ({ - page, - }) => { + test('@avt-advanced-states with-overflow-menu', async ({ page }) => { await visitStory(page, { component: 'DataTable', id: 'components-datatable-toolbar--with-overflow-menu', diff --git a/e2e/components/DatePicker/DatePicker-test.avt.e2e.js b/e2e/components/DatePicker/DatePicker-test.avt.e2e.js index a6e6d9aa1c4e..c53ee5dc450f 100644 --- a/e2e/components/DatePicker/DatePicker-test.avt.e2e.js +++ b/e2e/components/DatePicker/DatePicker-test.avt.e2e.js @@ -11,7 +11,7 @@ const { expect, test } = require('@playwright/test'); const { visitStory } = require('../../test-utils/storybook'); test.describe('DatePicker @avt', () => { - test('simple state @avt', async ({ page }) => { + test('@avt-default-state', async ({ page }) => { await visitStory(page, { component: 'DatePicker', id: 'components-datepicker--simple', @@ -22,7 +22,7 @@ test.describe('DatePicker @avt', () => { await expect(page).toHaveNoACViolations('DatePicker'); }); - test('range @avt', async ({ page }) => { + test('range @avt-advanced-states', async ({ page }) => { await visitStory(page, { component: 'DatePicker', id: 'components-datepicker--range', @@ -33,7 +33,7 @@ test.describe('DatePicker @avt', () => { await expect(page).toHaveNoACViolations('DatePicker-Range'); }); - test('disabled state @avt', async ({ page }) => { + test('disabled @avt-advanced-states', async ({ page }) => { await visitStory(page, { component: 'DatePicker', id: 'components-datepicker--playground', @@ -50,7 +50,7 @@ test.describe('DatePicker @avt', () => { }); // skipping for now due to accessibility violation - test('skeleton state @avt', async ({ page }) => { + test('skeleton @avt-advanced-states', async ({ page }) => { await visitStory(page, { component: 'DatePicker', id: 'components-datepicker--skeleton', @@ -63,7 +63,7 @@ test.describe('DatePicker @avt', () => { }); // skipping for now due to accessibility violation - test('open state @avt', async ({ page }) => { + test('open @avt-advanced-states', async ({ page }) => { await visitStory(page, { component: 'DatePicker', id: 'components-datepicker--playground', @@ -78,7 +78,7 @@ test.describe('DatePicker @avt', () => { await expect(page).toHaveNoACViolations('DatePicker-Open'); }); - test('simple state - keyboard nav', async ({ page }) => { + test('simple state @avt-keyboard-nav', async ({ page }) => { await visitStory(page, { component: 'DatePicker', id: 'components-datepicker--single-with-calendar', @@ -104,7 +104,7 @@ test.describe('DatePicker @avt', () => { ); }); - test('range - keyboard nav', async ({ page }) => { + test('range state @avt-keyboard-nav', async ({ page }) => { await visitStory(page, { component: 'DatePicker', id: 'components-datepicker--range-with-calendar', diff --git a/e2e/components/DefinitionTooltip/DefinitionTooltip-test.avt.e2e.js b/e2e/components/DefinitionTooltip/DefinitionTooltip-test.avt.e2e.js index 341351e09a99..b995fb9fab68 100644 --- a/e2e/components/DefinitionTooltip/DefinitionTooltip-test.avt.e2e.js +++ b/e2e/components/DefinitionTooltip/DefinitionTooltip-test.avt.e2e.js @@ -11,7 +11,7 @@ const { expect, test } = require('@playwright/test'); const { visitStory } = require('../../test-utils/storybook'); test.describe('DefinitionTooltip @avt', () => { - test('@avt-default-state DefinitionTooltip', async ({ page }) => { + test('@avt-default-state', async ({ page }) => { await visitStory(page, { component: 'DefinitionTooltip', id: 'components-definitiontooltip--default', @@ -19,7 +19,9 @@ test.describe('DefinitionTooltip @avt', () => { theme: 'white', }, }); - await expect(page).toHaveNoACViolations('DefinitionTooltip'); + await expect(page).toHaveNoACViolations( + 'DefinitionTooltip @avt-default-state' + ); }); test('@avt-keyboard-state default', async ({ page }) => { diff --git a/e2e/components/DefinitionTooltip/DefinitionTooltip-test.e2e.js b/e2e/components/DefinitionTooltip/DefinitionTooltip-test.e2e.js index b8e36f9e0261..920244158330 100644 --- a/e2e/components/DefinitionTooltip/DefinitionTooltip-test.e2e.js +++ b/e2e/components/DefinitionTooltip/DefinitionTooltip-test.e2e.js @@ -32,6 +32,6 @@ test.describe('DefinitionTooltip', () => { theme: 'white', }, }); - await expect(page).toHaveNoACViolations('DefinitionTooltip'); + await expect(page).toHaveNoACViolations('DefinitionTooltip default'); }); }); diff --git a/e2e/components/Dropdown/Dropdown-test.avt.e2e.js b/e2e/components/Dropdown/Dropdown-test.avt.e2e.js index d2654c2096c5..a6ae9616c590 100644 --- a/e2e/components/Dropdown/Dropdown-test.avt.e2e.js +++ b/e2e/components/Dropdown/Dropdown-test.avt.e2e.js @@ -11,7 +11,7 @@ const { expect, test } = require('@playwright/test'); const { visitStory } = require('../../test-utils/storybook'); test.describe('Dropdown @avt', () => { - test('accessibility-checker', async ({ page }) => { + test('@avt-default-state', async ({ page }) => { await visitStory(page, { component: 'Dropdown', id: 'components-dropdown--default', @@ -23,7 +23,7 @@ test.describe('Dropdown @avt', () => { }); // Skipping now due to AVT violation, possible false positive - test.skip('accessibility-checker open dropdown', async ({ page }) => { + test.skip('@avt-advanced-states open state', async ({ page }) => { await visitStory(page, { component: 'Dropdown', id: 'components-dropdown--default', @@ -45,7 +45,7 @@ test.describe('Dropdown @avt', () => { await expect(page).toHaveNoACViolations('Dropdown-open'); }); - test('dropdown - keyboard nav', async ({ page }) => { + test('@avt-keyboard-nav', async ({ page }) => { await visitStory(page, { component: 'Dropdown', id: 'components-dropdown--default', diff --git a/e2e/components/ErrorBoundary/ErrorBoundary-test.avt.e2e.js b/e2e/components/ErrorBoundary/ErrorBoundary-test.avt.e2e.js index 228acfe6e1bc..8beb3fc151f0 100644 --- a/e2e/components/ErrorBoundary/ErrorBoundary-test.avt.e2e.js +++ b/e2e/components/ErrorBoundary/ErrorBoundary-test.avt.e2e.js @@ -11,7 +11,7 @@ const { expect, test } = require('@playwright/test'); const { visitStory } = require('../../test-utils/storybook'); test.describe('ErrorBoundary @avt', () => { - test('@avt-default-state ErrorBoundary', async ({ page }) => { + test('@avt-default-state', async ({ page }) => { await visitStory(page, { component: 'ErrorBoundary', id: 'components-errorboundary--default', @@ -22,9 +22,7 @@ test.describe('ErrorBoundary @avt', () => { await expect(page).toHaveNoACViolations('ErrorBoundary'); }); - test('@avt-advanced-states ErrorBoundary with Custom context', async ({ - page, - }) => { + test('@avt-advanced-states with Custom context', async ({ page }) => { await visitStory(page, { component: 'ErrorBoundary', id: 'components-errorboundary--skeleton', @@ -37,7 +35,7 @@ test.describe('ErrorBoundary @avt', () => { ); }); - test('@avt-keyboard-state default', async ({ page }) => { + test('@avt-keyboard-state', async ({ page }) => { await visitStory(page, { component: 'ErrorBoundary', id: 'components-errorboundary--default', diff --git a/e2e/components/ErrorBoundary/ErrorBoundary-test.e2e.js b/e2e/components/ErrorBoundary/ErrorBoundary-test.e2e.js index ad6e8a904fd3..8133ea887e59 100644 --- a/e2e/components/ErrorBoundary/ErrorBoundary-test.e2e.js +++ b/e2e/components/ErrorBoundary/ErrorBoundary-test.e2e.js @@ -31,6 +31,6 @@ test.describe('ErrorBoundary', () => { theme: 'white', }, }); - await expect(page).toHaveNoACViolations('ErrorBoundary'); + await expect(page).toHaveNoACViolations('ErrorBoundary default'); }); }); diff --git a/e2e/components/FileUploader/FileUploader-test.avt.e2e.js b/e2e/components/FileUploader/FileUploader-test.avt.e2e.js index ce64699b0c28..bad0cb9e622f 100644 --- a/e2e/components/FileUploader/FileUploader-test.avt.e2e.js +++ b/e2e/components/FileUploader/FileUploader-test.avt.e2e.js @@ -12,7 +12,7 @@ const { visitStory } = require('../../test-utils/storybook'); const path = require('path'); test.describe('FileUploader @avt', () => { - test('@avt-default-state FileUploader', async ({ page }) => { + test('@avt-default-state', async ({ page }) => { await visitStory(page, { component: 'FileUploader', id: 'components-fileuploader--default', @@ -94,7 +94,7 @@ test.describe('FileUploader @avt', () => { await expect(page).toHaveNoACViolations('FileUploader skeleton'); }); - test('@avt-keyboard-nav FileUploader', async ({ page }) => { + test('@avt-keyboard-nav', async ({ page }) => { await visitStory(page, { component: 'FileUploader', id: 'components-fileuploader--default', @@ -124,7 +124,7 @@ test.describe('FileUploader @avt', () => { }); test.slow( - '@avt-keyboard-nav FileUploader Drag and drop multiple files', + '@avt-keyboard-nav Drag and drop multiple files', async ({ page }) => { await visitStory(page, { component: 'FileUploader', @@ -168,9 +168,7 @@ test.describe('FileUploader @avt', () => { } ); - test('@avt-keyboard-nav FileUploader Drag and drop single file', async ({ - page, - }) => { + test('@avt-keyboard-nav Drag and drop single file', async ({ page }) => { await visitStory(page, { component: 'FileUploader', id: 'components-fileuploader--drag-and-drop-upload-single-container-example-application', diff --git a/e2e/components/FlexGrid/FlexGrid-test.avt.e2e.js b/e2e/components/FlexGrid/FlexGrid-test.avt.e2e.js new file mode 100644 index 000000000000..b084c409ee1b --- /dev/null +++ b/e2e/components/FlexGrid/FlexGrid-test.avt.e2e.js @@ -0,0 +1,24 @@ +/** + * 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('FlexGrid @avt', () => { + test('@avt-default-state', async ({ page }) => { + await visitStory(page, { + component: 'FlexGrid', + id: 'elements-flexgrid--auto-columns', + globals: { + theme: 'white', + }, + }); + await expect(page).toHaveNoACViolations('FlexGrid @avt-default-state'); + }); +}); diff --git a/e2e/components/FlexGrid/FlexGrid-test.e2e.js b/e2e/components/FlexGrid/FlexGrid-test.e2e.js index 357149404327..f94d518339e1 100644 --- a/e2e/components/FlexGrid/FlexGrid-test.e2e.js +++ b/e2e/components/FlexGrid/FlexGrid-test.e2e.js @@ -7,9 +7,9 @@ 'use strict'; -const { expect, test } = require('@playwright/test'); +const { test } = require('@playwright/test'); const { themes } = require('../../test-utils/env'); -const { snapshotStory, visitStory } = require('../../test-utils/storybook'); +const { snapshotStory } = require('../../test-utils/storybook'); test.describe('FlexGrid', () => { themes.forEach((theme) => { @@ -87,15 +87,4 @@ test.describe('FlexGrid', () => { }); }); }); - - test('accessibility-checker @avt', async ({ page }) => { - await visitStory(page, { - component: 'FlexGrid', - id: 'elements-flexgrid--auto-columns', - globals: { - theme: 'white', - }, - }); - await expect(page).toHaveNoACViolations('FlexGrid'); - }); }); diff --git a/e2e/components/FluidComboBox/FluidComboBox-test.avt.e2e.js b/e2e/components/FluidComboBox/FluidComboBox-test.avt.e2e.js new file mode 100644 index 000000000000..a2207c8199cf --- /dev/null +++ b/e2e/components/FluidComboBox/FluidComboBox-test.avt.e2e.js @@ -0,0 +1,24 @@ +/** + * Copyright IBM Corp. 2022 + * + * 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('FluidComboBox @avt', () => { + test('@avt-default-state', async ({ page }) => { + await visitStory(page, { + component: 'FluidComboBox', + id: 'experimental-unstable-fluidcombobox--default', + globals: { + theme: 'white', + }, + }); + await expect(page).toHaveNoACViolations('FluidComboBox @avt-default-state'); + }); +}); diff --git a/e2e/components/FluidComboBox/FluidComboBox-test.e2e.js b/e2e/components/FluidComboBox/FluidComboBox-test.e2e.js index 68244400ce47..6c9ceb409f42 100644 --- a/e2e/components/FluidComboBox/FluidComboBox-test.e2e.js +++ b/e2e/components/FluidComboBox/FluidComboBox-test.e2e.js @@ -7,9 +7,9 @@ 'use strict'; -const { expect, test } = require('@playwright/test'); +const { test } = require('@playwright/test'); const { themes } = require('../../test-utils/env'); -const { snapshotStory, visitStory } = require('../../test-utils/storybook'); +const { snapshotStory } = require('../../test-utils/storybook'); test.describe('FluidComboBox', () => { themes.forEach((theme) => { @@ -23,15 +23,4 @@ test.describe('FluidComboBox', () => { }); }); }); - - test('accessibility-checker @avt', async ({ page }) => { - await visitStory(page, { - component: 'FluidComboBox', - id: 'experimental-unstable-fluidcombobox--default', - globals: { - theme: 'white', - }, - }); - await expect(page).toHaveNoACViolations('FluidComboBox'); - }); }); diff --git a/e2e/components/FluidDatePicker/FluidDatePicker-test.avt.e2e.js b/e2e/components/FluidDatePicker/FluidDatePicker-test.avt.e2e.js new file mode 100644 index 000000000000..36c7a9a3db1b --- /dev/null +++ b/e2e/components/FluidDatePicker/FluidDatePicker-test.avt.e2e.js @@ -0,0 +1,44 @@ +/** + * Copyright IBM Corp. 2022 + * + * 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('FluidDatePicker @avt', () => { + test('@avt-default-state', async ({ page }) => { + await visitStory(page, { + component: 'FluidDatePicker', + id: 'experimental-unstable-fluiddatepicker--range-with-calendar', + globals: { + theme: 'white', + }, + }); + }); + + test('@avt-advanced-states single', async ({ page }) => { + await visitStory(page, { + component: 'FluidDatePicker', + id: 'experimental-unstable-fluiddatepicker--single', + globals: { + theme: 'white', + }, + }); + }); + + test('@avt-advanced-states simple', async ({ page }) => { + await visitStory(page, { + component: 'FluidDatePicker', + id: 'experimental-unstable-fluiddatepicker--simple', + globals: { + theme: 'white', + }, + }); + await expect(page).toHaveNoACViolations('FluidDatePicker'); + }); +}); diff --git a/e2e/components/FluidDatePicker/FluidDatePicker-test.e2e.js b/e2e/components/FluidDatePicker/FluidDatePicker-test.e2e.js index 558358d080c1..fc99c1373adf 100644 --- a/e2e/components/FluidDatePicker/FluidDatePicker-test.e2e.js +++ b/e2e/components/FluidDatePicker/FluidDatePicker-test.e2e.js @@ -7,9 +7,9 @@ 'use strict'; -const { expect, test } = require('@playwright/test'); +const { test } = require('@playwright/test'); const { themes } = require('../../test-utils/env'); -const { snapshotStory, visitStory } = require('../../test-utils/storybook'); +const { snapshotStory } = require('../../test-utils/storybook'); test.describe('FluidDatePicker', () => { themes.forEach((theme) => { @@ -39,29 +39,4 @@ test.describe('FluidDatePicker', () => { }); }); }); - - test('accessibility-checker @avt', async ({ page }) => { - await visitStory(page, { - component: 'FluidDatePicker', - id: 'experimental-unstable-fluiddatepicker--range-with-calendar', - globals: { - theme: 'white', - }, - }); - await visitStory(page, { - component: 'FluidDatePicker', - id: 'experimental-unstable-fluiddatepicker--single', - globals: { - theme: 'white', - }, - }); - await visitStory(page, { - component: 'FluidDatePicker', - id: 'experimental-unstable-fluiddatepicker--simple', - globals: { - theme: 'white', - }, - }); - await expect(page).toHaveNoACViolations('FluidDatePicker'); - }); }); diff --git a/e2e/components/FluidDropdown/FluidDropdown-test.avt.e2e.js b/e2e/components/FluidDropdown/FluidDropdown-test.avt.e2e.js new file mode 100644 index 000000000000..4c90c7fd89e7 --- /dev/null +++ b/e2e/components/FluidDropdown/FluidDropdown-test.avt.e2e.js @@ -0,0 +1,24 @@ +/** + * Copyright IBM Corp. 2022 + * + * 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('FluidDropdown @avt', () => { + test('@avt-default-state', async ({ page }) => { + await visitStory(page, { + component: 'FluidDropdown', + id: 'experimental-unstable-fluiddropdown--default', + globals: { + theme: 'white', + }, + }); + await expect(page).toHaveNoACViolations('FluidDropdown'); + }); +}); diff --git a/e2e/components/FluidDropdown/FluidDropdown-test.e2e.js b/e2e/components/FluidDropdown/FluidDropdown-test.e2e.js index b6a7b7a10001..3727142f5afc 100644 --- a/e2e/components/FluidDropdown/FluidDropdown-test.e2e.js +++ b/e2e/components/FluidDropdown/FluidDropdown-test.e2e.js @@ -7,9 +7,9 @@ 'use strict'; -const { expect, test } = require('@playwright/test'); +const { test } = require('@playwright/test'); const { themes } = require('../../test-utils/env'); -const { snapshotStory, visitStory } = require('../../test-utils/storybook'); +const { snapshotStory } = require('../../test-utils/storybook'); test.describe('FluidDropdown', () => { themes.forEach((theme) => { @@ -23,15 +23,4 @@ test.describe('FluidDropdown', () => { }); }); }); - - test('accessibility-checker @avt', async ({ page }) => { - await visitStory(page, { - component: 'FluidDropdown', - id: 'experimental-unstable-fluiddropdown--default', - globals: { - theme: 'white', - }, - }); - await expect(page).toHaveNoACViolations('FluidDropdown'); - }); }); diff --git a/e2e/components/FluidForm/FluidForm-test.avt.e2e.js b/e2e/components/FluidForm/FluidForm-test.avt.e2e.js new file mode 100644 index 000000000000..933cd9fcb4e5 --- /dev/null +++ b/e2e/components/FluidForm/FluidForm-test.avt.e2e.js @@ -0,0 +1,24 @@ +/** + * 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('FluidForm @avt', () => { + test('@avt-default-state', async ({ page }) => { + await visitStory(page, { + component: 'FluidForm', + id: 'experimental-fluidform--default', + globals: { + theme: 'white', + }, + }); + await expect(page).toHaveNoACViolations('FluidForm @avt-default-state'); + }); +}); diff --git a/e2e/components/FluidForm/FluidForm-test.e2e.js b/e2e/components/FluidForm/FluidForm-test.e2e.js index 6aa9b10ea3b2..3726f961328a 100644 --- a/e2e/components/FluidForm/FluidForm-test.e2e.js +++ b/e2e/components/FluidForm/FluidForm-test.e2e.js @@ -6,9 +6,9 @@ */ 'use strict'; -const { expect, test } = require('@playwright/test'); +const { test } = require('@playwright/test'); const { themes } = require('../../test-utils/env'); -const { snapshotStory, visitStory } = require('../../test-utils/storybook'); +const { snapshotStory } = require('../../test-utils/storybook'); test.describe('FluidForm', () => { themes.forEach((theme) => { @@ -22,15 +22,4 @@ test.describe('FluidForm', () => { }); }); }); - - test('accessibility-checker @avt', async ({ page }) => { - await visitStory(page, { - component: 'FluidForm', - id: 'experimental-fluidform--default', - globals: { - theme: 'white', - }, - }); - await expect(page).toHaveNoACViolations('FluidForm'); - }); }); diff --git a/e2e/components/FluidMultiSelect/FluidMultiSelect-test.avt.e2e.js b/e2e/components/FluidMultiSelect/FluidMultiSelect-test.avt.e2e.js new file mode 100644 index 000000000000..6d5e8ffc89e8 --- /dev/null +++ b/e2e/components/FluidMultiSelect/FluidMultiSelect-test.avt.e2e.js @@ -0,0 +1,26 @@ +/** + * Copyright IBM Corp. 2022 + * + * 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('FluidMultiSelect @avt', () => { + test('@avt-default-state', async ({ page }) => { + await visitStory(page, { + component: 'FluidMultiSelect', + id: 'experimental-unstable-fluidmultiselect--default', + globals: { + theme: 'white', + }, + }); + await expect(page).toHaveNoACViolations( + 'FluidMultiSelect @avt-default-state' + ); + }); +}); diff --git a/e2e/components/FluidMultiSelect/FluidMultiSelect-test.e2e.js b/e2e/components/FluidMultiSelect/FluidMultiSelect-test.e2e.js index 1de20519e36d..1749b55a3478 100644 --- a/e2e/components/FluidMultiSelect/FluidMultiSelect-test.e2e.js +++ b/e2e/components/FluidMultiSelect/FluidMultiSelect-test.e2e.js @@ -7,9 +7,9 @@ 'use strict'; -const { expect, test } = require('@playwright/test'); +const { test } = require('@playwright/test'); const { themes } = require('../../test-utils/env'); -const { snapshotStory, visitStory } = require('../../test-utils/storybook'); +const { snapshotStory } = require('../../test-utils/storybook'); test.describe('FluidMultiSelect', () => { themes.forEach((theme) => { @@ -23,15 +23,4 @@ test.describe('FluidMultiSelect', () => { }); }); }); - - test('accessibility-checker @avt', async ({ page }) => { - await visitStory(page, { - component: 'FluidMultiSelect', - id: 'experimental-unstable-fluidmultiselect--default', - globals: { - theme: 'white', - }, - }); - await expect(page).toHaveNoACViolations('FluidMultiSelect'); - }); }); diff --git a/e2e/components/FluidNumberInput/FluidNumberInput-test.avt.e2e.js b/e2e/components/FluidNumberInput/FluidNumberInput-test.avt.e2e.js new file mode 100644 index 000000000000..8ce8a3bc22b1 --- /dev/null +++ b/e2e/components/FluidNumberInput/FluidNumberInput-test.avt.e2e.js @@ -0,0 +1,26 @@ +/** + * 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('FluidNumberInput @avt', () => { + test('@avt-default-state', async ({ page }) => { + await visitStory(page, { + component: 'FluidNumberInput', + id: 'experimental-unstable-fluidnumberinput--default', + globals: { + theme: 'white', + }, + }); + await expect(page).toHaveNoACViolations( + 'FluidNumberInput @avt-default-state' + ); + }); +}); diff --git a/e2e/components/FluidNumberInput/FluidNumberInput-test.e2e.js b/e2e/components/FluidNumberInput/FluidNumberInput-test.e2e.js index f2021289df4f..dcbe915ab3e9 100644 --- a/e2e/components/FluidNumberInput/FluidNumberInput-test.e2e.js +++ b/e2e/components/FluidNumberInput/FluidNumberInput-test.e2e.js @@ -7,9 +7,9 @@ 'use strict'; -const { expect, test } = require('@playwright/test'); +const { test } = require('@playwright/test'); const { themes } = require('../../test-utils/env'); -const { snapshotStory, visitStory } = require('../../test-utils/storybook'); +const { snapshotStory } = require('../../test-utils/storybook'); test.describe('FluidNumberInput', () => { themes.forEach((theme) => { @@ -23,15 +23,4 @@ test.describe('FluidNumberInput', () => { }); }); }); - - test('accessibility-checker @avt', async ({ page }) => { - await visitStory(page, { - component: 'FluidNumberInput', - id: 'experimental-unstable-fluidnumberinput--default', - globals: { - theme: 'white', - }, - }); - await expect(page).toHaveNoACViolations('FluidNumberInput'); - }); }); diff --git a/e2e/components/FluidSearch/FluidSearch-test.avt.e2e.js b/e2e/components/FluidSearch/FluidSearch-test.avt.e2e.js new file mode 100644 index 000000000000..4f89ed23fd6c --- /dev/null +++ b/e2e/components/FluidSearch/FluidSearch-test.avt.e2e.js @@ -0,0 +1,24 @@ +/** + * Copyright IBM Corp. 2022 + * + * 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('FluidSearch @avt', () => { + test('@avt-default-state', async ({ page }) => { + await visitStory(page, { + component: 'FluidSearch', + id: 'experimental-unstable-fluidsearch--default', + globals: { + theme: 'white', + }, + }); + await expect(page).toHaveNoACViolations('FluidSearch @avt-default-state'); + }); +}); diff --git a/e2e/components/FluidSearch/FluidSearch-test.e2e.js b/e2e/components/FluidSearch/FluidSearch-test.e2e.js index bff0cd837907..7a87188cf735 100644 --- a/e2e/components/FluidSearch/FluidSearch-test.e2e.js +++ b/e2e/components/FluidSearch/FluidSearch-test.e2e.js @@ -7,9 +7,9 @@ 'use strict'; -const { expect, test } = require('@playwright/test'); +const { test } = require('@playwright/test'); const { themes } = require('../../test-utils/env'); -const { snapshotStory, visitStory } = require('../../test-utils/storybook'); +const { snapshotStory } = require('../../test-utils/storybook'); test.describe('FluidSearch', () => { themes.forEach((theme) => { @@ -23,15 +23,4 @@ test.describe('FluidSearch', () => { }); }); }); - - test('accessibility-checker @avt', async ({ page }) => { - await visitStory(page, { - component: 'FluidSearch', - id: 'experimental-unstable-fluidsearch--default', - globals: { - theme: 'white', - }, - }); - await expect(page).toHaveNoACViolations('FluidSearch'); - }); }); diff --git a/e2e/components/FluidSelect/FluidSelect-test.avt.e2e.js b/e2e/components/FluidSelect/FluidSelect-test.avt.e2e.js new file mode 100644 index 000000000000..7944f5346cfa --- /dev/null +++ b/e2e/components/FluidSelect/FluidSelect-test.avt.e2e.js @@ -0,0 +1,24 @@ +/** + * Copyright IBM Corp. 2022 + * + * 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('FluidSelect @avt', () => { + test('@avt-default-state', async ({ page }) => { + await visitStory(page, { + component: 'FluidSelect', + id: 'experimental-unstable-fluidselect--default', + globals: { + theme: 'white', + }, + }); + await expect(page).toHaveNoACViolations('FluidSelect @avt-default-state'); + }); +}); diff --git a/e2e/components/FluidSelect/FluidSelect-test.e2e.js b/e2e/components/FluidSelect/FluidSelect-test.e2e.js index d95b795898a1..c853e87b0731 100644 --- a/e2e/components/FluidSelect/FluidSelect-test.e2e.js +++ b/e2e/components/FluidSelect/FluidSelect-test.e2e.js @@ -7,9 +7,9 @@ 'use strict'; -const { expect, test } = require('@playwright/test'); +const { test } = require('@playwright/test'); const { themes } = require('../../test-utils/env'); -const { snapshotStory, visitStory } = require('../../test-utils/storybook'); +const { snapshotStory } = require('../../test-utils/storybook'); test.describe('FluidSelect', () => { themes.forEach((theme) => { @@ -23,15 +23,4 @@ test.describe('FluidSelect', () => { }); }); }); - - test('accessibility-checker @avt', async ({ page }) => { - await visitStory(page, { - component: 'FluidSelect', - id: 'experimental-unstable-fluidselect--default', - globals: { - theme: 'white', - }, - }); - await expect(page).toHaveNoACViolations('FluidSelect'); - }); }); diff --git a/e2e/components/FluidTextArea/FluidTextArea-test.avt.e2e.js b/e2e/components/FluidTextArea/FluidTextArea-test.avt.e2e.js new file mode 100644 index 000000000000..7c736b571abd --- /dev/null +++ b/e2e/components/FluidTextArea/FluidTextArea-test.avt.e2e.js @@ -0,0 +1,24 @@ +/** + * Copyright IBM Corp. 2022 + * + * 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('FluidTextArea @avt', () => { + test('@avt-default-state', async ({ page }) => { + await visitStory(page, { + component: 'FluidTextArea', + id: 'experimental-unstable-fluidtextarea--default', + globals: { + theme: 'white', + }, + }); + await expect(page).toHaveNoACViolations('FluidTextArea @avt-default-state'); + }); +}); diff --git a/e2e/components/FluidTextArea/FluidTextArea-test.e2e.js b/e2e/components/FluidTextArea/FluidTextArea-test.e2e.js index 5978ea896186..82bcd48e9c22 100644 --- a/e2e/components/FluidTextArea/FluidTextArea-test.e2e.js +++ b/e2e/components/FluidTextArea/FluidTextArea-test.e2e.js @@ -7,9 +7,9 @@ 'use strict'; -const { expect, test } = require('@playwright/test'); +const { test } = require('@playwright/test'); const { themes } = require('../../test-utils/env'); -const { snapshotStory, visitStory } = require('../../test-utils/storybook'); +const { snapshotStory } = require('../../test-utils/storybook'); test.describe('FluidTextArea', () => { themes.forEach((theme) => { @@ -23,15 +23,4 @@ test.describe('FluidTextArea', () => { }); }); }); - - test('accessibility-checker @avt', async ({ page }) => { - await visitStory(page, { - component: 'FluidTextArea', - id: 'experimental-unstable-fluidtextarea--default', - globals: { - theme: 'white', - }, - }); - await expect(page).toHaveNoACViolations('FluidTextArea'); - }); }); diff --git a/e2e/components/FluidTextInput/FluidTextInput-test.avt.e2e.js b/e2e/components/FluidTextInput/FluidTextInput-test.avt.e2e.js new file mode 100644 index 000000000000..8551856754bd --- /dev/null +++ b/e2e/components/FluidTextInput/FluidTextInput-test.avt.e2e.js @@ -0,0 +1,37 @@ +/** + * 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('FluidTextInput @avt', () => { + test('@avt-default-state', async ({ page }) => { + await visitStory(page, { + component: 'FluidTextInput', + id: 'experimental-unstable-fluidtextinput--default', + globals: { + theme: 'white', + }, + }); + await expect(page).toHaveNoACViolations( + 'FluidTextInput @avt-default-state' + ); + }); + + test('@avt-advanced-states password input', async ({ page }) => { + await visitStory(page, { + component: 'FluidTextInput', + id: 'experimental-unstable-fluidtextinput--password-input', + globals: { + theme: 'white', + }, + }); + await expect(page).toHaveNoACViolations('FluidTextInput password input'); + }); +}); diff --git a/e2e/components/FluidTextInput/FluidTextInput-test.e2e.js b/e2e/components/FluidTextInput/FluidTextInput-test.e2e.js index 26a544572020..f8a0bae501b2 100644 --- a/e2e/components/FluidTextInput/FluidTextInput-test.e2e.js +++ b/e2e/components/FluidTextInput/FluidTextInput-test.e2e.js @@ -7,9 +7,9 @@ 'use strict'; -const { expect, test } = require('@playwright/test'); +const { test } = require('@playwright/test'); const { themes } = require('../../test-utils/env'); -const { snapshotStory, visitStory } = require('../../test-utils/storybook'); +const { snapshotStory } = require('../../test-utils/storybook'); test.describe('FluidTextInput', () => { themes.forEach((theme) => { @@ -29,22 +29,4 @@ test.describe('FluidTextInput', () => { }); }); }); - - test('accessibility-checker @avt', async ({ page }) => { - await visitStory(page, { - component: 'FluidTextInput', - id: 'experimental-unstable-fluidtextinput--default', - globals: { - theme: 'white', - }, - }); - await visitStory(page, { - component: 'FluidTextInput', - id: 'experimental-unstable-fluidtextinput--password-input', - globals: { - theme: 'white', - }, - }); - await expect(page).toHaveNoACViolations('FluidTextInput'); - }); }); diff --git a/e2e/components/FluidTimePicker/FluidTimePicker-test.avt.e2e.js b/e2e/components/FluidTimePicker/FluidTimePicker-test.avt.e2e.js new file mode 100644 index 000000000000..c64bc38c63bf --- /dev/null +++ b/e2e/components/FluidTimePicker/FluidTimePicker-test.avt.e2e.js @@ -0,0 +1,26 @@ +/** + * 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('FluidTimePicker @avt', () => { + test('@avt-default-state', async ({ page }) => { + await visitStory(page, { + component: 'FluidTimePicker', + id: 'experimental-unstable-fluidtimepicker--default', + globals: { + theme: 'white', + }, + }); + await expect(page).toHaveNoACViolations( + 'FluidTimePicker @avt-default-state' + ); + }); +}); diff --git a/e2e/components/FluidTimePicker/FluidTextInput-test.e2e.js b/e2e/components/FluidTimePicker/FluidTimePicker-test.e2e.js similarity index 57% rename from e2e/components/FluidTimePicker/FluidTextInput-test.e2e.js rename to e2e/components/FluidTimePicker/FluidTimePicker-test.e2e.js index 37a5dbf6641e..db85fec91e06 100644 --- a/e2e/components/FluidTimePicker/FluidTextInput-test.e2e.js +++ b/e2e/components/FluidTimePicker/FluidTimePicker-test.e2e.js @@ -7,9 +7,9 @@ 'use strict'; -const { expect, test } = require('@playwright/test'); +const { test } = require('@playwright/test'); const { themes } = require('../../test-utils/env'); -const { snapshotStory, visitStory } = require('../../test-utils/storybook'); +const { snapshotStory } = require('../../test-utils/storybook'); test.describe('FluidTimePicker', () => { themes.forEach((theme) => { @@ -23,15 +23,4 @@ test.describe('FluidTimePicker', () => { }); }); }); - - test('accessibility-checker @avt', async ({ page }) => { - await visitStory(page, { - component: 'FluidTimePicker', - id: 'experimental-unstable-fluidtimepicker--default', - globals: { - theme: 'white', - }, - }); - await expect(page).toHaveNoACViolations('FluidTimePicker'); - }); }); diff --git a/e2e/components/Form/Form-test.avt.e2e.js b/e2e/components/Form/Form-test.avt.e2e.js new file mode 100644 index 000000000000..66535f744141 --- /dev/null +++ b/e2e/components/Form/Form-test.avt.e2e.js @@ -0,0 +1,24 @@ +/** + * 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('Form @avt', () => { + test('@avt-default-state', async ({ page }) => { + await visitStory(page, { + component: 'Form', + id: 'components-form--default', + globals: { + theme: 'white', + }, + }); + await expect(page).toHaveNoACViolations('Form @avt-default-state'); + }); +}); diff --git a/e2e/components/Form/Form-test.e2e.js b/e2e/components/Form/Form-test.e2e.js index f24f2a64ac2f..eb313f7c8e40 100644 --- a/e2e/components/Form/Form-test.e2e.js +++ b/e2e/components/Form/Form-test.e2e.js @@ -7,9 +7,9 @@ 'use strict'; -const { expect, test } = require('@playwright/test'); +const { test } = require('@playwright/test'); const { themes } = require('../../test-utils/env'); -const { snapshotStory, visitStory } = require('../../test-utils/storybook'); +const { snapshotStory } = require('../../test-utils/storybook'); test.describe('Form', () => { themes.forEach((theme) => { @@ -23,15 +23,4 @@ test.describe('Form', () => { }); }); }); - - test('accessibility-checker @avt', async ({ page }) => { - await visitStory(page, { - component: 'Form', - id: 'components-form--default', - globals: { - theme: 'white', - }, - }); - await expect(page).toHaveNoACViolations('Form'); - }); }); diff --git a/e2e/components/FormGroup/FormGroup-test.avt.e2e.js b/e2e/components/FormGroup/FormGroup-test.avt.e2e.js new file mode 100644 index 000000000000..5e6ded2328e9 --- /dev/null +++ b/e2e/components/FormGroup/FormGroup-test.avt.e2e.js @@ -0,0 +1,24 @@ +/** + * 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('FormGroup @avt', () => { + test('@avt-default-state', async ({ page }) => { + await visitStory(page, { + component: 'FormGroup', + id: 'components-formgroup--default', + globals: { + theme: 'white', + }, + }); + await expect(page).toHaveNoACViolations('FormGroup @avt-default-state'); + }); +}); diff --git a/e2e/components/FormGroup/FormGroup-test.e2e.js b/e2e/components/FormGroup/FormGroup-test.e2e.js index a5c65ecc32be..7381b658ced7 100644 --- a/e2e/components/FormGroup/FormGroup-test.e2e.js +++ b/e2e/components/FormGroup/FormGroup-test.e2e.js @@ -7,9 +7,9 @@ 'use strict'; -const { expect, test } = require('@playwright/test'); +const { test } = require('@playwright/test'); const { themes } = require('../../test-utils/env'); -const { snapshotStory, visitStory } = require('../../test-utils/storybook'); +const { snapshotStory } = require('../../test-utils/storybook'); test.describe('FormGroup', () => { themes.forEach((theme) => { @@ -23,15 +23,4 @@ test.describe('FormGroup', () => { }); }); }); - - test('accessibility-checker @avt', async ({ page }) => { - await visitStory(page, { - component: 'FormGroup', - id: 'components-formgroup--default', - globals: { - theme: 'white', - }, - }); - await expect(page).toHaveNoACViolations('FormGroup'); - }); }); diff --git a/e2e/components/FormLabel/FormLabel-test.avt.e2e.js b/e2e/components/FormLabel/FormLabel-test.avt.e2e.js index f13effecee00..e8c46ddfdc57 100644 --- a/e2e/components/FormLabel/FormLabel-test.avt.e2e.js +++ b/e2e/components/FormLabel/FormLabel-test.avt.e2e.js @@ -11,7 +11,7 @@ const { expect, test } = require('@playwright/test'); const { visitStory } = require('../../test-utils/storybook'); test.describe('FormLabel @avt', () => { - test('@avt-default-state FormLabel', async ({ page }) => { + test('@avt-default-state', async ({ page }) => { await visitStory(page, { component: 'FormLabel', id: 'components-formlabel--default', diff --git a/e2e/components/Grid/Grid-test.avt.e2e.js b/e2e/components/Grid/Grid-test.avt.e2e.js new file mode 100644 index 000000000000..76b578d701cf --- /dev/null +++ b/e2e/components/Grid/Grid-test.avt.e2e.js @@ -0,0 +1,23 @@ +/** + * 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('Grid @avt', () => { + test('@avt-default-state', async ({ page }) => { + await visitStory(page, { + component: 'Grid', + id: 'elements-grid--default', + globals: { + theme: 'white', + }, + }); + await expect(page).toHaveNoACViolations('Grid @avt-default-state'); + }); +}); diff --git a/e2e/components/Grid/Grid-test.e2e.js b/e2e/components/Grid/Grid-test.e2e.js index e10f5984f7f1..222bca6106a5 100644 --- a/e2e/components/Grid/Grid-test.e2e.js +++ b/e2e/components/Grid/Grid-test.e2e.js @@ -6,9 +6,9 @@ */ 'use strict'; -const { expect, test } = require('@playwright/test'); +const { test } = require('@playwright/test'); const { themes } = require('../../test-utils/env'); -const { snapshotStory, visitStory } = require('../../test-utils/storybook'); +const { snapshotStory } = require('../../test-utils/storybook'); test.describe('Grid', () => { themes.forEach((theme) => { @@ -22,15 +22,4 @@ test.describe('Grid', () => { }); }); }); - - test('accessibility-checker @avt', async ({ page }) => { - await visitStory(page, { - component: 'Grid', - id: 'elements-grid--default', - globals: { - theme: 'white', - }, - }); - await expect(page).toHaveNoACViolations('Grid'); - }); }); diff --git a/e2e/components/Heading/Heading-test.avt.e2e.js b/e2e/components/Heading/Heading-test.avt.e2e.js new file mode 100644 index 000000000000..f17248e75386 --- /dev/null +++ b/e2e/components/Heading/Heading-test.avt.e2e.js @@ -0,0 +1,23 @@ +/** + * 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('Heading @avt', () => { + test('@avt-default-state', async ({ page }) => { + await visitStory(page, { + component: 'Heading', + id: 'components-heading--default', + globals: { + theme: 'white', + }, + }); + await expect(page).toHaveNoACViolations('Heading @avt-default-state'); + }); +}); diff --git a/e2e/components/Heading/Heading-test.e2e.js b/e2e/components/Heading/Heading-test.e2e.js index 3f0c07b13ec5..c86fb35a1471 100644 --- a/e2e/components/Heading/Heading-test.e2e.js +++ b/e2e/components/Heading/Heading-test.e2e.js @@ -6,9 +6,9 @@ */ 'use strict'; -const { expect, test } = require('@playwright/test'); +const { test } = require('@playwright/test'); const { themes } = require('../../test-utils/env'); -const { snapshotStory, visitStory } = require('../../test-utils/storybook'); +const { snapshotStory } = require('../../test-utils/storybook'); test.describe('Heading', () => { themes.forEach((theme) => { @@ -22,15 +22,4 @@ test.describe('Heading', () => { }); }); }); - - test('accessibility-checker @avt', async ({ page }) => { - await visitStory(page, { - component: 'Heading', - id: 'components-heading--default', - globals: { - theme: 'white', - }, - }); - await expect(page).toHaveNoACViolations('Heading'); - }); }); diff --git a/e2e/components/IconButton/IconButton-test.avt.e2e.js b/e2e/components/IconButton/IconButton-test.avt.e2e.js index 8d6ccb279f1d..aea69fae5171 100644 --- a/e2e/components/IconButton/IconButton-test.avt.e2e.js +++ b/e2e/components/IconButton/IconButton-test.avt.e2e.js @@ -10,7 +10,7 @@ import { expect, test } from '@playwright/test'; import { visitStory } from '../../test-utils/storybook'; test.describe('IconButton @avt', () => { - test('@avt-default-state IconButton', async ({ page }) => { + test('@avt-default-state', async ({ page }) => { await visitStory(page, { component: 'IconButton', id: 'components-iconbutton--default', @@ -21,7 +21,7 @@ test.describe('IconButton @avt', () => { await expect(page).toHaveNoACViolations('IconButton'); }); - test('@avt-keyboard-nav IconButton', async ({ page }) => { + test('@avt-keyboard-nav', async ({ page }) => { await visitStory(page, { component: 'IconButton', id: 'components-iconbutton--default', diff --git a/e2e/components/IdPrefix/IdPrefix-test.avt.e2e.js b/e2e/components/IdPrefix/IdPrefix-test.avt.e2e.js new file mode 100644 index 000000000000..316221df2b67 --- /dev/null +++ b/e2e/components/IdPrefix/IdPrefix-test.avt.e2e.js @@ -0,0 +1,23 @@ +/** + * 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('IdPrefix @avt', () => { + test('@avt-default-state', async ({ page }) => { + await visitStory(page, { + component: 'IdPrefix', + id: 'components-idprefix--default', + globals: { + theme: 'white', + }, + }); + await expect(page).toHaveNoACViolations('IdPrefix @avt-default-state'); + }); +}); diff --git a/e2e/components/IdPrefix/IdPrefix-test.e2e.js b/e2e/components/IdPrefix/IdPrefix-test.e2e.js index 9c3da11e0dc6..143b4239de7f 100644 --- a/e2e/components/IdPrefix/IdPrefix-test.e2e.js +++ b/e2e/components/IdPrefix/IdPrefix-test.e2e.js @@ -6,9 +6,9 @@ */ 'use strict'; -const { expect, test } = require('@playwright/test'); +const { test } = require('@playwright/test'); const { themes } = require('../../test-utils/env'); -const { snapshotStory, visitStory } = require('../../test-utils/storybook'); +const { snapshotStory } = require('../../test-utils/storybook'); test.describe('IdPrefix', () => { themes.forEach((theme) => { @@ -22,15 +22,4 @@ test.describe('IdPrefix', () => { }); }); }); - - test('accessibility-checker @avt', async ({ page }) => { - await visitStory(page, { - component: 'IdPrefix', - id: 'components-idprefix--default', - globals: { - theme: 'white', - }, - }); - await expect(page).toHaveNoACViolations('IdPrefix'); - }); }); diff --git a/e2e/components/InlineLoading/InlineLoading-test.avt.e2e.js b/e2e/components/InlineLoading/InlineLoading-test.avt.e2e.js new file mode 100644 index 000000000000..27dbcc7217f4 --- /dev/null +++ b/e2e/components/InlineLoading/InlineLoading-test.avt.e2e.js @@ -0,0 +1,24 @@ +/** + * 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('InlineLoading @avt', () => { + test('@avt-default-state', async ({ page }) => { + await visitStory(page, { + component: 'InlineLoading', + id: 'components-inlineloading--default', + globals: { + theme: 'white', + }, + }); + await expect(page).toHaveNoACViolations('InlineLoading @avt-default-state'); + }); +}); diff --git a/e2e/components/InlineLoading/InlineLoading-test.e2e.js b/e2e/components/InlineLoading/InlineLoading-test.e2e.js index b6dd76cfa473..23d7a2d2c610 100644 --- a/e2e/components/InlineLoading/InlineLoading-test.e2e.js +++ b/e2e/components/InlineLoading/InlineLoading-test.e2e.js @@ -7,9 +7,9 @@ 'use strict'; -const { expect, test } = require('@playwright/test'); +const { test } = require('@playwright/test'); const { themes } = require('../../test-utils/env'); -const { snapshotStory, visitStory } = require('../../test-utils/storybook'); +const { snapshotStory } = require('../../test-utils/storybook'); test.describe('InlineLoading', () => { themes.forEach((theme) => { @@ -31,15 +31,4 @@ test.describe('InlineLoading', () => { }); }); }); - - test('accessibility-checker @avt', async ({ page }) => { - await visitStory(page, { - component: 'InlineLoading', - id: 'components-inlineloading--default', - globals: { - theme: 'white', - }, - }); - await expect(page).toHaveNoACViolations('InlineLoading'); - }); }); diff --git a/e2e/components/Layer/Layer-test.avt.e2e.js b/e2e/components/Layer/Layer-test.avt.e2e.js new file mode 100644 index 000000000000..71de02233834 --- /dev/null +++ b/e2e/components/Layer/Layer-test.avt.e2e.js @@ -0,0 +1,24 @@ +/** + * 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('Layer @avt', () => { + test('@avt-default-state', async ({ page }) => { + await visitStory(page, { + component: 'Layer', + id: 'components-layer--default', + globals: { + theme: 'white', + }, + }); + await expect(page).toHaveNoACViolations('Layer @avt-default-state'); + }); +}); diff --git a/e2e/components/Layer/Layer-test.e2e.js b/e2e/components/Layer/Layer-test.e2e.js index 90bcb9aeb2f1..823112bf1696 100644 --- a/e2e/components/Layer/Layer-test.e2e.js +++ b/e2e/components/Layer/Layer-test.e2e.js @@ -7,9 +7,9 @@ 'use strict'; -const { expect, test } = require('@playwright/test'); +const { test } = require('@playwright/test'); const { themes } = require('../../test-utils/env'); -const { snapshotStory, visitStory } = require('../../test-utils/storybook'); +const { snapshotStory } = require('../../test-utils/storybook'); test.describe('Layer', () => { themes.forEach((theme) => { @@ -31,15 +31,4 @@ test.describe('Layer', () => { }); }); }); - - test('accessibility-checker @avt', async ({ page }) => { - await visitStory(page, { - component: 'Layer', - id: 'components-layer--default', - globals: { - theme: 'white', - }, - }); - await expect(page).toHaveNoACViolations('Layer'); - }); }); diff --git a/e2e/components/Link/Link-test.avt.e2e.js b/e2e/components/Link/Link-test.avt.e2e.js index 58db527262bd..a260ff20bc5b 100644 --- a/e2e/components/Link/Link-test.avt.e2e.js +++ b/e2e/components/Link/Link-test.avt.e2e.js @@ -11,7 +11,7 @@ const { expect, test } = require('@playwright/test'); const { visitStory } = require('../../test-utils/storybook'); test.describe('Link @avt', () => { - test('accessibility-checker default', async ({ page }) => { + test('@avt-default-state', async ({ page }) => { await visitStory(page, { component: 'Link', id: 'components-link--default', @@ -22,7 +22,7 @@ test.describe('Link @avt', () => { await expect(page).toHaveNoACViolations('components-link--default'); }); - test('accessibility-checker inline', async ({ page }) => { + test('@avt-advanced-states inline', async ({ page }) => { await visitStory(page, { component: 'Link', id: 'components-link--inline', @@ -33,7 +33,7 @@ test.describe('Link @avt', () => { await expect(page).toHaveNoACViolations('components-link--inline'); }); - test('accessibility-checker paired with icon', async ({ page }) => { + test('@avt-advanced-states paired with icon', async ({ page }) => { await visitStory(page, { component: 'Link', id: 'components-link--paired-with-icon', @@ -47,7 +47,7 @@ test.describe('Link @avt', () => { }); // Prevent timeout - test.slow('accessibility-checker keyboard nav', async ({ page }) => { + test.slow('@avt-keyboard-nav', async ({ page }) => { await visitStory(page, { component: 'Link', id: 'components-link--default', diff --git a/e2e/components/Loading/Loading-test.avt.e2e.js b/e2e/components/Loading/Loading-test.avt.e2e.js new file mode 100644 index 000000000000..996cbcbec214 --- /dev/null +++ b/e2e/components/Loading/Loading-test.avt.e2e.js @@ -0,0 +1,24 @@ +/** + * 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('Loading @avt', () => { + test('@avt-default-state', async ({ page }) => { + await visitStory(page, { + component: 'Loading', + id: 'components-loading--default', + globals: { + theme: 'white', + }, + }); + await expect(page).toHaveNoACViolations('Loading @avt-default-state'); + }); +}); diff --git a/e2e/components/Loading/Loading-test.e2e.js b/e2e/components/Loading/Loading-test.e2e.js index 828190e16c00..10406cc41655 100644 --- a/e2e/components/Loading/Loading-test.e2e.js +++ b/e2e/components/Loading/Loading-test.e2e.js @@ -7,9 +7,9 @@ 'use strict'; -const { expect, test } = require('@playwright/test'); +const { test } = require('@playwright/test'); const { themes } = require('../../test-utils/env'); -const { snapshotStory, visitStory } = require('../../test-utils/storybook'); +const { snapshotStory } = require('../../test-utils/storybook'); test.describe('Loading', () => { themes.forEach((theme) => { @@ -23,15 +23,4 @@ test.describe('Loading', () => { }); }); }); - - test('accessibility-checker @avt', async ({ page }) => { - await visitStory(page, { - component: 'Loading', - id: 'components-loading--default', - globals: { - theme: 'white', - }, - }); - await expect(page).toHaveNoACViolations('Loading'); - }); }); diff --git a/e2e/components/MenuButton/MenuButton-test.avt.e2e.js b/e2e/components/MenuButton/MenuButton-test.avt.e2e.js index 1069c355dac7..9a64fc9c3f98 100644 --- a/e2e/components/MenuButton/MenuButton-test.avt.e2e.js +++ b/e2e/components/MenuButton/MenuButton-test.avt.e2e.js @@ -11,7 +11,7 @@ const { expect, test } = require('@playwright/test'); const { visitStory } = require('../../test-utils/storybook'); test.describe('MenuButton @avt', () => { - test('@avt-default-state MenuButton', async ({ page }) => { + test('@avt-default-state', async ({ page }) => { await visitStory(page, { component: 'MenuButton', id: 'components-menubutton--default', @@ -22,7 +22,7 @@ test.describe('MenuButton @avt', () => { await expect(page).toHaveNoACViolations('MenuButton'); }); - test('@avt-advanced-states MenuButton with danger', async ({ page }) => { + test('@avt-advanced-states with danger', async ({ page }) => { await visitStory(page, { component: 'MenuButton', id: 'components-menubutton--with-danger', @@ -33,7 +33,7 @@ test.describe('MenuButton @avt', () => { await expect(page).toHaveNoACViolations('MenuButton-with-danger'); }); - test('@avt-advanced-states MenuButton with dividers', async ({ page }) => { + test('@avt-advanced-states with dividers', async ({ page }) => { await visitStory(page, { component: 'MenuButton', id: 'components-menubutton--with-dividers', @@ -44,7 +44,7 @@ test.describe('MenuButton @avt', () => { await expect(page).toHaveNoACViolations('MenuButton-with-dividers'); }); - test('@avt-keyboard-nav MenuButton', async ({ page }) => { + test('@avt-keyboard-nav', async ({ page }) => { await visitStory(page, { component: 'MenuButton', id: 'components-menubutton--default', @@ -73,7 +73,7 @@ test.describe('MenuButton @avt', () => { await expect(actionButton).toBeFocused(); }); - test('@avt-keyboard-nav MenuButton with danger', async ({ page }) => { + test('@avt-keyboard-nav with danger', async ({ page }) => { await visitStory(page, { component: 'MenuButton', id: 'components-menubutton--with-danger', @@ -104,7 +104,7 @@ test.describe('MenuButton @avt', () => { await expect(actionButton).toBeFocused(); }); - test('@avt-keyboard-nav MenuButton with dividers', async ({ page }) => { + test('@avt-keyboard-nav with dividers', async ({ page }) => { await visitStory(page, { component: 'MenuButton', id: 'components-menubutton--with-dividers', diff --git a/e2e/components/Modal/Modal-test.avt.e2e.js b/e2e/components/Modal/Modal-test.avt.e2e.js index 923800dcb83d..2194e92d64dd 100644 --- a/e2e/components/Modal/Modal-test.avt.e2e.js +++ b/e2e/components/Modal/Modal-test.avt.e2e.js @@ -11,7 +11,7 @@ const { expect, test } = require('@playwright/test'); const { visitStory } = require('../../test-utils/storybook'); test.describe('Modal @avt', () => { - test('default state', async ({ page }) => { + test('@avt-default-state', async ({ page }) => { await visitStory(page, { component: 'Modal', id: 'components-modal--default', @@ -22,7 +22,7 @@ test.describe('Modal @avt', () => { await expect(page).toHaveNoACViolations('Modal'); }); - test('default state - keyboard nav', async ({ page }) => { + test('@avt-keyboard-nav default state', async ({ page }) => { await visitStory(page, { component: 'Modal', id: 'components-modal--with-state-manager', @@ -71,7 +71,7 @@ test.describe('Modal @avt', () => { await expect(button).toBeFocused(); }); - test('danger modal - keyboard nav', async ({ page }) => { + test('@avt-keyboard-nav danger modal', async ({ page }) => { await visitStory(page, { component: 'Modal', id: 'components-modal--danger-modal', @@ -84,7 +84,7 @@ test.describe('Modal @avt', () => { await expect(page.getByRole('button', { name: 'Cancel' })).toBeFocused(); }); - test('default state, no interactive elements in body - keyboard nav', async ({ + test('@avt-keyboard-nav default state, no interactive elements in body', async ({ page, }) => { await visitStory(page, { @@ -99,7 +99,7 @@ test.describe('Modal @avt', () => { await expect(page.getByRole('button', { name: 'Add' })).toBeFocused(); }); - test('passive modal - keyboard nav', async ({ page }) => { + test('@avt-keyboard-nav passive modal', async ({ page }) => { await visitStory(page, { component: 'Modal', id: 'components-modal--passive-modal', diff --git a/e2e/components/MultiSelect/MultiSelect-test.avt.e2e.js b/e2e/components/MultiSelect/MultiSelect-test.avt.e2e.js index 891340406c05..c580386979d4 100644 --- a/e2e/components/MultiSelect/MultiSelect-test.avt.e2e.js +++ b/e2e/components/MultiSelect/MultiSelect-test.avt.e2e.js @@ -11,7 +11,7 @@ const { expect, test } = require('@playwright/test'); const { visitStory } = require('../../test-utils/storybook'); test.describe('MultiSelect @avt', () => { - test('accessibility-checker multiselect', async ({ page }) => { + test('@avt-default-state', async ({ page }) => { await visitStory(page, { component: 'MultiSelect', id: 'components-multiselect--default', @@ -22,7 +22,7 @@ test.describe('MultiSelect @avt', () => { await expect(page).toHaveNoACViolations('MultiSelect'); }); - test('accessibility-checker filterable multiselect', async ({ page }) => { + test('@avt-default-state filterable multiselect', async ({ page }) => { await visitStory(page, { component: 'FilterableMultiSelect', id: 'components-multiselect--filterable', @@ -34,7 +34,7 @@ test.describe('MultiSelect @avt', () => { }); // Skipping now due to AVT violation, possible false positive - test.skip('accessibility-checker open filterable multiselect', async ({ + test.skip('@avt-advanced-states open filterable multiselect', async ({ page, }) => { await visitStory(page, { @@ -57,7 +57,7 @@ test.describe('MultiSelect @avt', () => { }); // Skipping now due to AVT violation, possible false positive - test.skip('accessibility-checker open multiselect', async ({ page }) => { + test.skip('@avt-advanced-states open multiselect', async ({ page }) => { await visitStory(page, { component: 'MultiSelect', id: 'components-multiselect--default', @@ -77,7 +77,7 @@ test.describe('MultiSelect @avt', () => { await expect(page).toHaveNoACViolations('MultiSelect-open'); }); - test('multiselect - keyboard nav', async ({ page }) => { + test('@avt-keyboard-nav', async ({ page }) => { await visitStory(page, { component: 'MultiSelect', id: 'components-multiselect--default', @@ -172,7 +172,7 @@ test.describe('MultiSelect @avt', () => { await expect(selection).not.toBeVisible(); }); - test.slow('filterable multiselect - keyboard nav', async ({ page }) => { + test.slow('@avt-keyboard-nav filterable multiselect', async ({ page }) => { await visitStory(page, { component: 'FilterableMultiSelect', id: 'components-multiselect--filterable', diff --git a/e2e/components/ProgressIndicator/ProgressIndicator-test.avt.e2e.js b/e2e/components/ProgressIndicator/ProgressIndicator-test.avt.e2e.js index f81463351fbb..10feb86a78f7 100644 --- a/e2e/components/ProgressIndicator/ProgressIndicator-test.avt.e2e.js +++ b/e2e/components/ProgressIndicator/ProgressIndicator-test.avt.e2e.js @@ -10,8 +10,8 @@ const { expect, test } = require('@playwright/test'); const { visitStory } = require('../../test-utils/storybook'); -test.describe('ProgressIndicator', () => { - test('accessibility-checker @avt', async ({ page }) => { +test.describe('ProgressIndicator @avt', () => { + test('@avt-default-state', async ({ page }) => { await visitStory(page, { component: 'ProgressIndicator', id: 'components-progressindicator--default', @@ -22,7 +22,7 @@ test.describe('ProgressIndicator', () => { await expect(page).toHaveNoACViolations('ProgressIndicator'); }); - test('accessibility-checker interactive progressindicator @avt', async ({ + test('@avt-advanced-states interactive progressindicator', async ({ page, }) => { await visitStory(page, { @@ -35,9 +35,7 @@ test.describe('ProgressIndicator', () => { await expect(page).toHaveNoACViolations('ProgressIndicator-interactive'); }); - test('accessibility-checker skeleton progressindicator @avt', async ({ - page, - }) => { + test('@avt-advanced-states skeleton progressindicator', async ({ page }) => { await visitStory(page, { component: 'ProgressIndicator', id: 'components-progressindicator--skeleton', @@ -48,7 +46,7 @@ test.describe('ProgressIndicator', () => { await expect(page).toHaveNoACViolations('ProgressIndicator-skeleton'); }); - test('accessibility-checker - onHover @avt', async ({ page }) => { + test('@avt-advanced-states onHover', async ({ page }) => { await visitStory(page, { component: 'ProgressIndicator', id: 'components-progressindicator--default', @@ -64,7 +62,7 @@ test.describe('ProgressIndicator', () => { await expect(page).toHaveNoACViolations('ProgressIndicator-onhover'); }); - test('accessibility-checker - complete @avt', async ({ page }) => { + test('@avt-advanced-states complete', async ({ page }) => { await visitStory(page, { component: 'ProgressIndicator', id: 'components-progressindicator--default', @@ -77,7 +75,7 @@ test.describe('ProgressIndicator', () => { expect(page.locator('.cds--progress-step--complete')).toBeTruthy(); }); - test('accessibility-checker - current @avt', async ({ page }) => { + test('@avt-advanced-states current', async ({ page }) => { await visitStory(page, { component: 'ProgressIndicator', id: 'components-progressindicator--default', @@ -90,7 +88,7 @@ test.describe('ProgressIndicator', () => { expect(page.locator('.cds--progress-step--current')).toBeTruthy(); }); - test('accessibility-checker - interactive onHover @avt', async ({ page }) => { + test('@avt-advanced-states interactive onHover', async ({ page }) => { await visitStory(page, { component: 'ProgressIndicator', id: 'components-progressindicator--interactive', @@ -108,7 +106,7 @@ test.describe('ProgressIndicator', () => { ); }); - test('progress indicator - keyboard nav', async ({ page }) => { + test('@avt-keyboard-nav', async ({ page }) => { await visitStory(page, { component: 'ProgressIndicator', id: 'components-progressindicator--interactive', @@ -119,7 +117,6 @@ test.describe('ProgressIndicator', () => { // Testing the first element interaction await page.keyboard.press('Tab'); await expect(page.getByRole('button', { name: 'Click me' })).toBeVisible(); - await page.keyboard.press('Tab'); await expect(page.getByRole('button', { name: 'Click me' })).toBeFocused(); await page.keyboard.press('Enter'); diff --git a/playwright.config.js b/playwright.config.js index 634593a73047..787eda241a09 100644 --- a/playwright.config.js +++ b/playwright.config.js @@ -25,12 +25,18 @@ const config = { testMatch: /.*-test(.avt|.vrt)?.e2e\.m?js$/, // https://playwright.dev/docs/api/class-testconfig#test-config-timeout - timeout: 1000 * 30, + timeout: 10000 * 30, + + // https://playwright.dev/docs/test-timeouts + expect: { timeout: 100000 }, // https://playwright.dev/docs/api/class-testconfig#test-config-output-dir outputDir: path.join(__dirname, '.playwright', 'results'), snapshotDir: path.join(__dirname, '.playwright', 'snapshots'), + // https://playwright.dev/docs/test-parallel#parallelize-tests-in-a-single-file + // fullyParallel: true, + forbidOnly: !!process.env.CI, retries: process.env.CI ? 2 : 0, use: {