Use playwright mocks in Transactions e2e, update e2e tags

apps/golden-sample-app-e2e/data/sandbox-api-data/transactions.sandbox.api.data.ts

@@ -4,13 +4,13 @@ import {
 } from '@backbase-gsa/transactions-journey/e2e-tests';
 export const transactionListSandboxData: TransactionListDataType = {
   size: 10,
-  searchExpectations: [{ term: 'pocket', count: 5 }],
+  searchExpectations: [{ term: 'pocket', count: 6 }],
 };
 
 export const transactionDetailSandboxData: TransactionDetailDataType = {
-  recipient: 'BP',
-  category: 'Gasoline/Fuel',
-  description: 'BP Global',
+  recipient: 'Pocket Transfer',
+  category: 'Entertainment',
+  description: 'Pocket',
   status: 'BILLED',
-  id: '8a82815f936800030193810b891452e0',
+  id: '8a82802294ac68e50194ce41c66331f0',
 };

apps/golden-sample-app-e2e/fixtures/transactions.fixture.ts

@@ -37,6 +37,8 @@ export const test = mergeTests(
   // overrode default data based on environment config
   detailsData: async ({ env }, use) => await use(testData[env]!.detailsData),
   listData: async ({ env }, use) => await use(testData[env]!.listData),
+  // whether to use mocks or not
+  useMocks: async ({ env }, use) => await use(env === TestEnvironment.MOCKS),
   // type of the user
   userType: 'userWithNoContext',
 });

apps/golden-sample-app-e2e/project.json

@@ -23,7 +23,7 @@
           "--config=playwright.localhost.config.ts",
           "--project=localhost-ebp-sndbx",
           "--grep='@e2e'",
-          "--grep-invert='@mocks-only|@ephemeral-only'"
+          "--grep-invert='@mocks'"
         ]
       }
     },
@@ -37,7 +37,7 @@
           "--config=playwright.localhost.config.ts",
           "--project=localhost-mocked",
           "--grep='@e2e'",
-          "--grep-invert='@identity'" 
+          "--grep-invert='@ephemeral'" 
         ]
       }
     },
@@ -49,7 +49,7 @@
           "test",
           "--config=playwright.modelbank.config.ts",
           "--project=remote-bus-stg",
-          "--grep-invert='@mocks-only|@ephemeral-only'" // we want to run only test which are for model bank
+          "--grep-invert='@mocks|@ephemeral'" // we want to run only test which are for model bank
         ]
       }
     },
@@ -61,7 +61,7 @@
           "test",
           "--config=playwright.ephemeral.config.ts",
           "--project=remote-ephemeral",
-          "--grep-invert='@mock-only'" // we want to run all tests except teh onces which can be run only with mocks
+          "--grep-invert='@mocks'" // we want to run all tests except teh onces which can be run only with mocks
         ]
       }
     }

apps/golden-sample-app-e2e/specs/mb-login.spec.ts

