Adding e2e to test Svelte documentation

code/e2e-tests/framework-svelte.spec.ts

@@ -0,0 +1,30 @@
+/* eslint-disable jest/no-disabled-tests */
+import type { Locator } from '@playwright/test';
+import { test, expect } from '@playwright/test';
+import process from 'process';
+import { SbPage } from './util';
+
+const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:6006';
+const templateName = process.env.STORYBOOK_TEMPLATE_NAME;
+
+test.describe('Svelte', () => {
+  test.skip(
+    // eslint-disable-next-line jest/valid-title
+    !templateName?.includes('svelte'),
+    'Only run this test on Svelte'
+  );
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto(storybookUrl);
+    await new SbPage(page).waitUntilLoaded();
+  });
+
+  test('Story have a documentation', async ({ page }) => {
+    const sbPage = new SbPage(page);
+
+    sbPage.navigateToStory('example/button', 'docs');
+    const root = sbPage.previewRoot();
+    const argsTable = root.locator('.docblock-argstable');
+    await expect(argsTable).toContainText('Is this the principal call to action on the page');
+  });
+});

code/renderers/svelte/template/cli/js/Button.svelte

@@ -1,4 +1,10 @@
 <script>
+  import { createEventDispatcher } from 'svelte';
+
+  /**
+   * A Button.
+   * @component
+   */
   import './button.css';
 
   /**
@@ -7,30 +13,41 @@
   export let primary = false;
 
   /**
-   * @type {string} What background color to use
+   * What background color to use
+   * @type {string}
    */
   export let backgroundColor = undefined;
 
   /**
-   * @type {'small' | 'medium' | 'large'} How large should the button be?
+   * How large should the button be?
+   * @type {'small' | 'medium' | 'large'}
    */
   export let size = 'medium';
 
   /**
-   * @type {string} Button contents
+   * Button contents
+   * @type {string}
    */
   export let label;
 
   $: mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  $: text = label?.toString(); // Test parsing of Elvis Operator
 
-  $: style = backgroundColor ? `background-color: ${backgroundColor}` : '';
+  const dispatch = createEventDispatcher();
+  /**
+   * Optional click handler
+   */
+  export let onClick = (event) => {
+    dispatch('click', event);
+  };
 </script>
 
 <button
   type="button"
-  class={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
-  {style}
+  class="storybook-button storybook-button--{size} {mode}"
+  style:background-color={backgroundColor}
+  on:click={onClick}
   on:click
 >
-  {label}
+  {text}
 </button>

code/renderers/svelte/template/cli/ts-3-8/Button.svelte

@@ -1,4 +1,10 @@
 <script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  /**
+   * A Button.
+   * @component
+   */
   import './button.css';
 
   /**
@@ -20,15 +26,23 @@
   export let label = '';
 
   $: mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  $: text = label?.toString(); // Test parsing of Elvis Operator
 
-  $: style = backgroundColor ? `background-color: ${backgroundColor}` : '';
+  const dispatch = createEventDispatcher();
+  /**
+   * Optional click handler
+   */
+  export let onClick = (event: MouseEvent) => {
+    dispatch('click', event);
+  };
 </script>
 
 <button
   type="button"
-  class={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
-  {style}
+  class="storybook-button storybook-button--{size} {mode}"
+  style:background-color={backgroundColor}
+  on:click={onClick}
   on:click
 >
-  {label}
+  {text}
 </button>

code/renderers/svelte/template/cli/ts-4-9/Button.svelte

@@ -1,4 +1,10 @@
 <script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  /**
+   * A Button.
+   * @component
+   */
   import './button.css';
 
   /**
@@ -20,15 +26,23 @@
   export let label: string = '';
 
   $: mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  $: text = label?.toString(); // Test parsing of Elvis Operator
 
-  $: style = backgroundColor ? `background-color: ${backgroundColor}` : '';
+  const dispatch = createEventDispatcher();
+  /**
+   * Optional click handler
+   */
+  export let onClick = (event: MouseEvent) => {
+    dispatch('click', event);
+  };
 </script>
 
 <button
   type="button"
-  class={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
-  {style}
+  class="storybook-button storybook-button--{size} {mode}"
+  style:background-color={backgroundColor}
+  on:click={onClick}
   on:click
 >
-  {label}
+  {text}
 </button>

code/renderers/svelte/template/components/Button.svelte

@@ -1,32 +1,38 @@
 <script>
-  import './button.css';
   import { createEventDispatcher } from 'svelte';
+  /**
+   * A Button.
+   * @component
+   */
+  import './button.css';
+
   /**
    * Is this the principal call to action on the page?
    */
   export let primary = false;
 
   /**
    * What background color to use
+   * @type {string}
    */
   export let backgroundColor = undefined;
 
   /**
    * How large should the button be?
+   * @type {'small' | 'medium' | 'large'}
    */
   export let size = 'medium';
 
   /**
    * Button contents
+   * @type {string}
    */
-  export let label = '';
+  export let label;
 
   $: mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
-
-  $: style = backgroundColor ? `background-color: ${backgroundColor}` : '';
+  $: text = label?.toString(); // Test parsing of Elvis Operator
 
   const dispatch = createEventDispatcher();
-
   /**
    * Optional click handler
    */
@@ -37,9 +43,10 @@
 
 <button
   type="button"
-  class={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
-  {style}
+  class="storybook-button storybook-button--{size} {mode}"
+  style:background-color={backgroundColor}
   on:click={onClick}
+  on:click
 >
-  {label}
+  {text}
 </button>