cabloy 5.1.158 → 5.1.160

package/repo-e2e/docs/specs/github-repositories-nav.spec.ts

@@ -0,0 +1,69 @@
+import { expect, test } from '@playwright/test';
+
+const repositories = [
+  {
+    text: 'github.com/cabloy/cabloy',
+    link: 'https://github.com/cabloy/cabloy',
+  },
+  {
+    text: 'github.com/cabloy/cabloy-start',
+    link: 'https://github.com/cabloy/cabloy-start',
+  },
+];
+
+test('DOCS-NAV-01: GitHub icon menu exposes both repository links on desktop', async ({ page }) => {
+  const response = await page.goto('/', { waitUntil: 'load' });
+  expect(response?.ok()).toBeTruthy();
+
+  const trigger = page.getByRole('button', { name: 'GitHub repositories' });
+  await expect(trigger).toBeVisible();
+  await expect(trigger).toHaveAttribute('aria-expanded', 'false');
+  await expect(trigger).not.toHaveText(/GitHub/);
+
+  await trigger.focus();
+  await page.keyboard.press('ArrowDown');
+  await expect(trigger).toHaveAttribute('aria-expanded', 'true');
+
+  const menu = page.getByRole('menu', { name: 'GitHub repositories' });
+  await expect(menu).toBeVisible();
+  for (const repository of repositories) {
+    const link = menu.getByRole('menuitem', { name: repository.text, exact: true });
+    await expect(link).toHaveAttribute('href', repository.link);
+    await expect(link).toHaveAttribute('target', '_blank');
+    await expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+  }
+
+  await expect(
+    menu.getByRole('menuitem', { name: repositories[0].text, exact: true }),
+  ).toBeFocused();
+  await page.keyboard.press('ArrowDown');
+  await expect(
+    menu.getByRole('menuitem', { name: repositories[1].text, exact: true }),
+  ).toBeFocused();
+  await page.keyboard.press('Escape');
+  await expect(menu).toHaveCount(0);
+  await expect(trigger).toBeFocused();
+
+  await trigger.click();
+  await expect(menu).toBeVisible();
+  await page.mouse.click(10, 200);
+  await expect(menu).toHaveCount(0);
+});
+
+test('DOCS-NAV-02: GitHub repositories remain readable in mobile navigation', async ({ page }) => {
+  await page.setViewportSize({ width: 375, height: 812 });
+  const response = await page.goto('/', { waitUntil: 'load' });
+  expect(response?.ok()).toBeTruthy();
+
+  await page.locator('.VPNavBarHamburger').click();
+
+  const screenMenu = page.locator('.VPNavScreen .cabloy-github-repositories--screen');
+  await expect(screenMenu).toBeVisible();
+  await expect(screenMenu.getByText('GitHub repositories')).toBeVisible();
+  for (const repository of repositories) {
+    const link = screenMenu.getByRole('link', { name: repository.text, exact: true });
+    await expect(link).toHaveAttribute('href', repository.link);
+    await expect(link).toHaveAttribute('target', '_blank');
+    await expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+  }
+});

package/repo-e2e/docs/test-results/.last-run.json

@@ -0,0 +1,4 @@
+{
+  "status": "passed",
+  "failedTests": []
+}

package/repo-e2e/specs/cabloy-basic.spec.ts

@@ -44,12 +44,12 @@ async function loginAsAdmin(page: Page) {
   return dashboardResponse;
 }
 
