Skip to content

Commit 31efd75

Browse files
zernoniazernonia
committed
fix: enable tests, modify test
1 parent ec35ddc commit 31efd75

File tree

5 files changed

+85
-146
lines changed

5 files changed

+85
-146
lines changed

‎playground/e2e/base.spec.ts

+9-9
Original file line numberDiff line numberDiff line change
@@ -40,15 +40,15 @@ test.describe('Base tests', () => {
4040
await expect(page.getByTestId('content')).not.toBeVisible()
4141
})
4242

43-
// test('should close when dragged down', async ({ page }) => {
44-
// await openDrawer(page);
45-
// await page.hover('[vaul-drawer]');
46-
// await page.mouse.down();
47-
// await page.mouse.move(0, 800);
48-
// await page.mouse.up();
49-
// await page.waitForTimeout(ANIMATION_DURATION);
50-
// await expect(page.getByTestId('content')).not.toBeVisible();
51-
// });
43+
test('should close when dragged down', async ({ page }) => {
44+
await openDrawer(page);
45+
await page.hover('[vaul-drawer]');
46+
await page.mouse.down();
47+
await page.mouse.move(0, 800);
48+
await page.mouse.up();
49+
await page.waitForTimeout(ANIMATION_DURATION);
50+
await expect(page.getByTestId('content')).not.toBeVisible();
51+
});
5252

