[MS] Added e2e tests for custom order invoices

Author: Max-7

client/src/services/bms/mockApi.ts

@@ -42,7 +42,7 @@ type MockFunction = (...args: any[]) => Promise<BmsResponse>;
 function createMockFunction(functionName: string, mockSuccess?: MockFunction, mockError?: MockFunction): MockFunction {
   const params = getMockParameters(functionName);
 
-  if (params.isMocked) {
+  if (import.meta.env.PARSEC_APP_BMS_USE_MOCK === 'true' && params.isMocked) {
     if (params.shouldFail) {
       if (!mockError) {
         console.warn(`Function "${functionName}" does not have failure mock, defaulting to default API`);
@@ -70,12 +70,13 @@ function createMockFunction(functionName: string, mockSuccess?: MockFunction, mo
 }
 
 function getMockParameters(functionName: string): MockParameters {
+  const mocksEnabled = import.meta.env.PARSEC_APP_BMS_USE_MOCK === 'true';
   const mockFunctionsVariable: string = import.meta.env.PARSEC_APP_BMS_MOCKED_FUNCTIONS ?? '';
   const failFunctionsVariable: string = import.meta.env.PARSEC_APP_BMS_FAIL_FUNCTIONS ?? '';
   const mockedFunctions = mockFunctionsVariable.split(';');
   const failFunctions = failFunctionsVariable.split(';');
 
-  if (mockedFunctions.includes(functionName)) {
+  if (mocksEnabled && mockedFunctions.includes(functionName)) {
     console.debug(`Mock call to "${functionName}"`);
     return {
       isMocked: true,

client/src/views/client-area/BmsLogin.vue

@@ -127,7 +127,7 @@
           </ion-text>
           <ion-button
             v-show="!loading"
-            :disabled="!emailInputRef || emailInputRef.validity !== Validity.Valid || !password.length || querying"
+            :disabled="!validEmail || !password.length || querying"
             @click="onLoginClicked"
             class="saas-login-button__item"
             size="large"
@@ -199,7 +199,7 @@ import { IonButton, IonText, IonButtons, IonFooter, IonIcon, IonSkeletonText } f
 import { MsInput, MsPasswordInput, Translatable, Validity, MsSpinner, MsCheckbox } from 'megashark-lib';
 import { emailValidator } from '@/common/validators';
 import { warning, arrowBack, arrowForward, close } from 'ionicons/icons';
-import { onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { AuthenticationToken, BmsAccessInstance, PersonalInformationResultData } from '@/services/bms';
 import CreateOrganizationModalHeader from '@/components/organizations/CreateOrganizationModalHeader.vue';
 import { Env } from '@/services/environment';
@@ -226,7 +226,12 @@ const loginError = ref<Translatable>('');
 const loading = ref(true);
 const storeCredentials = ref<boolean>(false);
 
+const validEmail = computed(() => {
+  return Boolean(email.value.length > 0 && emailInputRef.value && emailInputRef.value.validity === Validity.Valid);
+});
+
 onMounted(async () => {
+  querying.value = false;
   loading.value = true;
   if (BmsAccessInstance.get().isLoggedIn()) {
     emits('loginSuccess', await BmsAccessInstance.get().getToken(), BmsAccessInstance.get().getPersonalInformation());
@@ -238,13 +243,11 @@ onMounted(async () => {
     return;
   }
 
-  if (emailInputRef.value) {
-    if (email.value.length > 0) {
-      await emailInputRef.value.validate(email.value);
-      await passwordInputRef.value.setFocus();
-    } else {
-      await emailInputRef.value.setFocus();
-    }
+  if (email.value.length > 0) {
+    await emailInputRef.value.validate(email.value);
+    await passwordInputRef.value.setFocus();
+  } else {
+    await emailInputRef.value.setFocus();
   }
   loading.value = false;
 });

client/tests/e2e/helpers/bms.ts

@@ -77,6 +77,8 @@ interface MockRouteOptions {
 }
 
 interface MockCustomOrderDetailsOverload {
+  empty?: boolean;
+  single?: boolean;
   created?: DateTime;
   amountWithTaxes?: number;
   amountWithoutTaxes?: number;
@@ -94,18 +96,26 @@ interface MockCustomOrderDetailsOverload {
   storageOrdered?: number;
 }
 
-function createCustomOrderInvoices(count: number = 1, overload: MockCustomOrderDetailsOverload = {}): Array<any> {
+function createCustomOrderInvoices(overload: MockCustomOrderDetailsOverload = {}): Array<any> {
   const invoices: Array<any> = [];
 
   const STATUSES = ['paid', 'draft', 'open', 'uncollectible', 'void'];
 
-  for (let i = 1; i < count + 1; i++) {
-    const licenseStart = overload.licenseStart ? overload.licenseStart : DateTime.now().minus({ months: count + 1 - i });
-    const licenseEnd = overload.licenseEnd ? overload.licenseEnd : DateTime.now().minus({ months: count - i });
+  if (overload.empty) {
+    return invoices;
+  }
+  for (let i = 0; i < (overload.single !== undefined ? 1 : 15); i++) {
+    const licenseStart = overload.licenseStart
+      ? overload.licenseStart
+      : DateTime.fromObject({ year: 2024 + Math.floor(i / 12), month: (i % 12) + 1, day: 3 });
+    const licenseEnd = overload.licenseEnd
+      ? overload.licenseEnd
+      : DateTime.fromObject({ year: 2024 + Math.floor((i + 1) / 12), month: ((i + 1) % 12) + 1, day: 3 });
+
     invoices.push({
-      id: `custom_order_id${i}`,
-      created: overload.created ? overload.created.toISO() : DateTime.now().minus({ months: count + 1 - i }),
-      number: `FACT00${i}`,
+      id: `custom_order_id${i + 1}`,
+      created: overload.created ? overload.created.toISO() : licenseStart.toISO(),
+      number: `FACT00${i + 1}`,
       status: overload.status ? overload.status : STATUSES[Math.floor(Math.random() * STATUSES.length)],
       amounts: {
         total_excl_tax: overload.amountWithoutTaxes ? overload.amountWithoutTaxes.toString() : '42.00',
@@ -594,6 +604,7 @@ async function mockCustomOrderDetails(
   overload: MockCustomOrderDetailsOverload = {},
   options?: MockRouteOptions,
 ): Promise<void> {
+  overload.single = true;
   await mockRoute(
     page,
     // eslint-disable-next-line max-len
@@ -603,7 +614,7 @@ async function mockCustomOrderDetails(
       await route.fulfill({
         status: 200,
         json: {
-          [DEFAULT_ORGANIZATION_INFORMATION.name]: createCustomOrderInvoices(1, overload)[0],
+          [DEFAULT_ORGANIZATION_INFORMATION.name]: createCustomOrderInvoices(overload)[0],
         },
       });
     },
@@ -679,7 +690,7 @@ async function mockGetCustomOrderInvoices(
     const ret: any = {};
     for (const orgId of postData.organization_ids ?? []) {
       const parsecId = orgId === '1' ? DEFAULT_ORGANIZATION_INFORMATION.name : `${DEFAULT_ORGANIZATION_INFORMATION.name}-${orgId}`;
-      ret[parsecId] = createCustomOrderInvoices(12, overload);
+      ret[parsecId] = createCustomOrderInvoices(overload);
     }
     return ret;
   }

client/tests/e2e/helpers/fixtures.ts

@@ -264,7 +264,7 @@ export const msTest = debugTest.extend<{
     await button.click();
     await fillIonInput(home.locator('.input-container').nth(0).locator('ion-input'), DEFAULT_USER_INFORMATION.email);
     await fillIonInput(home.locator('.input-container').nth(1).locator('ion-input'), DEFAULT_USER_INFORMATION.password);
-    await home.locator('.saas-login-button__item').nth(1).click();
+    await home.locator('.saas-login-button').locator('ion-button').click();
     await expect(home).toHaveURL(/.+\/clientArea$/);
 
     // Switch to first org
@@ -297,9 +297,14 @@ export const msTest = debugTest.extend<{
     const button = home.locator('.topbar-right').locator('#trigger-customer-area-button');
     await expect(button).toHaveText('Customer area');
     await button.click();
-    await fillIonInput(home.locator('.input-container').nth(0).locator('ion-input'), DEFAULT_USER_INFORMATION.email);
-    await fillIonInput(home.locator('.input-container').nth(1).locator('ion-input'), DEFAULT_USER_INFORMATION.password);
-    await home.locator('.saas-login-button__item').nth(1).click();
+    const loginButton = home.locator('.saas-login-button').locator('ion-button');
+    await expect(loginButton).toHaveAttribute('disabled');
+    await fillIonInput(home.locator('.saas-login-content').locator('ion-input').nth(0), DEFAULT_USER_INFORMATION.email);
+    await home.waitForTimeout(100);
+    await fillIonInput(home.locator('.saas-login-content').locator('ion-input').nth(1), DEFAULT_USER_INFORMATION.password);
+    await home.waitForTimeout(100);
+    await expect(loginButton).not.toHaveAttribute('disabled');
+    await loginButton.click();
     await expect(home).toHaveURL(/.+\/clientArea$/);
 
     await use(home);

client/tests/e2e/helpers/utils.ts

@@ -200,6 +200,7 @@ export async function clientAreaSwitchOrganization(page: Page, organization: str
     const text = await item.textContent();
     if (text === organization || (text === 'All organizations' && organization === 'all')) {
       await item.click();
+      break;
     }
   }
   await expect(popover).toBeHidden();

client/tests/e2e/specs/client_area_custom_order_contract.spec.ts

@@ -1,7 +1,6 @@
 // Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS
 
 import { clientAreaSwitchOrganization, expect, MockBms, msTest } from '@tests/e2e/helpers';
-import { DateTime } from 'luxon';
 
 msTest('Test initial status for an org', async ({ clientAreaCustomOrder }) => {
   const title = clientAreaCustomOrder.locator('.header-content').locator('.header-title');
@@ -26,8 +25,8 @@ msTest('Test initial status for an org', async ({ clientAreaCustomOrder }) => {
   await expect(container.locator('.contract-header-title__text')).toHaveText('Contract n°FACT001');
 
   const contract = container.locator('.contract-main');
-  await expect(contract.locator('.item-content-date__date').nth(0)).toHaveText(DateTime.now().minus({ months: 1 }).toFormat('LLL d, yyyy'));
-  await expect(contract.locator('.item-content-date__date').nth(1)).toHaveText(DateTime.now().toFormat('LLL d, yyyy'));
+  await expect(contract.locator('.item-content-date__date').nth(0)).toHaveText('Jan 3, 2024');
+  await expect(contract.locator('.item-content-date__date').nth(1)).toHaveText('Feb 3, 2024');
 
   await expect(contract.locator('.data-number').nth(0)).toHaveText('32');
   await expect(contract.locator('.data-number').nth(1)).toHaveText('50');

client/tests/e2e/specs/client_area_custom_order_invoices.spec.ts

@@ -1,6 +1,6 @@
 // Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS
 
-import { clientAreaSwitchOrganization, DEFAULT_ORGANIZATION_INFORMATION, expect, msTest } from '@tests/e2e/helpers';
+import { clientAreaSwitchOrganization, DEFAULT_ORGANIZATION_INFORMATION, expect, MockBms, msTest } from '@tests/e2e/helpers';
 
 msTest('Test all orgs', async ({ clientAreaCustomOrder }) => {
   const title = clientAreaCustomOrder.locator('.header-content').locator('.header-title');
@@ -9,7 +9,13 @@ msTest('Test all orgs', async ({ clientAreaCustomOrder }) => {
   await expect(title).toHaveText('Invoices');
   const content = clientAreaCustomOrder.locator('.client-page-invoices');
   const invoices = content.locator('.invoices-year-content-list-item');
-  await expect(invoices).toHaveCount(24);
+  await expect(invoices).toHaveCount(30);
+  await expect(content.locator('.no-invoices')).toBeHidden();
+  for (const invoice of await invoices.all()) {
+    await expect(invoice.locator('.invoices-organization')).toHaveText(/^BlackMesa(-2)?$/);
+    await expect(invoice.locator('.invoices-amount')).toHaveText(/^€\d+\.\d{2}$/);
+    await expect(invoice.locator('.badge-status')).toHaveText(/^To pay|Paid|Void|In progress|Uncollectible$/);
+  }
 });
 
 msTest('Test only one org', async ({ clientAreaCustomOrder }) => {
@@ -21,5 +27,111 @@ msTest('Test only one org', async ({ clientAreaCustomOrder }) => {
   await expect(title).toHaveText('Invoices');
   const content = clientAreaCustomOrder.locator('.client-page-invoices');
   const invoices = content.locator('.invoices-year-content-list-item');
-  await expect(invoices).toHaveCount(12);
+  await expect(invoices).toHaveCount(15);
+  await expect(content.locator('.no-invoices')).toBeHidden();
+  for (const invoice of await invoices.all()) {
+    await expect(invoice.locator('.invoices-organization')).toHaveText('BlackMesa');
+    await expect(invoice.locator('.invoices-amount')).toHaveText(/^€\d+\.\d{2}$/);
+    await expect(invoice.locator('.badge-status')).toHaveText(/^To pay|Paid|Void|In progress|Uncollectible$/);
+  }
 });
+
+msTest('Test filter date', async ({ clientAreaCustomOrder }) => {
+  const title = clientAreaCustomOrder.locator('.header-content').locator('.header-title');
+
+  await clientAreaCustomOrder.locator('.menu-client').locator('.menu-client-list').getByRole('listitem').nth(3).click();
+  await expect(title).toHaveText('Invoices');
+
+  const containers = clientAreaCustomOrder.locator('.invoices-year:visible');
+  await expect(containers).toHaveCount(2);
+  await expect(containers.locator('.invoices-year-text')).toHaveText(['2025', '2024']);
+
+  const yearFilterButton = clientAreaCustomOrder.locator('.invoices-header-filter').locator('.invoices-header-filter-button').nth(0);
+  const monthFilterButton = clientAreaCustomOrder.locator('.invoices-header-filter').locator('.invoices-header-filter-button').nth(1);
+  const popover = clientAreaCustomOrder.locator('.time-filter-popover');
+  await expect(popover).toBeHidden();
+
+  await yearFilterButton.click();
+  await expect(popover).toBeVisible();
+  await expect(popover.locator('.time-list-item')).toHaveText(['2025', '2024']);
+
+  await popover.locator('.time-list-item').nth(1).click();
+  await popover.locator('ion-backdrop').click();
+  await expect(popover).toBeHidden();
+
+  await expect(containers).toHaveCount(1);
+  await expect(containers.locator('.invoices-year-text')).toHaveText('2024');
+  await expect(containers.locator('.invoices-year-content-list-item:visible')).toHaveCount(24);
+
+  await monthFilterButton.click();
+  await expect(popover).toBeVisible();
+  await expect(popover.locator('.time-list-item')).toHaveText([
+    'Jan',
+    'Feb',
+    'Mar',
+    'Apr',
+    'May',
+    'Jun',
+    'Jul',
+    'Aug',
+    'Sep',
+    'Oct',
+    'Nov',
+    'Dec',
+  ]);
+  await popover.locator('.time-list-item').nth(1).click();
+  await popover.locator('.time-list-item').nth(3).click();
+  await popover.locator('.time-list-item').nth(4).click();
+  await popover.locator('.time-list-item').nth(10).click();
+  await popover.locator('ion-backdrop').click();
+  await expect(popover).toBeHidden();
+  await expect(containers.locator('.invoices-year-content-list-item:visible')).toHaveCount(8);
+});
+
+msTest('Test no invoices', async ({ clientAreaCustomOrder }) => {
+  await MockBms.mockGetCustomOrderInvoices(clientAreaCustomOrder, {}, { empty: true });
+  const title = clientAreaCustomOrder.locator('.header-content').locator('.header-title');
+
+  await clientAreaCustomOrder.locator('.menu-client').locator('.menu-client-list').getByRole('listitem').nth(3).click();
+  await expect(title).toHaveText('Invoices');
+  const content = clientAreaCustomOrder.locator('.client-page-invoices');
+  await expect(content.locator('.invoices-year-content-list-item')).toHaveCount(0);
+  await expect(content.locator('.no-invoices')).toBeVisible();
+  await expect(content.locator('.no-invoices')).toHaveText("You don't have any invoice yet.");
+});
+
+for (const orgMode of ['oneOrg', 'allOrgs']) {
+  msTest(`List the invoices for ${orgMode} generic error`, async ({ clientAreaCustomOrder }) => {
+    await MockBms.mockGetCustomOrderInvoices(clientAreaCustomOrder, { POST: { errors: { status: 400 } } });
+
+    if (orgMode === 'orgOrg') {
+      await clientAreaSwitchOrganization(clientAreaCustomOrder, DEFAULT_ORGANIZATION_INFORMATION.name);
+    }
+
+    const title = clientAreaCustomOrder.locator('.header-content').locator('.header-title');
+    await clientAreaCustomOrder.locator('.menu-client').locator('.menu-client-list').getByRole('listitem').nth(3).click();
+    await expect(title).toHaveText('Invoices');
+    const content = clientAreaCustomOrder.locator('.client-page-invoices');
+    await expect(content.locator('.no-invoices')).toBeHidden();
+    await expect(content.locator('.invoices-year-content-list-item')).toHaveCount(0);
+    await expect(clientAreaCustomOrder.locator('.main-content').locator('.form-error')).toHaveText('Could not retrieve your invoices.');
+    await expect(clientAreaCustomOrder.locator('.main-content').locator('.no-invoices')).toBeHidden();
+  });
+
+  msTest(`List the invoices for ${orgMode} timeout`, async ({ clientAreaCustomOrder }) => {
+    await MockBms.mockGetCustomOrderInvoices(clientAreaCustomOrder, { POST: { timeout: true } });
+
+    if (orgMode === 'orgOrg') {
+      await clientAreaSwitchOrganization(clientAreaCustomOrder, DEFAULT_ORGANIZATION_INFORMATION.name);
+    }
+
+    const title = clientAreaCustomOrder.locator('.header-content').locator('.header-title');
+    await clientAreaCustomOrder.locator('.menu-client').locator('.menu-client-list').getByRole('listitem').nth(3).click();
+    await expect(title).toHaveText('Invoices');
+    const content = clientAreaCustomOrder.locator('.client-page-invoices');
+    await expect(content.locator('.no-invoices')).toBeHidden();
+    await expect(content.locator('.invoices-year-content-list-item')).toHaveCount(0);
+    await expect(clientAreaCustomOrder.locator('.main-content').locator('.form-error')).toHaveText('Could not retrieve your invoices.');
+    await expect(clientAreaCustomOrder.locator('.main-content').locator('.no-invoices')).toBeHidden();
+  });
+}