diff --git a/src/use-snap-points.ts b/src/use-snap-points.ts index 7fd1cf3b..262a09ad 100644 --- a/src/use-snap-points.ts +++ b/src/use-snap-points.ts @@ -94,7 +94,7 @@ export function useSnapPoints({ setActiveSnapPoint(newSnapPointIndex !== null ? snapPoints?.[newSnapPointIndex] : null); }, - [drawerRef, snapPoints, snapPointsOffset, fadeFromIndex, overlayRef, setActiveSnapPoint], + [drawerRef.current, snapPoints, snapPointsOffset, fadeFromIndex, overlayRef, setActiveSnapPoint], ); React.useEffect(() => { diff --git a/test/src/app/initial-snap/page.tsx b/test/src/app/initial-snap/page.tsx new file mode 100644 index 00000000..644ef92f --- /dev/null +++ b/test/src/app/initial-snap/page.tsx @@ -0,0 +1,155 @@ +'use client'; + +import { clsx } from 'clsx'; +import { useState } from 'react'; +import { Drawer } from 'vaul'; + +const snapPoints = [0, '148px', '355px', 1]; + +export default function Page() { + const [snap, setSnap] = useState(snapPoints[1]); + + const activeSnapPointIndex = snapPoints.indexOf(snap as string); + + return ( +
+
{activeSnapPointIndex}
+ + + + + + + +
+
+ + + + + +
{' '} +

The Hidden Details

+

2 modules, 27 hours of video

+

+ The world of user interface design is an intricate landscape filled with hidden details and nuance. In + this course, you will learn something cool. To the untrained eye, a beautifully designed UI. +

+ +
+

Module 01. The Details

+
+
+ Layers of UI + A basic introduction to Layers of Design. +
+
+ Typography + The fundamentals of type. +
+
+ UI Animations + Going through the right easings and durations. +
+
+
+
+
+
+ “I especially loved the hidden details video. That was so useful, learned a lot by just reading it. + Can’t wait for more course content!” +
+
+ Yvonne Ray, Frontend Developer +
+
+
+
+

Module 02. The Process

+
+
+ Build + Create cool components to practice. +
+
+ User Insight + Find out what users think and fine-tune. +
+
+ Putting it all together + Let's build an app together and apply everything. +
+
+
+
+ + + +
+ ); +} diff --git a/test/src/app/page.tsx b/test/src/app/page.tsx index 6f557379..dd00526f 100644 --- a/test/src/app/page.tsx +++ b/test/src/app/page.tsx @@ -11,6 +11,7 @@ export default function Page() { Scrollable with inputs Nested drawers Non-dismissible + Initial snap ); } diff --git a/test/tests/initial-snap.spec.ts b/test/tests/initial-snap.spec.ts new file mode 100644 index 00000000..0b5efe7a --- /dev/null +++ b/test/tests/initial-snap.spec.ts @@ -0,0 +1,48 @@ +import { Page, expect, test } from '@playwright/test'; +import { ANIMATION_DURATION } from './constants'; + +test.beforeEach(async ({ page }) => { + await page.goto('/initial-snap'); +}); + +const snapPointYPositions = { + 0: 800, + 1: 600, + 2: 590, + 3: 200, +} as const; + +const snapTo = async (page: Page, snapPointIndex: keyof typeof snapPointYPositions) => { + await page.hover('[vaul-drawer]'); + await page.mouse.down(); + await page.mouse.move(0, snapPointYPositions[snapPointIndex]); + await page.mouse.up(); + await page.waitForTimeout(ANIMATION_DURATION); +}; + +test.describe('Initial-snap', () => { + test('should be open and snapped on initial load', async ({ page }) => { + await page.waitForTimeout(ANIMATION_DURATION); + + await expect(page.getByTestId('content')).toBeVisible(); + await expect(page.getByTestId('active-snap-index')).toHaveText('1'); + }); + + test('should snap to next snap point when dragged up', async ({ page }) => { + snapTo(page, 2); + + await expect(page.getByTestId('active-snap-index')).toHaveText('2'); + }); + + test('should snap to last snap point when dragged up', async ({ page }) => { + snapTo(page, 3); + + await expect(page.getByTestId('active-snap-index')).toHaveText('3'); + }); + + test('should snap to 0 when dragged down', async ({ page }) => { + snapTo(page, 0); + + await expect(page.getByTestId('active-snap-index')).toHaveText('0'); + }); +});