chore(test): UI tests to ESM

api.planx.uk/tests/mockJWT.ts

@@ -1,5 +1,5 @@
 import type { Role } from "@opensystemslab/planx-core/types";
-import { sign } from "jsonwebtoken";
+import jwt from "jsonwebtoken";
 
 function getJWT({ role }: { role: Role }) {
   const data = {
@@ -12,7 +12,7 @@ function getJWT({ role }: { role: Role }) {
     },
   };
 
-  return sign(data, process.env.JWT_SECRET!);
+  return jwt.sign(data, process.env.JWT_SECRET!);
 }
 
 function authHeader({ role }: { role: Role }) {

e2e/package.json

@@ -10,9 +10,7 @@
     "test:debug": "DEBUG_LOG=true pnpm test",
     "lint": "eslint './tests/**/*.{js,ts}' && prettier -c ./tests",
     "lint:fix": "eslint --fix './tests/**/*.{js,ts}' && prettier -w ./tests",
-    "check": "pnpm check:api && pnpm check:ui && pnpm lint",
-    "check:api": "tsc --project './tests/api-driven/tsconfig.json' && pnpm lint",
-    "check:ui": "tsc --project './tests/ui-driven/tsconfig.json' && pnpm lint",
+    "check": "tsc && pnpm lint",
     "postinstall": "cd tests/ui-driven && pnpm install && cd ../api-driven && pnpm install",
     "prepare": "cd .. && husky install e2e/.husky"
   },
@@ -24,6 +22,7 @@
   },
   "packageManager": "[email protected]",
   "devDependencies": {
+    "@types/jsonwebtoken": "^9.0.7",
     "@types/node": "18.16.1",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",

e2e/tests/ui-driven/package.json

@@ -7,6 +7,7 @@
     "ui": "serve ../../../editor.planx.uk/build --single --listen 3000",
     "postinstall": "./install-dependencies.sh"
   },
