-
-
Notifications
You must be signed in to change notification settings - Fork 53
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
9 changed files
with
244 additions
and
73 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,141 @@ | ||
| import test, { expect } from '@playwright/test'; | ||
| import { get_mouse_position, setup } from '../test-utils'; | ||
| import { SCHEMAS } from '../../src/lib/schemas'; | ||
|
|
||
| test('undefined disables the plugin', async ({ page }) => { | ||
| await setup(page, 'plugins/position', SCHEMAS.PLUGINS.POSITION, undefined); | ||
|
|
||
| const div = page.getByTestId('draggable'); | ||
|
|
||
| await div.hover(); | ||
| const { x, y } = await get_mouse_position(page); | ||
| await page.mouse.down(); | ||
| await page.mouse.move(x + 100, y + 100); | ||
| await page.mouse.up(); | ||
|
|
||
| // This will drag as usual | ||
| await expect(div).toHaveCSS('translate', '100px 100px'); | ||
| }); | ||
|
|
||
| test('null disables the plugin', async ({ page }) => { | ||
| await setup(page, 'plugins/position', SCHEMAS.PLUGINS.POSITION, null); | ||
|
|
||
| const div = page.getByTestId('draggable'); | ||
|
|
||
| await div.hover(); | ||
| const { x, y } = await get_mouse_position(page); | ||
| await page.mouse.down(); | ||
| await page.mouse.move(x + 100, y + 100); | ||
| await page.mouse.up(); | ||
|
|
||
| // This will drag as usual | ||
| await expect(div).toHaveCSS('translate', '100px 100px'); | ||
| }); | ||
|
|
||
| test('default only', async ({ page }) => { | ||
| await setup(page, 'plugins/position', SCHEMAS.PLUGINS.POSITION, { | ||
| default: { | ||
| x: 20, | ||
| y: 80, | ||
| }, | ||
| }); | ||
|
|
||
| const div = page.getByTestId('draggable'); | ||
|
|
||
| // Should be translated by `default` | ||
| await expect(div).toHaveCSS('translate', '20px 80px'); | ||
|
|
||
| await div.hover(); | ||
| const { x, y } = await get_mouse_position(page); | ||
| await page.mouse.down(); | ||
| await page.mouse.move(x + 100, y + 100); | ||
| await page.mouse.up(); | ||
|
|
||
| // This will drag as usual | ||
| await expect(div).toHaveCSS('translate', '120px 180px'); | ||
| }); | ||
|
|
||
| test('current only', async ({ page }) => { | ||
| await setup(page, 'plugins/position', SCHEMAS.PLUGINS.POSITION, { | ||
| current: { | ||
| x: 20, | ||
| y: 80, | ||
| }, | ||
| }); | ||
|
|
||
| const div = page.getByTestId('draggable'); | ||
|
|
||
| // Should be translated by `default` | ||
| await expect(div).toHaveCSS('translate', '20px 80px'); | ||
|
|
||
| await div.hover(); | ||
| const { x, y } = await get_mouse_position(page); | ||
| await page.mouse.down(); | ||
| await page.mouse.move(x + 100, y + 100); | ||
| await page.mouse.up(); | ||
|
|
||
| // This will drag too | ||
| await expect(div).toHaveCSS('translate', '120px 180px'); | ||
| }); | ||
|
|
||
| test('current-default', async ({ page }) => { | ||
| await setup(page, 'plugins/position', SCHEMAS.PLUGINS.POSITION, { | ||
| default: { | ||
| x: 20, | ||
| y: 80, | ||
| }, | ||
| current: { | ||
| x: 100, | ||
| y: 180, | ||
| }, | ||
| }); | ||
|
|
||
| const div = page.getByTestId('draggable'); | ||
|
|
||
| // current ahould be prioritized over default | ||
| await expect(div).toHaveCSS('translate', '100px 180px'); | ||
|
|
||
| await div.hover(); | ||
| const { x, y } = await get_mouse_position(page); | ||
| await page.mouse.down(); | ||
| await page.mouse.move(x + 100, y + 100); | ||
| await page.mouse.up(); | ||
|
|
||
| // This will drag too | ||
| await expect(div).toHaveCSS('translate', '200px 280px'); | ||
| }); | ||
|
|
||
| test('two-way-binding', async ({ page }) => { | ||
| await setup(page, 'plugins/position', SCHEMAS.PLUGINS.POSITION, { | ||
| default: { | ||
| x: 20, | ||
| y: 80, | ||
| }, | ||
| current: { | ||
| x: 100, | ||
| y: 180, | ||
| }, | ||
| two_way_binding: true, | ||
| }); | ||
|
|
||
| const div = page.getByTestId('draggable'); | ||
|
|
||
| // current ahould be prioritized over default | ||
| await expect(div).toHaveCSS('translate', '100px 180px'); | ||
|
|
||
| await div.hover(); | ||
| const { x, y } = await get_mouse_position(page); | ||
| await page.mouse.down(); | ||
| await page.mouse.move(x + 100, y + 100); | ||
| await page.mouse.up(); | ||
|
|
||
| // This will drag too | ||
| await expect(div).toHaveCSS('translate', '200px 280px'); | ||
|
|
||
| const xSlider = page.getByTestId('x-slider'); | ||
| const ySlider = page.getByTestId('y-slider'); | ||
|
|
||
| // Check their values, make sure theyre the same as drag translatye | ||
| await expect(xSlider).toHaveValue('200'); | ||
| await expect(ySlider).toHaveValue('280'); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
6 changes: 6 additions & 0 deletions
6
packages/core/test-app/src/routes/(test)/plugins/position/+page.server.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| import { extract_options_from_url } from '$lib/helpers.js'; | ||
| import { SCHEMAS } from '$lib/schemas.js'; | ||
|
|
||
| export function load({ request }) { | ||
| return extract_options_from_url(request, SCHEMAS.PLUGINS.POSITION); | ||
| } |
44 changes: 44 additions & 0 deletions
44
packages/core/test-app/src/routes/(test)/plugins/position/+page.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| <script> | ||
| import Box from '$lib/Box.svelte'; | ||
| import { events, position } from '../../../../../../src/plugins'; | ||
| const { data } = $props(); | ||
| let pos = $state(data?.current ?? { x: 0, y: 0 }); | ||
| const plugins = $derived.by(() => { | ||
| if (data.two_way_binding) { | ||
| return [ | ||
| position({ | ||
| current: $state.snapshot(pos), | ||
| default: data.current, | ||
| }), | ||
| events({ | ||
| onDrag: ({ offset }) => { | ||
| pos.x = offset.x; | ||
| pos.y = offset.y; | ||
| }, | ||
| }), | ||
| ]; | ||
| } | ||
| return [ | ||
| position({ | ||
| default: data.default, | ||
| current: $state.snapshot(pos), | ||
| }), | ||
| ]; | ||
| }); | ||
| </script> | ||
| <Box testid="draggable" {plugins}></Box> | ||
| <label> | ||
| X: | ||
| <input type="range" min="0" max="1000" bind:value={pos.x} data-testid="x-slider" /> | ||
| </label> | ||
| <label> | ||
| Y: | ||
| <input type="range" min="0" max="1000" bind:value={pos.y} data-testid="y-slider" /> | ||
| </label> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters