Skip to content

Commit 3be9a3d

Browse files
briangregoryholmesbriangregoryholmes
authored
Merge pull request #320 from open-source-labs/dev
fix: inputs could not be interacted with due to change in keydown listener. added basic test for functionality
2 parents 09a57a5 + c18b358 commit 3be9a3d

File tree

7 files changed

+149
-8
lines changed

7 files changed

+149
-8
lines changed

‎package.json‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "svelvet",
3-
"version": "7.0.37",
3+
"version": "7.0.39",
44
"description": "A lightweight Svelte component library for building dynamic, node-based user interfaces",
55
"keywords": [
66
"svelte",
@@ -68,8 +68,5 @@
6868
"main": "svelte.config.js",
6969
"directories": {
7070
"test": "tests"
71-
},
72-
"dependencies": {
73-
"@playwright/test": "^1.28.1"
7471
}
7572
}

‎src/example-components/InputNode.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,10 @@
1818
let week = '';
1919
</script>
2020

21-
<Node bgColor="black" label="StartNode" borderRadius={10} let:destroy>
21+
<Node id="input" bgColor="black" label="StartNode" borderRadius={10} let:destroy>
2222
<div class="node">
23-
<input type="text" bind:value={text} />
24-
<input type="checkbox" bind:checked />
23+
<input id="text-test" type="text" bind:value={text} />
24+
<input id="checkbox-test" type="checkbox" bind:checked />
2525
<input type="color" bind:value={color} />
2626
<input type="date" bind:value={date} />
2727
<input type="datetime-local" bind:value={datetime} />