5353
test('should not close when dragged up', async ({ page }) => {
5454
await openDrawer(page)

‎playground/e2e/controlled.spec.ts

+11-13
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,18 @@ test.beforeEach(async ({ page }) => {
66
})
77

88
test.describe('Controlled', () => {
9-
// This test current fails due to a bug > needs to be fixed as it indicates a problem with the implementation
9+
test('should not close when clicked on overlay and only the open prop is passsed', async ({
10+
page
11+
}) => {
12+
await expect(page.getByTestId('content')).not.toBeVisible()
13+
await page.getByTestId('trigger').click()
14+
await expect(page.getByTestId('content')).toBeVisible()
15+
// Click on the background
16+
await page.mouse.click(0, 0)
1017

11-
// test('should not close when clicked on overlay and only the open prop is passsed', async ({
12-
// page
13-
// }) => {
14-
// await expect(page.getByTestId('content')).not.toBeVisible()
15-
// await page.getByTestId('trigger').click()
16-
// await expect(page.getByTestId('content')).toBeVisible()
17-
// // Click on the background
18-
// await page.mouse.click(0, 0)
19-
//
20-
// await page.waitForTimeout(ANIMATION_DURATION)
21-
// await expect(page.getByTestId('content')).toBeVisible()
22-
// })
18+
await page.waitForTimeout(ANIMATION_DURATION)
19+
await expect(page.getByTestId('content')).toBeVisible()
20+
})
2321

2422
test('should close when clicked on overlay and open and onOpenChange props are passed', async ({
2523
page

‎playground/e2e/nested.spec.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,6 @@ test.describe('Nested tests', () => {
1515
await page.getByTestId('nested-close').click()
1616
await page.waitForTimeout(ANIMATION_DURATION)
1717
await expect(page.getByTestId('nested-content')).not.toBeVisible()
18-
await await expect(page.getByTestId('content')).toBeVisible()
18+
await expect(page.getByTestId('content')).toBeVisible()
1919
})
2020
})

‎playground/src/views/tests/InitialSnapView.vue

+33-83
Original file line numberDiff line numberDiff line change
@@ -12,99 +12,55 @@ const open = ref<boolean>(true)
1212
</script>
1313

1414
<template>
15-
<div
16-
class="w-screen h-screen bg-white p-8 flex justify-center items-center"
17-
vaul-drawer-wrapper=""
18-
>
15+
<div class="w-screen h-screen bg-white p-8 flex justify-center items-center" vaul-drawer-wrapper="">
1916
<div data-testid="active-snap-index">{{ activeSnapPointIndex }}</div>
20-
<DrawerRoot v-model:open="open" :snap-points="snapPoints" :active-snap-point="snap">
17+
<DrawerRoot v-model:open="open" :snap-points="snapPoints" v-model:active-snap-point="snap">
2118
<DrawerTrigger as-child>
2219
<button data-testid="trigger" class="text-2xl">Open Drawer</button>
2320
</DrawerTrigger>
2421
<DrawerPortal>
2522
<DrawerOverlay data-testid="overlay" class="fixed inset-0 bg-black/40" />
26-
<DrawerContent
27-
data-testid="content"
28-
class="fixed flex flex-col bg-white border border-gray-200 border-b-none rounded-t-[10px] bottom-0 left-0 right-0 h-full max-h-[97%] mx-[-1px]"
29-
>
30-
<div
31-
class="flex flex-col max-w-md mx-auto w-full p-4 pt-5"
32-
:class="snap === 1 ? 'overflow-y-auto' : 'overflow-hidden'"
33-
>
23+
<DrawerContent data-testid="content"
24+
class="fixed flex flex-col bg-white border border-gray-200 border-b-none rounded-t-[10px] bottom-0 left-0 right-0 h-full max-h-[97%] mx-[-1px]">
25+
<div class="flex flex-col max-w-md mx-auto w-full p-4 pt-5"
26+
:class="snap === 1 ? 'overflow-y-auto' : 'overflow-hidden'">
3427
<div class="flex items-center">
35-
<svg
36-
class="text-yellow-400 h-5 w-5 flex-shrink-0"
37-
viewBox="0 0 20 20"
38-
fill="currentColor"
39-
aria-hidden="true"
40-
>
41-
<path
42-
fill-rule="evenodd"
28+
<svg class="text-yellow-400 h-5 w-5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor"
29+
aria-hidden="true">
30+
<path fill-rule="evenodd"
4331
d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
44-
clip-rule="evenodd"
45-
></path>
32+
clip-rule="evenodd"></path>
4633
</svg>
47-
<svg
48-
class="text-yellow-400 h-5 w-5 flex-shrink-0"
49-
viewBox="0 0 20 20"
50-
fill="currentColor"
51-
aria-hidden="true"
52-
>
53-
<path
54-
fill-rule="evenodd"
34+
<svg class="text-yellow-400 h-5 w-5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor"
35+
aria-hidden="true">
36+
<path fill-rule="evenodd"
5537
d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
56-
clip-rule="evenodd"
57-
></path>
38+
clip-rule="evenodd"></path>
5839
</svg>
59-
<svg
60-
class="text-yellow-400 h-5 w-5 flex-shrink-0"
61-
viewBox="0 0 20 20"
62-
fill="currentColor"
63-
aria-hidden="true"
64-
>
65-
<path
66-
fill-rule="evenodd"
40+
<svg class="text-yellow-400 h-5 w-5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor"
41+
aria-hidden="true">
42+
<path fill-rule="evenodd"
6743
d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
68-
clip-rule="evenodd"
69-
></path>
44+
clip-rule="evenodd"></path>
7045
</svg>
71-
<svg
72-
class="text-yellow-400 h-5 w-5 flex-shrink-0"
73-
viewBox="0 0 20 20"
74-
fill="currentColor"
75-
aria-hidden="true"
76-
>
77-
<path
78-
fill-rule="evenodd"
46+
<svg class="text-yellow-400 h-5 w-5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor"
47+
aria-hidden="true">
48+
<path fill-rule="evenodd"
7949
d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
80-
clip-rule="evenodd"
81-
></path>
50+
clip-rule="evenodd"></path>
8251
</svg>
83-
<svg
84-
class="text-gray-300 h-5 w-5 flex-shrink-0"
85-
viewBox="0 0 20 20"
86-
fill="currentColor"
87-
aria-hidden="true"
88-
>
89-
<path
90-
fill-rule="evenodd"
52+
<svg class="text-gray-300 h-5 w-5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
53+
<path fill-rule="evenodd"
9154
d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
92-
clip-rule="evenodd"
93-
></path>
55+
clip-rule="evenodd"></path>
9456
</svg>
9557
</div>
96-
{' '}
9758
<h1 class="text-2xl mt-2 font-medium">The Hidden Details</h1>
9859
<p class="text-sm mt-1 text-gray-600 mb-6">2 modules, 27 hours of video</p>
99-
<p class="text-gray-600">
100-
The world of user interface design is an intricate landscape filled with hidden
101-
details and nuance. In this course, you will learn something cool. To the untrained
102-
eye, a beautifully designed UI.
103-
</p>
104-
<button
105-
class="bg-black text-gray-50 mt-8 rounded-md h-[48px] flex-shrink-0 font-medium"
106-
>
107-
Buy for $199
60+
<p class="text-gray-600"> The world of user interface design is an intricate landscape filled with hidden
61+
details and nuance. In this course, you will learn something cool. To the untrained eye, a beautifully
62+
designed UI. </p>
63+
<button class="bg-black text-gray-50 mt-8 rounded-md h-[48px] flex-shrink-0 font-medium"> Buy for $199
10864
</button>
10965
<div class="mt-12">
11066
<h2 class="text-xl font-medium">Module 01. The Details</h2>
@@ -125,14 +81,10 @@ const open = ref<boolean>(true)
12581
</div>
12682
<div class="mt-12">
12783
<figure>
128-
<blockquote class="font-serif">
129-
“I especially loved the hidden details video. That was so useful, learned a lot by
130-
just reading it. Can&rsquo;t wait for more course content!”
131-
</blockquote>
84+
<blockquote class="font-serif"> “I especially loved the hidden details video. That was so useful, learned
85+
a lot by just reading it. Can&rsquo;t wait for more course content!” </blockquote>
13286
<figcaption>
133-
<span class="text-sm text-gray-600 mt-2 block"
134-
>Yvonne Ray, Frontend Developer</span
135-
>
87+
<span class="text-sm text-gray-600 mt-2 block">Yvonne Ray, Frontend Developer</span>
13688
</figcaption>
13789
</figure>
13890
</div>
@@ -149,9 +101,7 @@ const open = ref<boolean>(true)
149101
</div>
150102
<div>
151103
<span class="block">Putting it all together</span>
152-
<span class="text-gray-600"
153-
>Let&apos;s build an app together and apply everything.</span
154-
>
104+
<span class="text-gray-600">Let&apos;s build an app together and apply everything.</span>
155105
</div>
156106
</div>
157107
</div>

‎playground/src/views/tests/NestedDrawerView.vue

+31-40
Original file line numberDiff line numberDiff line change
@@ -9,61 +9,52 @@ import {
99
DrawerClose,
1010
DrawerRootNested
1111
} from 'vaul-vue'
12+
import { ref } from 'vue';
13+
14+
const open = ref(false)
1215
</script>
1316

1417
<template>
15-
<div
16-
class="w-screen h-screen bg-white p-8 flex justify-center items-center"
17-
vaul-drawer-wrapper=""
18-
>
18+
<div class="w-screen h-screen bg-white p-8 flex justify-center items-center" vaul-drawer-wrapper="">
1919
<DrawerRoot should-scale-background>
2020
<DrawerTrigger as-child>
2121
<button data-testid="trigger" class="text-2xl">Open Drawer</button>
2222
</DrawerTrigger>
2323
<DrawerPortal>
2424
<DrawerOverlay data-testid="overlay" class="fixed inset-0 bg-black/40" />
25-
<DrawerContent
26-
data-testid="content"
27-
class="bg-zinc-100 flex flex-col rounded-t-[10px] h-[96%] mt-24 fixed bottom-0 left-0 right-0"
28-
>
25+
<DrawerContent data-testid="content"
26+
class="bg-zinc-100 flex flex-col rounded-t-[10px] h-[96%] mt-24 fixed bottom-0 left-0 right-0">
2927
<div class="p-4 bg-white rounded-t-[10px] flex-1">
3028
<div class="mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-zinc-300 mb-8" />
3129
<div class="max-w-md mx-auto">
3230
<DrawerTitle class="font-medium mb-4">Unstyled drawer for Vue.</DrawerTitle>
31+
<p class="text-zinc-600 mb-2"> This component can be used as a replacement for a Dialog on mobile and tablet
32+
devices. </p>
33+
<DrawerRootNested>
34+
<DrawerTrigger as-child>
35+
<button data-testid="nested-trigger" class="text-2xl">Open Second Drawer</button>
36+
</DrawerTrigger>
37+
<DrawerPortal>
38+
<DrawerOverlay data-testid="nested-overlay" class="fixed inset-0 bg-black/40" />
39+
<DrawerContent data-testid="nested-content"
40+
class="bg-zinc-100 flex flex-col rounded-t-[10px] h-[96%] mt-24 fixed bottom-0 left-0 right-0">
41+
<div class="p-4 bg-white rounded-t-[10px] flex-1">
42+
<div class="mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-zinc-300 mb-8" />
43+
<div class="max-w-md mx-auto">
44+
<DrawerTitle class="font-medium mb-4">Unstyled drawer for Vue.</DrawerTitle>
45+
<p class="text-zinc-600 mb-2"> This component can be used as a replacement for a Dialog on mobile
46+
and tablet devices. </p>
47+
<p class="text-gray-600 mb-2"> Place a <span
48+
class="font-mono text-[15px] font-semibold">`Drawer.NestedRoot`</span> inside another drawer
49+
and it will be nested automatically for you. </p>
50+
<DrawerClose data-testid="nested-close"> Close </DrawerClose>
51+
</div>
52+
</div>
53+
</DrawerContent>
54+
</DrawerPortal>
55+
</DrawerRootNested>
3356
</div>
34-
<p class="text-zinc-600 mb-2">
35-
This component can be used as a replacement for a Dialog on mobile and tablet devices.
36-
</p>
3757
</div>
38-
<DrawerRootNested>
39-
<DrawerTrigger as-child>
40-
<button data-testid="nested-trigger" class="text-2xl">Open Drawer</button>
41-
</DrawerTrigger>
42-
<DrawerPortal>
43-
<DrawerOverlay data-testid="nested-overlay" class="fixed inset-0 bg-black/40" />
44-
<DrawerContent
45-
data-testid="nested-content"
46-
class="bg-zinc-100 flex flex-col rounded-t-[10px] h-[96%] mt-24 fixed bottom-0 left-0 right-0"
47-
>
48-
<DrawerClose data-testid="nested-close"> Close </DrawerClose>
49-
<div class="p-4 bg-white rounded-t-[10px] flex-1">
50-
<div class="mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-zinc-300 mb-8" />
51-
<div class="max-w-md mx-auto">
52-
<DrawerTitle class="font-medium mb-4">Unstyled drawer for Vue.</DrawerTitle>
53-
</div>
54-
<p class="text-zinc-600 mb-2">
55-
This component can be used as a replacement for a Dialog on mobile and tablet
56-
devices.
57-
</p>
58-
<p class="text-gray-600 mb-2">
59-
Place a
60-
<span class="font-mono text-[15px] font-semibold">`Drawer.NestedRoot`</span>
61-
inside another drawer and it will be nested automatically for you.
62-
</p>
63-
</div>
64-
</DrawerContent>
65-
</DrawerPortal>
66-
</DrawerRootNested>
6758
</DrawerContent>
6859
</DrawerPortal>
6960
</DrawerRoot>

0 commit comments

Comments
 (0)