1<script module lang="ts">
2 import { defineMeta } from '@storybook/addon-svelte-csf';
3 import { expect } from 'storybook/test';
4 import { MarkdownContent } from '$lib/components/app';
5 import { AI_TUTORIAL_MD } from './fixtures/ai-tutorial.js';
6 import { API_DOCS_MD } from './fixtures/api-docs.js';
7 import { BLOG_POST_MD } from './fixtures/blog-post.js';
8 import { DATA_ANALYSIS_MD } from './fixtures/data-analysis.js';
9 import { README_MD } from './fixtures/readme.js';
10 import { MATH_FORMULAS_MD } from './fixtures/math-formulas.js';
11 import { EMPTY_MD } from './fixtures/empty.js';
12
13 const { Story } = defineMeta({
14 title: 'Components/MarkdownContent',
15 component: MarkdownContent,
16 parameters: {
17 layout: 'centered'
18 }
19 });
20</script>
21
22<Story name="Empty" args={{ content: EMPTY_MD, class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }} />
23
24<Story
25 name="AI Tutorial"
26 args={{ content: AI_TUTORIAL_MD, class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }}
27/>
28
29<Story
30 name="API Documentation"
31 args={{ content: API_DOCS_MD, class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }}
32/>
33
34<Story
35 name="Technical Blog"
36 args={{ content: BLOG_POST_MD, class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }}
37/>
38
39<Story
40 name="Data Analysis"
41 args={{ content: DATA_ANALYSIS_MD, class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }}
42/>
43
44<Story
45 name="README file"
46 args={{ content: README_MD, class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }}
47/>
48
49<Story
50 name="Math Formulas"
51 args={{ content: MATH_FORMULAS_MD, class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }}
52/>
53
54<Story
55 name="URL Links"
56 args={{
57 content: `# URL Links Test
58
59Here are some example URLs that should open in new tabs:
60
61- [Hugging Face Homepage](https://huggingface.co)
62- [GitHub Repository](https://github.com/ggml-org/llama.cpp)
63- [OpenAI Website](https://openai.com)
64- [Google Search](https://www.google.com)
65
66You can also test inline links like https://example.com or https://docs.python.org.
67
68All links should have \`target="_blank"\` and \`rel="noopener noreferrer"\` attributes for security.`,
69 class: 'max-w-[56rem] w-[calc(100vw-2rem)]'
70 }}
71 play={async ({ canvasElement }) => {
72 // Wait for component to render
73 await new Promise((resolve) => setTimeout(resolve, 100));
74
75 // Find all links in the rendered content
76 const links = canvasElement.querySelectorAll('a[href]');
77
78 // Test that we have the expected number of links
79 expect(links.length).toBeGreaterThan(0);
80
81 // Test each link for proper attributes
82 links.forEach((link) => {
83 const href = link.getAttribute('href');
84
85 // Test that external links have proper security attributes
86 if (href && (href.startsWith('http://') || href.startsWith('https://'))) {
87 expect(link.getAttribute('target')).toBe('_blank');
88 expect(link.getAttribute('rel')).toBe('noopener noreferrer');
89 }
90 });
91
92 // Test specific links exist
93 const hugginFaceLink = Array.from(links).find(
94 (link) => link.getAttribute('href') === 'https://huggingface.co'
95 );
96 expect(hugginFaceLink).toBeTruthy();
97 expect(hugginFaceLink?.textContent).toBe('Hugging Face Homepage');
98
99 const githubLink = Array.from(links).find(
100 (link) => link.getAttribute('href') === 'https://github.com/ggml-org/llama.cpp'
101 );
102 expect(githubLink).toBeTruthy();
103 expect(githubLink?.textContent).toBe('GitHub Repository');
104
105 const openaiLink = Array.from(links).find(
106 (link) => link.getAttribute('href') === 'https://openai.com'
107 );
108 expect(openaiLink).toBeTruthy();
109 expect(openaiLink?.textContent).toBe('OpenAI Website');
110
111 const googleLink = Array.from(links).find(
112 (link) => link.getAttribute('href') === 'https://www.google.com'
113 );
114 expect(googleLink).toBeTruthy();
115 expect(googleLink?.textContent).toBe('Google Search');
116
117 // Test inline links (auto-linked URLs)
118 const exampleLink = Array.from(links).find(
119 (link) => link.getAttribute('href') === 'https://example.com'
120 );
121 expect(exampleLink).toBeTruthy();
122
123 const pythonDocsLink = Array.from(links).find(
124 (link) => link.getAttribute('href') === 'https://docs.python.org'
125 );
126 expect(pythonDocsLink).toBeTruthy();
127
128 console.log(`✅ URL Links test passed - Found ${links.length} links with proper attributes`);
129 }}
130/>