diff --git a/.github/workflows/check-e2e.yml b/.github/workflows/check-e2e.yml index 6f20e5a44..61eefc587 100644 --- a/.github/workflows/check-e2e.yml +++ b/.github/workflows/check-e2e.yml @@ -42,7 +42,9 @@ jobs: ./scripts/run-httpd-with-fixtures --non-interactive --download 2>&1 | tee tests/artifacts/httpd-${{ matrix.browser }}.log & - name: Run Playwright tests - run: npm run test:e2e -- --project ${{ matrix.browser }}; + run: | + npm run test:e2e -- --project ${{ matrix.browser }}; + npm run test:e2e:ipfs -- --project ${{ matrix.browser }}; - name: Upload artifacts uses: actions/upload-artifact@v3 diff --git a/package.json b/package.json index e5068d454..1d7f38923 100644 --- a/package.json +++ b/package.json @@ -2,15 +2,16 @@ "version": "1.0.0", "scripts": { "start": "vite", - "start:ipfs": "HASH_ROUTING=1 vite --base ./", + "start:ipfs": "VITE_HASH_ROUTING=1 vite --base ./", "serve": "vite preview", "build": "vite build && scripts/copy-katex-assets && scripts/install-twemoji-assets", - "build:ipfs": "HASH_ROUTING=1 vite build --base ./", + "build:ipfs": "VITE_HASH_ROUTING=1 vite build --base ./", "postinstall": "scripts/copy-katex-assets && scripts/install-twemoji-assets", "check": "scripts/check", "format": "npx prettier '**/*.@(ts|js|svelte|json|css|html|yml)' --ignore-path .gitignore --write", "test:unit": "TZ='UTC' vitest run", - "test:e2e": "TZ='UTC' playwright test" + "test:e2e": "TZ='UTC' playwright test", + "test:e2e:ipfs": "TZ='UTC' playwright test ./tests/e2e/hashRouter.spec.ts --config playwright.ipfs.config.ts" }, "type": "module", "engines": { diff --git a/playwright.config.ts b/playwright.config.ts index 0f5c99dfd..dc918d6ea 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -4,6 +4,7 @@ import { devices } from "@playwright/test"; const config: PlaywrightTestConfig = { testDir: "./tests/e2e", outputDir: "./tests/artifacts", + testIgnore: "hashRouter.spec.ts", timeout: 30_000, expect: { timeout: 8000, diff --git a/playwright.ipfs.config.ts b/playwright.ipfs.config.ts new file mode 100644 index 000000000..6bb6c6f94 --- /dev/null +++ b/playwright.ipfs.config.ts @@ -0,0 +1,14 @@ +import type { PlaywrightTestConfig } from "@playwright/test"; + +import base from "./playwright.config.js"; + +const config: PlaywrightTestConfig = { + ...base, + testIgnore: undefined, + webServer: { + command: "npm run start:ipfs", + port: 3000, + }, +}; + +export default config; diff --git a/src/App.svelte b/src/App.svelte index 2116ccb16..c5bfbb268 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -23,7 +23,7 @@ if (!window.VITEST && !window.PLAYWRIGHT && import.meta.env.PROD) { const plausible = Plausible({ domain: "app.radicle.xyz", - hashMode: window.HASH_ROUTING, + hashMode: import.meta.env.VITE_HASH_ROUTING, }); plausible.enableAutoPageviews(); diff --git a/src/env.d.ts b/src/env.d.ts new file mode 100644 index 000000000..5b01bee03 --- /dev/null +++ b/src/env.d.ts @@ -0,0 +1,14 @@ +/* eslint-disable @typescript-eslint/naming-convention */ + +// Defined by vite or by custom passed env variables +// Custom entries will be defined as globals during dev and statically replaced during build. +interface ImportMeta extends Readonly> { + env: { + MODE: string; + BASE_URL: string; + PROD: boolean; + DEV: boolean; + SSR: boolean; + VITE_HASH_ROUTING: boolean; + }; +} diff --git a/src/global.d.ts b/src/global.d.ts index 3c74631db..738ac2d2a 100644 --- a/src/global.d.ts +++ b/src/global.d.ts @@ -8,7 +8,6 @@ declare global { // production. VITEST: boolean; PLAYWRIGHT: boolean; - HASH_ROUTING: boolean; // APP_CONFIG is set from within Playwright tests at runtime. // To better understand how it works together, have a look at: diff --git a/src/lib/router.ts b/src/lib/router.ts index baeffc56d..c25b02222 100644 --- a/src/lib/router.ts +++ b/src/lib/router.ts @@ -16,7 +16,7 @@ export const activeRouteStore: Readable = derived( }, ); -export const base = window.HASH_ROUTING ? "./" : "/"; +export const base = import.meta.env.VITE_HASH_ROUTING ? "./" : "/"; // Gets triggered when clicking on an anchor hash tag e.g. // Allows the jump to a anchor hash @@ -97,7 +97,7 @@ export const push = (newRoute: Route): void => { // one subsequent pop() anyway. historyStore.set([...history, newRoute].slice(-10)); - const path = window.HASH_ROUTING + const path = import.meta.env.VITE_HASH_ROUTING ? "#" + routeToPath(newRoute) : routeToPath(newRoute); @@ -116,7 +116,7 @@ export const pop = (): void => { export function replace(newRoute: Route): void { historyStore.set([newRoute]); - const path = window.HASH_ROUTING + const path = import.meta.env.VITE_HASH_ROUTING ? "#" + routeToPath(newRoute) : routeToPath(newRoute); @@ -142,7 +142,7 @@ function pathToRoute(path: string): Route | null { } const url = new URL(path, window.origin); - const segments = window.HASH_ROUTING + const segments = import.meta.env.VITE_HASH_ROUTING ? url.hash.substring(2).split("#")[0].split("/") // Try to remove any additional hashes at the end of the URL. : url.pathname.substring(1).split("/"); diff --git a/tests/e2e/hashRouter.spec.ts b/tests/e2e/hashRouter.spec.ts index 3274e1ed6..0579a07ad 100644 --- a/tests/e2e/hashRouter.spec.ts +++ b/tests/e2e/hashRouter.spec.ts @@ -11,12 +11,6 @@ import { expectUrlPersistsReload, } from "@tests/support/router.js"; -test.beforeEach(async ({ page }) => { - await page.addInitScript(() => { - window.HASH_ROUTING = true; - }); -}); - test("navigate between landing and project page", async ({ page }) => { await page.addInitScript(appConfigWithFixture); diff --git a/vite.config.ts b/vite.config.ts index 667b667c1..411bc7b05 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -8,22 +8,6 @@ import path from "node:path"; import { defineConfig } from "vite"; import { svelte } from "@sveltejs/vite-plugin-svelte"; -function defineConstants() { - const constants = { - VITEST: process.env.VITEST !== undefined, - PLAYWRIGHT: process.env.PLAYWRIGHT_TEST_BASE_URL !== undefined, - }; - - // Don't overwrite HASH_ROUTING in Playwright tests, so we can control it - // from within the tests. - if (process.env.PLAYWRIGHT_TEST_BASE_URL !== undefined) { - return constants; - } else { - // eslint-disable-next-line @typescript-eslint/naming-convention - return { ...constants, HASH_ROUTING: Boolean(process.env.HASH_ROUTING) }; - } -} - export default defineConfig({ test: { setupFiles: "./tests/support/setupVitest", @@ -85,7 +69,10 @@ export default defineConfig({ }, }, - define: defineConstants(), + define: { + VITEST: process.env.VITEST !== undefined, + PLAYWRIGHT: process.env.PLAYWRIGHT_TEST_BASE_URL !== undefined, + }, }); function configureDevServer() {