test: add e2e for direction

unovue · Jun 16, 2024 · 7ab6949 · 7ab6949
1 parent 4ed7001
commit 7ab6949
Show file tree

Hide file tree

Showing 4 changed files with 197 additions and 33 deletions.
diff --git a/playground/e2e/direction.spec.ts b/playground/e2e/direction.spec.ts
@@ -0,0 +1,109 @@
+import { expect, test } from '@playwright/test'
+import { ANIMATION_DURATION } from './constants'
+import { openDrawer } from './helpers'
+
+test.describe('Direction tests', () => {
+  test.describe('default direction (bottom)', () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('/test/direction')
+    })
+
+    test('should close when dragged down', async ({ page }) => {
+      await openDrawer(page)
+      await page.hover('[vaul-drawer]')
+      await page.mouse.down()
+      await page.mouse.move(0, 800)
+      await page.mouse.up()
+      await page.waitForTimeout(ANIMATION_DURATION)
+      await expect(page.getByTestId('content')).not.toBeVisible()
+    })
+
+    test('should not close when dragged up', async ({ page }) => {
+      await openDrawer(page)
+      await page.hover('[vaul-drawer]')
+      await page.mouse.down()
+      await page.mouse.move(0, -800)
+      await page.mouse.up()
+      await page.waitForTimeout(ANIMATION_DURATION)
+      await expect(page.getByTestId('content')).toBeVisible()
+    })
+  })
+
+  test.describe('direction - left', () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('/test/direction?direction=left')
+    })
+
+    test('should close when dragged left', async ({ page }) => {
+      await openDrawer(page)
+      await page.hover('[vaul-drawer]')
+      await page.mouse.down()
+      await page.mouse.move(-800, 0)
+      await page.mouse.up()
+      await page.waitForTimeout(ANIMATION_DURATION)
+      await expect(page.getByTestId('content')).not.toBeVisible()
+    })
+
+    test('should not close when dragged right', async ({ page }) => {
+      await openDrawer(page)
+      await page.hover('[vaul-drawer]')
+      await page.mouse.down()
+      await page.mouse.move(800, 0)
+      await page.mouse.up()
+      await page.waitForTimeout(ANIMATION_DURATION)
+      await expect(page.getByTestId('content')).toBeVisible()
+    })
+  })
+
+  test.describe('direction - right', () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('/test/direction?direction=right')
+    })
+
+    test('should close when dragged right', async ({ page }) => {
+      await openDrawer(page)
+      await page.hover('[vaul-drawer]')
+      await page.mouse.down()
+      await page.mouse.move(1600, 0)
+      await page.mouse.up()
+      await page.waitForTimeout(ANIMATION_DURATION)
+      await expect(page.getByTestId('content')).not.toBeVisible()
+    })
+
+    test('should not close when dragged left', async ({ page }) => {
+      await openDrawer(page)
+      await page.hover('[vaul-drawer]')
+      await page.mouse.down()
+      await page.mouse.move(-1600, 0)
+      await page.mouse.up()
+      await page.waitForTimeout(ANIMATION_DURATION)
+      await expect(page.getByTestId('content')).toBeVisible()
+    })
+  })
+
+  test.describe('direction - top', () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('/test/direction?direction=top')
+    })
+
+    test('should close when dragged top', async ({ page }) => {
+      await openDrawer(page)
+      await page.hover('[vaul-drawer]')
+      await page.mouse.down()
+      await page.mouse.move(0, -800)
+      await page.mouse.up()
+      await page.waitForTimeout(ANIMATION_DURATION)
+      await expect(page.getByTestId('content')).not.toBeVisible()
+    })
+
+    test('should not close when dragged down', async ({ page }) => {
+      await openDrawer(page)
+      await page.hover('[vaul-drawer]')
+      await page.mouse.down()
+      await page.mouse.move(0, 800)
+      await page.mouse.up()
+      await page.waitForTimeout(ANIMATION_DURATION)
+      await expect(page.getByTestId('content')).toBeVisible()
+    })
+  })
+})
diff --git a/playground/src/components/DemoDrawer.vue b/playground/src/components/DemoDrawer.vue
@@ -1,48 +1,49 @@
 <script setup lang="ts">
-import { type DrawerDirection, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTrigger } from 'vaul-vue'
-import { ref } from 'vue'
-import DrawerContentWrapper from './DrawerContent.vue'
-
-const direction = ref<DrawerDirection>('bottom')
+import { DrawerContent, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTrigger } from 'vaul-vue'
 </script>
 
 <template>
-  <DrawerRoot should-scale-background :direction="direction">
+  <DrawerRoot should-scale-background>
     <DrawerTrigger
       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"
     >
       Open Drawer
     </DrawerTrigger>
     <DrawerPortal>
       <DrawerOverlay class="fixed bg-black/40 inset-0" />
