diff --git a/e2e/components/NumberInput/NumberInput-test.avt.e2e.js b/e2e/components/NumberInput/NumberInput-test.avt.e2e.js new file mode 100644 index 000000000000..40276f1fd69b --- /dev/null +++ b/e2e/components/NumberInput/NumberInput-test.avt.e2e.js @@ -0,0 +1,88 @@ +/** + * 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('NumberInput @avt', () => { + test('accessibility-checker default', async ({ page }) => { + await visitStory(page, { + component: 'NumberInput', + id: 'components-numberinput--default', + globals: { + theme: 'white', + }, + }); + await expect(page).toHaveNoACViolations('components-numberinput--default'); + }); + + test('accessibility-checker skeleton', async ({ page }) => { + await visitStory(page, { + component: 'NumberInput', + id: 'components-numberinput--skeleton', + globals: { + theme: 'white', + }, + }); + await expect(page).toHaveNoACViolations('components-numberinput--skeleton'); + }); + + test('number input - keyboard nav', async ({ page }) => { + await visitStory(page, { + component: 'NumberInput', + id: 'components-numberinput--default', + globals: { + theme: 'white', + }, + }); + + const input = page.getByRole('spinbutton'); + const increment = page.getByRole('button', { + name: 'Increment number', + }); + + const decrement = page.getByRole('button', { + name: 'Decrement number', + }); + + await expect(input).toBeVisible(); + await expect(input).toHaveValue('50'); + + // Tab to the NumberInput and receive focus + await page.keyboard.press('Tab'); + await expect(input).toBeFocused(); + + // Increase value with ArrowUp + await page.keyboard.press('ArrowUp'); + await expect(input).toHaveValue('51'); + + // Decrease value with ArrowDown + await page.keyboard.press('ArrowDown'); + await expect(input).toHaveValue('50'); + + // Increase value with increment button + await increment.click(); + await expect(input).toHaveValue('51'); + + // Decrease value with decrement button + await decrement.click(); + await expect(input).toHaveValue('50'); + await expect(input).not.toBeFocused(); + + // Allow setting value over `max`, but should cause input to be invalid + await input.fill('101'); + await expect(input).toHaveValue('101'); + await expect(input).toHaveAttribute('data-invalid', 'true'); + + // Allow setting value under `min`, but should cause input to be invalid + await input.fill('-1'); + await expect(input).toHaveValue('-1'); + await expect(input).toHaveAttribute('data-invalid', 'true'); + }); +}); diff --git a/e2e/components/NumberInput/NumberInput-test.e2e.js b/e2e/components/NumberInput/NumberInput-test.e2e.js index 14cb146fe160..72ca344639e4 100644 --- a/e2e/components/NumberInput/NumberInput-test.e2e.js +++ b/e2e/components/NumberInput/NumberInput-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('NumberInput', () => { themes.forEach((theme) => { @@ -23,15 +23,4 @@ test.describe('NumberInput', () => { }); }); }); - - test('accessibility-checker @avt', async ({ page }) => { - await visitStory(page, { - component: 'NumberInput', - id: 'components-numberinput--default', - globals: { - theme: 'white', - }, - }); - await expect(page).toHaveNoACViolations('NumberInput'); - }); });