From 4c519b3eb1a42eeaf3c63825e2a80dcd0e5eaea6 Mon Sep 17 00:00:00 2001
From: David Ritter <141235163+davidritter-dotcom@users.noreply.github.com>
Date: Tue, 12 Sep 2023 09:12:16 +0200
Subject: [PATCH] feat(documentation): add snapshot test for badge (#1887)

---
 .../snapshots/components/badge.snapshot.ts    |  6 +++
 .../badge/badge.snapshot.stories.ts           | 39 +++++++++++++++++++
 2 files changed, 45 insertions(+)
 create mode 100644 packages/documentation/cypress/snapshots/components/badge.snapshot.ts
 create mode 100644 packages/documentation/src/stories/components/badge/badge.snapshot.stories.ts

diff --git a/packages/documentation/cypress/snapshots/components/badge.snapshot.ts b/packages/documentation/cypress/snapshots/components/badge.snapshot.ts
new file mode 100644
index 0000000000..a81ec27f7c
--- /dev/null
+++ b/packages/documentation/cypress/snapshots/components/badge.snapshot.ts
@@ -0,0 +1,6 @@
+describe('Badge', () => {
+    it('default', () => {
+      cy.visit('./iframe.html?id=snapshots--badge');
+      cy.percySnapshot('Badges', { widths: [400] });
+    });
+  });
\ No newline at end of file
diff --git a/packages/documentation/src/stories/components/badge/badge.snapshot.stories.ts b/packages/documentation/src/stories/components/badge/badge.snapshot.stories.ts
new file mode 100644
index 0000000000..437ca204b2
--- /dev/null
+++ b/packages/documentation/src/stories/components/badge/badge.snapshot.stories.ts
@@ -0,0 +1,39 @@
+import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
+import meta from './badge.stories';
+import { html } from 'lit';
+import { bombArgs } from '../../../utils/bombArgs';
+
+export default {
+  ...meta,
+  title: 'Snapshots',
+};
+
+type Story = StoryObj;
+
+export const Badge: Story = {
+  render: (_args: Args, context: StoryContext) => {
+    return html`
+      <div class="d-flex flex-wrap gap-1 align-items-start">
+        ${['bg-white', 'bg-dark'].map(
+          bg => html`
+            <div class="${bg} d-flex flex-wrap align-items-start gap-regular p-regular">
+              ${bombArgs({
+                text: [
+                  'Malakceptebla Insigno',
+                  'Contentus momentus vero siteos et accusam iretea et justo.',
+                ],
+                size: context.argTypes.size.options,
+                interactionType: context.argTypes.interactionType.options,
+                nestedBadge: [false, true],
+                checked: [false, true],
+                dismissed: [false],
+              })
+                .filter(args => !(args.interactionType !== 'checkable' && args.checked === true))
+                .map((args: Args) => meta.render?.({ ...context.args, ...args }, context))}
+            </div>
+          `,
+        )}
+      </div>
+    `;
+  },
+};