Skip to content

Commit 4b73dd2

Browse files
xiaoluobodingxiaoluoboding
committedOct 20, 2024·
fix: fixed the type error
·
v1.3.0v1.2.3
1 parent 909ebaa commit 4b73dd2

File tree

3 files changed

+1486
-1209
lines changed

3 files changed

+1486
-1209
lines changed
 

‎test/e2e/tsconfig.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
{
22
"extends": "@tsconfig/node20/tsconfig.json",
3-
"include": ["./**/*"]
3+
"include": ["./**/*"],
4+
"compilerOptions": {
5+
"lib": ["es2015", "dom"]
6+
}
47
}

‎test/e2e/vue.spec.ts

+191-142
Original file line numberDiff line numberDiff line change
@@ -1,145 +1,181 @@
1-
import { expect, test } from '@playwright/test';
2-
import { toast } from 'vue-sonner';
1+
import { expect, test } from '@playwright/test'
2+
import { toast } from 'vue-sonner'
33

44
test.beforeEach(async ({ page }) => {
5-
await page.goto('/');
6-
});
5+
await page.goto('/')
6+
})
77

88
test.describe('Basic functionality', () => {
9-
test('toast is rendered and disappears after the default timeout', async ({ page }) => {
10-
await page.getByTestId('default-button').click();
11-
await expect(page.locator('[data-sonner-toast]')).toHaveCount(1);
12-
await expect(page.locator('[data-sonner-toast]')).toHaveCount(0);
13-
});
9+
test('toast is rendered and disappears after the default timeout', async ({
10+
page,
11+
}) => {
12+
await page.getByTestId('default-button').click()
13+
await expect(page.locator('[data-sonner-toast]')).toHaveCount(1)
14+
await expect(page.locator('[data-sonner-toast]')).toHaveCount(0)
15+
})
1416

1517
test('various toast types are rendered correctly', async ({ page }) => {
16-
await page.getByTestId('success').click();
17-
await expect(page.getByText('My Success Toast', { exact: true })).toHaveCount(1);
18-
19-
await page.getByTestId('error').click();
20-
await expect(page.getByText('My Error Toast', { exact: true })).toHaveCount(1);
21-
22-
await page.getByTestId('action').click();
23-
await expect(page.locator('[data-button]')).toHaveCount(1);
24-
});
25-
26-
test('show correct toast content based on promise state', async ({ page }) => {
27-
await page.getByTestId('promise').click();
28-
await expect(page.getByText('Loading...')).toHaveCount(1);
29-
await expect(page.getByText('Loaded')).toHaveCount(1);
30-
});
18+
await page.getByTestId('success').click()
19+
await expect(
20+
page.getByText('My Success Toast', { exact: true }),
21+
).toHaveCount(1)
22+
23+
await page.getByTestId('error').click()
24+
await expect(page.getByText('My Error Toast', { exact: true })).toHaveCount(
25+
1,
26+
)
27+
28+
await page.getByTestId('action').click()
29+
await expect(page.locator('[data-button]')).toHaveCount(1)
30+
})
31+
32+
test('show correct toast content based on promise state', async ({
33+
page,
34+
}) => {
35+
await page.getByTestId('promise').click()
36+
await expect(page.getByText('Loading...')).toHaveCount(1)
37+
await expect(page.getByText('Loaded')).toHaveCount(1)
38+
})
3139

3240
test('handle toast promise rejections', async () => {
33-
const rejectedPromise = new Promise((_, reject) => setTimeout(() => reject(new Error('Promise rejected')), 100));
41+
const rejectedPromise = new Promise((_, reject) =>
42+
setTimeout(() => reject(new Error('Promise rejected')), 100),
43+
)
3444
try {
35-
toast.promise(rejectedPromise, {});
45+
toast.promise(rejectedPromise, {})
3646
} catch {
37-
throw new Error('Promise should not have rejected without unwrap');
47+
throw new Error('Promise should not have rejected without unwrap')
3848
}
3949

40-
await expect(toast.promise(rejectedPromise, {}).unwrap()).rejects.toThrow('Promise rejected');
41-
});
50+
await expect(toast.promise(rejectedPromise, {})?.unwrap()).rejects.toThrow(
51+
'Promise rejected',
52+
)
53+
})
4254

