test: Add visual coverage for Input focus states (#5127)

Author: vvaliyev

pages/input/focus-states.page.tsx

@@ -0,0 +1,43 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import Box from '~components/box';
+import Input from '~components/input';
+import SpaceBetween from '~components/space-between';
+
+import { SimplePage } from '../app/templates';
+
+function Section({ caption, children }: { caption: string; children: React.ReactNode }) {
+  return (
+    <SpaceBetween size="xxs">
+      <Box variant="small">{caption}</Box>
+      {children}
+    </SpaceBetween>
+  );
+}
+
+export default function InputFocusStatesPage() {
+  return (
+    <SimplePage title="Input focus states" screenshotArea={{ disableAnimations: true }}>
+      <Section caption="readonly">
+        <Input data-testid="readonly" ariaLabel="readonly" readOnly={true} value="Read-only value" />
+      </Section>
+      <Section caption="native-invalid">
+        <Input
+          data-testid="native-invalid"
+          ariaLabel="native-invalid"
+          type="email"
+          value="not-an-email"
+          onChange={() => {}}
+        />
+      </Section>
+      <Section caption="suffix">
+        <Input data-testid="suffix" ariaLabel="suffix" value="42" suffix="USD" onChange={() => {}} />
+      </Section>
+      <Section caption="prefix">
+        <Input data-testid="prefix" ariaLabel="prefix" value="42" prefix="$" onChange={() => {}} />
+      </Section>
+    </SimplePage>
+  );
+}

test/definitions/visual/input.ts

@@ -1,6 +1,11 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { TestSuite } from '../types';
+import { TestDefinition, TestSuite } from '../types';
+
+const focusStatesPath = 'input/focus-states';
+const inputSelector = (testId: string) => `[data-testid="${testId}"] input`;
+// Pointer target outside any input: the page heading.
+const headingSelector = 'h1';
 
 const suite: TestSuite = {
   description: 'Input',
@@ -21,6 +26,36 @@ const suite: TestSuite = {
       path: 'input/inline-label-permutations',
       screenshotType: 'permutations',
     },
+    {
+      description: 'focus states - rest',
+      path: focusStatesPath,
+      screenshotType: 'screenshotArea',
+    },
+    // Focus is produced with page.click(): the input's focus styles are plain CSS :focus/:focus-within,
+    // which a dispatched focusin event (page.focusInputs()) does not trigger. Only one element can hold
+    // focus, so each input gets its own focused entry.
+    ...['readonly', 'native-invalid', 'suffix', 'prefix'].flatMap(
+      testId =>
+        [
+          {
+            description: `focus states - focused ${testId}`,
+            path: focusStatesPath,
+            screenshotType: 'screenshotArea',
+            setup: async ({ page }) => {
+              await page.click(inputSelector(testId));
+            },
+          },
+          {
+            description: `focus states - focused ${testId}, pointer away`,
+            path: focusStatesPath,
+            screenshotType: 'screenshotArea',
+            setup: async ({ page }) => {
+              await page.click(inputSelector(testId));
+              await page.hoverElement(headingSelector);
+            },
+          },
+        ] as TestDefinition[]
+    ),
   ],
 };