ci: fix cypress tests

Moving to sveltekit complicates trying to intercept network calls,
as they can happen either on the client or server side. The approach
we're taking here is to serve the fixture data from the local preview
server during testing.

.github/workflows/e2e.yaml

@@ -43,10 +43,24 @@ jobs:
  working-directory: packages/core
  run: pnpm build
 
+ - name: Build viewer
+ working-directory: packages/viewer
+ run: |
+ VITE_BUNDLE_HOST=http://localhost:4173 pnpm run build
+
+ - name: Copy fixtures
+ working-directory: packages/viewer
+ # The viewer build is configured to load data from the local server's
+ # static assets, so we populate the main branch location with fixture
+ # data, for deterministic testing.
+ run: |
+ mkdir -p dist/refs/heads
+ cp cypress/fixtures/main.min.json dist/refs/heads/main.json
+
  - name: Cypress run
  uses: cypress-io/github-action@v5
  with:
  browser: chrome
  build: echo "Start runs build"
- command: pnpm --filter viewer run cy:run
- start: pnpm --filter viewer run dev
+ command: pnpm --filter viewer run cy:run --config baseUrl=http://localhost:4173
+ start: pnpm --filter viewer run preview

packages/viewer/cypress/e2e/deduction.spec.ts

@@ -1,6 +1,7 @@
 import { isLegacy } from '../constants'
 
 beforeEach(() => {
+ cy.clearAllLocalStorage()
  cy.intercept({ hostname: /pi-base-bundles/ }, { fixture: 'main.min.json' })
 })
 

packages/viewer/cypress/e2e/search.spec.ts

