Add interactive test in vue example

storybookjs · Aug 18, 2022 · 4a35b63 · 4a35b63
1 parent 94923b1
commit 4a35b63
Show file tree

Hide file tree

Showing 5 changed files with 1,240 additions and 23 deletions.
diff --git a/examples/vue/.storybook/main.ts b/examples/vue/.storybook/main.ts
@@ -4,7 +4,7 @@ const { mergeConfig } = require('vite');
 export default {
   framework: '@storybook/vue3',
   stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
   core: {
     builder: '@storybook/builder-vite',
     // we don't want to muck up the data when we're working on the builder
@@ -16,7 +16,10 @@ export default {
   async viteFinal(config, { configType }) {
     // Demonstrates use of mergeConfig and resolve.alias as an array
     return mergeConfig(config, {
-      resolve: { alias: [{ find: '@assets', replacement: resolve(__dirname, '..', 'stories', 'assets') }] },
+      resolve: {
+        alias: [{ find: '@assets', replacement: resolve(__dirname, '..', 'stories', 'assets') }],
+        dedupe: ["@storybook/client-api"],
+      },
     });
   },
 };
diff --git a/examples/vue/.storybook/preview-head.html b/examples/vue/.storybook/preview-head.html
@@ -0,0 +1,3 @@
+<script>
+  window.global = window;
+</script>
diff --git a/examples/vue/package.json b/examples/vue/package.json
@@ -19,9 +19,12 @@
   "devDependencies": {
     "@storybook/addon-a11y": "^6.5.9",
     "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-interactions": "^6.5.10",
     "@storybook/builder-vite": "workspace:*",
+    "@storybook/jest": "^0.0.10",
     "@storybook/mdx2-csf": "^0.0.3",
-    "@storybook/test-runner": "0.1.0",
+    "@storybook/test-runner": "^0.5.0",
+    "@storybook/testing-library": "^0.0.13",
     "@storybook/vue3": "^6.5.9",
     "@vitejs/plugin-vue": "^3.0.0-beta.1",
     "http-server": "^14.1.0",

diff --git a/examples/vue/stories/Button.stories.js b/examples/vue/stories/Button.stories.js
@@ -1,4 +1,6 @@
 import MyButton from './Button.vue';
+import { userEvent, within } from "@storybook/testing-library";
+import { expect } from "@storybook/jest";
 
 export default {
   title: 'Example/Button',
@@ -28,6 +30,12 @@ Primary.args = {
   primary: true,
   label: 'Button',
 };
+Primary.play = async ({ args, canvasElement }) => {
+  const canvas = within(canvasElement);
+  const button = canvas.getByRole("button");
+  await userEvent.click(button);
+  await expect(args.onClick).toHaveBeenCalled();
+};
 
 export const Secondary = Template.bind({});
 Secondary.args = {