Skip to content

Commit 7ab6949

Browse files
zernoniazernonia
committed
test: add e2e for direction
1 parent 4ed7001 commit 7ab6949

File tree

4 files changed

+197
-33
lines changed

4 files changed

+197
-33
lines changed

‎playground/e2e/direction.spec.ts

+109
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
import { expect, test } from '@playwright/test'
2+
import { ANIMATION_DURATION } from './constants'
3+
import { openDrawer } from './helpers'
4+
5+
test.describe('Direction tests', () => {
6+
test.describe('default direction (bottom)', () => {
7+
test.beforeEach(async ({ page }) => {
8+
await page.goto('/test/direction')
9+
})
10+
11+
test('should close when dragged down', async ({ page }) => {
12+
await openDrawer(page)
13+
await page.hover('[vaul-drawer]')
14+
await page.mouse.down()
15+
await page.mouse.move(0, 800)
16+
await page.mouse.up()
17+
await page.waitForTimeout(ANIMATION_DURATION)
18+
await expect(page.getByTestId('content')).not.toBeVisible()
19+
})
20+
21+
test('should not close when dragged up', async ({ page }) => {
22+
await openDrawer(page)
23+
await page.hover('[vaul-drawer]')
24+
await page.mouse.down()
25+
await page.mouse.move(0, -800)
26+
await page.mouse.up()
27+
await page.waitForTimeout(ANIMATION_DURATION)
28+
await expect(page.getByTestId('content')).toBeVisible()
29+
})
30+
})
31+
32+
test.describe('direction - left', () => {
33+
test.beforeEach(async ({ page }) => {
34+
await page.goto('/test/direction?direction=left')
35+
})
36+
37+
test('should close when dragged left', async ({ page }) => {
38+
await openDrawer(page)
39+
await page.hover('[vaul-drawer]')
40+
await page.mouse.down()
41+
await page.mouse.move(-800, 0)
42+
await page.mouse.up()
43+
await page.waitForTimeout(ANIMATION_DURATION)
44+
await expect(page.getByTestId('content')).not.toBeVisible()
45+
})
46+
47+
test('should not close when dragged right', async ({ page }) => {
48+
await openDrawer(page)
49+
await page.hover('[vaul-drawer]')
50+
await page.mouse.down()
51+
await page.mouse.move(800, 0)
52+
await page.mouse.up()
53+
await page.waitForTimeout(ANIMATION_DURATION)
54+
await expect(page.getByTestId('content')).toBeVisible()
55+
})
56+
})
57+
58+
test.describe('direction - right', () => {
59+
test.beforeEach(async ({ page }) => {
60+
await page.goto('/test/direction?direction=right')
61+
})
62+
63+
test('should close when dragged right', async ({ page }) => {
64+
await openDrawer(page)
65+
await page.hover('[vaul-drawer]')
66+
await page.mouse.down()
67+
await page.mouse.move(1600, 0)
68+
await page.mouse.up()
69+
await page.waitForTimeout(ANIMATION_DURATION)
70+
await expect(page.getByTestId('content')).not.toBeVisible()
71+
})
72+
73+
test('should not close when dragged left', async ({ page }) => {
74+
await openDrawer(page)
75+
await page.hover('[vaul-drawer]')
76+
await page.mouse.down()
77+
await page.mouse.move(-1600, 0)
78+
await page.mouse.up()
79+
await page.waitForTimeout(ANIMATION_DURATION)
80+
await expect(page.getByTestId('content')).toBeVisible()
81+
})
82+
})
83+
84+
test.describe('direction - top', () => {
85+
test.beforeEach(async ({ page }) => {
86+
await page.goto('/test/direction?direction=top')
87+
})
88+
89+
test('should close when dragged top', async ({ page }) => {
90+
await openDrawer(page)
91+
await page.hover('[vaul-drawer]')
92+
await page.mouse.down()
93+
await page.mouse.move(0, -800)
94+
await page.mouse.up()
95+
await page.waitForTimeout(ANIMATION_DURATION)
96+
await expect(page.getByTestId('content')).not.toBeVisible()
97+
})
98+
99+
test('should not close when dragged down', async ({ page }) => {
100+
await openDrawer(page)
101+
await page.hover('[vaul-drawer]')
102+
await page.mouse.down()
103+
await page.mouse.move(0, 800)
104+
await page.mouse.up()
105+
await page.waitForTimeout(ANIMATION_DURATION)
106+
await expect(page.getByTestId('content')).toBeVisible()
107+
})
108+
})
109+
})

‎playground/src/components/DemoDrawer.vue

+34-33
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,49 @@
11
<script setup lang="ts">
2-
import { type DrawerDirection, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTrigger } from 'vaul-vue'
3-
import { ref } from 'vue'
4-
import DrawerContentWrapper from './DrawerContent.vue'
5-
6-
const direction = ref<DrawerDirection>('bottom')
2+
import { DrawerContent, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTrigger } from 'vaul-vue'
73
</script>
84

