feat(generator): update e2e test script

ref: MANAGER-14323

Signed-off-by: Nicolas Pierre-charles <nicolas.pierre-charles.ext@corp.ovh.com>

packages/manager/core/generator/app/conditional-templates/api/services-template-get.ts.hbs

@@ -1,4 +1,5 @@
-import { fetchIcebergV2, fetchIcebergV6, apiClient } from '@ovh-ux/manager-core-api';
+import { {{#if this.isApiV2}}fetchIcebergV2, {{/if}}{{#if this.isApiV6}}fetchIcebergV6, {{/if}}apiClient } from '@ovh-ux/manager-core-api';
+
 
 {{!-- {{#if unknownTypeList}}
 {{#each unknownTypeList}}
@@ -33,18 +34,15 @@ export const {{this.functionName}} = async ({{#if this.params}}params: {{pascalC
  *  Get listing with iceberg V6
  */
 export const getListingIcebergV6 = async ({ {{#if this.isPCI }}projectId, {{/if}}pageSize, page }: { {{#if this.isPCI }}projectId: string, {{/if}}pageSize: number, page: number }) => {
-  try {
-    const List = await fetchIcebergV6({
-      route: `{{#if this.isPCI }}{{this.mainApiPathPci}}{{else}}{{this.mainApiPath}}{{/if}}`,
-      pageSize,
-      page
-    }).then(
-      ({ data, status, totalCount }) => ({ data, status, totalCount }),
-    );
-    return List;
-  } catch (error) {
-    return null;
+  const { data, status, totalCount } = await fetchIcebergV6({
+    route: `{{#if this.isPCI }}{{this.mainApiPathPci}}{{else}}{{this.mainApiPath}}{{/if}}`,
+    pageSize,
+    page
+  });
+  if (status > 400) {
+    throw new Error();
   }
+  return { data, status, totalCount };
 };
 {{/if}}
 
@@ -54,18 +52,15 @@ export const getListingIcebergV6 = async ({ {{#if this.isPCI }}projectId, {{/if}
  */
 
 export const getListingIcebergV2 = async ({ {{#if this.isPCI }}projectId, {{/if}}pageSize, cursor }: { {{#if this.isPCI }}projectId: string, {{/if}}pageSize: number, cursor?: string }) => {
-  try {
-    const List = await fetchIcebergV2({
-      route: `{{#if this.isPCI }}{{this.mainApiPathPci}}{{else}}{{this.mainApiPath}}{{/if}}`,
-      pageSize,
-      cursor
-    }).then(
-      ({ data, status, cursorNext }) => ({ data, status, cursorNext }),
-    );
-    return List;
-  } catch (error) {
-    return null;
+  const { data, status, cursorNext } = await fetchIcebergV2({
+    route: `{{#if this.isPCI }}{{this.mainApiPathPci}}{{else}}{{this.mainApiPath}}{{/if}}`,
+    pageSize,
+    cursor
+  });
+  if (status > 400) {
+    throw new Error();
   }
+  return { data, status, cursorNext };
 };
 {{/if}}
 

packages/manager/core/generator/app/conditional-templates/listing/index-api-v2-pagination-cursor.tsx.hbs

@@ -44,6 +44,7 @@ export default function Listing() {
     queryKey: [`servicesListingIceberg`],
     queryFn: ({ pageParam }) => getListingIcebergV2({ {{#if isPCI }}projectId, {{/if}}pageSize, cursor: pageParam }),
     staleTime: Infinity,
+    retry: false,
     getNextPageParam: (lastPage) => lastPage.cursorNext as any,
   });
 

packages/manager/core/generator/app/conditional-templates/listing/index-api-v6-pagination-step.tsx.hbs

@@ -41,6 +41,7 @@ export default function Listing() {
   const { data, isError, error, isLoading, status }: any = useQuery({
     queryKey: [`servicesListingIceberg-${pageIndex + 1}-${pageSize}`],
     queryFn: () => getListingIcebergV6({ {{#if isPCI }}projectId, {{/if}}pageSize, page: pageIndex + 1 }),
+    retry: false,
     staleTime: Infinity,
     enabled: true,
   });

packages/manager/core/generator/app/conditional-translations/onboarding/Messages_fr_FR.json.hbs

@@ -9,5 +9,5 @@
   "guide2Title": "Monter votre NAS via un partage NFS",
   "guide2Description": "Découvrez comment monter un NAS via un partage NFS",
   "guide3Title": "Monter votre NAS sur Windows Server via CIFS",
-  "guide3Description": "Découvrez comment monter un NAS sur Windows Server via le protocole CIFS",
+  "guide3Description": "Découvrez comment monter un NAS sur Windows Server via le protocole CIFS"
 }

packages/manager/core/generator/app/index.js

@@ -93,11 +93,11 @@ export default (plop) => {
         validate: (apiPaths) => apiPaths.length > 0,
       },
       {
-        type: 'checkbox',
-        name: 'templates',
-        message: 'Which templates do you want to generate?',
-        choices: ['listing', 'dashboard', 'onboarding'],
+        type: 'list',
+        name: 'listingEndpoint',
+        message: 'What is the listing endpoint?',
         when: async (data) => {
+          data.templates = ['listing', 'onboarding', 'dashboard'];
           data.apiPathsByApiVersion = data.apiPaths.reduce(
             (res, path) => {
               res[isV2Endpoint(path) ? 'v2' : 'v6'].push(path);
@@ -113,93 +113,60 @@ export default (plop) => {
           );
           return true;
         },
-      },
-      {
-        type: 'list',
-        name: 'listingEndpoint',
-        message: 'What is the listing endpoint?',
-        when: (data) => data.templates.includes('listing'),
         choices: getApiV2AndV6GetEndpointsChoices,
       },
       {
         type: 'list',
         name: 'dashboardEndpoint',
         message: 'What is the dashboard endpoint?',
-        when: (data) => data.templates.includes('dashboard'),
         choices: getApiV2AndV6GetEndpointsChoices,
       },
       {
         type: 'input',
         name: 'serviceKey',
         message: 'What is the service key ?',
         when: (data) => {
-          // Add variables for templates
-
           data.isPCI = data.appName.indexOf('pci') > -1;
           if (data.isPCI) {
             data.pciName = data.appName.split('pci-')[1];
           }
-          data.hasListing = data.templates.includes('listing');
-          data.hasDashboard = data.templates.includes('dashboard');
-          data.hasOnboarding = data.templates.includes('onboarding');
-
           data.isApiV6 = data.apiV6Endpoints.get?.operationList.length > 0;
           data.isApiV2 = data.apiV2Endpoints.get?.operationList.length > 0;
 
-          if (data.hasListing) {
-            const [listingPath, listingFn] =
-              data.listingEndpoint?.split('-') || [];
-            data.listingEndpointPath = listingPath;
-            data.listingEndpointFn = listingFn;
-            data.mainApiPath = listingPath;
-            data.mainApiPathApiVersion = data.apiV2Endpoints.get?.operationList
-              .map(({ apiPath }) => apiPath)
-              .includes(data.mainApiPath)
-              ? 'v2'
-              : 'v6';
+          const [listingPath, listingFn] =
+            data.listingEndpoint?.split('-') || [];
+          data.listingEndpointPath = listingPath;
+          data.listingEndpointFn = listingFn;
+          data.mainApiPath = listingPath;
+          data.mainApiPathApiVersion = data.apiV2Endpoints.get?.operationList
+            .map(({ apiPath }) => apiPath)
+            .includes(data.mainApiPath)
+            ? 'v2'
+            : 'v6';
 
-            if (data.isPCI) {
-              if (data.isApiV2) {
-                data.mainApiPathPci = listingPath.replace(
-                  '{projectId}',
-                  '${projectId}',
-                );
-              }
-              if (data.isApiV6) {
-                data.mainApiPathPci = listingPath.replace(
-                  '{serviceName}',
-                  '${projectId}',
-                );
-              }
-            }
-          }
-          if (data.hasDashboard) {
-            const [dashboardPath, dashboardFn] =
-              data.dashboardEndpoint?.split('-') || [];
-            data.dashboardEndpointPath = dashboardPath;
-            data.dashboardEndpointFn = dashboardFn;
+          if (data.isPCI) {
+            data.mainApiPathPci = listingPath.replace(
+              data.isApiV2 ? '{projectId}' : '{serviceName}',
+              '${projectId}',
+            );
           }
+          const [dashboardPath, dashboardFn] =
+            data.dashboardEndpoint?.split('-') || [];
+          data.dashboardEndpointPath = dashboardPath;
+          data.dashboardEndpointFn = dashboardFn;
 
           const { apiV2Computed, apiV6Computed } = apiComputed(data);
           data.apiV2Computed = apiV2Computed;
           data.apiV6Computed = apiV6Computed;
 
-          return data.hasListing;
+          return true;
         },
         validate: (input) => input.length > 0,
       },
       {
         type: 'input',
         name: 'serviceKey',
         message: 'What is the service key in listing page ?',
-        when: (data) => {
-          // Add variables for templates
-          data.hasListing = data.templates.includes('listing');
-          data.hasDashboard = data.templates.includes('dashboard');
-          data.hasOnboarding = data.templates.includes('onboarding');
-
-          return data.templates.includes('listing');
-        },
         validate: (input) => input.length > 0,
       },
       {

packages/manager/core/generator/app/templates/cucumber.js

@@ -0,0 +1,20 @@
+const isCI = process.env.CI;
+
+module.exports = {
+  default: {
+    paths: ['e2e/features/**/*.feature'],
+    require: [
+      '../../../../playwright-helpers/bdd-setup.ts',
+      'e2e/**/*.step.ts',
+    ],
+    requireModule: ['ts-node/register'],
+    format: [
+      'summary',
+      isCI ? 'progress' : 'progress-bar',
+      !isCI && ['html', 'e2e/reports/cucumber-results-report.html'],
+      !isCI && ['usage-json', 'e2e/reports/cucumber-usage-report.json'],
+    ].filter(Boolean),
+    formatOptions: { snippetInterface: 'async-await' },
+    retry: 1,
+  },
+};

packages/manager/core/generator/app/templates/e2e/features/error.feature

@@ -0,0 +1,12 @@
+Feature: Error
+
+  Scenario Outline: Display an error if request fails
+    Given The service to fetch the data is <apiOk>
+    When User navigates to Home page
+    Then User "<sees>" the list of data
+    Then User sees <anyError> error
+
+    Examples:
+      | apiOk | sees        | anyError |
+      | OK    | sees        | no       |
+      | KO    | doesn't see | an       |

packages/manager/core/generator/app/templates/e2e/step-definitions/error.step.ts.hbs

@@ -0,0 +1,53 @@
+import { Given, When, Then } from '@cucumber/cucumber';
+import { expect } from '@playwright/test';
+import { ICustomWorld } from '../../../../../../playwright-helpers';
+import { ConfigParams, getUrl, setupNetwork } from '../utils';
+import { title } from '../../public/translations/listing/Messages_fr_FR.json';
+import {
+  manager_error_page_title,
+  manager_error_page_action_home_label,
+  manager_error_page_action_reload_label,
+} from '../../public/translations/{{appName}}/error/Messages_fr_FR.json';
+
+Given('The service to fetch the data is {word}', function(
+  this: ICustomWorld<ConfigParams>,
+  apiState: 'OK' | 'KO',
+) {
+  this.handlersConfig.isKo = apiState === 'KO';
+});
+
+When('User navigates to Home page', async function(
+  this: ICustomWorld<ConfigParams>,
+) {
+  await setupNetwork(this);
+  await this.page.goto(this.testContext.initialUrl || getUrl('root'), {
+    waitUntil: 'load',
+  });
+});
+
+Then('User {string} the list of data', async function(
+  this: ICustomWorld<ConfigParams>,
+  see: 'sees' | "doesn't see",
+) {
+  if (see === 'sees') {
+    const titleElement = await this.page.getByText(title);
+    await expect(titleElement).toBeVisible();
+  }
+});
+
+Then('User sees {word} error', async function(
+  this: ICustomWorld<ConfigParams>,
+  anyError: 'an' | 'no',
+) {
+  if (anyError === 'an') {
+    await expect(this.page.getByText(manager_error_page_title)).toBeVisible();
+
+    await expect(
+      this.page.getByText(manager_error_page_action_home_label),
+    ).toBeVisible();
+
+    await expect(
+      this.page.getByText(manager_error_page_action_reload_label),
+    ).toBeVisible();
+  }
+});

packages/manager/core/generator/app/templates/e2e/utils/constants.ts

@@ -0,0 +1,9 @@
+export const appUrl = 'http://localhost:9001/app';
+
+export const urls = {
+  root: '/',
+};
+
+export type AppRoute = keyof typeof urls;
+
+export const getUrl = (route: AppRoute) => `${appUrl}${urls[route]}`;