Skip to content

Commit e3b9c2c

Browse files
spences10spences10
committed
feat: Add comprehensive testing strategy and update component tests
- Introduced a new `TESTING_STRATEGY.md` document outlining the testing approach for the SvelteKit project, including client-side and server-side testing. - Updated component tests to utilize `page.getByTestId` and `page.getByTitle` for improved querying in the Vitest testing framework. - Enhanced test coverage for various components, ensuring edge cases are handled effectively.
1 parent 2e6e7ac commit e3b9c2c

21 files changed

+1905
-374
lines changed

‎packages/sveltekit-embed/TESTING_STRATEGY.md‎

Lines changed: 1511 additions & 0 deletions
Large diffs are not rendered by default.

‎packages/sveltekit-embed/src/lib/components/anchor-fm.svelte.test.ts‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import AnchorFm from '$lib/components/anchor-fm.svelte';
2+
import { page } from '@vitest/browser/context';
23
import { describe, expect, it } from 'vitest';
34
import { render } from 'vitest-browser-svelte';
45

@@ -15,11 +16,11 @@ describe('AnchorFm', () => {
1516
});
1617

1718
it('renders iframe with episode url', async () => {
18-
const { getByTestId } = render(AnchorFm, {
19+
render(AnchorFm, {
1920
episodeUrl,
2021
disable_observer: true,
2122
});
22-
const iframe = getByTestId('anchor-fm-episode');
23+
const iframe = page.getByTestId('anchor-fm-episode');
2324
const expected_src = `https://anchor.fm/${episodeUrl}`;
2425
await expect.element(iframe).toHaveAttribute('src', expected_src);
2526
});
@@ -38,22 +39,22 @@ describe('AnchorFm', () => {
3839
});
3940

4041
it('renders with a GeneralObserver', async () => {
41-
const { getByTestId } = render(AnchorFm, {
42+
render(AnchorFm, {
4243
episodeUrl,
4344
disable_observer: false,
4445
});
45-
const general_observer = getByTestId('general-observer');
46+
const general_observer = page.getByTestId('general-observer');
4647
await expect.element(general_observer).toBeInTheDocument();
4748
});
4849

4950
// Coverage gaps - test stubs to implement
5051
it('should handle empty episodeUrl gracefully', async () => {
5152
// Test edge case: empty or invalid episode URL
52-
const { getByTestId } = render(AnchorFm, {
53+
render(AnchorFm, {
5354
episodeUrl: '',
5455
disable_observer: true,
5556
});
56-
const iframe = getByTestId('anchor-fm-episode');
57+
const iframe = page.getByTestId('anchor-fm-episode');
5758
await expect
5859
.element(iframe)
5960
.toHaveAttribute('src', 'https://anchor.fm/');
@@ -78,11 +79,11 @@ describe('AnchorFm', () => {
7879
// Test URL encoding and special characters
7980
const specialUrl =
8081
'test-podcast/episodes/episode-with-special-chars-!@#$%^&*()';
81-
const { getByTestId } = render(AnchorFm, {
82+
render(AnchorFm, {
8283
episodeUrl: specialUrl,
8384
disable_observer: true,
8485
});
85-
const iframe = getByTestId('anchor-fm-episode');
86+
const iframe = page.getByTestId('anchor-fm-episode');
8687
const expectedSrc = `https://anchor.fm/${specialUrl}`;
8788
await expect.element(iframe).toHaveAttribute('src', expectedSrc);
8889
await expect
@@ -92,11 +93,11 @@ describe('AnchorFm', () => {
9293

9394
it('should have proper iframe accessibility attributes', async () => {
9495
// Test title attribute, aria-labels, etc.
95-
const { getByTestId } = render(AnchorFm, {
96+
render(AnchorFm, {
9697
episodeUrl,
9798
disable_observer: true,
9899
});
99-
const iframe = getByTestId('anchor-fm-episode');
100+
const iframe = page.getByTestId('anchor-fm-episode');
100101

101102
await expect
102103
.element(iframe)
@@ -108,11 +109,11 @@ describe('AnchorFm', () => {
108109
it('should handle very long episodeUrl values', async () => {
109110
// Test edge case: extremely long URLs
110111
const longUrl = 'a'.repeat(1000) + '/episodes/' + 'b'.repeat(500);
111-
const { getByTestId } = render(AnchorFm, {
112+
render(AnchorFm, {
112113
episodeUrl: longUrl,
113114
disable_observer: true,
114115
});
115-
const iframe = getByTestId('anchor-fm-episode');
116+
const iframe = page.getByTestId('anchor-fm-episode');
116117
const expectedSrc = `https://anchor.fm/${longUrl}`;
117118
await expect.element(iframe).toHaveAttribute('src', expectedSrc);
118119
});

‎packages/sveltekit-embed/src/lib/components/bluesky.svelte.test.ts‎

Lines changed: 26 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { describe, expect, it, vi } from 'vitest';
22
import { render } from 'vitest-browser-svelte';
3+
import { page } from '@vitest/browser/context';
34
import Bluesky from './bluesky.svelte';
45

56
describe('Bluesky', () => {
@@ -12,45 +13,45 @@ describe('Bluesky', () => {
1213
});
1314

1415
it('renders iframe with correct embed url', async () => {
15-
const { getByTestId } = render(Bluesky, {
16+
render(Bluesky, {
1617
post_id: test_post_id,
1718
});
1819

19-
const iframe = getByTestId('bluesky-embed');
20+
const iframe = page.getByTestId('bluesky-embed');
2021
const expected_src = `https://embed.bsky.app/embed/${test_post_id}`;
2122
await expect.element(iframe).toHaveAttribute('src', expected_src);
2223
});
2324

2425
it('renders with custom width', async () => {
25-
const { getByTestId } = render(Bluesky, {
26+
render(Bluesky, {
2627
post_id: test_post_id,
2728
width: '50%',
2829
});
2930

30-
const iframe = getByTestId('bluesky-embed');
31+
const iframe = page.getByTestId('bluesky-embed');
3132
await expect.element(iframe).toHaveAttribute('width', '50%');
3233
});
3334

3435
it('applies custom iframe styles', async () => {
3536
const custom_styles = 'border-radius: 8px; background: #f0f0f0;';
36-
const { getByTestId } = render(Bluesky, {
37+
render(Bluesky, {
3738
post_id: test_post_id,
3839
iframe_styles: custom_styles,
3940
});
4041

41-
const iframe = getByTestId('bluesky-embed');
42+
const iframe = page.getByTestId('bluesky-embed');
4243
const element = iframe.element();
4344
const style_text = element.style.cssText.toLowerCase();
4445
expect(style_text).toContain('border-radius: 8px');
4546
expect(style_text).toContain('background: rgb(240, 240, 240)');
4647
});
4748

4849
it('has correct default styles', async () => {
49-
const { getByTestId } = render(Bluesky, {
50+
render(Bluesky, {
5051
post_id: test_post_id,
5152
});
5253

53-
const iframe = getByTestId('bluesky-embed');
54+
const iframe = page.getByTestId('bluesky-embed');
5455
const element = iframe.element();
5556
const style_text = element.style.cssText.toLowerCase();
5657
expect(style_text).toContain('position: absolute');
@@ -65,12 +66,12 @@ describe('Bluesky', () => {
6566

6667
it('combines default and custom iframe styles correctly', async () => {
6768
const custom_styles = 'border-radius: 8px; margin: 10px;';
68-
const { getByTestId } = render(Bluesky, {
69+
render(Bluesky, {
6970
post_id: test_post_id,
7071
iframe_styles: custom_styles,
7172
});
7273

73-
const iframe = getByTestId('bluesky-embed');
74+
const iframe = page.getByTestId('bluesky-embed');
7475
const element = iframe.element();
7576
const style_text = element.style.cssText.toLowerCase();
7677

@@ -86,7 +87,7 @@ describe('Bluesky', () => {
8687
});
8788

8889
it('updates height when receiving message from iframe', async () => {
89-
const { getByTestId } = render(Bluesky, {
90+
render(Bluesky, {
9091
post_id: test_post_id,
9192
});
9293

@@ -97,18 +98,18 @@ describe('Bluesky', () => {
9798

9899
window.dispatchEvent(message_event);
99100

100-
const iframe = getByTestId('bluesky-embed');
101+
const iframe = page.getByTestId('bluesky-embed');
101102
const element = iframe.element();
102103
expect(element.style.height).toBe('100%');
103104
});
104105

105106
// Edge Cases and Comprehensive Coverage
106107
it('should handle empty post_id gracefully', async () => {
107-
const { getByTestId } = render(Bluesky, {
108+
render(Bluesky, {
108109
post_id: '',
109110
});
110111

111-
const iframe = getByTestId('bluesky-embed');
112+
const iframe = page.getByTestId('bluesky-embed');
112113
const expected_src = 'https://embed.bsky.app/embed/';
113114
await expect.element(iframe).toHaveAttribute('src', expected_src);
114115
});
@@ -219,11 +220,11 @@ describe('Bluesky', () => {
219220
'a'.repeat(100) +
220221
'/app.bsky.feed.post/' +
221222
'b'.repeat(100);
222-
const { getByTestId } = render(Bluesky, {
223+
render(Bluesky, {
223224
post_id: long_post_id,
224225
});
225226

226-
const iframe = getByTestId('bluesky-embed');
227+
const iframe = page.getByTestId('bluesky-embed');
227228
const expected_src = `https://embed.bsky.app/embed/${long_post_id}`;
228229
await expect.element(iframe).toHaveAttribute('src', expected_src);
229230
});
@@ -248,7 +249,7 @@ describe('Bluesky', () => {
248249
expect(wrapper?.classList.contains('bluesky-wrapper')).toBe(true);
249250

250251
// Check iframe is within the correct structure
251-
const iframe = getByTestId('bluesky-embed');
252+
const iframe = page.getByTestId('bluesky-embed');
252253
expect(
253254
iframe
254255
.element()
@@ -258,21 +259,21 @@ describe('Bluesky', () => {
258259

259260
it('should handle numeric width values', async () => {
260261
// Even though TypeScript interface expects string, test component robustness
261-
const { getByTestId } = render(Bluesky, {
262+
render(Bluesky, {
262263
post_id: test_post_id,
263264
width: '500px', // Using string as per interface
264265
});
265266

266-
const iframe = getByTestId('bluesky-embed');
267+
const iframe = page.getByTestId('bluesky-embed');
267268
await expect.element(iframe).toHaveAttribute('width', '500px');
268269
});
269270

270271
it('should have proper iframe accessibility attributes', async () => {
271-
const { getByTestId } = render(Bluesky, {
272+
render(Bluesky, {
272273
post_id: test_post_id,
273274
});
274275

275-
const iframe = getByTestId('bluesky-embed');
276+
const iframe = page.getByTestId('bluesky-embed');
276277

277278
// Test accessibility attributes
278279
await expect
@@ -290,22 +291,22 @@ describe('Bluesky', () => {
290291
it('should handle special characters in post_id', async () => {
291292
const special_post_id =
292293
'did:plc:user-with_special.chars@example/app.bsky.feed.post/post-with-special_chars.123';
293-
const { getByTestId } = render(Bluesky, {
294+
render(Bluesky, {
294295
post_id: special_post_id,
295296
});
296297

297-
const iframe = getByTestId('bluesky-embed');
298+
const iframe = page.getByTestId('bluesky-embed');
298299
const expected_src = `https://embed.bsky.app/embed/${special_post_id}`;
299300
await expect.element(iframe).toHaveAttribute('src', expected_src);
300301
});
301302

302303
// Additional comprehensive tests for edge cases
303304
it('should handle default width when not specified', async () => {
304-
const { getByTestId } = render(Bluesky, {
305+
render(Bluesky, {
305306
post_id: test_post_id,
306307
});
307308

308-
const iframe = getByTestId('bluesky-embed');
309+
const iframe = page.getByTestId('bluesky-embed');
309310
await expect.element(iframe).toHaveAttribute('width', '100%');
310311
});
311312

0 commit comments

Comments
 (0)