@@ -4,14 +4,15 @@ const search = '/spaces'
 
 describe('with a working remote', () => {
  beforeEach(() => {
- cy.intercept({ hostname: /pi-base-bundles/ }, { fixture: 'main.min.json' })
+ cy.clearAllLocalStorage()
+ cy.intercept({ path: /main.json/ }, { fixture: 'main.min.json' })
  })
 
  it('searches by text and formula', () => {
  cy.visit(search)
 
- cy.get('input[name="text"]').type('plank')
- cy.get('input[name="q"]').type('metacom')
+ cy.get('input[name="text"]').focus().type('plank')
+ cy.get('input[name="q"]').focus().type('metacom')
 
  cy.url().should('include', 'text=plank').should('include', 'q=metacom')
 

packages/viewer/cypress/tsconfig.json

@@ -1,8 +1,13 @@
 {
- "extends": "../tsconfig.json",
  "compilerOptions": {
+ "target": "es5",
+ "lib": [
+ "es5",
+ "dom"
+ ],
  "types": [
- "cypress"
+ "cypress",
+ "node"
  ],
  "isolatedModules": false
  },

packages/viewer/package.json

@@ -9,6 +9,7 @@
  "cy:open": "cypress open",
  "cy:run": "cypress run",
  "dev": "vite",
+ "preview": "vite preview",
  "test": "vitest run",
  "test:cov": "vitest run --coverage",
  "test:watch": "vitest",
@@ -41,7 +42,7 @@
  "@types/katex": "^0.16.5",
  "@types/page": "^1.11.8",
  "@types/unist": "^2.0.9",
- "cypress": "^12.17.4",
+ "cypress": "^13.3.3",
  "svelte": "^3.59.2",
  "svelte-check": "^3.5.2",
  "svelte-preprocess": "^5.0.4",

packages/viewer/src/constants.ts

@@ -1,5 +1,8 @@
+import { bundle } from '@pi-base/core'
+
 export const mainBranch = 'main'
 export const contributingUrl = `https://github.com/pi-base/data/blob/${mainBranch}/CONTRIBUTING.md`
+export const defaultHost = bundle.defaultHost
 
 export const build = {
  branch: import.meta.env.VITE_BRANCH || 'unknown',

packages/viewer/src/context.ts

@@ -39,18 +39,20 @@ function project(store: Store) {
 export function initialize({
  db = local(),
  errorHandler = Errors.log(),
+ host,
  gateway,
  showDev = false,
  typesetter = renderer,
 }: {
  db?: Local<Prestore>
  errorHandler?: Errors.Handler
+ host?: string
  gateway: Gateway.Sync
  showDev?: boolean
  typesetter?: typeof renderer
 }): Context {
  const pre = db.load()
- const store = create(pre, gateway)
+ const store = create(pre, gateway, { host })
 
  db.subscribe(project(store))
 
@@ -79,17 +81,17 @@ export function initialize({
  until: Promise<unknown> = loaded(),
  ): Promise<T> {
  return new Promise((resolve, reject) => {
- const unsubscribe = s.subscribe(state => {
+ var unsubscribe = s.subscribe(state => {
  const found = lookup(state)
  if (found) {
  resolve(found)
- unsubscribe()
+ unsubscribe && unsubscribe()
  }
  })
 
  until.then(() => {
  reject()
- unsubscribe()
+ unsubscribe && unsubscribe()
  })
  })
  }

packages/viewer/src/routes/+layout.ts

@@ -1,7 +1,10 @@
-import * as errors from '../errors'
+import { initialize } from '@/context'
+import { defaultHost } from '@/constants'
+import * as errors from '@/errors'
+import { sync } from '@/gateway'
 import type { LayoutLoad } from './$types'
-import { initialize } from '../context'
-import { sync } from '../gateway'
+
+const bundleHost = import.meta.env.VITE_BUNDLE_HOST || defaultHost
 
 export const load: LayoutLoad = async ({ fetch, url: { host } }) => {
  const dev = host.match(/(dev(elopment)?[.-]|localhost)/) !== null
@@ -22,6 +25,7 @@ export const load: LayoutLoad = async ({ fetch, url: { host } }) => {
  showDev: dev,
  errorHandler,
  gateway: sync(fetch),
+ host: bundleHost,
  })
 
  await context.loaded()

packages/viewer/src/stores/index.ts

@@ -1,21 +1,22 @@
-export { default as list } from './list'
-export { default as search } from './search'
-
-import { type Readable, type Writable, get, writable } from 'svelte/store'
+import { defaultHost, mainBranch } from '@/constants'
+import type * as Gateway from '@/gateway'
 import {
  Collection,
+ Theorems,
+ Traits,
  type Property,
  type SerializedTheorem,
  type Space,
- Theorems,
  type Trait,
- Traits,
-} from '../models'
+} from '@/models'
+import { read } from '@/util'
+import { get, writable, type Readable, type Writable } from 'svelte/store'
 import * as Deduction from './deduction'
 import * as Source from './source'
 import * as Sync from './sync'
-import type * as Gateway from '../gateway'
-import { read } from '../util'
+
+export { default as list } from './list'
+export { default as search } from './search'
 
 export type Meta = {
  etag?: string
@@ -42,12 +43,25 @@ export type Store = {
  deduction: Deduction.Store
 }
 
-export function create(pre: Prestore, gateway: Gateway.Sync): Store {
+export function create(
+ pre: Prestore,
+ gateway: Gateway.Sync,
+ {
+ host = defaultHost,
+ branch = mainBranch,
+ }: {
+ host?: string
+ branch?: string
+ } = {},
+): Store {
  const spaces = writable(Collection.empty<Space>())
  const properties = writable(Collection.empty<Property>())
  const theorems = writable(new Theorems())
  const traits = writable(new Traits())
- const source = Source.create()
+ const source = Source.create({
+ host,
+ branch,
+ })
  const sync = Sync.create(refresh, pre.sync)
 
  const deduction = Deduction.create(

packages/viewer/src/stores/source.ts

@@ -1,7 +1,6 @@
 import { type Readable, writable } from 'svelte/store'
-import { bundle } from '@pi-base/core'
 
-import { mainBranch } from '../constants'
+import { defaultHost, mainBranch } from '../constants'
 import { trace } from '../debug'
 import type { Source } from '../types'
 
@@ -14,10 +13,10 @@ export interface Store extends Readable<Source> {
 
 export const initial: Source = {
  branch: mainBranch,
- host: bundle.defaultHost,
+ host: defaultHost,
 }
 
-export function create(source?: Source): Store {
+export function create(source: Source): Store {
  const store = writable<Source>(source || initial)
 
  const { subscribe, update } = store

packages/viewer/vite.config.js

@@ -1,9 +1,32 @@
 import { sveltekit } from '@sveltejs/kit/vite'
 import { defineConfig } from 'vitest/config'
+import { readFileSync } from 'node:fs'
+
+const pathExp = new RegExp('/refs/heads/(.*).json')
+
+/** @type {import('vite').Plugin} */
+const fixtures = {
+ name: 'fixtures-middleware',
+ // See https://kit.svelte.dev/docs/faq#how-do-i-use-x-with-sveltekit-how-do-i-use-middleware
+ configureServer(server) {
+ server.middlewares.use((req, res, next) => {
+ const match = pathExp.exec(req.url)
+ if (match) {
+ res.setHeader('Content-Type', 'application/json')
+
+ const ref = match[1]
+ const data = readFileSync(`./cypress/fixtures/${ref}.min.json`)
+ return res.end(data)
+ }
+
+ next()
+ })
+ },
+}
 
 // https://vitejs.dev/config/
 export default defineConfig({
- plugins: [sveltekit()],
+ plugins: [sveltekit(), fixtures],
  test: {
  include: ['src/**/*.{test,spec}.{js,ts}'],
  coverage: {