+  "type": "module",
   "dependencies": {
     "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#a7ec46d",
     "axios": "^1.7.4",
@@ -21,7 +22,7 @@
   },
   "packageManager": "[email protected]",
   "devDependencies": {
-    "@playwright/test": "^1.49.0",
+    "@playwright/test": "^1.49.1",
     "@types/geojson": "^7946.0.14",
     "@types/node": "18.16.1",
     "eslint-plugin-playwright": "^0.20.0"

e2e/tests/ui-driven/src/create-flow-with-geospatial.spec.ts

@@ -3,45 +3,45 @@ import {
   contextDefaults,
   setUpTestContext,
   tearDownTestContext,
-} from "./helpers/context";
-import { getTeamPage } from "./helpers/getPage";
-import { createAuthenticatedSession } from "./helpers/globalHelpers";
-import { answerQuestion, clickContinue } from "./helpers/userActions";
-import { PlaywrightEditor } from "./pages/Editor";
+} from "./helpers/context.js";
+import { getTeamPage } from "./helpers/getPage.js";
+import { createAuthenticatedSession } from "./helpers/globalHelpers.js";
+import { answerQuestion, clickContinue } from "./helpers/userActions.js";
+import { PlaywrightEditor } from "./pages/Editor.js";
 import {
   navigateToService,
   publishService,
   turnServiceOnline,
-} from "./helpers/navigateAndPublish";
-import { TestContext } from "./helpers/types";
-import { serviceProps } from "./helpers/serviceData";
+} from "./helpers/navigateAndPublish.js";
+import { TestContext } from "./helpers/types.js";
+import { serviceProps } from "./helpers/serviceData.js";
 import {
   alterDrawGeoJson,
   checkGeoJsonContent,
   checkUploadFileAltRoute,
   getMapProperties,
   resetMapBoundary,
   waitForMapComponent,
-} from "./helpers/geospatialChecks";
+} from "./helpers/geospatialChecks.js";
 import {
   GeoJsonChangeHandler,
   mockChangedMapGeoJson,
   mockPropertyTypeOptions,
   mockTitleBoundaryGeoJson,
-} from "./mocks/geospatialMocks";
+} from "./mocks/geospatialMocks.js";
 import {
   setupOSMapsStyles,
   setupOSMapsVectorTiles,
-} from "./mocks/osMapsResponse";
+} from "./mocks/osMapsResponse.js";
 import {
   planningConstraintHeadersMock,
   setupGISMockResponse,
   setupRoadsMockResponse,
-} from "./mocks/gisResponse";
+} from "./mocks/gisResponse.js";
 import {
   answerFindProperty,
   userChallengesPlanningConstraint,
-} from "./helpers/geoSpatialUserActions";
+} from "./helpers/geoSpatialUserActions.js";
 
 test.describe("Flow creation, publish and preview", () => {
   let context: TestContext = {

e2e/tests/ui-driven/src/create-flow.spec.ts

@@ -3,13 +3,13 @@ import {
   contextDefaults,
   setUpTestContext,
   tearDownTestContext,
-} from "./helpers/context";
-import { getTeamPage } from "./helpers/getPage";
+} from "./helpers/context.js";
+import { getTeamPage } from "./helpers/getPage.js";
 import {
   createAuthenticatedSession,
   filterFlags,
   selectedFlag,
-} from "./helpers/globalHelpers";
+} from "./helpers/globalHelpers.js";
 import {
   answerAddressInput,
   answerChecklist,
@@ -20,19 +20,19 @@ import {
   answerQuestion,
   answerTextInput,
   clickContinue,
-} from "./helpers/userActions";
-import { PlaywrightEditor } from "./pages/Editor";
-import { createExternalPortal } from "./helpers/addComponent";
+} from "./helpers/userActions.js";
+import { PlaywrightEditor } from "./pages/Editor.js";
+import { createExternalPortal } from "./helpers/addComponent.js";
 import {
   navigateToService,
   publishService,
   turnServiceOnline,
-} from "./helpers/navigateAndPublish";
-import { TestContext } from "./helpers/types";
+} from "./helpers/navigateAndPublish.js";
+import { TestContext } from "./helpers/types.js";
 import {
   externalPortalFlowData,
   externalPortalServiceProps,
-} from "./helpers/serviceData";
+} from "./helpers/serviceData.js";
 
 test.describe("Flow creation, publish and preview", () => {
   let context: TestContext = {

e2e/tests/ui-driven/src/helpers/addComponent.ts

@@ -1,9 +1,9 @@
 import { ComponentType } from "@opensystemslab/planx-core/types";
 import { expect, Locator, Page } from "@playwright/test";
-import { contextDefaults } from "./context";
-import { externalPortalServiceProps } from "./serviceData";
-import { OptionWithDataValues } from "./types";
-import { selectedFlag } from "./globalHelpers";
+import { contextDefaults } from "./context.js";
+import { externalPortalServiceProps } from "./serviceData.js";
+import { OptionWithDataValues } from "./types.js";
+import { selectedFlag } from "./globalHelpers.js";
 
 const createBaseComponent = async (
   page: Page,

e2e/tests/ui-driven/src/helpers/context.ts

@@ -1,8 +1,8 @@
 import { CoreDomainClient } from "@opensystemslab/planx-core";
 import { GraphQLClient, gql } from "graphql-request";
-import { sign } from "jsonwebtoken";
+import jwt from "jsonwebtoken";
 import assert from "node:assert";
-import { TestContext } from "./types";
+import { TestContext } from "./types.js";
 
 export const contextDefaults: TestContext = {
   user: {
@@ -107,7 +107,7 @@ export async function tearDownTestContext() {
 
 export function generateAuthenticationToken(userId: string) {
   assert(process.env.JWT_SECRET);
-  return sign(
+  return jwt.sign(
     {
       sub: `${userId}`,
       "https://hasura.io/jwt/claims": {

e2e/tests/ui-driven/src/helpers/geoSpatialUserActions.ts

@@ -1,5 +1,5 @@
 import { expect, Page } from "@playwright/test";
-import { setupOSMockResponse } from "../mocks/osPlacesResponse";
+import { setupOSMockResponse } from "../mocks/osPlacesResponse.js";
 
 export async function answerFindProperty(page: Page) {
   await setupOSMockResponse(page);

e2e/tests/ui-driven/src/helpers/getPage.ts

@@ -1,5 +1,5 @@
 import { Browser, Page } from "@playwright/test";
-import { createAuthenticatedSession } from "./globalHelpers";
+import { createAuthenticatedSession } from "./globalHelpers.js";
 
 export async function getAdminPage({
   browser,

e2e/tests/ui-driven/src/helpers/globalHelpers.ts

@@ -1,8 +1,8 @@
 import { FlowGraph } from "@opensystemslab/planx-core/types";
 import { type Browser, type Page, type Request } from "@playwright/test";
 import { gql } from "graphql-request";
-import { generateAuthenticationToken, getGraphQLClient } from "./context";
-import { TestContext } from "./types";
+import { generateAuthenticationToken, getGraphQLClient } from "./context.js";
+import { TestContext } from "./types.js";
 import { flatFlags } from "@opensystemslab/planx-core/types";
 
 // Test card numbers to be used in gov.uk sandbox environment

e2e/tests/ui-driven/src/helpers/navigateAndPublish.ts

@@ -1,5 +1,5 @@
 import { expect, Page } from "@playwright/test";
-import { contextDefaults } from "./context";
+import { contextDefaults } from "./context.js";
 
 export const navigateToService = async (page: Page, slug: string) => {
   await page.goto(`/${contextDefaults.team.slug}/${slug}`);

e2e/tests/ui-driven/src/helpers/types.ts

@@ -1,5 +1,5 @@
 import { CoreDomainClient } from "@opensystemslab/planx-core";
-import { User } from "@opensystemslab/planx-core/dist/types";
+import { User } from "@opensystemslab/planx-core/types";
 
 type NewTeam = Parameters<CoreDomainClient["team"]["create"]>[0];
 

e2e/tests/ui-driven/src/helpers/userActions.ts

@@ -1,8 +1,8 @@
 import type { Locator, Page } from "@playwright/test";
 import { expect } from "@playwright/test";
-import { findSessionId, getGraphQLClient } from "./context";
-import { TEST_EMAIL, log, waitForDebugLog } from "./globalHelpers";
-import { TestContext } from "./types";
+import { findSessionId, getGraphQLClient } from "./context.js";
+import { TEST_EMAIL, log, waitForDebugLog } from "./globalHelpers.js";
+import { TestContext } from "./types.js";
 
 export async function saveSession({
   page,

e2e/tests/ui-driven/src/invite-to-pay/agent.spec.ts

@@ -4,22 +4,22 @@ import {
   getGraphQLClient,
   setUpTestContext,
   tearDownTestContext,
-} from "../helpers/context";
-import { addSessionToContext, modifyFlow } from "../helpers/globalHelpers";
+} from "../helpers/context.js";
+import { addSessionToContext, modifyFlow } from "../helpers/globalHelpers.js";
 import {
   clickContinue,
   returnToSession,
   saveSession,
-} from "../helpers/userActions";
-import inviteToPayFlow from "../mocks/flows/invite-to-pay-flow";
+} from "../helpers/userActions.js";
+import inviteToPayFlow from "../mocks/flows/invite-to-pay-flow.js";
 import {
   answerInviteToPayForm,
   getPaymentRequestBySessionId,
   makePaymentRequest,
   navigateToPayComponent,
-} from "./helpers";
-import { mockPaymentRequest, modifiedInviteToPayFlow } from "./mocks";
-import { TestContext } from "../helpers/types";
+} from "./helpers.js";
+import { mockPaymentRequest, modifiedInviteToPayFlow } from "./mocks.js";
+import { TestContext } from "../helpers/types.js";
 
 let context: TestContext = {
   ...contextDefaults,

e2e/tests/ui-driven/src/invite-to-pay/helpers.ts

@@ -1,14 +1,18 @@
-import { PaymentRequest } from "@opensystemslab/planx-core/dist/types";
+import { PaymentRequest } from "@opensystemslab/planx-core/types";
 import { expect, type Page } from "@playwright/test";
 import { GraphQLClient, gql } from "graphql-request";
-import { TEST_EMAIL, addSessionToContext, log } from "../helpers/globalHelpers";
+import {
+  TEST_EMAIL,
+  addSessionToContext,
+  log,
+} from "../helpers/globalHelpers.js";
 import {
   answerChecklist,
   answerContactInput,
   fillInEmail,
-} from "../helpers/userActions";
-import { TestContext } from "../helpers/types";
-import { answerFindProperty } from "../helpers/geoSpatialUserActions";
+} from "../helpers/userActions.js";
+import { TestContext } from "../helpers/types.js";
+import { answerFindProperty } from "../helpers/geoSpatialUserActions.js";
 
 /**
  * Navigates to pay component whilst completing the minimum requirements for an Invite to Pay flow

e2e/tests/ui-driven/src/invite-to-pay/mocks.ts

@@ -4,8 +4,8 @@ import {
   PaymentRequest,
   SessionData,
 } from "@opensystemslab/planx-core/types";
-import { TEST_EMAIL } from "../helpers/globalHelpers";
-import inviteToPayFlow from "../mocks/flows/invite-to-pay-flow";
+import { TEST_EMAIL } from "../helpers/globalHelpers.js";
+import inviteToPayFlow from "../mocks/flows/invite-to-pay-flow.js";
 
 export const mockPaymentRequest: Partial<PaymentRequest> = {
   payeeEmail: TEST_EMAIL,