@@ -38,7 +88,9 @@
{#each { length: totalNodes } as node}
{/each}
+
+
diff --git a/svelte.config.js b/svelte.config.js
index 1cf26a00d..4539d0e17 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -3,10 +3,10 @@ import { vitePreprocess } from '@sveltejs/kit/vite';
/** @type {import('@sveltejs/kit').Config} */
const config = {
+ vitePlugin: { inspector: true },
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors
preprocess: vitePreprocess(),
-
kit: {
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
// If your environment is not supported or you settled on a specific environment, switch out the adapter.
diff --git a/tests/e2e-tests/accessibility/test.ts b/tests/e2e-tests/accessibility/test.ts
new file mode 100644
index 000000000..943bf7da5
--- /dev/null
+++ b/tests/e2e-tests/accessibility/test.ts
@@ -0,0 +1,24 @@
+// Below is a simple accessibility test to check for accessibility violations.
+// I hope that you can either address the violations either manually going in and fixing or by creating a linter.
+// Uncommment below and run `npm run test` in the terminal to run the accessibility test.
+
+// import { test, expect } from '@playwright/test';
+// import { injectAxe, checkA11y } from 'axe-playwright';
+
+// // Define the URL of the page you want to test
+// const testRoute = 'http://localhost:4173/';
+
+// // Define a test using Playwright's test function
+// test('Page has no accessibility violations', async ({ page }) => {
+// // Navigate to the test page
+// await page.goto(testRoute); // replace with your test page URL
+
+// // Inject the axe-core library into the page
+// await injectAxe(page);
+
+// // Run axe's accessibility checks on the page
+// const violations = await checkA11y(page);
+
+// // Expect that there are no accessibility violations
+// expect(violations).toHaveLength(0);
+// });
diff --git a/tests/e2e-tests/color-picker/test.ts b/tests/e2e-tests/color-picker/test.ts
index dd05fd636..6e2f3dbaa 100644
--- a/tests/e2e-tests/color-picker/test.ts
+++ b/tests/e2e-tests/color-picker/test.ts
@@ -33,4 +33,4 @@ test('should change color of the anchor when moved', async ({ page }) => {
expect(updatedColor).not.toBe(defaultColor);
});
-//console logs here are showing that the acnhor color is indeeed changing
+//console logs here are showing that the anchor color is indeed changing
diff --git a/tests/e2e-tests/drawer/test.ts b/tests/e2e-tests/drawer/test.ts
new file mode 100644
index 000000000..ab6e96d90
--- /dev/null
+++ b/tests/e2e-tests/drawer/test.ts
@@ -0,0 +1,58 @@
+import { test, expect } from '@playwright/test';
+
+const testRoute = '/drawer';
+
+test.describe('Svelvet Component Tests', () => {
+ test.beforeEach(async ({ page }) => {
+ // Navigate to the page where your Svelvet component is rendered
+ await page.goto(testRoute);
+ });
+
+ test('Drag and Drop Nodes', async ({ page }) => {
+ // Assume there's a way to select nodes for dragging
+ // This will depend on your implementation details
+ const dragSource = await page.$('.node-drag-source');
+ const dropTarget = await page.$('.drop_zone');
+
+ if (dragSource && dropTarget) {
+ // Simulate drag and drop
+ await dragSource.dragTo(dropTarget);
+
+ // Verify the drop action has been handled
+ // This might include checking for a change in the number of nodes,
+ // a specific class name indicating a drop, or any visual change.
+ await expect(dropTarget).toHaveClass('expected-class-after-drop');
+ }
+ });
+
+ test('DrawerController component', async ({ page }) => {
+ // shows the drawer
+ await page.keyboard.press('d');
+ // Open the drawer
+ await page.keyboard.press('D');
+
+ // Check if Node is displayed
+ const node = await page.$('text=Node');
+ expect(node).toBeTruthy();
+
+ // Press 'T' to toggle to Anchor
+ await page.keyboard.press('T');
+ const anchor = await page.$('text=Anchor');
+ expect(anchor).toBeTruthy();
+
+ // Press 'T' to toggle to Edge
+ await page.keyboard.press('T');
+ const edge = await page.$('text=Edge');
+ expect(edge).toBeTruthy();
+
+ // Press 'T' to toggle back to Node
+ await page.keyboard.press('T');
+ const nodeAgain = await page.$('text=Node');
+ expect(nodeAgain).toBeTruthy();
+
+ // Close the drawer
+ await page.keyboard.press('D');
+ });
+
+ // ... more tests
+});
diff --git a/tests/e2e-tests/resizer/test.ts b/tests/e2e-tests/resizer/test.ts
index 795f664fa..3c9da3ead 100644
--- a/tests/e2e-tests/resizer/test.ts
+++ b/tests/e2e-tests/resizer/test.ts
@@ -12,7 +12,12 @@ test('node rotates correctly', async ({ page }) => {
sourcePosition: { x: 0, y: 0 },
targetPosition: { x: 0, y: 0 }
});
- await expect(node1).toHaveCSS('transform', 'matrix(-1.83697e-16, -1, 1, -1.83697e-16, 0, 0)');
+
+ // The previous test results consistently received the below matrix value
+ // await expect(node1).toHaveCSS('transform', 'matrix(-1.83697e-16, -1, 1, -1.83697e-16, 0, 0)');
+
+ // After our changes we consistently receive the below matrix value
+ await expect(node1).toHaveCSS('transform', 'matrix(0, -1, 1, 0, 0, 0)');
});
test('node can be horizontally adjusted correctly', async ({ page }) => {