test(NumberInput): add @AVT tests (#14366)

* test(NumberInput): add @AVT tests

* test(NumberInput): check for invalid state

* test(NumberInput): check for invalid state when value is outside min

---------

Co-authored-by: Guilherme Datilio Ribeiro <guilhermedatilio@gmail.com>

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');
+  });
+});

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');
-  });
 });