Skip to content

Commit 9d2901c

Browse files
committed
refactor(tests): simplify render calls and improve element selection in test files
1 parent 5373fd7 commit 9d2901c

File tree

7 files changed

+56
-65
lines changed

7 files changed

+56
-65
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -474,7 +474,7 @@ describe('Bluesky', () => {
474474
});
475475

476476
it('should apply correct CSS classes and container structure', async () => {
477-
const { container, getByTestId } = render(Bluesky, {
477+
const { container } = render(Bluesky, {
478478
post_id: test_post_id,
479479
});
480480

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -126,12 +126,12 @@ describe('Deezer', () => {
126126
for (let i = 0; i < themes.length; i++) {
127127
const testTheme = themes[i];
128128
const uniqueFrameSrc = `track/${i}`;
129-
const { getByTitle } = render(Deezer, {
129+
render(Deezer, {
130130
theme: testTheme,
131131
frameSrc: uniqueFrameSrc,
132132
disable_observer: true,
133133
});
134-
const iframe = getByTitle('deezer-widget');
134+
const iframe = page.getByTitle('deezer-widget');
135135
const element = iframe.element() as HTMLIFrameElement;
136136

137137
expect(element.src).toBe(
@@ -144,13 +144,13 @@ describe('Deezer', () => {
144144
describe('Custom Styling', () => {
145145
it('should apply custom iframe styles correctly', async () => {
146146
const customStyles = 'border: 2px solid red; background: blue;';
147-
const { getByTitle } = render(Deezer, {
147+
render(Deezer, {
148148
theme,
149149
frameSrc,
150150
iframe_styles: customStyles,
151151
disable_observer: true,
152152
});
153-
const iframe = getByTitle('deezer-widget');
153+
const iframe = page.getByTitle('deezer-widget');
154154
const element = iframe.element() as HTMLIFrameElement;
155155

156156
expect(element.getAttribute('style')).toBe(customStyles);
@@ -175,12 +175,12 @@ describe('Deezer', () => {
175175
it('should construct widget URL correctly', async () => {
176176
const testTheme = 'dark';
177177
const testFrameSrc = 'playlist/123456';
178-
const { getByTitle } = render(Deezer, {
178+
render(Deezer, {
179179
theme: testTheme,
180180
frameSrc: testFrameSrc,
181181
disable_observer: true,
182182
});
183-
const iframe = getByTitle('deezer-widget');
183+
const iframe = page.getByTitle('deezer-widget');
184184
const element = iframe.element() as HTMLIFrameElement;
185185

186186
const expectedUrl = `https://widget.deezer.com/widget/${testTheme}/${testFrameSrc}`;
@@ -190,12 +190,12 @@ describe('Deezer', () => {
190190

191191
describe('Accessibility', () => {
192192
it('should have proper iframe accessibility and security attributes', async () => {
193-
const { getByTitle } = render(Deezer, {
193+
render(Deezer, {
194194
theme,
195195
frameSrc,
196196
disable_observer: true,
197197
});
198-
const iframe = getByTitle('deezer-widget');
198+
const iframe = page.getByTitle('deezer-widget');
199199

200200
await expect
201201
.element(iframe)

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

Lines changed: 18 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import Guild from '$lib/components/guild.svelte';
2+
import { page } from '@vitest/browser/context';
23
import { describe, expect, it } from 'vitest';
34
import { render } from 'vitest-browser-svelte';
4-
import { page } from '@vitest/browser/context';
55

66
describe('Guild', () => {
77
it('mounts with default props', async () => {
@@ -59,7 +59,7 @@ describe('Guild', () => {
5959
});
6060

6161
it('should apply default prop values when not provided', async () => {
62-
const { getByTestId, container } = render(Guild, {
62+
render(Guild, {
6363
card_id: 'test123',
6464
disable_observer: true,
6565
});
@@ -82,39 +82,39 @@ describe('Guild', () => {
8282
const card_id = 'test456';
8383

8484
// Test 'user' type
85-
const { getByTestId: getUserIframe } = render(Guild, {
85+
render(Guild, {
8686
card_id,
8787
type: 'user',
8888
disable_observer: true,
8989
});
9090
await expect
91-
.element(getUserIframe('guild-card'))
91+
.element(page.getByTestId('guild-card'))
9292
.toHaveAttribute(
9393
'src',
9494
`https://guild.host/embeds/user/${card_id}/card`,
9595
);
9696

9797
// Test 'event' type
98-
const { getByTestId: getEventIframe } = render(Guild, {
98+
render(Guild, {
9999
card_id,
100100
type: 'event',
101101
disable_observer: true,
102102
});
103103
await expect
104-
.element(getEventIframe('guild-card'))
104+
.element(page.getByTestId('guild-card'))
105105
.toHaveAttribute(
106106
'src',
107107
`https://guild.host/embeds/event/${card_id}/card`,
108108
);
109109

110110
// Test 'presentation' type
111-
const { getByTestId: getPresentationIframe } = render(Guild, {
111+
render(Guild, {
112112
card_id,
113113
type: 'presentation',
114114
disable_observer: true,
115115
});
116116
await expect
117-
.element(getPresentationIframe('guild-card'))
117+
.element(page.getByTestId('guild-card'))
118118
.toHaveAttribute(
119119
'src',
120120
`https://guild.host/embeds/presentation/${card_id}/card`,
@@ -125,42 +125,39 @@ describe('Guild', () => {
125125
const card_id = 'test789';
126126

127127
// Test 'item' display type
128-
const { getByTestId: getItemIframe } = render(Guild, {
128+
render(Guild, {
129129
card_id,
130130
display_type: 'item',
131131
disable_observer: true,
132132
});
133133
await expect
134-
.element(getItemIframe('guild-card'))
134+
.element(page.getByTestId('guild-card'))
135135
.toHaveAttribute(
136136
'src',
137137
`https://guild.host/embeds/guild/${card_id}/item`,
138138
);
139139

140140
// Test 'events/latest' display type
141-
const { getByTestId: getEventsLatestIframe } = render(Guild, {
141+
render(Guild, {
142142
card_id,
143143
display_type: 'events/latest',
144144
disable_observer: true,
145145
});
146146
await expect
147-
.element(getEventsLatestIframe('guild-card'))
147+
.element(page.getByTestId('guild-card'))
148148
.toHaveAttribute(
149149
'src',
150150
`https://guild.host/embeds/guild/${card_id}/events/latest`,
151151
);
152152

153153
// Test 'presentations/upcoming' display type
154-
const { getByTestId: getPresentationsUpcomingIframe } = render(
155-
Guild,
156-
{
157-
card_id,
158-
display_type: 'presentations/upcoming',
159-
disable_observer: true,
160-
},
161-
);
154+
render(Guild, {
155+
card_id,
156+
display_type: 'presentations/upcoming',
157+
disable_observer: true,
158+
});
162159
await expect
163-
.element(getPresentationsUpcomingIframe('guild-card'))
160+
.element(page.getByTestId('guild-card'))
164161
.toHaveAttribute(
165162
'src',
166163
`https://guild.host/embeds/guild/${card_id}/presentations/upcoming`,

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

Lines changed: 12 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -74,52 +74,48 @@ describe('Spotify', () => {
7474

7575
it.skip('should handle different Spotify content types', async () => {
7676
// Test track
77-
const { getByTestId: getTrack } = render(Spotify, {
77+
render(Spotify, {
7878
spotifyLink: 'track/4uLU6hMCjMI75M1A2tKUQC',
7979
disable_observer: true,
8080
});
81-
const trackIframe = getTrack('spotify');
8281
await expect
83-
.element(trackIframe)
82+
.element(page.getByTestId('spotify'))
8483
.toHaveAttribute(
8584
'src',
8685
'https://open.spotify.com/embed/track/4uLU6hMCjMI75M1A2tKUQC',
8786
);
8887

8988
// Test album
90-
const { getByTestId: getAlbum } = render(Spotify, {
89+
render(Spotify, {
9190
spotifyLink: 'album/1DFixLWuPkv3KT3TnV35m3',
9291
disable_observer: true,
9392
});
94-
const albumIframe = getAlbum('spotify');
9593
await expect
96-
.element(albumIframe)
94+
.element(page.getByTestId('spotify'))
9795
.toHaveAttribute(
9896
'src',
9997
'https://open.spotify.com/embed/album/1DFixLWuPkv3KT3TnV35m3',
10098
);
10199

102100
// Test playlist
103-
const { getByTestId: getPlaylist } = render(Spotify, {
101+
render(Spotify, {
104102
spotifyLink: 'playlist/37i9dQZF1DXcBWIGoYBM5M',
105103
disable_observer: true,
106104
});
107-
const playlistIframe = getPlaylist('spotify');
108105
await expect
109-
.element(playlistIframe)
106+
.element(page.getByTestId('spotify'))
110107
.toHaveAttribute(
111108
'src',
112109
'https://open.spotify.com/embed/playlist/37i9dQZF1DXcBWIGoYBM5M',
113110
);
114111

115112
// Test artist
116-
const { getByTestId: getArtist } = render(Spotify, {
113+
render(Spotify, {
117114
spotifyLink: 'artist/4NHQUGzhtTLFvgF5SZesLK',
118115
disable_observer: true,
119116
});
120-
const artistIframe = getArtist('spotify');
121117
await expect
122-
.element(artistIframe)
118+
.element(page.getByTestId('spotify'))
123119
.toHaveAttribute(
124120
'src',
125121
'https://open.spotify.com/embed/artist/4NHQUGzhtTLFvgF5SZesLK',
@@ -242,27 +238,25 @@ describe('Spotify', () => {
242238
it.skip('should handle Spotify link variations', async () => {
243239
// Test with query parameters
244240
const linkWithParams = 'track/4uLU6hMCjMI75M1A2tKUQC?si=abc123';
245-
const { getByTestId: getWithParams } = render(Spotify, {
241+
render(Spotify, {
246242
spotifyLink: linkWithParams,
247243
disable_observer: true,
248244
});
249-
const paramsIframe = getWithParams('spotify');
250245
await expect
251-
.element(paramsIframe)
246+
.element(page.getByTestId('spotify'))
252247
.toHaveAttribute(
253248
'src',
254249
`https://open.spotify.com/embed/${linkWithParams}`,
255250
);
256251

257252
// Test with just ID (no type prefix)
258253
const justId = '4uLU6hMCjMI75M1A2tKUQC';
259-
const { getByTestId: getJustId } = render(Spotify, {
254+
render(Spotify, {
260255
spotifyLink: justId,
261256
disable_observer: true,
262257
});
263-
const idIframe = getJustId('spotify');
264258
await expect
265-
.element(idIframe)
259+
.element(page.getByTestId('spotify'))
266260
.toHaveAttribute(
267261
'src',
268262
`https://open.spotify.com/embed/${justId}`,

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import TikTok from '$lib/components/tiktok.svelte';
2+
import { page } from '@vitest/browser/context';
23
import { describe, expect, it } from 'vitest';
34
import { render } from 'vitest-browser-svelte';
4-
import { page } from '@vitest/browser/context';
55

66
describe('TikTok', () => {
77
it('mounts with default props', async () => {
@@ -70,7 +70,7 @@ describe('TikTok', () => {
7070
});
7171

7272
it('should apply default prop values when not provided', async () => {
73-
const { getByTestId, container } = render(TikTok, {
73+
const { container } = render(TikTok, {
7474
tiktokId: '7234660647688875814',
7575
disable_observer: true,
7676
});
@@ -241,21 +241,21 @@ describe('TikTok', () => {
241241

242242
it.skip('should handle different TikTok content formats', async () => {
243243
// Test standard video ID
244-
const { getByTestId: getStandard } = render(TikTok, {
244+
render(TikTok, {
245245
tiktokId: '7234660647688875814',
246246
disable_observer: true,
247247
});
248-
const standardIframe = getStandard('tiktok-embed');
248+
const standardIframe = page.getByTestId('tiktok-embed');
249249
expect(standardIframe.element().getAttribute('src')).toContain(
250250
'7234660647688875814',
251251
);
252252

253253
// Test different ID format
254-
const { getByTestId: getDifferent } = render(TikTok, {
254+
render(TikTok, {
255255
tiktokId: '6982674499405171973',
256256
disable_observer: true,
257257
});
258-
const differentIframe = getDifferent('tiktok-embed');
258+
const differentIframe = page.getByTestId('tiktok-embed');
259259
expect(differentIframe.element().getAttribute('src')).toContain(
260260
'6982674499405171973',
261261
);

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -52,10 +52,10 @@ describe('Tweet', () => {
5252

5353
if (wrapper && blockquote) {
5454
await expect
55-
.element(wrapper)
55+
.element(wrapper as HTMLElement)
5656
.toHaveAttribute('data-theme', 'light');
5757
await expect
58-
.element(blockquote)
58+
.element(blockquote as HTMLElement)
5959
.toHaveAttribute('data-theme', 'light');
6060
}
6161
});
@@ -122,10 +122,10 @@ describe('Tweet', () => {
122122
expect(wrapperStyles.justifyContent).toBe('center');
123123

124124
await expect
125-
.element(wrapper)
125+
.element(wrapper as HTMLElement)
126126
.toHaveAttribute('data-theme', 'dark');
127127
await expect
128-
.element(blockquote)
128+
.element(blockquote as HTMLElement)
129129
.toHaveAttribute('data-theme', 'dark');
130130
}
131131
});
@@ -270,10 +270,10 @@ describe('Tweet', () => {
270270

271271
if (wrapper && blockquote) {
272272
await expect
273-
.element(wrapper)
273+
.element(wrapper as HTMLElement)
274274
.toHaveAttribute('data-theme', 'dark');
275275
await expect
276-
.element(blockquote)
276+
.element(blockquote as HTMLElement)
277277
.toHaveAttribute('data-theme', 'dark');
278278
}
279279
});

0 commit comments

Comments
 (0)