‎src/lib/containers/Graph/Graph.svelte‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -337,8 +337,12 @@
337337
// We dont want to prevent users from refreshing the page
338338
if (code === 'KeyR' && e.metaKey) return;
339339
340+
const target = e.target as HTMLElement;
341+
340342
//Otherwise we prevent default keydown behavior
341-
e.preventDefault();
343+
if (target.tagName !== 'INPUT' && target.tagName !== 'TEXTAREA') {
344+
e.preventDefault();
345+
}
342346
343347
if (code === 'KeyA' && e[`${modifier}Key`]) {
344348
const unlockedNodes = graph.nodes.getAll().filter((node) => !get(node.locked));

‎src/routes/+page.svelte‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import { getContext } from 'svelte';
44
import Connector from '../example-components/Connector.svelte';
55
import ThemeToggle from '$lib/components/ThemeToggle/ThemeToggle.svelte';
6+
import InputNode from '../example-components/InputNode.svelte';
67
function addAndConnect(connect: (connections: string | number) => void) {
78
connect(totalNodes + 4);
89
totalNodes++;
@@ -25,6 +26,7 @@
2526
<Node let:connect useDefaults position={{ x: Math.random() * 200, y: Math.random() * 400 }} />
2627
{/each}
2728
<ThemeToggle slot="toggle" />
29+
<InputNode />
2830
</Svelvet>
2931
</body>
3032

‎src/routes/inputs/+page.svelte‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<script lang="ts">
2+
import { Svelvet } from '$lib';
3+
import InputNode from '../../example-components/InputNode.svelte';
4+
</script>
5+
6+
<body>
7+
<Svelvet>
8+
<InputNode />
9+
</Svelvet>
10+
</body>
11+
12+
<style>
13+
body {
14+
width: 100vw;
15+
height: 100vh;
16+
margin: 0;
17+
padding: 0;
18+
}
19+
</style>

‎src/routes/styling/+page.svelte‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<script lang="ts">
2+
import { Svelvet, Node, ThemeToggle } from '$lib';
3+
</script>
4+
5+
<body>
6+
<Svelvet controls>
7+
<Node
8+
--anchor-color="green"
9+
--anchor-width="20px"
10+
--anchor-radius="2px"
11+
id="node1"
12+
label="test"
13+
resizable
14+
/>
15+
<Node --node-color="red" --node-border-radius="40px" id="node2" label="test" />
16+
<Node label="what" position={{ x: 10, y: 200 }} inputs={3} TD />
17+
<ThemeToggle slot="toggle" main="light" alt="custom-theme" />
18+
</Svelvet>
19+
</body>
20+
21+
<style>
22+
body {
23+
width: 100vw;
24+
height: 100vh;
25+
padding: 0;
26+
margin: 0;
27+
}
28+
29+
:root[svelvet-theme='custom-theme'] {
30+
--node-color: hsl(225, 30%, 50%);
31+
--node-border-color: hsl(225, 20%, 40%);
32+
--node-selection-color: hsl(45, 90%, 60%);
33+
--text-color: hsl(0, 0%, 100%);
34+
--node-shadow: var(--shadow-elevation-medium);
35+
36+
--background-color: hsl(225, 20%, 27%);
37+
--dot-color: hsl(225, 10%, 50%);
38+
39+
--accent-color: hsl(45, 90%, 60%);
40+
--primary-color: hsl(225, 30%, 66%);
41+
42+
--edge-color: hsl(0, 0%, 100%);
43+
--target-edge-color: hsl(225, 20%, 40%);
44+
--edge-shadow: var(--shadow-elevation-medium);
45+
46+
--anchor-color: hsl(45, 90%, 67%);
47+
--anchor-border-color: hsl(45, 90%, 87%);
48+
--anchor-connected: hsl(45, 90%, 100%);
49+
--anchor-connected-border: hsl(225, 20%, 20%);
50+
51+
--anchor-connecting: hsl(225, 30%, 40%);
52+
--anchor-connecting-border: hsl(0, 0%, 100%);
53+
54+
--anchor-hovering: hsl(225, 20%, 46%);
55+
--anchor-hovering-border: hsl(0, 0%, 0%);
56+
57+
--minimap-background-color: hsl(225, 20%, 27%);
58+
59+
--minimap-node-color: hsl(225, 30%, 20%);
60+
61+
--controls-background-color: hsl(225, 20%, 27%);
62+
--controls-text-color: hsl(0, 0%, 100%);
63+
64+
--theme-toggle-text-color: hsl(0, 0%, 100%);
65+
--theme-toggle-color: hsl(225, 20%, 27%);
66+
}
67+
</style>

‎tests/inputs/test.ts‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { expect, test } from '@playwright/test';
2+
3+
const testRoute = '/inputs';
4+
5+
test('inputs can be interacted with', async ({ page }) => {
6+
await page.goto(testRoute);
7+
8+
const textField = page.locator('#text-test');
9+
const checkBox = page.locator('#checkbox-test');
10+
11+
// Check current value of text input
12+
await expect(textField).toHaveValue('Test');
13+
14+
// Click the text field and ensure that it is focused
15+
await textField.click();
16+
await expect(textField).toBeFocused();
17+
18+
// Interact with the input by issuing keydown commands
19+
await textField.press('A');
20+
await textField.press('B');
21+
await textField.press('C');
22+
23+
await expect(textField).toHaveValue('TestABC');
24+
25+
await textField.press('Backspace');
26+
await textField.press('Backspace');
27+
await textField.press('Backspace');
28+
await textField.press('Backspace');
29+
await textField.press('Backspace');
30+
await textField.press('Backspace');
31+
await textField.press('Backspace');
32+
await textField.press('Backspace');
33+
34+
await textField.press('1');
35+
await textField.press('Space');
36+
await textField.press('2');
37+
38+
await expect(textField).toHaveValue('1 2');
39+
40+
// Select the checkbox element
41+
const checkbox = await page.$('#checkbox-test');
42+
if (!checkbox) throw new Error('Checkbox not found');
43+
// Check if the checkbox is checked
44+
const isChecked = await checkbox.isChecked();
45+
await expect(isChecked).toBe(true);
46+
// Click the checkbox
47+
await checkBox.click();
48+
49+
const isNowChecked = await checkbox.isChecked();
50+
// Check the current value of the chebox
51+
await expect(isNowChecked).toBe(false);
52+
});

0 commit comments

Comments
 (0)