From c350c909c83a904fff1f762ea08785b1bce586b1 Mon Sep 17 00:00:00 2001
From: Lukas Blaser <141234680+b1aserlu@users.noreply.github.com>
Date: Wed, 4 Oct 2023 09:25:41 +0200
Subject: [PATCH] feat(documentation): adds visual regression tests for the
 text input (#1921)

---
 .../snapshots/components/input.snapshot.ts    |  26 ++++
 .../input/input.snapshot.stories.ts           | 116 ++++++++++++++++++
 .../stories/components/input/input.stories.ts |   1 +
 .../utils/inputComponentsGetCombinations.ts   |  53 ++++++++
 4 files changed, 196 insertions(+)
 create mode 100644 packages/documentation/cypress/snapshots/components/input.snapshot.ts
 create mode 100644 packages/documentation/src/stories/components/input/input.snapshot.stories.ts
 create mode 100644 packages/documentation/src/utils/inputComponentsGetCombinations.ts

diff --git a/packages/documentation/cypress/snapshots/components/input.snapshot.ts b/packages/documentation/cypress/snapshots/components/input.snapshot.ts
new file mode 100644
index 0000000000..07d13184e4
--- /dev/null
+++ b/packages/documentation/cypress/snapshots/components/input.snapshot.ts
@@ -0,0 +1,26 @@
+const BASEURL = '/iframe.html?id=snapshots--input';
+const types = [
+  'text',
+  'number',
+  'email',
+  'tel',
+  'url',
+  'password',
+  'date',
+  'datetime-local',
+  'month',
+  'week',
+  'time',
+  'color',
+];
+
+describe('Input', () => {
+  describe('types', () => {
+    types.forEach(type => {
+      it(type, () => {
+        cy.visit(`${BASEURL}${type}`);
+        cy.percySnapshot(`Inputs-${type}`, { widths: [320, 1024] });
+      });
+    });
+  });
+});
diff --git a/packages/documentation/src/stories/components/input/input.snapshot.stories.ts b/packages/documentation/src/stories/components/input/input.snapshot.stories.ts
new file mode 100644
index 0000000000..2d8109c305
--- /dev/null
+++ b/packages/documentation/src/stories/components/input/input.snapshot.stories.ts
@@ -0,0 +1,116 @@
+import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
+import meta from './input.stories';
+import { html } from 'lit';
+import { getCombinations, COMBINATIONS } from '../../../utils/inputComponentsGetCombinations';
+
+export default {
+  ...meta,
+  title: 'Snapshots',
+  render: renderInputSnapshot,
+};
+
+function renderInputSnapshot(_args: Args, context: StoryContext) {
+  const combinations = [
+    ...COMBINATIONS,
+    {
+      label: `Label - no Placeholder`,
+      placeholder: null,
+    },
+    {
+      label: `Label - with Value`,
+      value: 'Lorem Ipsum',
+    },
+  ];
+  return html`
+    <div class="d-flex flex-wrap align-items-start gap-regular">
+      ${['bg-white', 'bg-dark'].map(
+        bg => html`
+          <div class="${bg} d-flex gap-3 flex-column p-3">
+            <h3>Sizes</h3>
+            ${getCombinations('size', context.argTypes.size.options, combinations)
+              .filter(
+                (args: Args) =>
+                  !args.value ||
+                  (args.value &&
+                    (context.args.type === 'text' || context.args.type === 'password')),
+              )
+              .map(
+                (args: Args) =>
+                  html`
+                    <div>
+                      ${args.title !== undefined && args.title
+                        ? html`
+                            <h4>
+                              ${Object.entries(context.argTypes.size.control.labels)
+                                .filter(([key, value]) => key === args.size)
+                                .map(s => s[1])}
+                            </h4>
+                          `
+                        : ''}
+                      <div>${meta.render?.({ ...context.args, ...args }, context)}</div>
+                    </div>
+                  `,
+              )}
+            <h3>Floating Label</h3>
+            ${getCombinations('floatingLabel', [true], combinations)
+              .filter(
+                (args: Args) =>
+                  !args.value ||
+                  (args.value &&
+                    (context.args.type === 'text' || context.args.type === 'password')),
+              )
+              .map(
+                (args: Args) =>
+                  html`
+                    <div>${meta.render?.({ ...context.args, ...args }, context)}</div>
+                  `,
+              )}
+          </div>
+        `,
+      )}
+    </div>
+  `;
+}
+
+type Story = StoryObj;
+
+export const Inputtext: Story = {
+  args: {
+    type: 'text',
+  },
+};
+export const Inputpassword: Story = {
+  args: {
+    type: 'password',
+  },
+};
+export const Inputdate: Story = {
+  args: {
+    type: 'date',
+  },
+};
+export const Inputdatetimelocal: Story = {
+  args: {
+    type: 'datetime-local',
+  },
+};
+export const Inputmonth: Story = {
+  args: {
+    type: 'month',
+  },
+};
+export const Inputweek: Story = {
+  args: {
+    type: 'week',
+  },
+};
+export const Inputtime: Story = {
+  args: {
+    type: 'time',
+  },
+};
+export const Inputcolor: Story = {
+  args: {
+    type: 'color',
+  },
+};
diff --git a/packages/documentation/src/stories/components/input/input.stories.ts b/packages/documentation/src/stories/components/input/input.stories.ts
index 3101fb2589..2fadddfd6e 100644
--- a/packages/documentation/src/stories/components/input/input.stories.ts
+++ b/packages/documentation/src/stories/components/input/input.stories.ts
@@ -210,6 +210,7 @@ function render(args: Args, context: StoryContext) {
       ?disabled="${args.disabled}"
       aria-label="${useAriaLabel ? args.label : nothing}"
       ?aria-invalid="${VALIDATION_STATE_MAP[args.validation]}"
+      value=${args.value ? args.value : nothing}
     />
   `;
   if (args.floatingLabel) {
diff --git a/packages/documentation/src/utils/inputComponentsGetCombinations.ts b/packages/documentation/src/utils/inputComponentsGetCombinations.ts
new file mode 100644
index 0000000000..b0df64df46
--- /dev/null
+++ b/packages/documentation/src/utils/inputComponentsGetCombinations.ts
@@ -0,0 +1,53 @@
+const SHORT_HINT =
+  'Hintus ipsum dolor sit amet consectetur adipisicing elit. Vero mollitia magnam quo quam saepe. Aliquam tempore non deleniti culpa reprehenderit.';
+const LONG_HINT =
+  'Hintus ipsum dolor sit amet consectetur adipisicing elit. Voluptatem maxime eius aut quae ducimus dignissimos pariatur suscipit distinctio, accusamus laudantium, sint quibusdam nisi optio? Ut quae obcaecati, harum ullam quos beatae, ipsam enim, placeat eligendi dolores excepturi. Quia quod eligendi ab voluptas modi id distinctio iure vel possimus deserunt, amet, dolores laboriosam quas qui aut laborum? Et numquam esse laboriosam totam quod sapiente recusandae consectetur optio, quaerat quia.';
+const SHORT_LABEL = 'Label';
+const LONG_TEXT =
+  'Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem maxime eius aut quae ducimus dignissimos pariatur suscipit distinctio, accusamus laudantium, sint quibusdam nisi optio? Ut quae obcaecati, harum ullam quos beatae, ipsam enim, placeat eligendi dolores excepturi';
+
+export const COMBINATIONS = [
+  {
+    title: true, // This property is true when a heading should be rendered above the story
+    label: `${SHORT_LABEL} - no Hint`,
+    hint: null,
+  },
+  {
+    label: `${SHORT_LABEL} - short Hint`,
+    hint: SHORT_HINT,
+  },
+  {
+    label: `${SHORT_LABEL} - long - ${LONG_TEXT}`,
+    hint: LONG_HINT,
+  },
+  {
+    label: `${SHORT_LABEL} - Disabled`,
+    disabled: true,
+  },
+  {
+    label: `${SHORT_LABEL} - Valid`,
+    validation: 'is-valid',
+  },
+  {
+    label: `${SHORT_LABEL} - Invalid`,
+    validation: 'is-invalid',
+  },
+];
+
+export function getCombinations(
+  argumentName: string,
+  argumentValues: Array<unknown>,
+  combinations: Array<{ label: string; [propName: string]: any }>,
+) {
+  let result: Array<Object> = [];
+  for (const argumentValue of argumentValues) {
+    result = [
+      ...result,
+      ...combinations.map(c => ({
+        ...c,
+        [argumentName]: argumentValue,
+      })),
+    ];
+  }
+  return result;
+}