CLI/Svelte: add interactions to cli template

cypress/generated/addon-interactions.spec.ts

@@ -38,4 +38,8 @@ describe('addon-interactions', () => {
   onlyOn('preact', () => {
     it('should have interactions', test);
   });
+
+  onlyOn('svelte', () => {
+    it('should have interactions', test);
+  });
 });

lib/cli/src/frameworks/svelte/Header.stories.js

@@ -3,6 +3,10 @@ import Header from './Header.svelte';
 export default {
   title: 'Example/Header',
   component: Header,
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/svelte/configure/story-layout
+    layout: 'fullscreen',
+  },
   argTypes: {
     onLogin: { action: 'onLogin' },
     onLogout: { action: 'onLogout' },
@@ -22,7 +26,9 @@ const Template = (args) => ({
 
 export const LoggedIn = Template.bind({});
 LoggedIn.args = {
-  user: {},
+  user: {
+    name: 'Jane Doe',
+  },
 };
 
 export const LoggedOut = Template.bind({});

lib/cli/src/frameworks/svelte/Header.svelte

@@ -37,6 +37,9 @@
     </div>
     <div>
       {#if user}
+        <span class="welcome">
+          Welcome, <b>{user.name}</b>!
+        </span>
         <Button size="small" on:click={onLogout} label="Log out" />
       {/if}
       {#if !user}

lib/cli/src/frameworks/svelte/Page.stories.js

@@ -1,29 +1,27 @@
+import { within, userEvent } from '@storybook/testing-library';
 import Page from './Page.svelte';
 
 export default {
   title: 'Example/Page',
   component: Page,
-  argTypes: {
-    onLogin: { action: 'onLogin' },
-    onLogout: { action: 'onLogout' },
-    onCreateAccount: { action: 'onCreateAccount' },
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/svelte/configure/story-layout
+    layout: 'fullscreen',
   },
 };
 
 const Template = (args) => ({
   Component: Page,
   props: args,
-  on: {
-    login: args.onLogin,
-    logout: args.onLogout,
-    createAccount: args.onCreateAccount,
-  },
 });
 
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  user: {},
-};
-
 export const LoggedOut = Template.bind({});
 LoggedOut.args = {};
+
+// More on interaction testing: https://storybook.js.org/docs/svelte/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);
+};

lib/cli/src/frameworks/svelte/Page.svelte

@@ -2,25 +2,11 @@
   import './page.css';
   import Header from './Header.svelte';
 
-  import { createEventDispatcher } from 'svelte';
-
-  export let user = null;
-
-  const dispatch = createEventDispatcher();
-
-  function onLogin(event) {
-    dispatch('login', event);
-  }
-  function onLogout(event) {
-    dispatch('logout', event);
-  }
-  function onCreateAccount(event) {
-    dispatch('createAccount', event);
-  }
+  let user = null;
 </script>
 
 <article>
-  <Header {user} on:login={onLogin} on:logout={onLogout} on:createAccount={onCreateAccount} />
+  <Header {user} on:login={() => user = { name: 'Jane Doe' }} on:logout={() => user = null} on:createAccount={() => user = { name: 'Jane Doe' }} />
 
   <section>
     <h2>Pages in Storybook</h2>

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', 'svelte'].includes(framework);
 
 export async function baseGenerator(
   packageManager: JsPackageManager,