feat(documentation-v7): add select snapshot test (#1817)

Co-authored-by: Oliver Schürch <[email protected]>
swisspost · Aug 17, 2023 · e2f3357 · e2f3357
1 parent ee91d41
commit e2f3357
Show file tree

Hide file tree

Showing 2 changed files with 122 additions and 0 deletions.
diff --git a/packages/documentation-v7/cypress/snapshots/components/select.snapshot.ts b/packages/documentation-v7/cypress/snapshots/components/select.snapshot.ts
@@ -0,0 +1,6 @@
+describe('Select', () => {
+  it('default', () => {
+    cy.visit('./iframe.html?id=snapshots--select');
+    cy.percySnapshot('Selects', { widths: [400] });
+  });
+});
diff --git a/packages/documentation-v7/src/stories/components/select/select.snapshot.stories.ts b/packages/documentation-v7/src/stories/components/select/select.snapshot.stories.ts
@@ -0,0 +1,116 @@
+import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
+import meta, { Default, FloatingLabel } from './select.stories';
+import { html } from 'lit';
+import { bombArgs } from '../../../utils/bombArgs';
+
+export default {
+  ...meta,
+  title: 'Snapshots',
+};
+
+type Story = StoryObj;
+
+export const Select: Story = {
+  render: (_args: Args, context: StoryContext) => {
+    //Arguments for Default Version
+    const bombArgsGeneratedDefault = [
+      ...bombArgs({
+        label: [
+          context.args.label,
+          'Label - Lorem ipsum dolor sit amet consetetur sadipscing elitr sed diam nonumy eirmod tempor',
+        ],
+        hint: [''],
+      }),
+      ...bombArgs({
+        hiddenLabel: [true],
+        hint: ['Hintus textus', context.args.hint],
+      }),
+      ...bombArgs({
+        size: context.argTypes.size.options,
+        disabled: [false, true],
+        validation: context.argTypes.validation.options,
+      }),
+    ]
+      // remove disabled & validated examples
+      .filter((args: Args) => !(args.disabled && args.validation !== 'null'));
+
+    //Arguments for Multiple Version
+    const bombArgsGeneratedMultiple = [
+      ...bombArgs({
+        multiple: [true],
+        label: [
+          context.args.label,
+          'Label - Lorem ipsum dolor sit amet consetetur sadipscing elitr sed diam nonumy eirmod tempor',
+        ],
+        hint: [''],
+      }),
+      ...bombArgs({
+        multiple: [true],
+        hiddenLabel: [true],
+        hint: ['', 'Hintus textus', context.args.hint],
+      }),
+      ...bombArgs({
+        multiple: [true],
+        size: context.argTypes.size.options,
+        disabled: [false, true],
+        validation: context.argTypes.validation.options,
+      }),
+    ]
+      // remove disabled & validated examples
+      .filter((args: Args) => !(args.disabled && args.validation !== 'null'));
+
+    return html`
+      <div class="d-flex gap-3 flex-column">
+        ${['bg-white', 'bg-dark'].map(
+          bg =>
+            html`
+              <div class="${bg} d-flex gap-3 flex-column p-3">
+                <h2>Default</h2>
+                ${bombArgsGeneratedDefault.map(
+                  (args: Args) =>
+                    html`
+                      <div>
+                        ${Default.render?.({ ...context.args, ...Default.args, ...args }, context)}
+                      </div>
+                    `,
+                )}
+                <h2>Floating Label</h2>
+                ${bombArgsGeneratedDefault.map(
+                  (args: Args) =>
+                    html`
+                      <div>
+                        ${FloatingLabel.render?.(
+                          { ...context.args, ...FloatingLabel.args, ...args },
+                          context,
+                        )}
+                      </div>
+                    `,
+                )}
+                <h2>Multiple - Default</h2>
+                ${bombArgsGeneratedMultiple.map(
+                  (args: Args) =>
+                    html`
+                      <div>
+                        ${Default.render?.({ ...context.args, ...Default.args, ...args }, context)}
+                      </div>
+                    `,
+                )}
+                <h2>Multiple - Floating Label</h2>
+                ${bombArgsGeneratedMultiple.map(
+                  (args: Args) =>
+                    html`
+                      <div>
+                        ${FloatingLabel.render?.(
+                          { ...context.args, ...FloatingLabel.args, ...args },
+                          context,
+                        )}
+                      </div>
+                    `,
+                )}
+              </div>
+            `,
+        )}
+      </div>
+    `;
+  },
+};