95
<template>
10-
<DrawerRoot should-scale-background :direction="direction">
6+
<DrawerRoot should-scale-background>
117
<DrawerTrigger
128
class="rounded-full bg-white px-4 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
139
>
1410
Open Drawer
1511
</DrawerTrigger>
1612
<DrawerPortal>
1713
<DrawerOverlay class="fixed bg-black/40 inset-0" />
18-
<DrawerContentWrapper :direction="direction">
19-
<div class="max-w-md mx-auto">
20-
<h2 id="radix-:R3emdaH1:" class="font-medium mb-4">
21-
Drawer for Vue.
22-
</h2>
23-
<p class="text-gray-600 mb-2">
24-
This component can be used as a Dialog replacement on mobile and tablet devices.
25-
</p>
26-
<p class="text-gray-600 mb-2">
27-
It comes unstyled, has gesture-driven animations, and is made by
28-
<a href="https://emilkowal.ski/" class="underline" target="_blank">Emil Kowalski</a>.
29-
</p>
30-
<p class="text-gray-600 mb-8">
31-
It uses
32-
<a
33-
href="https://www.radix-ui.com/docs/primitives/components/dialog"
34-
class="underline"
35-
target="_blank"
36-
>Radix's Dialog primitive</a>
37-
under the hood and is inspired by
38-
<a
39-
href="https://twitter.com/devongovett/status/1674470185783402496"
40-
class="underline"
41-
target="_blank"
42-
>this tweet.</a>
43-
</p>
14+
<DrawerContent
15+
class="bg-gray-100 flex flex-col rounded-t-[10px] h-full mt-24 max-h-[96%] fixed bottom-0 left-0 right-0"
16+
>
17+
<div class="p-4 bg-white rounded-t-[10px] flex-1">
18+
<div class="mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-gray-300 mb-8" />
19+
<div class="max-w-md mx-auto">
20+
<h2 id="radix-:R3emdaH1:" class="font-medium mb-4">
21+
Drawer for Vue.
22+
</h2>
23+
<p class="text-gray-600 mb-2">
24+
This component can be used as a Dialog replacement on mobile and tablet devices.
25+
</p>
26+
<p class="text-gray-600 mb-2">
27+
It comes unstyled, has gesture-driven animations, and is made by
28+
<a href="https://emilkowal.ski/" class="underline" target="_blank">Emil Kowalski</a>.
29+
</p>
30+
<p class="text-gray-600 mb-8">
31+
It uses
32+
<a
33+
href="https://www.radix-ui.com/docs/primitives/components/dialog"
34+
class="underline"
35+
target="_blank"
36+
>Radix's Dialog primitive</a>
37+
under the hood and is inspired by
38+
<a
39+
href="https://twitter.com/devongovett/status/1674470185783402496"
40+
class="underline"
41+
target="_blank"
42+
>this tweet.</a>
43+
</p>
44+
</div>
4445
</div>
45-
</DrawerContentWrapper>
46+
</DrawerContent>
4647
</DrawerPortal>
4748
</DrawerRoot>
4849
</template>

‎playground/src/router/index.ts

+5
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,10 @@ const router = createRouter({
2222
path: 'initial-snap',
2323
component: () => import('../views/tests/InitialSnapView.vue'),
2424
},
25+
{
26+
path: 'direction',
27+
component: () => import('../views/tests/DirectionView.vue'),
28+
},
2529
{
2630
path: 'nested-drawer',
2731
component: () => import('../views/tests/NestedDrawerView.vue'),
@@ -46,6 +50,7 @@ const router = createRouter({
4650
path: 'with-snap-points',
4751
component: () => import('../views/tests/WithSnapPointsView.vue'),
4852
},
53+
4954
],
5055
},
5156
],

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

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<script setup lang="ts">
2+
import {
3+
DrawerClose,
4+
type DrawerDirection,
5+
DrawerOverlay,
6+
DrawerPortal,
7+
DrawerRoot,
8+
DrawerTitle,
9+
DrawerTrigger,
10+
} from 'vaul-vue'
11+
import { ref } from 'vue'
12+
import { useRoute } from 'vue-router'
13+
import DrawerContentWrapper from '../../components/DrawerContent.vue'
14+
15+
const route = useRoute()
16+
const direction = ref<DrawerDirection>(route.query.direction as DrawerDirection ?? 'bottom')
17+
</script>
18+
19+
<template>
20+
<div
21+
class="w-screen h-screen bg-white p-8 flex justify-center items-center"
22+
vaul-drawer-wrapper=""
23+
>
24+
<DrawerRoot :direction="direction">
25+
<DrawerTrigger as-child>
26+
<button data-testid="trigger" class="text-2xl">
27+
Open Drawer
28+
</button>
29+
</DrawerTrigger>
30+
<DrawerPortal>
31+
<DrawerOverlay data-testid="overlay" class="fixed inset-0 bg-black/40" />
32+
<DrawerContentWrapper
33+
:direction="direction"
34+
>
35+
<div class="max-w-md mx-auto">
36+
<DrawerTitle class="font-medium mb-4">
37+
Unstyled drawer for Vue.
38+
</DrawerTitle>
39+
<p class="text-zinc-600 mb-2">
40+
This component can be used as a replacement for a Dialog on mobile and tablet devices.
41+
</p>
42+
</div>
43+
</DrawerContentWrapper>
44+
</DrawerPortal>
45+
</DrawerRoot>
46+
</div>
47+
</template>
48+
49+
<style scoped></style>

0 commit comments

Comments
 (0)