-function waitForStudentSelect(page: Page) {
+function waitForStudentSelect(page: Page, requireSuccess = true) {
   return page.waitForResponse(response => {
     const url = new URL(response.url());
     return (
       response.request().method() === 'GET' &&
-      response.ok() &&
+      (!requireSuccess || response.ok()) &&
       url.pathname === '/api/training/student' &&
       !response.request().headers()['x-vona-openapi-schema']
     );
@@ -382,6 +382,140 @@ test(
   },
 );
 
+test(
+  'ATP-BASIC-TABLE-01: Training Student table submits server sorting and pins configured columns',
+  { tag: ['@admin', '@flow'] },
+  async ({ page }) => {
+    await page.setViewportSize({ width: 1440, height: 900 });
+    const pageErrors = collectPageErrors(page);
+    await loginAsAdmin(page);
+
+    const studentName = `Table E2E ${Date.now()}`;
+    const accessToken = (await page.context().cookies()).find(
+      cookie => cookie.name === 'token',
+    )?.value;
+    expect(accessToken).toBeTruthy();
+    const headers = { Authorization: `Bearer ${accessToken}` };
+    let studentId: string | number | undefined;
+    try {
+      const createResponse = await page.request.post('/api/training/student', {
+        data: { name: studentName, mobile: '13812345678', level: 1 },
+        headers,
+      });
+      expect(createResponse.ok()).toBeTruthy();
+      studentId = (await createResponse.json()).data;
+      expect(['string', 'number']).toContain(typeof studentId);
+
+      const initialSelect = waitForStudentSelect(page);
+      await page.getByRole('link', { name: 'Student', exact: true }).click();
+      await expect(page).toHaveURL(studentResourceUrl);
+      await initialSelect;
+      await page.setViewportSize({ width: 800, height: 900 });
+
+      const nameSort = page.getByRole('button', { name: 'Sort by name', exact: true });
+      const nameHeader = nameSort.locator('xpath=ancestor::th');
+      const operationsHeader = page.getByRole('columnheader', { name: 'Operations', exact: true });
+      await expect(nameSort).toBeVisible();
+      await expect(nameHeader).toHaveAttribute('aria-sort', 'none');
+      await expect(nameHeader).toHaveCSS('position', 'sticky');
+      await expect(nameHeader).toHaveCSS('left', '0px');
+      await expect(nameHeader).toHaveCSS('min-width', '240px');
+      await expect(nameHeader).toHaveCSS('text-align', 'left');
+      await expect(operationsHeader).toHaveCSS('position', 'sticky');
+      await expect(operationsHeader).toHaveCSS('right', '0px');
+      await expect(operationsHeader).toHaveCSS('min-width', '360px');
+      await expect(operationsHeader).toHaveCSS('text-align', 'center');
+
+      const ascendingResponse = waitForStudentSelect(page, false);
+      await nameSort.click();
+      await expect(nameHeader).toHaveAttribute('aria-sort', 'ascending');
+      const ascending = await ascendingResponse;
+      expect(ascending.status()).toBe(200);
+      const ascendingUrl = new URL(ascending.url());
+      expect(JSON.parse(ascendingUrl.searchParams.get('orders')!)).toEqual([['name', 'asc']]);
+
+      const descendingResponse = waitForStudentSelect(page, false);
+      await nameSort.click();
+      await expect(nameHeader).toHaveAttribute('aria-sort', 'descending');
+      const descending = await descendingResponse;
+      expect(descending.status()).toBe(200);
+      const descendingUrl = new URL(descending.url());
+      expect(JSON.parse(descendingUrl.searchParams.get('orders')!)).toEqual([['name', 'desc']]);
+
+      const tableWrapper = page
+        .locator('div.overflow-x-auto')
+        .filter({ has: page.locator('table') })
+        .first();
+      await expect(tableWrapper).toBeVisible();
+      const overflow = await tableWrapper.evaluate(element => {
+        return element.scrollWidth > element.clientWidth;
+      });
+      expect(overflow).toBeTruthy();
+      await tableWrapper.evaluate(element => {
+        element.scrollLeft = element.scrollWidth;
+      });
+      await expect(operationsHeader).toHaveCSS('right', '0px');
+
+      const operationsRow = page
+        .locator('tbody tr')
+        .filter({
+          has: page.getByRole('button', { name: 'Summary', exact: true }),
+        })
+        .first();
+      const operationActions = operationsRow.getByRole('button');
+      await expect(operationActions).toHaveCount(4);
+      for (const action of await operationActions.all()) {
+        await expect(action).toBeVisible();
+      }
+      const operationsGeometry = await operationActions.evaluateAll(actions => {
+        const cell = actions[0]?.closest('td');
+        const join = actions[0]?.parentElement;
+        const wrapper = cell?.closest('table')?.parentElement;
+        if (!cell || !join || !wrapper)
+          throw new Error('Could not resolve the Operations action cell');
+        const cellRect = cell.getBoundingClientRect();
+        const joinRect = join.getBoundingClientRect();
+        const wrapperRect = wrapper.getBoundingClientRect();
+        const tolerance = 2;
+        return {
+          fitsCell: join.scrollWidth <= cell.clientWidth,
+          actionsFitCell: actions.every(action => {
+            const rect = action.getBoundingClientRect();
+            return (
+              rect.left >= cellRect.left - tolerance && rect.right <= cellRect.right + tolerance
+            );
+          }),
+          joinFitsCell:
+            joinRect.left >= cellRect.left - tolerance &&
+            joinRect.right <= cellRect.right + tolerance,
+          actionsFitWrapper: actions.every(action => {
+            const rect = action.getBoundingClientRect();
+            return (
+              rect.left >= wrapperRect.left - tolerance &&
+              rect.right <= wrapperRect.right + tolerance
+            );
+          }),
+        };
+      });
+      expect(operationsGeometry).toEqual({
+        fitsCell: true,
+        actionsFitCell: true,
+        joinFitsCell: true,
+        actionsFitWrapper: true,
+      });
+      expect(pageErrors).toEqual([]);
+    } finally {
+      if (studentId !== undefined) {
+        const deleteResponse = await page.request.delete(
+          `/api/training/student/deleteForce/${studentId}`,
+          { headers },
+        );
+        expect(deleteResponse.ok()).toBeTruthy();
+      }
+    }
+  },
+);
+
 test(
   'ATP-BASIC-FORM-01: Training Student content remains in the Basic Information tab',
   { tag: ['@admin', '@flow'] },

package/test-results/.last-run.json

@@ -1,4 +1,22 @@
 {
-  "status": "passed",
-  "failedTests": []
+  "status": "failed",
+  "failedTests": [
+    "3d210d3ff9a0856abf7e-888a38ba8038f6fa2602",
+    "3d210d3ff9a0856abf7e-fef571deb84bf0ab54d2",
+    "3d210d3ff9a0856abf7e-bac9013ebf37f8b551e2",
+    "3d210d3ff9a0856abf7e-8a5a403e16a5f44918db",
+    "3d210d3ff9a0856abf7e-d94c81700701acfb8772",
+    "3d210d3ff9a0856abf7e-5a0c3e6d39e992baa77f",
+    "3d210d3ff9a0856abf7e-f187936e6cea25811c05",
+    "3d210d3ff9a0856abf7e-3ebff7cfcf6496d15806",
+    "3d210d3ff9a0856abf7e-bf01c142e7aed30731e9",
+    "3d210d3ff9a0856abf7e-fb294a776016ba78ad44",
+    "3d210d3ff9a0856abf7e-659190fc927006278793",
+    "3d210d3ff9a0856abf7e-e2c242b55972803f704a",
+    "3d210d3ff9a0856abf7e-ea82d5eef5342d43fe01",
+    "3d210d3ff9a0856abf7e-b9580a17b6bbb1283143",
+    "0d2518050eca8cd1231a-71a447f62ec833696266",
+    "a94d25111077b0e06ce2-890a06a56a3f7bbaaaf6",
+    "a94d25111077b0e06ce2-37fe042e0ce8fb5a177f"
+  ]
 }

package/test-results/a-commerce-ATP-ADDR-01-aut-11dea-ss-through-Web-self-service/error-context.md

@@ -0,0 +1,238 @@
+# Instructions
+
+- Following Playwright test failed.
+- Explain why, be concise, respect Playwright best practices.
+- Provide a snippet of code with the fix, if possible.
+
+# Test info
+
+- Name: a-commerce.spec.ts >> ATP-ADDR-01: authenticated customer manages Address through Web self-service
+- Location: repo-e2e/specs/a-commerce.spec.ts:556:1
+
+# Error details
+
+```
+Error: expect(page).toHaveURL(expected) failed
+
+Expected pattern: /\/commerce\/commerce\/member\/address(?:\?|$)/
+Received string:  "http://127.0.0.1:7102/commerce/home/base/errorAccessDenied"
+Timeout: 5000ms
+
+Call log:
+  - Expect "toHaveURL" with timeout 5000ms
+    14 × locator resolved to <html lang="en-us" data-zova-hydrated="commerce">…</html>
+       - unexpected value "http://127.0.0.1:7102/commerce/home/base/errorAccessDenied"
+
+```
+
+```yaml
+- text: 403 Access denied.
+- button "Go Home"
+```
+
+# Test source
+
+```ts
+  89  |     await expect(passwordInput).toHaveValue(password);
+  90  |     await expect(page.getByPlaceholder('Please input captcha')).not.toHaveValue('');
+  91  |     const loginResponse = waitForApiResponse(page, 'POST', '/api/home/user/passport/login');
+  92  |     await page.getByRole('button', { name: 'Login', exact: true }).click();
+  93  |     const loginResponseValue = await loginResponse;
+  94  |     if (!loginResponseValue.ok()) {
+  95  |       throw new Error(
+  96  |         `login failed: ${loginResponseValue.status()} ${await loginResponseValue.text()}`,
+  97  |       );
+  98  |     }
+  99  |     await expect(page).not.toHaveURL(/\/login(?:\?|$)/);
+  100 |   }
+  101 | }
+  102 | 
+  103 | async function registerCustomer(
+  104 |   request: APIRequestContext,
+  105 |   testInfo: TestInfo,
+  106 | ): Promise<{ password: string; username: string }> {
+  107 |   const id = `${testInfo.workerIndex}-${testInfo.parallelIndex ?? testInfo.retry}-${Date.now()}`;
+  108 |   const username = `e2e-address-${id}`;
+  109 |   const password = 'address-e2e-password';
+  110 |   const captchaResponse = await request.post('/api/captcha/create', {
+  111 |     data: { scene: 'captcha-simple:simple' },
+  112 |   });
+  113 |   expect(captchaResponse.ok()).toBeTruthy();
+  114 |   const captcha = (await captchaResponse.json()).data;
+  115 |   expect(captcha?.id).toEqual(expect.any(String));
+  116 |   expect(captcha?.token).toEqual(expect.any(String));
+  117 | 
+  118 |   const baseURL = testInfo.project.use.baseURL;
+  119 |   if (!baseURL) throw new Error('commerce E2E base URL is unavailable');
+  120 |   const consumerUrl = new URL('/home/user/activation', baseURL).toString();
+  121 |   const registerResponse = await request.post('/api/home/user/passport/register', {
+  122 |     data: {
+  123 |       username,
+  124 |       email: `${username}@example.test`,
+  125 |       password,
+  126 |       passwordConfirm: password,
+  127 |       consumerUrl,
+  128 |       captcha: { id: captcha.id, token: captcha.token },
+  129 |     },
+  130 |   });
+  131 |   expect(registerResponse.ok()).toBeTruthy();
+  132 |   const registration = (await registerResponse.json()).data;
+  133 |   expect(registration?.jwt?.accessToken).toEqual(expect.any(String));
+  134 |   const activateResponse = await request.post(passportTestActivateCurrentPath, {
+  135 |     headers: { Authorization: `Bearer ${registration.jwt.accessToken}` },
+  136 |   });
+  137 |   expect(activateResponse.ok()).toBeTruthy();
+  138 |   return { username, password };
+  139 | }
+  140 | 
+  141 | function createAddressFixture(testInfo: TestInfo): IAddressFixture {
+  142 |   const id = `${testInfo.workerIndex}-${testInfo.parallelIndex ?? testInfo.retry}-${Date.now()}`;
+  143 |   return {
+  144 |     recipientName: `E2E Address ${id}`,
+  145 |     phone: '15555550123',
+  146 |     countryCode: 'US',
+  147 |     region: 'California',
+  148 |     city: `Original City ${id}`,
+  149 |     postalCode: '94105',
+  150 |     addressLine1: `1 Test Street ${id}`,
+  151 |     addressLine2: 'Suite E2E',
+  152 |     updatedCity: `Updated City ${id}`,
+  153 |   };
+  154 | }
+  155 | 
+  156 | function getAddressTextbox(page: Page, name: string): Locator {
+  157 |   return page.getByRole('group', { name, exact: true }).getByRole('textbox');
+  158 | }
+  159 | 
+  160 | async function fillAddressForm(page: Page, fixture: IAddressFixture) {
+  161 |   await getAddressTextbox(page, 'Recipient Name *').fill(fixture.recipientName);
+  162 |   await getAddressTextbox(page, 'Phone *').fill(fixture.phone);
+  163 |   await getAddressTextbox(page, 'Country Code *').fill(fixture.countryCode);
+  164 |   await getAddressTextbox(page, 'Region *').fill(fixture.region);
+  165 |   await getAddressTextbox(page, 'City *').fill(fixture.city);
+  166 |   await getAddressTextbox(page, 'Postal Code *').fill(fixture.postalCode);
+  167 |   await getAddressTextbox(page, 'Address Line 1 *').fill(fixture.addressLine1);
+  168 |   await getAddressTextbox(page, 'Address Line 2').fill(fixture.addressLine2);
+  169 | }
+  170 | 
+  171 | async function createAddressThroughCustomerPage(
+  172 |   browser: Browser,
+  173 |   request: APIRequestContext,
+  174 |   testInfo: TestInfo,
+  175 | ) {
+  176 |   const customer = await registerCustomer(request, testInfo);
+  177 |   const fixture = createAddressFixture(testInfo);
+  178 |   const context = await browser.newContext();
+  179 |   const page = await context.newPage();
+  180 |   const pageErrors = collectPageErrors(page);
+  181 | 
+  182 |   await login(
+  183 |     page,
+  184 |     '/commerce/commerce/member/address',
+  185 |     customer.username,
+  186 |     customer.password,
+  187 |     'commerce',
+  188 |   );
+> 189 |   await expect(page).toHaveURL(/\/commerce\/commerce\/member\/address(?:\?|$)/);
+      |                      ^ Error: expect(page).toHaveURL(expected) failed
+  190 |   await expect(page.getByRole('heading', { name: 'Addresses' })).toBeVisible();
+  191 |   await expect(page.getByText('No addresses yet.')).toBeVisible();
+  192 | 
+  193 |   await fillAddressForm(page, fixture);
+  194 |   const createResponse = waitForAddressResponse(page, 'POST', `${addressActionPath}/createMine`);
+  195 |   const mineResponse = waitForAddressMine(page);
+  196 |   await page.getByRole('button', { name: 'Save address', exact: true }).click();
+  197 |   await createResponse;
+  198 |   await mineResponse;
+  199 |   await expect(page.getByRole('heading', { name: fixture.recipientName })).toBeVisible();
+  200 | 
+  201 |   return { context, fixture, page, pageErrors };
+  202 | }
+  203 | 
+  204 | async function deleteAddressThroughCustomerPage(page: Page, fixture: IAddressFixture) {
+  205 |   const card = page
+  206 |     .locator('article')
+  207 |     .filter({ has: page.getByRole('heading', { name: fixture.recipientName }) });
+  208 |   const deleteResponse = waitForAddressResponse(page, 'DELETE', /\/deleteMine\/[^/]+$/);
+  209 |   const mineResponse = waitForAddressMine(page);
+  210 |   await card.getByRole('button', { name: 'Delete', exact: true }).click();
+  211 |   await deleteResponse;
+  212 |   await mineResponse;
+  213 |   await expect(page.getByRole('heading', { name: fixture.recipientName })).toHaveCount(0);
+  214 |   await expect(page.getByText('No addresses yet.')).toBeVisible();
+  215 | }
+  216 | 
+  217 | test(
+  218 |   'ATP-SSR-01: anonymous Commerce HTML is public and hydration completes',
+  219 |   { tag: ['@web', '@smoke'] },
+  220 |   async ({ page, request }) => {
+  221 |     const response = await request.get('/commerce');
+  222 |     expect(response.ok()).toBeTruthy();
+  223 |     expect(response.headers()['cache-control']).toBe('no-cache, no-store, must-revalidate');
+  224 |     const html = await response.text();
+  225 |     const normalizedHtml = html.toLowerCase();
+  226 |     expect(normalizedHtml).not.toContain('data-zova-hydrated');
+  227 | 
+  228 |     for (const marker of privateMarkers) {
+  229 |       expect(normalizedHtml).not.toContain(`"${marker}"`);
+  230 |     }
+  231 | 
+  232 |     const pageErrors = collectPageErrors(page);
+  233 |     const documentResponse = await page.goto('/commerce', { waitUntil: 'load' });
+  234 |     expect(documentResponse?.ok()).toBeTruthy();
+  235 |     await expect(page).toHaveURL(/\/commerce(?:\/|$)/);
+  236 |     await expect(page.locator('html')).toHaveAttribute('data-zova-hydrated', 'commerce');
+  237 |     await expect(page.getByRole('heading', { name: 'Commerce catalogue' })).toBeVisible();
+  238 |     await expect(page.getByText('Dashboard')).toHaveCount(0);
+  239 |     await expect(page.locator('body')).toBeVisible();
+  240 |     await expect(page).not.toHaveTitle(/error/i);
+  241 |     expect(pageErrors).toEqual([]);
+  242 |   },
+  243 | );
+  244 | 
+  245 | test(
+  246 |   'Commerce theme: public local preference mirrors session cookie without hydration mismatch',
+  247 |   { tag: ['@web', '@ssr', '@theme'] },
+  248 |   async ({ browser, request }, testInfo) => {
+  249 |     const customer = await registerCustomer(request, testInfo);
+  250 |     const context = await browser.newContext();
+  251 |     await context.addInitScript(() => localStorage.setItem('themedark', 'true'));
+  252 |     const page = await context.newPage();
+  253 |     const pageErrors = collectPageErrors(page);
+  254 |     const consoleErrors: string[] = [];
+  255 |     page.on('console', message => {
+  256 |       if (message.type() === 'error' || /hydration mismatch/i.test(message.text())) {
+  257 |         consoleErrors.push(message.text());
+  258 |       }
+  259 |     });
+  260 |     try {
+  261 |       await page.goto('/commerce', { waitUntil: 'load' });
+  262 |       await page.evaluate(() => localStorage.setItem('themedark', 'true'));
+  263 |       await page.reload({ waitUntil: 'load' });
+  264 |       await expect(page.locator('html')).toHaveAttribute('data-zova-hydrated', 'commerce');
+  265 |       await expect(page.locator('body')).toHaveAttribute('data-theme', 'dark');
+  266 |       expect((await context.cookies()).find(cookie => cookie.name === 'themedark')?.value).toBe(
+  267 |         'true',
+  268 |       );
+  269 | 
+  270 |       await login(
+  271 |         page,
+  272 |         '/commerce/commerce/member/address',
+  273 |         customer.username,
+  274 |         customer.password,
+  275 |         'commerce',
+  276 |       );
+  277 |       await expect(page.locator('html')).toHaveAttribute('data-zova-hydrated', 'commerce');
+  278 |       await expect(page.locator('body')).toHaveAttribute('data-theme', 'dark');
+  279 |       expect(pageErrors).toEqual([]);
+  280 |       expect(consoleErrors).toEqual([]);
+  281 |     } finally {
+  282 |       await context.close();
+  283 |     }
+  284 |   },
+  285 | );
+  286 | 
+  287 | test(
+  288 |   'Commerce theme: session cookie mirrors public local preference without hydration mismatch',
+  289 |   { tag: ['@web', '@ssr', '@theme'] },
+```