From ee91d416e8a611ef19bf96d45878f9bba8738ccb Mon Sep 17 00:00:00 2001
From: David Ritter <141235163+davidritter-dotcom@users.noreply.github.com>
Date: Thu, 17 Aug 2023 13:58:21 +0200
Subject: [PATCH] feat(documentation-v7): migrate snapshot test for collapsible
  (#1823)

---
 .../components/collapsible.snapshot.ts        |  7 ++++
 .../collapsible.snapshot.stories.tsx          | 41 +++++++++++++++++++
 2 files changed, 48 insertions(+)
 create mode 100644 packages/documentation-v7/cypress/snapshots/components/collapsible.snapshot.ts
 create mode 100644 packages/documentation-v7/src/stories/components/collapsible/collapsible.snapshot.stories.tsx

diff --git a/packages/documentation-v7/cypress/snapshots/components/collapsible.snapshot.ts b/packages/documentation-v7/cypress/snapshots/components/collapsible.snapshot.ts
new file mode 100644
index 0000000000..d72ea712f2
--- /dev/null
+++ b/packages/documentation-v7/cypress/snapshots/components/collapsible.snapshot.ts
@@ -0,0 +1,7 @@
+describe('Collapsible', () => {
+  it('default', () => {
+    cy.visit('/iframe.html?id=snapshots--collapsible');
+    cy.get('post-collapsible.hydrated').should('be.visible');
+    cy.percySnapshot('Collapsible');
+  });
+});
diff --git a/packages/documentation-v7/src/stories/components/collapsible/collapsible.snapshot.stories.tsx b/packages/documentation-v7/src/stories/components/collapsible/collapsible.snapshot.stories.tsx
new file mode 100644
index 0000000000..0a912aec93
--- /dev/null
+++ b/packages/documentation-v7/src/stories/components/collapsible/collapsible.snapshot.stories.tsx
@@ -0,0 +1,41 @@
+import { html } from 'lit';
+import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
+import { bombArgs } from '../../../utils/bombArgs';
+
+import meta, { Default } from './collapsible.stories';
+
+export default {
+  ...meta,
+  title: 'Snapshots',
+};
+
+type Story = StoryObj<HTMLPostCollapsibleElement>;
+
+export const collapsible: Story = {
+  render: (_args: Args, context: StoryContext<HTMLPostCollapsibleElement>) => {
+    const templateVariants = bombArgs({
+      innerHTML: [
+        `<span slot="header">Titulum</span><p>Contentus momentus vero siteos et accusam iretea et justo.</p>`,
+        `<p>Contentus momentus vero siteos et accusam iretea et justo.</p>`,
+      ],
+      collapsed: [false, true],
+      headingLevel: [1, 2, 3, 4, 5, 6],
+    }).map((args: Args) => {
+      return html`
+        <div class="col-6 p-3">
+          ${meta.render?.({ ...context.args, ...Default.args, ...args }, context)}
+        </div>
+      `;
+    });
+
+    return html`
+      <div>
+        ${['white', 'dark'].map(
+          bg => html`
+            <div class=${'row bg-' + bg}>${templateVariants}</div>
+          `,
+        )}
+      </div>
+    `;
+  },
+};