4355
test('toast is removed after swiping down', async ({ page }) => {
44-
await page.getByTestId('default-button').click();
45-
await page.hover('[data-sonner-toast]');
46-
await page.mouse.down();
47-
await page.mouse.move(0, 800);
48-
await page.mouse.up();
49-
await expect(page.locator('[data-sonner-toast]')).toHaveCount(0);
50-
});
56+
await page.getByTestId('default-button').click()
57+
await page.hover('[data-sonner-toast]')
58+
await page.mouse.down()
59+
await page.mouse.move(0, 800)
60+
await page.mouse.up()
61+
await expect(page.locator('[data-sonner-toast]')).toHaveCount(0)
62+
})
5163

5264
test('dismissible toast is not removed when dragged', async ({ page }) => {
53-
await page.getByTestId('non-dismissible-toast').click();
54-
const toast = page.locator('[data-sonner-toast]');
55-
const dragBoundingBox = await toast.boundingBox();
65+
await page.getByTestId('non-dismissible-toast').click()
66+
const toast = page.locator('[data-sonner-toast]')
67+
const dragBoundingBox = await toast.boundingBox()
5668

57-
if (!dragBoundingBox) return;
58-
await page.mouse.move(dragBoundingBox.x + dragBoundingBox.width / 2, dragBoundingBox.y);
69+
if (!dragBoundingBox) return
70+
await page.mouse.move(
71+
dragBoundingBox.x + dragBoundingBox.width / 2,
72+
dragBoundingBox.y,
73+
)
5974

60-
await page.mouse.down();
61-
await page.mouse.move(0, dragBoundingBox.y + 300);
75+
await page.mouse.down()
76+
await page.mouse.move(0, dragBoundingBox.y + 300)
6277

63-
await page.mouse.up();
64-
await expect(page.getByTestId('non-dismissible-toast')).toHaveCount(1);
65-
});
78+
await page.mouse.up()
79+
await expect(page.getByTestId('non-dismissible-toast')).toHaveCount(1)
80+
})
6681

6782
test('toast is removed after swiping up', async ({ page }) => {
68-
await page.goto('/?position=top-left');
69-
await page.getByTestId('default-button').click();
70-
await page.hover('[data-sonner-toast]');
71-
await page.mouse.down();
72-
await page.mouse.move(0, -800);
73-
await page.mouse.up();
74-
await expect(page.locator('[data-sonner-toast]')).toHaveCount(0);
75-
});
83+
await page.goto('/?position=top-left')
84+
await page.getByTestId('default-button').click()
85+
await page.hover('[data-sonner-toast]')
86+
await page.mouse.down()
87+
await page.mouse.move(0, -800)
88+
await page.mouse.up()
89+
await expect(page.locator('[data-sonner-toast]')).toHaveCount(0)
90+
})
7691

7792
test('toast is not removed when hovered', async ({ page }) => {
78-
await page.getByTestId('default-button').click();
79-
await page.hover('[data-sonner-toast]');
80-
const timeout = new Promise((resolve) => setTimeout(resolve, 5000));
81-
await timeout;
82-
await expect(page.locator('[data-sonner-toast]')).toHaveCount(1);
83-
});
84-
85-
test('toast is not removed if duration is set to infinity', async ({ page }) => {
86-
await page.getByTestId('infinity-toast').click();
87-
await page.hover('[data-sonner-toast]');
88-
const timeout = new Promise((resolve) => setTimeout(resolve, 5000));
89-
await timeout;
90-
await expect(page.locator('[data-sonner-toast]')).toHaveCount(1);
91-
});
92-
93-
test('toast is not removed when event prevented in action', async ({ page }) => {
94-
await page.getByTestId('action-prevent').click();
95-
await page.locator('[data-button]').click();
96-
await expect(page.locator('[data-sonner-toast]')).toHaveCount(1);
97-
});
93+
await page.getByTestId('default-button').click()
94+
await page.hover('[data-sonner-toast]')
95+
const timeout = new Promise(resolve => setTimeout(resolve, 5000))
96+
await timeout
97+
await expect(page.locator('[data-sonner-toast]')).toHaveCount(1)
98+
})
99+
100+
test('toast is not removed if duration is set to infinity', async ({
101+
page,
102+
}) => {
103+
await page.getByTestId('infinity-toast').click()
104+
await page.hover('[data-sonner-toast]')
105+
const timeout = new Promise(resolve => setTimeout(resolve, 5000))
106+
await timeout
107+
await expect(page.locator('[data-sonner-toast]')).toHaveCount(1)
108+
})
109+
110+
test('toast is not removed when event prevented in action', async ({
111+
page,
112+
}) => {
113+
await page.getByTestId('action-prevent').click()
114+
await page.locator('[data-button]').click()
115+
await expect(page.locator('[data-sonner-toast]')).toHaveCount(1)
116+
})
98117

