From 8565df063af5c33eb1952d62a56e2a1fd023d571 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=8Dtalo=20Teixeira?= Date: Wed, 20 Apr 2022 23:33:27 +0200 Subject: [PATCH 1/5] feat: add interactions to vue cli template --- cypress/generated/addon-interactions.spec.ts | 4 +++ lib/cli/src/frameworks/vue/Header.stories.js | 8 +++++- lib/cli/src/frameworks/vue/Header.vue | 1 + lib/cli/src/frameworks/vue/Page.stories.js | 27 +++++++++++--------- lib/cli/src/frameworks/vue/Page.vue | 26 +++++-------------- lib/cli/src/generators/baseGenerator.ts | 2 +- 6 files changed, 35 insertions(+), 33 deletions(-) diff --git a/cypress/generated/addon-interactions.spec.ts b/cypress/generated/addon-interactions.spec.ts index 1d2ff7b81f12..bdab9fa0248e 100644 --- a/cypress/generated/addon-interactions.spec.ts +++ b/cypress/generated/addon-interactions.spec.ts @@ -38,4 +38,8 @@ describe('addon-interactions', () => { onlyOn('preact', () => { it('should have interactions', test); }); + + onlyOn('vue', () => { + it('should have interactions', test); + }); }); diff --git a/lib/cli/src/frameworks/vue/Header.stories.js b/lib/cli/src/frameworks/vue/Header.stories.js index 007b7f7cb5c5..af27f18a9db3 100644 --- a/lib/cli/src/frameworks/vue/Header.stories.js +++ b/lib/cli/src/frameworks/vue/Header.stories.js @@ -3,6 +3,10 @@ import MyHeader from './Header'; export default { title: 'Example/Header', component: MyHeader, + parameters: { + // More on Story layout: https://storybook.js.org/docs/vue/configure/story-layout + layout: 'fullscreen', + }, }; const Template = (args, { argTypes }) => ({ @@ -14,7 +18,9 @@ const Template = (args, { argTypes }) => ({ export const LoggedIn = Template.bind({}); LoggedIn.args = { - user: {}, + user: { + name: 'Jane Doe', + }, }; export const LoggedOut = Template.bind({}); diff --git a/lib/cli/src/frameworks/vue/Header.vue b/lib/cli/src/frameworks/vue/Header.vue index 3e704f9bf900..3fb50eafb82e 100644 --- a/lib/cli/src/frameworks/vue/Header.vue +++ b/lib/cli/src/frameworks/vue/Header.vue @@ -21,6 +21,7 @@

Acme

+ Welcome, {{ user.name }}! diff --git a/lib/cli/src/frameworks/vue/Page.stories.js b/lib/cli/src/frameworks/vue/Page.stories.js index 296bf4485cd6..6a95114640e3 100644 --- a/lib/cli/src/frameworks/vue/Page.stories.js +++ b/lib/cli/src/frameworks/vue/Page.stories.js @@ -1,25 +1,28 @@ +import { within, userEvent } from '@storybook/testing-library'; + import MyPage from './Page'; import * as HeaderStories from './Header.stories'; export default { title: 'Example/Page', component: MyPage, + parameters: { + // More on Story layout: https://storybook.js.org/docs/vue/configure/story-layout + layout: 'fullscreen', + }, }; -const Template = (args, { argTypes }) => ({ - props: Object.keys(argTypes), +const Template = () => ({ components: { MyPage }, - template: - '', + template: '', }); -export const LoggedIn = Template.bind({}); -LoggedIn.args = { - // More on composing args: https://storybook.js.org/docs/vue/writing-stories/args#args-composition - ...HeaderStories.LoggedIn.args, -}; - export const LoggedOut = Template.bind({}); -LoggedOut.args = { - ...HeaderStories.LoggedOut.args, + +// More on interaction testing: https://storybook.js.org/docs/vue/writing-tests/interaction-testing +export const LoggedIn = Template.bind({}); +LoggedIn.play = async ({ canvasElement }) => { + const canvas = within(canvasElement); + const loginButton = await canvas.getByRole('button', { name: /Log in/i }); + await userEvent.click(loginButton); }; diff --git a/lib/cli/src/frameworks/vue/Page.vue b/lib/cli/src/frameworks/vue/Page.vue index 987b8b9f318f..76913bf7d44c 100644 --- a/lib/cli/src/frameworks/vue/Page.vue +++ b/lib/cli/src/frameworks/vue/Page.vue @@ -2,9 +2,9 @@
@@ -67,22 +67,10 @@ export default { components: { MyHeader }, - props: { - user: { - type: Object, - }, - }, - - methods: { - onLogin() { - this.$emit('onLogin'); - }, - onLogout() { - this.$emit('onLogout'); - }, - onCreateAccount() { - this.$emit('onCreateAccount'); - }, + data() { + return { + user: null, + }; }, }; diff --git a/lib/cli/src/generators/baseGenerator.ts b/lib/cli/src/generators/baseGenerator.ts index 986a9f144682..d295e9d90a4f 100644 --- a/lib/cli/src/generators/baseGenerator.ts +++ b/lib/cli/src/generators/baseGenerator.ts @@ -62,7 +62,7 @@ const builderDependencies = (builder: Builder) => { const stripVersions = (addons: string[]) => addons.map((addon) => getPackageDetails(addon)[0]); const hasInteractiveStories = (framework: SupportedFrameworks) => - ['react', 'angular', 'preact'].includes(framework); + ['react', 'angular', 'preact', 'vue'].includes(framework); export async function baseGenerator( packageManager: JsPackageManager, From b26d8f4cb2bbfea75eeb041a5b01a9c61d013086 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=8Dtalo=20Teixeira?= Date: Sat, 23 Apr 2022 00:30:02 +0200 Subject: [PATCH 2/5] feat: move cb functions to methods --- lib/cli/src/frameworks/vue/Page.vue | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/lib/cli/src/frameworks/vue/Page.vue b/lib/cli/src/frameworks/vue/Page.vue index 76913bf7d44c..5a45445ed909 100644 --- a/lib/cli/src/frameworks/vue/Page.vue +++ b/lib/cli/src/frameworks/vue/Page.vue @@ -2,9 +2,9 @@
@@ -72,5 +72,17 @@ export default { user: null, }; }, + + methods: { + onLogin() { + this.user = { name: 'Jane Doe' }; + }, + onLogout() { + this.user = null; + }, + onCreateAccount() { + this.user = { name: 'Jane Doe' }; + }, + }, }; From 88cdcffd2c94ffa7c5107debf34ebd4e53426336 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=8Dtalo=20Teixeira?= Date: Sat, 23 Apr 2022 00:30:47 +0200 Subject: [PATCH 3/5] feat: use find to query element on play function --- lib/cli/src/frameworks/vue/Page.stories.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/cli/src/frameworks/vue/Page.stories.js b/lib/cli/src/frameworks/vue/Page.stories.js index 6a95114640e3..4dbc552ebd81 100644 --- a/lib/cli/src/frameworks/vue/Page.stories.js +++ b/lib/cli/src/frameworks/vue/Page.stories.js @@ -23,6 +23,6 @@ export const LoggedOut = Template.bind({}); export const LoggedIn = Template.bind({}); LoggedIn.play = async ({ canvasElement }) => { const canvas = within(canvasElement); - const loginButton = await canvas.getByRole('button', { name: /Log in/i }); + const loginButton = await canvas.findByRole('button', { name: /Log in/i }); await userEvent.click(loginButton); }; From abaa657c74290359765dcfb16c16237c4c6793d8 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Sat, 23 Apr 2022 10:57:01 +0200 Subject: [PATCH 4/5] Update lib/cli/src/frameworks/vue/Page.stories.js --- lib/cli/src/frameworks/vue/Page.stories.js | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/cli/src/frameworks/vue/Page.stories.js b/lib/cli/src/frameworks/vue/Page.stories.js index 4dbc552ebd81..d2fe26a4086f 100644 --- a/lib/cli/src/frameworks/vue/Page.stories.js +++ b/lib/cli/src/frameworks/vue/Page.stories.js @@ -1,7 +1,6 @@ import { within, userEvent } from '@storybook/testing-library'; import MyPage from './Page'; -import * as HeaderStories from './Header.stories'; export default { title: 'Example/Page', From 80aea751c8e043919fcca569d0e68a1a139b533c Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 25 Apr 2022 12:26:23 +0200 Subject: [PATCH 5/5] fix: use getByRole instead of findByRole in vue template --- lib/cli/src/frameworks/vue/Page.stories.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/cli/src/frameworks/vue/Page.stories.js b/lib/cli/src/frameworks/vue/Page.stories.js index d2fe26a4086f..fd168a48d3fa 100644 --- a/lib/cli/src/frameworks/vue/Page.stories.js +++ b/lib/cli/src/frameworks/vue/Page.stories.js @@ -22,6 +22,6 @@ export const LoggedOut = Template.bind({}); export const LoggedIn = Template.bind({}); LoggedIn.play = async ({ canvasElement }) => { const canvas = within(canvasElement); - const loginButton = await canvas.findByRole('button', { name: /Log in/i }); + const loginButton = await canvas.getByRole('button', { name: /Log in/i }); await userEvent.click(loginButton); };