wip

Dockerfile

@@ -74,32 +74,8 @@ ENV PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=0
 USER $USERNAME
 COPY --link src ./src
 COPY --link e2e ./e2e
-COPY --link screenshots ./screenshots
 COPY --link playwright.config.ts ./
 COPY --link tsconfig.json ./
 
 ENTRYPOINT ["playwright"]
 CMD ["test"]
-
-#FROM mcr.microsoft.com/playwright:v1.42.1-jammy as e2e_ui
-#ENV PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1
-#ENV PNPM_HOME=/pnpm
-#ENV NEXT_TELEMETRY_DISABLED=1
-#ENV PATH="$PNPM_HOME:/app/node_modules/.bin:$PATH"
-#COPY --link pnpm-lock.yaml package.json ./
-#ENV PORT=8000
-#ENV HOSTNAME="0.0.0.0"
-#ENV E2E_DEV_SERVER=1
-#
-#RUN corepack enable
-#WORKDIR /app
-#
-#RUN mkdir /app/screenshots
-#RUN mkdir /app/test-results
-#COPY package.json pnpm-lock.yaml ./
-#RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile --ignore-scripts --no-optional
-#RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm add @playwright/test playwright @faker-js/faker
-#COPY --link . .
-#
-#ENTRYPOINT ["playwright"]
-#CMD ["test", "--ui", "--ui-host=0.0.0.0", "--ui-port=3000"]

docker-compose.yml

@@ -44,11 +44,14 @@ services:
     build:
       context: .
       target: e2e
+    network_mode: host
     depends_on:
       - prod
-    network_mode: host
+    volumes:
+      - ./playwright.config.ts:/app/playwright.config.ts
+      - ./e2e:/app/e2e
 
-  # Runs UI web server on DEV server (can watch for changes)
+  # Runs UI web server
   e2e-ui:
     extends:
       file: docker-compose.overrides.yml
@@ -58,11 +61,9 @@ services:
       target: e2e
     network_mode: host
     depends_on:
-      - dev
+      - prod
     volumes:
-      - ./screenshots:/app/screenshots
-      - ./playwright.config.ts:/app/playwright.config.ts
       - ./e2e:/app/e2e
-      - ./src:/app/src
+      - ./playwright.config.ts:/app/playwright.config.ts
     command: [ "test", "--ui", "--ui-host=0.0.0.0", "--ui-port=3000" ]
 

e2e/helpers.ts

@@ -1,6 +1,24 @@
-import { expect, PlaywrightTestArgs } from '@playwright/test';
+import { expect, Page, PlaywrightTestArgs } from '@playwright/test';
+import { AppMode } from '@types';
 
 export const checkQuery = (page: PlaywrightTestArgs['page'], query: string) => {
   const search = new URL(page.url()).searchParams;
   expect(search.get('q')).toBe(query);
 };
+
+export const routes = {
+  home: '/',
+  classicForm: '/classic-form',
+  paperForm: '/paper-form',
+};
+
+export const searchbar = {
+  async submitQuery(page: Page, query?: string) {
+    await page.getByTestId('search-input').fill(query);
+    await page.getByTestId('search-input').press('Enter');
+  },
+};
+
+export const changeAppMode = async (page: Page, mode: `${AppMode}`) => {
+  await page.locator('#theme-selector div').nth(4).click();
+};

e2e/workflows/search_and_bounce.spec.ts

@@ -0,0 +1,47 @@
+import { expect, test } from '@playwright/test';
+import { changeAppMode, routes, searchbar } from '../helpers';
+
+test.describe.configure({
+  mode: 'parallel',
+});
+
+test('Classic Form -> Results -> Abstract', async ({ page }) => {
+  await page.goto(routes.home);
+  await changeAppMode(page, 'ASTROPHYSICS');
+});
+
+test('Modern Form -> Results -> Abstract', async ({ page }) => {
+  const id = '1985ARA&A..23..169D';
+  await page.goto(routes.home);
+  await expect(page).toHaveScreenshot({ fullPage: true });
+  await searchbar.submitQuery(page, `identifier:${id}`);
+  await page.waitForURL(`/search*`, { waitUntil: 'domcontentloaded' });
+  await expect(page).toHaveScreenshot({ fullPage: true });
+  await page.getByRole('link', { name: 'Radio emission' }).click();
+  await page.waitForURL(`/abs/${id}/abstract`, { waitUntil: 'load' });
+  await expect(page).toHaveScreenshot({ fullPage: true });
+
+  // check for headings
+  const headings = await page.getByRole('heading').all();
+  expect(headings).toHaveLength(4);
+  await expect(headings[0]).toHaveText(/.*Radio emission.*/i);
+  await expect(headings[1]).toHaveText('Authors');
+  await expect(headings[2]).toHaveText('Abstract');
+  await expect(headings[3]).toHaveText('Details');
+
+  // check for resource accordion
+  await expect(page.getByRole('button', { name: 'Full Text Sources' })).toBeVisible();
+  await expect(page.getByRole('button', { name: 'Data Products' })).toBeVisible();
+  await expect(page.getByRole('button', { name: 'Related Materials' })).toBeVisible();
+
+  // check for navigation
+  await expect(page.getByRole('link', { name: 'Abstract' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'References' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Citations' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Similar Papers' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Metrics' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Co-Reads' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Volume Content' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Graphics' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Export Citation' })).toBeVisible();
+});

next.config.js

@@ -127,8 +127,8 @@ const config = {
     reactRemoveProperties: false,
   },
   output: 'standalone',
-  // Don't bother linting during CI builds
-  ...(!process.env.CI ? {} : { eslint: { ignoreDuringBuilds: true } }),
+  typescript: { ignoreBuildErrors: true },
+  eslint: { ignoreDuringBuilds: true },
 };
 
 const sentryConfig = [

package.json

@@ -19,7 +19,7 @@
     "build-bibstem-index": "node ./scripts/gen-bibstem-index",
     "lint": "tsc --project ./tsconfig.json && eslint .",
     "prepare": "husky install",
-    "docker:test": "docker compose -f docker-compose.yml up unit --build",
+    "docker:unit": "docker compose -f docker-compose.yml up unit --build",
     "docker:integration": "docker compose -f docker-compose.yml up e2e --build",
     "docker:integration:ui": "docker compose -f docker-compose.yml up e2e-ui --build",
     "docker:dev": "docker compose -f docker-compose.yml up dev --build",

playwright.config.ts

@@ -5,6 +5,7 @@ import { defineConfig, devices } from '@playwright/test';
  */
 export default defineConfig({
   testDir: './e2e',
+  snapshotPathTemplate: '{testDir}/__screenshots__{/projectName}/{testFilePath}/{arg}{ext}',
   /* Run tests in files in parallel */
   fullyParallel: false,
   /* Fail the build on CI if you accidentally left test.only in the source code. */

src/components/NavBar/AppModeDropdown.tsx

@@ -32,6 +32,8 @@ export const AppModeDropdown = (): ReactElement => {
         label="Select theme"
         id="theme-selector"
         instanceId="theme-selector"
+        data-testid="theme-selector"
+        inputId="theme-selector-input"
       />
     </Box>
   );