99118
test('toast is dismissed programmatically after 500ms', async ({ page }) => {
100-
await page.getByTestId('dismiss-toast').click();
101-
const timeout = new Promise((resolve) => setTimeout(resolve, 600));
102-
await timeout;
103-
await expect(page.locator('[data-sonner-toast]')).toHaveCount(0);
104-
});
105-
106-
test("toast's auto close callback gets executed correctly", async ({ page }) => {
107-
await page.getByTestId('auto-close-toast-callback').click();
108-
await expect(page.getByTestId('auto-close-el')).toHaveCount(1);
109-
});
119+
await page.getByTestId('dismiss-toast').click()
120+
const timeout = new Promise(resolve => setTimeout(resolve, 600))
121+
await timeout
122+
await expect(page.locator('[data-sonner-toast]')).toHaveCount(0)
123+
})
124+
125+
test("toast's auto close callback gets executed correctly", async ({
126+
page,
127+
}) => {
128+
await page.getByTestId('auto-close-toast-callback').click()
129+
await expect(page.getByTestId('auto-close-el')).toHaveCount(1)
130+
})
110131

111132
test("toast's dismiss callback gets executed correctly", async ({ page }) => {
112-
await page.getByTestId('dismiss-toast-callback').click();
113-
const toast = page.locator('[data-sonner-toast]');
114-
const dragBoundingBox = await toast.boundingBox();
133+
await page.getByTestId('dismiss-toast-callback').click()
134+
const toast = page.locator('[data-sonner-toast]')
135+
const dragBoundingBox = await toast.boundingBox()
115136

116-
if (!dragBoundingBox) return;
117-
await page.mouse.move(dragBoundingBox.x + dragBoundingBox.width / 2, dragBoundingBox.y);
137+
if (!dragBoundingBox) return
138+
await page.mouse.move(
139+
dragBoundingBox.x + dragBoundingBox.width / 2,
140+
dragBoundingBox.y,
141+
)
118142

119-
await page.mouse.down();
120-
await page.mouse.move(0, dragBoundingBox.y + 300);
143+
await page.mouse.down()
144+
await page.mouse.move(0, dragBoundingBox.y + 300)
121145

122-
await page.mouse.up();
123-
await expect(page.getByTestId('dismiss-el')).toHaveCount(1);
124-
});
146+
await page.mouse.up()
147+
await expect(page.getByTestId('dismiss-el')).toHaveCount(1)
148+
})
125149

126150
test("toaster's theme should be light", async ({ page }) => {
127-
await page.getByTestId('infinity-toast').click();
128-
await expect(page.locator('[data-sonner-toaster]')).toHaveAttribute('data-theme', 'light');
129-
});
151+
await page.getByTestId('infinity-toast').click()
152+
await expect(page.locator('[data-sonner-toaster]')).toHaveAttribute(
153+
'data-theme',
154+
'light',
155+
)
156+
})
130157

131158
test("toaster's theme should be dark", async ({ page }) => {
132-
await page.goto('/?theme=dark');
133-
await page.getByTestId('infinity-toast').click();
134-
await expect(page.locator('[data-sonner-toaster]')).toHaveAttribute('data-theme', 'dark');
135-
});
159+
await page.goto('/?theme=dark')
160+
await page.getByTestId('infinity-toast').click()
161+
await expect(page.locator('[data-sonner-toaster]')).toHaveAttribute(
162+
'data-theme',
163+
'dark',
164+
)
165+
})
136166

137167
test("toaster's theme should be changed", async ({ page }) => {
138-
await page.getByTestId('infinity-toast').click();
139-
await expect(page.locator('[data-sonner-toaster]')).toHaveAttribute('data-theme', 'light');
140-
await page.getByTestId('theme-button').click();
141-
await expect(page.locator('[data-sonner-toaster]')).toHaveAttribute('data-theme', 'dark');
142-
});
168+
await page.getByTestId('infinity-toast').click()
169+
await expect(page.locator('[data-sonner-toaster]')).toHaveAttribute(
170+
'data-theme',
171+
'light',
172+
)
173+
await page.getByTestId('theme-button').click()
174+
await expect(page.locator('[data-sonner-toaster]')).toHaveAttribute(
175+
'data-theme',
176+
'dark',
177+
)
178+
})
143179

