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

@@ -24,6 +24,7 @@
   $: mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
 
   $: style = backgroundColor ? `background-color: ${backgroundColor}` : '';
+  $: text = label?.toString(); // Test parsing of Elvis Operator
 </script>
 
 <button
@@ -32,5 +33,5 @@
   {style}
   on:click
 >
-  {label}
+  {text}
 </button>

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

@@ -22,6 +22,7 @@
   $: mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
 
   $: style = backgroundColor ? `background-color: ${backgroundColor}` : '';
+  $: text = label?.toString(); // Test parsing of Elvis Operator
 </script>
 
 <button
@@ -30,5 +31,5 @@
   {style}
   on:click
 >
-  {label}
+  {text}
 </button>

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

@@ -22,6 +22,7 @@
   $: mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
 
   $: style = backgroundColor ? `background-color: ${backgroundColor}` : '';
+  $: text = label?.toString(); // Test parsing of Elvis Operator
 </script>
 
 <button
@@ -30,5 +31,5 @@
   {style}
   on:click
 >
-  {label}
+  {text}
 </button>

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

@@ -24,6 +24,7 @@
   $: mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
 
   $: style = backgroundColor ? `background-color: ${backgroundColor}` : '';
+  $: text = label?.toString(); // Test parsing of Elvis Operator
 
   const dispatch = createEventDispatcher();
 
@@ -41,5 +42,5 @@
   {style}
   on:click={onClick}
 >
-  {label}
+  {text}
 </button>