feat: add CodeSandbox molecule and storybook interaction

.github/workflows/build.yml

@@ -49,6 +49,27 @@ jobs:
         run: yarn install
       - name: Run test
         run: yarn test
+  test-storybook:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: yarn
+      - name: Install Playwright 🚀
+        run: npx playwright install --with-deps
+      - name: Install dependencies 🚀
+        run: yarn install --immutable
+      - name: Build Storybook
+        run: yarn storybook:build --quiet
+      - name: Serve Storybook and run tests 🔍
+        run: |
+          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+            "npx http-server storybook-static --port 6006 --silent" \
+            "npx wait-on tcp:6006 && yarn storybook:test:ci"
   build:
     runs-on: ubuntu-latest
     steps:

docs/.vitepress/theme/index.ts

@@ -9,6 +9,7 @@ import ApiList from "./molecules/api-list/ApiList.vue";
 import GithubContributors from "./organisms/github-contributors/GithubContributors.vue";
 import LazyLoadObserver from "./directives/lazyLoadObserver";
 import Button from "./molecules/button/Button.vue";
+import CodeSandbox from "./molecules/codesandbox/CodeSandbox.vue";
 
 export default {
   extends: DefaultTheme,
@@ -21,6 +22,7 @@ export default {
     app.component("ApiList", ApiList);
     app.component("ApiAnchorQuery", ApiAnchorQuery);
     app.component("GithubContributors", GithubContributors);
+    app.component("CodeSandbox", CodeSandbox);
     // eslint-disable-next-line vue/no-reserved-component-names
     app.component("Button", Button);
     app.directive("lazyload-observer", LazyLoadObserver);

docs/.vitepress/theme/molecules/codesandbox/CodeSandbox.spec.ts

@@ -0,0 +1,57 @@
+import CodeSandbox from "./CodeSandbox.vue";
+import {render, screen} from "@testing-library/vue";
+import VPButton from "../../../../../.storybook/mock/VPButton.vue";
+import {expect, waitFor} from "@storybook/test";
+
+describe("<CodeSandbox />", () => {
+  it("should render CodeSandbox component", async () => {
+    render(CodeSandbox, {
+      props: {
+        sandboxId: "abc123"
+      },
+      global: {
+        stubs: {
+          VPButton: VPButton
+        }
+      }
+    });
+
+    expect(screen.getByRole("button")).toHaveTextContent("Start sandbox");
+
+    screen.getByRole("button").click();
+
+    const iframe = await waitFor(() => {
+      return screen.getByTestId("iframe-sandbox");
+    });
+
+    await expect(iframe).toHaveAttribute("src", expect.stringContaining("sandbox"));
+  });
+  it("should render CodeSandbox component with all props", async () => {
+    render(CodeSandbox, {
+      props: {
+        sandboxId: "abc123",
+        fontSize: 12,
+        hideNavigation: 0,
+        theme: "light"
+      },
+      global: {
+        stubs: {
+          VPButton: VPButton
+        }
+      }
+    });
+
+    expect(screen.getByRole("button")).toHaveTextContent("Start sandbox");
+
+    screen.getByRole("button").click();
+
+    const iframe = await waitFor(() => {
+      return screen.getByTestId("iframe-sandbox");
+    });
+
+    await expect(iframe).toHaveAttribute(
+      "src",
+      "https://codesandbox.io/embed/abc123?fontsize=12&hidenavigation=0&theme=light"
+    );
+  });
+});

docs/.vitepress/theme/molecules/codesandbox/CodeSandbox.stories.ts

@@ -9,7 +9,34 @@ const meta = {
   parameters: {
     layout: "centered"
   },
-  argTypes: {},
+  argTypes: {
+    sandboxId: {
+      control: {
+        type: "text"
+      }
+    },
+    title: {
+      control: {
+        type: "text"
+      }
+    },
+    fontSize: {
+      control: {
+        type: "number"
+      }
+    },
+    hideNavigation: {
+      control: {
+        type: "number"
+      }
+    },
+    theme: {
+      control: {
+        type: "select",
+        options: ["light", "dark"]
+      }
+    }
+  },
   render: (args) => ({
     components: {CodeSandbox},
     setup() {

docs/.vitepress/theme/molecules/codesandbox/CodeSandbox.vue

@@ -3,7 +3,7 @@ import {computed, ref} from "vue";
 import Button from "../button/Button.vue";
 
 export interface CodeSandboxProps {
-  sandboxId?: string;
+  sandboxId: string;
   fontSize?: number;
   hideNavigation?: number;
   theme?: string;
@@ -21,8 +21,7 @@ const props = withDefaults(defineProps<CodeSandboxProps>(), {
     "accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking",
   sandbox: "allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts",
   height: "500px",
-  title: "",
-  sandboxId: ""
+  title: ""
 });
 const show = ref(false);
 

package.json

@@ -10,8 +10,10 @@
     "lint": "eslint . --ext .ts,.tsx,.js,.jsx,.vue",
     "lint:fix": "eslint . --ext .ts,.tsx,.js,.jsx,.vue --fix && yarn run prettier:fix",
     "prettier:fix": "prettier . --write",
-    "storybook": "storybook dev -p 6006",
+    "storybook:dev": "storybook dev -p 6006",
     "storybook:build": "storybook build",
+    "storybook:test": "yarn test-storybook",
+    "storybook:test:ci": "yarn test-storybook --maxWorkers=2",
     "build-storybook": "yarn storybook:build",
     "prepare": "is-ci && husky install",
     "chromatic": "npx chromatic"