@@ -16,7 +16,7 @@ test.describe.configure({ mode: 'parallel' });
 
 test.describe(
   'Login tests',
-  { tag: ['@feature', '@i18n', '@e2e', '@identity'] },
+  { tag: ['@feature', '@i18n', '@e2e', '@ephemeral'] },
   () => {
     test('Empty user name', async ({ identityPage }) => {
       identityPage.open();

libs/transactions-journey/e2e-tests/fixture/mocks.ts

@@ -0,0 +1,60 @@
+import { Page } from '@playwright/test';
+import { readFileSync } from 'node:fs';
+
+const accessControlMocks = {
+  success: {
+    '**/accessgroups/users/permissions/summary': JSON.parse(
+      readFileSync(
+        './mock-server/mocks/golden-sample-app/accessgroups/users_permission_summary.json',
+        'utf-8'
+      )
+    ).responses.ok.data,
+    '**/accessgroups/service-agreements/context': JSON.parse(
+      readFileSync(
+        './mock-server/mocks/golden-sample-app/accessgroups/user-context_service-agreements.json',
+        'utf-8'
+      )
+    ).responses.ok.data,
+  },
+};
+const arrangementsMocks = {
+  success: {
+    '**/productsummary/context/arrangements**': JSON.parse(
+      readFileSync(
+        './mock-server/mocks/golden-sample-app/productsummary/context_arrangements.json',
+        'utf-8'
+      )
+    ).responses.ok.data,
+  },
+};
+const transactionsMocks = {
+  success: {
+    '**/v2/transactions': JSON.parse(
+      readFileSync(
+        './mock-server/mocks/golden-sample-app/transactions/transactions.json',
+        'utf-8'
+      )
+    ).responses.ok.data,
+  },
+};
+
+export const defaultListMocks = {
+  ...accessControlMocks.success,
+  ...arrangementsMocks.success,
+  ...transactionsMocks.success,
+};
+
+export const defaultDetailsMocks = {
+  ...accessControlMocks.success,
+  ...arrangementsMocks.success,
+  ...transactionsMocks.success,
+};
+
+export function setupPageMocks(
+  page: Page,
+  mocks: Record<string, string | object>
+) {
+  for (const [endpoint, data] of Object.entries(mocks ?? {})) {
+    page.route(endpoint, (route) => route.fulfill({ json: data }));
+  }
+}

libs/transactions-journey/e2e-tests/fixture/transaction.ts

@@ -5,17 +5,28 @@ import {
   TransactionListDataType,
 } from '../model';
 import { TransactionDetailsPage, TransactionsListPage } from '../page-object';
+import { defaultDetailsMocks, defaultListMocks, setupPageMocks } from './mocks';
 
 export const test = baseTest.extend<TransactionFixture>({
   detailsPage: async ({ page, baseURL }, use) => {
     const pageObject = new TransactionDetailsPage(page, { baseURL });
     await use(pageObject);
   },
-  detailsData: {} as TransactionDetailDataType, // pass default data
+  // expected details data, should be overridden
+  detailsData: {} as TransactionDetailDataType,
+  // mocks data setup, can be overridden or bypassed via "useMocks"
+  detailsMocksSetup: async ({ useMocks, page }, use) =>
+    use(() => setupPageMocks(page, useMocks ? defaultDetailsMocks : {})),
+
   listPage: async ({ page, baseURL }, use) => {
     const pageObject = new TransactionsListPage(page, { baseURL });
     await use(pageObject);
   },
+  // expected list data, should be overridden
+  listData: {} as TransactionListDataType,
+  // mocks data setup, can be overridden or bypassed via "useMocks"
+  listMocksSetup: async ({ useMocks, page }, use) =>
+    use(() => setupPageMocks(page, useMocks ? defaultListMocks : {})),
 
-  listData: {} as TransactionListDataType, // pass default data
+  useMocks: true,
 });

libs/transactions-journey/e2e-tests/model/transaction.ts

@@ -1,3 +1,4 @@
+import { PlaywrightTestArgs } from '@playwright/test';
 import { TransactionDetailsPage } from '../page-object/transaction-details.page';
 import { TransactionsListPage } from '../page-object/transactions-list.page';
 
@@ -18,9 +19,14 @@ export interface TransactionDetailDataType {
   id: string;
 }
 
-export interface TransactionFixture {
+export type TransactionFixture = {
   detailsPage: TransactionDetailsPage;
   detailsData: TransactionDetailDataType;
+  detailsMocksSetup: () => void | Promise<void>;
+
   listPage: TransactionsListPage;
   listData: TransactionListDataType;
-}
+  listMocksSetup: () => void | Promise<void>;
+
+  useMocks: boolean;
+} & PlaywrightTestArgs;

libs/transactions-journey/e2e-tests/specs/transaction-details.spec.ts

@@ -8,9 +8,12 @@ export function testTransactionDetails(
     'Transactions details',
     { tag: ['@e2e', '@transactions', '@transactions-details'] },
     () => {
-      test.beforeEach(async ({ detailsPage, detailsData }) => {
-        await detailsPage.navigate(detailsData.id);
-      });
+      test.beforeEach(
+        async ({ detailsPage, detailsData, detailsMocksSetup }) => {
+          await detailsMocksSetup();
+          await detailsPage.navigate(detailsData.id);
+        }
+      );
 
       test('should display correct transaction details', async ({
         detailsPage,

libs/transactions-journey/e2e-tests/specs/transactions-list.spec.ts

@@ -8,7 +8,8 @@ export function testTransactionsList(
     'Transactions list',
     { tag: ['@e2e', '@transactions', '@transactions-details'] },
     () => {
-      test.beforeEach(async ({ listPage }) => {
+      test.beforeEach(async ({ listPage, listMocksSetup }) => {
+        await listMocksSetup();
         await listPage.navigate();
       });
 
@@ -31,8 +32,8 @@ export function testTransactionsList(
 
       test(
         'should display correct error state',
-        { tag: ['@mocks-only'] },
-        async ({ listPage }) => {
+        { tag: ['@mocks'] },
+        async () => {
           // Error state test placeholder
           expect(true).toBe(true);
         }

libs/transactions-journey/tsconfig.lib.json

@@ -5,7 +5,7 @@
     "declaration": true,
     "declarationMap": true,
     "inlineSources": true,
-    "types": ["@angular/localize/init"]
+    "types": ["@angular/localize/init", "node"]
   },
   "exclude": [
     "src/test-setup.ts",

package.json

@@ -22,7 +22,7 @@
     "e2e": "npm run e2e-test-mocks && npm run e2e-test-sndbx-ci",
     "e2e-test-mocks": "nx run golden-sample-app-e2e:e2e-localhost-mocks",
     "e2e-test-sndbx-all": "nx run golden-sample-app-e2e:e2e-localhost-ebp-sndbx",
-    "e2e-test-sndbx-ci": "nx run golden-sample-app-e2e:e2e-localhost-ebp-sndbx --args='test --config=playwright.localhost.config.ts --project=localhost-ebp-sndbx --grep=@identity'",
+    "e2e-test-sndbx-ci": "nx run golden-sample-app-e2e:e2e-localhost-ebp-sndbx --args='test --config=playwright.localhost.config.ts --project=localhost-ebp-sndbx --grep=@ephemeral'",
     "e2e-test-responsive": "npx playwright test --project 'mobile-chrome' --grep '@visual.+@responsive|@responsive.+@visual' --workers=2",
     "e2e-test-a11y": "npx playwright test --project 'web-chrome' --grep '@a11y' --workers=2",
     "lint": "nx run-many --all --target=lint",

playwright.localhost.config.ts

@@ -58,12 +58,5 @@ export default defineConfig<TestOptions>({
       },
     },
   ],
-  webServer: [
-    {
-      command: 'npm run mock-server',
-      url: 'http://localhost:9999/dev-interface',
-      timeout: 30 * 1000,
-      reuseExistingServer: true,
-    },
-  ],
+  webServer: [],
 })