144180
// Focus test doesn't return to the previous focused element
145181
// test('return focus to the previous focused element', async ({ page }) => {
@@ -153,55 +189,68 @@ test.describe('Basic functionality', () => {
153189
// });
154190

155191
test("toaster's dir prop is reflected correctly", async ({ page }) => {
156-
await page.goto('/?dir=rtl');
157-
await page.getByTestId('default-button').click();
158-
await expect(page.locator('[data-sonner-toaster]')).toHaveAttribute('dir', 'rtl');
159-
});
192+
await page.goto('/?dir=rtl')
193+
await page.getByTestId('default-button').click()
194+
await expect(page.locator('[data-sonner-toaster]')).toHaveAttribute(
195+
'dir',
196+
'rtl',
197+
)
198+
})
160199

161200
test("toaster respects the HTML's dir attribute", async ({ page }) => {
162201
await page.evaluate(() => {
163-
document.documentElement.setAttribute('dir', 'rtl');
164-
});
165-
await page.getByTestId('default-button').click();
166-
await expect(page.locator('[data-sonner-toaster]')).toHaveAttribute('dir', 'rtl');
167-
});
168-
169-
test("toaster respects its own dir attribute over HTML's", async ({ page }) => {
170-
await page.goto('/?dir=ltr');
202+
document.documentElement.setAttribute('dir', 'rtl')
203+
})
204+
await page.getByTestId('default-button').click()
205+
await expect(page.locator('[data-sonner-toaster]')).toHaveAttribute(
206+
'dir',
207+
'rtl',
208+
)
209+
})
210+
211+
test("toaster respects its own dir attribute over HTML's", async ({
212+
page,
213+
}) => {
214+
await page.goto('/?dir=ltr')
171215
await page.evaluate(() => {
172-
document.documentElement.setAttribute('dir', 'rtl');
173-
});
174-
await page.getByTestId('default-button').click();
175-
await expect(page.locator('[data-sonner-toaster]')).toHaveAttribute('dir', 'ltr');
176-
});
216+
document.documentElement.setAttribute('dir', 'rtl')
217+
})
218+
await page.getByTestId('default-button').click()
219+
await expect(page.locator('[data-sonner-toaster]')).toHaveAttribute(
220+
'dir',
221+
'ltr',
222+
)
223+
})
177224

178225
test('show correct toast content when updating', async ({ page }) => {
179-
await page.getByTestId('update-toast').click();
180-
await expect(page.getByText('My Unupdated Toast')).toHaveCount(0);
181-
await expect(page.getByText('My Updated Toast')).toHaveCount(1);
182-
});
226+
await page.getByTestId('update-toast').click()
227+
await expect(page.getByText('My Unupdated Toast')).toHaveCount(0)
228+
await expect(page.getByText('My Updated Toast')).toHaveCount(1)
229+
})
183230

184231
test('cancel button is rendered with custom styles', async ({ page }) => {
185-
await page.getByTestId('custom-cancel-button-toast').click();
186-
const button = page.locator('[data-cancel]');
232+
await page.getByTestId('custom-cancel-button-toast').click()
233+
const button = page.locator('[data-cancel]')
187234

188-
await expect(button).toHaveCSS('background-color', 'rgb(254, 226, 226)');
189-
});
235+
await expect(button).toHaveCSS('background-color', 'rgb(254, 226, 226)')
236+
})
190237

191238
test('action button is rendered with custom styles', async ({ page }) => {
192-
await page.getByTestId('action').click();
193-
const button = page.locator('[data-button]');
239+
await page.getByTestId('action').click()
240+
const button = page.locator('[data-button]')
194241

195-
await expect(button).toHaveCSS('background-color', 'rgb(219, 239, 255)');
196-
});
242+
await expect(button).toHaveCSS('background-color', 'rgb(219, 239, 255)')
243+
})
197244

198245
test('string description is rendered', async ({ page }) => {
199-
await page.getByTestId('string-description').click();
200-
await expect(page.getByText('string description')).toHaveCount(1);
201-
});
246+
await page.getByTestId('string-description').click()
247+
await expect(page.getByText('string description')).toHaveCount(1)
248+
})
202249

203250
test('ReactNode description is rendered', async ({ page }) => {
204-
await page.getByTestId('react-node-description').click();
205-
await expect(page.getByText('This is my custom ReactNode description')).toHaveCount(1);
206-
});
207-
});
251+
await page.getByTestId('react-node-description').click()
252+
await expect(
253+
page.getByText('This is my custom ReactNode description'),
254+
).toHaveCount(1)
255+
})
256+
})

‎test/pnpm-lock.yaml

+1,291-1,066
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)
Please sign in to comment.