test(Notifications): add AVT tests (#14409)

* test(Notifications): add AVT tests * test(notification): add keyboard avt test
carbon-design-system · Aug 17, 2023 · 90be2f6 · 90be2f6
1 parent 34d9b32
commit 90be2f6
Show file tree

Hide file tree

Showing 2 changed files with 275 additions and 13 deletions.
diff --git a/e2e/components/Notifications/Notifications-test.avt.e2e.js b/e2e/components/Notifications/Notifications-test.avt.e2e.js
@@ -0,0 +1,273 @@
+/**
+ * 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('Notifications @avt', () => {
+  test('accessibility-checker Notifications actionable', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Notifications',
+      id: 'components-notifications-actionable--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+
+    await expect(page).toHaveNoACViolations('Notifications actionable');
+  });
+
+  test('accessibility-checker Notifications actionable keyboard', async ({
+    page,
+  }) => {
+    await visitStory(page, {
+      component: 'Notifications',
+      id: 'components-notifications-actionable--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+
+    const actionButton = page.getByRole('button', { name: 'Action' });
+    const closeButton = page.getByRole('button', {
+      name: 'close notification',
+    });
+
+    await expect(actionButton).toBeVisible();
+
+    await page.keyboard.press('Tab');
+    await expect(actionButton).toBeFocused();
+
+    await page.keyboard.press('Tab');
+    await expect(closeButton).toBeFocused();
+
+    await expect(page).toHaveNoACViolations(
+      'Notifications actionable keyboard'
+    );
+  });
+
+  test('accessibility-checker Notifications actionable low contrast', async ({
+    page,
+  }) => {
+    await visitStory(page, {
+      component: 'Notifications',
+      id: 'components-notifications-actionable--default',
+      globals: {
+        theme: 'white',
+        args: {
+          lowContrast: 'true',
+        },
+      },
+    });
+    await expect(page).toHaveNoACViolations(
+      'Notifications actionable low contrast'
+    );
+  });
+
+  test('accessibility-checker Notifications actionable info', async ({
+    page,
+  }) => {
+    await visitStory(page, {
+      component: 'Notifications',
+      id: 'components-notifications-actionable--playground',
+      globals: {
+        theme: 'white',
+        args: {
+          kind: 'info',
+        },
+      },
+    });
+    await expect(page).toHaveNoACViolations('Notifications actionable info');
+  });
+
+  test('accessibility-checker Notifications actionable info-square', async ({
+    page,
+  }) => {
+    await visitStory(page, {
+      component: 'Notifications',
+      id: 'components-notifications-actionable--playground',
+      globals: {
+        theme: 'white',
+        args: {
+          kind: 'info-square',
+        },
+      },
+    });
+    await expect(page).toHaveNoACViolations(
+      'Notifications actionable info-square'
+    );
+  });
+
+  test('accessibility-checker Notifications actionable success', async ({
+    page,
+  }) => {
+    await visitStory(page, {
+      component: 'Notifications',
+      id: 'components-notifications-actionable--playground',
+      globals: {
+        theme: 'white',
+        args: {
+          kind: 'success',
+        },
+      },
+    });
+    await expect(page).toHaveNoACViolations('Notifications actionable success');
+  });
+
+  test('accessibility-checker Notifications actionable warning', async ({
+    page,
+  }) => {
+    await visitStory(page, {
+      component: 'Notifications',
+      id: 'components-notifications-actionable--playground',
+      globals: {
+        theme: 'white',
+        args: {
+          kind: 'warning',
+        },
+      },
+    });
+    await expect(page).toHaveNoACViolations('Notifications actionable warning');
+  });
+
+  test('accessibility-checker Notifications actionable warning-alt', async ({
+    page,
+  }) => {
+    await visitStory(page, {
+      component: 'Notifications',
+      id: 'components-notifications-actionable--playground',
+      globals: {
+        theme: 'white',
+        args: {
+          kind: 'warning-alt',
+        },
+      },
+    });
+    await expect(page).toHaveNoACViolations(
+      'Notifications actionable warning-alt'
+    );
+  });
+
+  test('accessibility-checker Notifications actionable info low contrast', async ({
+    page,
+  }) => {
+    await visitStory(page, {
+      component: 'Notifications',
+      id: 'components-notifications-actionable--playground',
+      globals: {
+        theme: 'white',
+        args: {
+          kind: 'info',
+          lowContrast: 'true',
+        },
+      },
+    });
+    await expect(page).toHaveNoACViolations(
+      'Notifications actionable info low contrast'
+    );
+  });
+
+  test('accessibility-checker Notifications actionable info-squar low contraste', async ({
+    page,
+  }) => {
+    await visitStory(page, {
+      component: 'Notifications',
+      id: 'components-notifications-actionable--playground',
+      globals: {
+        theme: 'white',
+        args: {
+          kind: 'info-square',
+          lowContrast: 'true',
+        },
+      },
+    });
+    await expect(page).toHaveNoACViolations(
+      'Notifications actionable info-square low contrast'
+    );
+  });
+
+  test('accessibility-checker Notifications actionable success low contrast', async ({
+    page,
+  }) => {
+    await visitStory(page, {
+      component: 'Notifications',
+      id: 'components-notifications-actionable--playground',
+      globals: {
+        theme: 'white',
+        args: {
+          kind: 'success',
+          lowContrast: 'true',
+        },
+      },
+    });
+    await expect(page).toHaveNoACViolations(
+      'Notifications actionable success low contrast'
+    );
+  });
+
+  test('accessibility-checker Notifications actionable warning low contrast', async ({
+    page,
+  }) => {
+    await visitStory(page, {
+      component: 'Notifications',
+      id: 'components-notifications-actionable--playground',
+      globals: {
+        theme: 'white',
+        args: {
+          kind: 'warning',
+          lowContrast: 'true',
+        },
+      },
+    });
+    await expect(page).toHaveNoACViolations(
+      'Notifications actionable warning low contrast'
+    );
+  });
+
+  test('accessibility-checker Notifications actionable warning-alt low contrast', async ({
+    page,
+  }) => {
+    await visitStory(page, {
+      component: 'Notifications',
+      id: 'components-notifications-actionable--playground',
+      globals: {
+        theme: 'white',
+        args: {
+          kind: 'warning-alt',
+          lowContrast: 'true',
+        },
+      },
+    });
+    await expect(page).toHaveNoACViolations(
+      'Notifications actionable warning-alt low contrast'
+    );
+  });
+
+  test('accessibility-checker Notifications inline', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Notifications',
+      id: 'components-notifications-inline--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('Notifications inline');
+  });
+
+  test('accessibility-checker Notifications toast', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Notifications',
+      id: 'components-notifications-toast--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('Notifications toast');
+  });
+});
diff --git a/e2e/components/Notifications/Notifications-test.e2e.js b/e2e/components/Notifications/Notifications-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('Notifications', () => {
   themes.forEach((theme) => {
@@ -39,15 +39,4 @@ test.describe('Notifications', () => {
       });
     });
   });
-
-  test('accessibility-checker @avt', async ({ page }) => {
-    await visitStory(page, {
-      component: 'Toast',
-      id: 'components-notifications-toast--default',
-      globals: {
-        theme: 'white',
-      },
-    });
-    await expect(page).toHaveNoACViolations('Notifications');
-  });
 });