Add E2E test for multiple CSF files with same title in autodocs

code/addons/docs/template/stories/docs2/multiple-csf-files-a.stories.ts

@@ -0,0 +1,23 @@
+import { global as globalThis } from '@storybook/global';
+
+export default {
+  title: 'Multiple CSF Files Same Title',
+  component: globalThis.Components.Html,
+  tags: ['autodocs'],
+  args: {
+    content: '<p>paragraph</p>',
+  },
+  parameters: {
+    chromatic: { disable: true },
+  },
+};
+
+export const DefaultA = {};
+
+export const SpanContent = {
+  args: { content: '<span>span</span>' },
+};
+
+export const CodeContent = {
+  args: { content: '<code>code</code>' },
+};

code/addons/docs/template/stories/docs2/multiple-csf-files-b.stories.ts

@@ -0,0 +1,23 @@
+import { global as globalThis } from '@storybook/global';
+
+export default {
+  title: 'Multiple CSF Files Same Title',
+  component: globalThis.Components.Html,
+  tags: ['autodocs'],
+  args: {
+    content: '<p>paragraph</p>',
+  },
+  parameters: {
+    chromatic: { disable: true },
+  },
+};
+
+export const DefaultB = {};
+
+export const H1Content = {
+  args: { content: '<h1>heading 1</h1>' },
+};
+
+export const H2Content = {
+  args: { content: '<h2>heading 2</h2>' },
+};

code/e2e-tests/addon-docs.spec.ts

@@ -210,4 +210,19 @@ test.describe('addon-docs', () => {
     await expect(componentReactVersion).toHaveText(expectedReactVersion);
     await expect(componentReactDomVersion).toHaveText(expectedReactVersion);
   });
+
+  test('should have stories from multiple CSF files in autodocs', async ({ page }) => {
+    const sbPage = new SbPage(page);
+    await sbPage.navigateToStory('/addons/docs/multiple-csf-files-same-title', 'docs');
+    const root = sbPage.previewRoot();
+
+    const storyHeadings = root.locator('.sb-anchor > h3');
+    await expect(await storyHeadings.count()).toBe(6);
+    await expect(storyHeadings.nth(0)).toHaveText('Default A');
+    await expect(storyHeadings.nth(1)).toHaveText('Span Content');
+    await expect(storyHeadings.nth(2)).toHaveText('Code Content');
+    await expect(storyHeadings.nth(3)).toHaveText('Default B');
+    await expect(storyHeadings.nth(4)).toHaveText('H 1 Content');
+    await expect(storyHeadings.nth(5)).toHaveText('H 2 Content');
+  });
 });

code/renderers/svelte/template/components/Html.svelte

@@ -5,4 +5,4 @@
   export let content = '';
 </script>
 
-<div>{@html content}></div>
+<div>{@html content}</div>