-      <DrawerContentWrapper :direction="direction">
-        <div class="max-w-md mx-auto">
-          <h2 id="radix-:R3emdaH1:" class="font-medium mb-4">
-            Drawer for Vue.
-          </h2>
-          <p class="text-gray-600 mb-2">
-            This component can be used as a Dialog replacement on mobile and tablet devices.
-          </p>
-          <p class="text-gray-600 mb-2">
-            It comes unstyled, has gesture-driven animations, and is made by
-            <a href="https://emilkowal.ski/" class="underline" target="_blank">Emil Kowalski</a>.
-          </p>
-          <p class="text-gray-600 mb-8">
-            It uses
-            <a
-              href="https://www.radix-ui.com/docs/primitives/components/dialog"
-              class="underline"
-              target="_blank"
-            >Radix's Dialog primitive</a>
-            under the hood and is inspired by
-            <a
-              href="https://twitter.com/devongovett/status/1674470185783402496"
-              class="underline"
-              target="_blank"
-            >this tweet.</a>
-          </p>
+      <DrawerContent
+        class="bg-gray-100 flex flex-col rounded-t-[10px] h-full mt-24 max-h-[96%] fixed bottom-0 left-0 right-0"
+      >
+        <div class="p-4 bg-white rounded-t-[10px] flex-1">
+          <div class="mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-gray-300 mb-8" />
+          <div class="max-w-md mx-auto">
+            <h2 id="radix-:R3emdaH1:" class="font-medium mb-4">
+              Drawer for Vue.
+            </h2>
+            <p class="text-gray-600 mb-2">
+              This component can be used as a Dialog replacement on mobile and tablet devices.
+            </p>
+            <p class="text-gray-600 mb-2">
+              It comes unstyled, has gesture-driven animations, and is made by
+              <a href="https://emilkowal.ski/" class="underline" target="_blank">Emil Kowalski</a>.
+            </p>
+            <p class="text-gray-600 mb-8">
+              It uses
+              <a
+                href="https://www.radix-ui.com/docs/primitives/components/dialog"
+                class="underline"
+                target="_blank"
+              >Radix's Dialog primitive</a>
+              under the hood and is inspired by
+              <a
+                href="https://twitter.com/devongovett/status/1674470185783402496"
+                class="underline"
+                target="_blank"
+              >this tweet.</a>
+            </p>
+          </div>
         </div>
-      </DrawerContentWrapper>
+      </DrawerContent>
     </DrawerPortal>
   </DrawerRoot>
 </template>
diff --git a/playground/src/router/index.ts b/playground/src/router/index.ts
@@ -22,6 +22,10 @@ const router = createRouter({
           path: 'initial-snap',
           component: () => import('../views/tests/InitialSnapView.vue'),
         },
+        {
+          path: 'direction',
+          component: () => import('../views/tests/DirectionView.vue'),
+        },
         {
           path: 'nested-drawer',
           component: () => import('../views/tests/NestedDrawerView.vue'),
@@ -46,6 +50,7 @@ const router = createRouter({
           path: 'with-snap-points',
           component: () => import('../views/tests/WithSnapPointsView.vue'),
         },
+
       ],
     },
   ],

diff --git a/playground/src/views/tests/DirectionView.vue b/playground/src/views/tests/DirectionView.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import {
+  DrawerClose,
+  type DrawerDirection,
+  DrawerOverlay,
+  DrawerPortal,
+  DrawerRoot,
+  DrawerTitle,
+  DrawerTrigger,
+} from 'vaul-vue'
+import { ref } from 'vue'
+import { useRoute } from 'vue-router'
+import DrawerContentWrapper from '../../components/DrawerContent.vue'
+
+const route = useRoute()
+const direction = ref<DrawerDirection>(route.query.direction as DrawerDirection ?? 'bottom')
+</script>
+
+<template>
+  <div
+    class="w-screen h-screen bg-white p-8 flex justify-center items-center"
+    vaul-drawer-wrapper=""
+  >
+    <DrawerRoot :direction="direction">
+      <DrawerTrigger as-child>
+        <button data-testid="trigger" class="text-2xl">
+          Open Drawer
+        </button>
+      </DrawerTrigger>
+      <DrawerPortal>
+        <DrawerOverlay data-testid="overlay" class="fixed inset-0 bg-black/40" />
+        <DrawerContentWrapper
+          :direction="direction"
+        >
+          <div class="max-w-md mx-auto">
+            <DrawerTitle class="font-medium mb-4">
+              Unstyled drawer for Vue.
+            </DrawerTitle>
+            <p class="text-zinc-600 mb-2">
+              This component can be used as a replacement for a Dialog on mobile and tablet devices.
+            </p>
+          </div>
+        </DrawerContentWrapper>
+      </DrawerPortal>
+    </DrawerRoot>
+  </div>
+</template>
+
+<style scoped></style>