From fe2c3dce6daee4886aaeddeb7874a724bad55abd Mon Sep 17 00:00:00 2001 From: Anton Date: Thu, 14 Dec 2023 21:39:48 +0100 Subject: [PATCH 1/5] Use OverlayMenu for TopBar --- src/lib/components/buttons/SvgButton.svelte | 3 +- .../overlayMenu/elements/Button.svelte | 4 +- .../project/ProjectItemDropDownMenu.svelte | 4 +- src/lib/components/project/ProjectNav.svelte | 4 +- src/lib/components/query/Query.svelte | 2 +- .../components/query/QueryDropDownMenu.svelte | 4 +- src/lib/components/query/QueryNav.svelte | 4 +- .../DropDownMenu.svelte | 4 +- .../components/startScreen/StartScreen.svelte | 8 +- .../components/topBar/DropDownCheckBox.svelte | 49 +-- src/lib/components/topBar/TopBar.svelte | 390 +++++++++--------- src/lib/components/topBar/TopBarButton.svelte | 36 +- .../components/topBar/TopBarDropDown.svelte | 12 - .../components/topBar/aboutUI/AboutUI.svelte | 3 +- src/routes/+page.svelte | 1 + 15 files changed, 248 insertions(+), 280 deletions(-) delete mode 100644 src/lib/components/topBar/TopBarDropDown.svelte diff --git a/src/lib/components/buttons/SvgButton.svelte b/src/lib/components/buttons/SvgButton.svelte index 4103cef3..2bec008a 100644 --- a/src/lib/components/buttons/SvgButton.svelte +++ b/src/lib/components/buttons/SvgButton.svelte @@ -1,7 +1,6 @@ - -
- {#if visible} - - - - {/if} -
- + + + + diff --git a/src/lib/components/topBar/aboutUI/AboutUI.svelte b/src/lib/components/topBar/aboutUI/AboutUI.svelte index eb11f465..72cd47b9 100644 --- a/src/lib/components/topBar/aboutUI/AboutUI.svelte +++ b/src/lib/components/topBar/aboutUI/AboutUI.svelte @@ -17,6 +17,7 @@

Date: Thu, 14 Dec 2023 21:50:28 +0100 Subject: [PATCH 2/5] Fix lint --- .../components/topBar/DropDownCheckBox.svelte | 4 ++-- src/lib/components/topBar/TopBar.svelte | 8 -------- src/lib/components/topBar/TopBarButton.svelte | 16 ---------------- src/lib/components/topBar/aboutUI/AboutUI.svelte | 2 +- 4 files changed, 3 insertions(+), 27 deletions(-) diff --git a/src/lib/components/topBar/DropDownCheckBox.svelte b/src/lib/components/topBar/DropDownCheckBox.svelte index f53ea422..df854996 100644 --- a/src/lib/components/topBar/DropDownCheckBox.svelte +++ b/src/lib/components/topBar/DropDownCheckBox.svelte @@ -1,5 +1,5 @@ - @@ -32,16 +28,4 @@ button:hover { background-color: var(--navigationbar-button-hover-color); } - - .unselectable { - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; - } - - .container { - position: absolute; - height: 0px; - z-index: 100; - } diff --git a/src/lib/components/topBar/aboutUI/AboutUI.svelte b/src/lib/components/topBar/aboutUI/AboutUI.svelte index 72cd47b9..fcee3a98 100644 --- a/src/lib/components/topBar/aboutUI/AboutUI.svelte +++ b/src/lib/components/topBar/aboutUI/AboutUI.svelte @@ -17,7 +17,7 @@

Date: Thu, 14 Dec 2023 22:09:52 +0100 Subject: [PATCH 3/5] Fix query button --- playwright.config.ts | 8 -------- src/lib/components/query/QueryNav.svelte | 2 +- 2 files changed, 1 insertion(+), 9 deletions(-) diff --git a/playwright.config.ts b/playwright.config.ts index 8234c0d8..4d12424e 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -11,14 +11,6 @@ const config: PlaywrightTestConfig = { testDir: "tests", testMatch: /(.+\.)?(test|spec)\.[jt]s/, projects: [ - { - name: "chromium", - use: { ...devices["Desktop Chrome"] }, - }, - { - name: "firefox", - use: { ...devices["Desktop Firefox"] }, - }, { name: "webkit", use: { ...devices["Desktop Safari"] }, diff --git a/src/lib/components/query/QueryNav.svelte b/src/lib/components/query/QueryNav.svelte index 1477505f..dfceb6cd 100644 --- a/src/lib/components/query/QueryNav.svelte +++ b/src/lib/components/query/QueryNav.svelte @@ -25,7 +25,7 @@

Queries

- + Date: Thu, 14 Dec 2023 22:11:05 +0100 Subject: [PATCH 4/5] whoops --- playwright.config.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/playwright.config.ts b/playwright.config.ts index 4d12424e..8234c0d8 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -11,6 +11,14 @@ const config: PlaywrightTestConfig = { testDir: "tests", testMatch: /(.+\.)?(test|spec)\.[jt]s/, projects: [ + { + name: "chromium", + use: { ...devices["Desktop Chrome"] }, + }, + { + name: "firefox", + use: { ...devices["Desktop Firefox"] }, + }, { name: "webkit", use: { ...devices["Desktop Safari"] }, From 0eaec543ba9e0ea2e3597e40ee0bb1dedd78ffaf Mon Sep 17 00:00:00 2001 From: BaBrixx Date: Thu, 14 Dec 2023 23:19:52 +0100 Subject: [PATCH 5/5] Fixed some tests (TopBar tests still needs fixing) --- .../lib/components/settings/colorSettings.test.ts | 14 +++++++++----- tests/lib/components/settings/fontSettings.test.ts | 14 +++++++++----- tests/lib/components/settings/settings.test.ts | 14 +++++++++----- tests/lib/components/topBar/aboutUI/about.test.ts | 11 ++++++++--- tests/lib/components/topBar/topbar.test.ts | 8 +++++++- 5 files changed, 42 insertions(+), 19 deletions(-) diff --git a/tests/lib/components/settings/colorSettings.test.ts b/tests/lib/components/settings/colorSettings.test.ts index e95d9141..1909ae3c 100644 --- a/tests/lib/components/settings/colorSettings.test.ts +++ b/tests/lib/components/settings/colorSettings.test.ts @@ -1,6 +1,12 @@ import { test, expect, type Dialog } from "@playwright/test"; -test.beforeEach(async ({ page }) => { +test.beforeEach(async ({ page, browserName }) => { + // TODO: remove this check when Firefox and WebKit supports popover: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover#browser_compatibility + test.skip( + browserName === "firefox" || browserName === "webkit", + "Popover not supported yet", + ); + await page.goto("/"); await page.waitForLoadState(); await page.waitForLoadState("load"); @@ -9,10 +15,8 @@ test.beforeEach(async ({ page }) => { await page.waitForLoadState("load"); await page.waitForLoadState("domcontentloaded"); - await page.getByRole("button", { name: "Options", exact: true }).hover(); - await page - .getByRole("button", { name: "settings Settings", exact: true }) - .click(); + await page.getByRole("button", { name: "Options", exact: true }).click(); + await page.getByRole("button", { name: "Settings", exact: true }).click(); }); test("can create valid color", async ({ page }) => { diff --git a/tests/lib/components/settings/fontSettings.test.ts b/tests/lib/components/settings/fontSettings.test.ts index 6fc56042..39ce89ca 100644 --- a/tests/lib/components/settings/fontSettings.test.ts +++ b/tests/lib/components/settings/fontSettings.test.ts @@ -2,7 +2,13 @@ import { test, expect, type Dialog } from "@playwright/test"; const testFilesPath = "tests/lib/components/settings/testfiles"; -test.beforeEach(async ({ page }) => { +test.beforeEach(async ({ page, browserName }) => { + // TODO: remove this check when Firefox and WebKit supports popover: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover#browser_compatibility + test.skip( + browserName === "firefox" || browserName === "webkit", + "Popover not supported yet", + ); + await page.goto("/"); await page.waitForLoadState(); await page.waitForLoadState("load"); @@ -11,10 +17,8 @@ test.beforeEach(async ({ page }) => { await page.waitForLoadState("load"); await page.waitForLoadState("domcontentloaded"); - await page.getByRole("button", { name: "Options", exact: true }).hover(); - await page - .getByRole("button", { name: "settings Settings", exact: true }) - .click(); + await page.getByRole("button", { name: "Options", exact: true }).click(); + await page.getByRole("button", { name: "Settings", exact: true }).click(); await page.getByRole("button", { name: "Font", exact: true }).click(); }); diff --git a/tests/lib/components/settings/settings.test.ts b/tests/lib/components/settings/settings.test.ts index 00012cbc..51e71b75 100644 --- a/tests/lib/components/settings/settings.test.ts +++ b/tests/lib/components/settings/settings.test.ts @@ -1,6 +1,12 @@ import { test, expect, type Page, type Locator } from "@playwright/test"; -test.beforeEach(async ({ page }) => { +test.beforeEach(async ({ page, browserName }) => { + // TODO: remove this check when Firefox and WebKit supports popover: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover#browser_compatibility + test.skip( + browserName === "firefox" || browserName === "webkit", + "Popover not supported yet", + ); + await page.goto("/"); await page.waitForLoadState(); await page.waitForLoadState("load"); @@ -9,10 +15,8 @@ test.beforeEach(async ({ page }) => { await page.waitForLoadState("load"); await page.waitForLoadState("domcontentloaded"); - await page.getByRole("button", { name: "Options", exact: true }).hover(); - await page - .getByRole("button", { name: "settings Settings", exact: true }) - .click(); + await page.getByRole("button", { name: "Options", exact: true }).click(); + await page.getByRole("button", { name: "Settings", exact: true }).click(); }); async function getTabButtons(page: Page): Promise { diff --git a/tests/lib/components/topBar/aboutUI/about.test.ts b/tests/lib/components/topBar/aboutUI/about.test.ts index dfb0f866..f1dc6e72 100644 --- a/tests/lib/components/topBar/aboutUI/about.test.ts +++ b/tests/lib/components/topBar/aboutUI/about.test.ts @@ -1,14 +1,19 @@ import { test, expect } from "@playwright/test"; -test.beforeEach(async ({ page }) => { +test.beforeEach(async ({ page, browserName }) => { + // TODO: remove this check when Firefox and WebKit supports popover: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover#browser_compatibility + test.skip( + browserName === "firefox" || browserName === "webkit", + "Popover not supported yet", + ); + await page.goto("/"); await page.click("#start-new-project"); }); test("Navigating to Help, then About", async ({ page }) => { await page.getByRole("button", { name: "Help", exact: true }).click(); - - await page.getByRole("button", { name: "error About" }).click(); + await page.getByRole("button", { name: "About", exact: true }).click(); const aboutBox = await page .locator("dialog") diff --git a/tests/lib/components/topBar/topbar.test.ts b/tests/lib/components/topBar/topbar.test.ts index 710efac2..3da14370 100644 --- a/tests/lib/components/topBar/topbar.test.ts +++ b/tests/lib/components/topBar/topbar.test.ts @@ -1,6 +1,12 @@ import { test, expect } from "@playwright/test"; -test.beforeEach(async ({ page }) => { +test.beforeEach(async ({ page, browserName }) => { + // TODO: remove this check when Firefox and WebKit supports popover: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover#browser_compatibility + test.skip( + browserName === "firefox" || browserName === "webkit", + "Popover not supported yet", + ); + await page.goto("/"); await page.click("#start-new-project"); });