[frontend] e2e create report + lot of page models

OpenCTI-Platform · Apr 26, 2024 · d712474 · d712474
1 parent 5a85a82
commit d712474
Show file tree

Hide file tree

Showing 50 changed files with 876 additions and 162 deletions.
diff --git a/opencti-platform/opencti-front/.eslintrc.js b/opencti-platform/opencti-front/.eslintrc.js
@@ -66,6 +66,7 @@ module.exports = {
         ignoreTemplateLiterals: true,
       },
     ],
+    '@typescript-eslint/lines-between-class-members': 'off',
     '@typescript-eslint/naming-convention': ['error', {
       selector: 'variable',
       format: ['camelCase', 'UPPER_CASE'],

diff --git a/opencti-platform/opencti-front/lang/front/en.json b/opencti-platform/opencti-front/lang/front/en.json
@@ -2010,6 +2010,7 @@
   "report_types": "Report type",
   "Reports": "Reports",
   "reports": "reports",
+  "Report actions": "Report actions",
   "Reports distribution": "Reports distribution",
   "Representation": "Representation",
   "Representation entity": "Representation entity",
@@ -2725,4 +2726,4 @@
   "Zoom": "Zoom",
   "Zoom in": "Zoom in",
   "Zoom out": "Zoom out"
-}
+}
diff --git a/opencti-platform/opencti-front/playwright.config.ts b/opencti-platform/opencti-front/playwright.config.ts
@@ -47,7 +47,7 @@ export default defineConfig({
     screenshot: "only-on-failure",
     ignoreHTTPSErrors: true,
   },
-  expect: { timeout: 200000 },
+  expect: { timeout: 20000 },
   timeout: 200000,
   /* Configure projects for major browsers */
   projects: [

diff --git a/opencti-platform/opencti-front/src/components/AutocompleteField.jsx b/opencti-platform/opencti-front/src/components/AutocompleteField.jsx
@@ -7,6 +7,7 @@ import { fieldToAutocomplete } from 'formik-mui';
 import { useField } from 'formik';
 import { isNil } from 'ramda';
 import { truncate } from '../utils/String';
+import { useFormatter } from './i18n';
 
 const AutocompleteField = (props) => {
   const {
@@ -24,6 +25,7 @@ const AutocompleteField = (props) => {
     endAdornment,
   } = props;
   const [, meta] = useField(name);
+  const { t_i18n } = useFormatter();
   const internalOnChange = React.useCallback(
     (_, value) => {
       if (typeof onInternalChange === 'function') {
@@ -100,6 +102,7 @@ const AutocompleteField = (props) => {
           edge="end"
           style={{ position: 'absolute', top: 5, right: 35 }}
           size="large"
+          title={t_i18n('Add')}
         >
           <Add />
         </IconButton>

diff --git a/opencti-platform/opencti-front/src/components/SelectField.jsx b/opencti-platform/opencti-front/src/components/SelectField.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { isNil } from 'ramda';
 import { getIn, useField } from 'formik';
+import { v4 as uuid } from 'uuid';
 import MuiSelect from '@mui/material/Select';
 import InputLabel from '@mui/material/InputLabel';
 import FormControl from '@mui/material/FormControl';
@@ -68,6 +69,8 @@ const SelectField = (props) => {
   const [, meta] = useField(name);
   const { value, ...otherProps } = fieldToSelect(props);
 
+  const labelId = uuid();
+
   return (
     <FormControl
       style={props.containerstyle}
@@ -76,6 +79,7 @@ const SelectField = (props) => {
       <InputLabel
         style={{ color: props.disabled ? '#4f4f4f' : '' }}
         variant={props.variant}
+        id={labelId}
       >
         {props.label}
       </InputLabel>
@@ -85,6 +89,7 @@ const SelectField = (props) => {
         onChange={internalOnChange}
         onFocus={internalOnFocus}
         onBlur={internalOnBlur}
+        labelId={labelId}
       />
       <FormHelperText
         variant={props.variant}

diff --git a/opencti-platform/opencti-front/src/private/components/analyses/reports/ReportPopover.jsx b/opencti-platform/opencti-front/src/private/components/analyses/reports/ReportPopover.jsx
@@ -45,6 +45,7 @@ const ReportPopover = ({ id }) => {
         value="popover"
         size="small"
         onClick={handleOpen}
+        title={t_i18n('Report actions')}
       >
         <MoreVert fontSize="small" color="primary" />
       </ToggleButton>

diff --git a/opencti-platform/opencti-front/src/private/components/common/form/ConfidenceField.tsx b/opencti-platform/opencti-front/src/private/components/common/form/ConfidenceField.tsx
@@ -57,6 +57,7 @@ const ConfidenceField: FunctionComponent<ConfidenceFieldProps> = ({
       icon={false}
       variant="outlined"
       style={{ position: 'relative' }}
+      aria-label={finalLabel}
     >
       <Field
         component={InputSliderField}

diff --git a/...mon/stix_core_objects_or_stix_relationships/StixCoreObjectOrCoreRelationshipLabelsView.js b/...mon/stix_core_objects_or_stix_relationships/StixCoreObjectOrCoreRelationshipLabelsView.js
@@ -157,7 +157,8 @@ const StixCoreObjectOrCoreRelationshipLabelsView = (props) => {
       <Security needs={[KNOWLEDGE_KNUPDATE]}>
         <IconButton
           color="primary"
-          aria-label="Label"
+          aria-label={t_i18n('Add new labels')}
+          title={t_i18n('Add new labels')}
           onClick={handleOpenAdd}
           style={{ float: 'left', margin: '-15px 0 0 -2px' }}
           size="large"

diff --git a/...ncti-front/src/private/components/common/stix_domain_objects/StixDomainObjectOverview.jsx b/...ncti-front/src/private/components/common/stix_domain_objects/StixDomainObjectOverview.jsx
@@ -140,22 +140,24 @@ class StixDomainObjectOverview extends Component {
                   />
                 </>
               )}
-              <Typography
-                variant="h3"
-                gutterBottom={true}
-                style={{
-                  marginTop:
-                    withPattern
-                    || (!withoutMarking && stixDomainObject.objectMarking)
-                      ? 20
-                      : 0,
-                }}
-              >
-                {t('Author')}
-              </Typography>
-              <ItemAuthor
-                createdBy={R.propOr(null, 'createdBy', stixDomainObject)}
-              />
+              <div>
+                <Typography
+                  variant="h3"
+                  gutterBottom={true}
+                  style={{
+                    marginTop:
+                      withPattern
+                      || (!withoutMarking && stixDomainObject.objectMarking)
+                        ? 20
+                        : 0,
+                  }}
+                >
+                  {t('Author')}
+                </Typography>
+                <ItemAuthor
+                  createdBy={R.propOr(null, 'createdBy', stixDomainObject)}
+                />
+              </div>
               {(displayConfidence || displayReliability) && (
                 <Grid container={true} columnSpacing={1}>
                   {displayReliability && (
@@ -236,7 +238,7 @@ class StixDomainObjectOverview extends Component {
                 disabled={!stixDomainObject.workflowEnabled}
               />
               {displayAssignees && (
-                <>
+                <div>
                   <Typography
                     variant="h3"
                     gutterBottom={true}
@@ -245,10 +247,10 @@ class StixDomainObjectOverview extends Component {
                     {t('Assignees')}
                   </Typography>
                   <ItemAssignees assignees={stixDomainObject.objectAssignee ?? []}/>
-                </>
+                </div>
               )}
               {displayParticipants && (
-                <>
+                <div>
                   <Typography
                     variant="h3"
                     gutterBottom={true}
@@ -257,7 +259,7 @@ class StixDomainObjectOverview extends Component {
                     {t('Participants')}
                   </Typography>
                   <ItemParticipants participants={stixDomainObject.objectParticipant ?? []}/>
-                </>
+                </div>
               )}
               <Typography
                 variant="h3"
@@ -285,14 +287,16 @@ class StixDomainObjectOverview extends Component {
                 {t('Platform creation date')}
               </Typography>
               {fldt(stixDomainObject.created_at)}
-              <Typography
-                variant="h3"
-                gutterBottom={true}
-                style={{ marginTop: 20 }}
-              >
-                {t('Creators')}
-              </Typography>
-              <ItemCreators creators={stixDomainObject.creators ?? []} />
+              <div>
+                <Typography
+                  variant="h3"
+                  gutterBottom={true}
+                  style={{ marginTop: 20 }}
+                >
+                  {t('Creators')}
+                </Typography>
+                <ItemCreators creators={stixDomainObject.creators ?? []} />
+              </div>
               <div style={{ marginTop: 20 }}>
                 <Typography
                   variant="h3"

diff --git a/opencti-platform/opencti-front/src/private/components/data/ToolBar.jsx b/opencti-platform/opencti-front/src/private/components/data/ToolBar.jsx
@@ -1354,7 +1354,7 @@ class ToolBar extends Component {
                 },
               }}
             >
-              <Toolbar style={{ minHeight: 54 }}>
+              <Toolbar style={{ minHeight: 54 }} data-testid='opencti-toolbar'>
                 <Typography
                   className={classes.title}
                   color="inherit"

diff --git a/opencti-platform/opencti-front/tests_e2e/Export file/exportReport.spec.ts b/opencti-platform/opencti-front/tests_e2e/Export file/exportReport.spec.ts
@@ -1,17 +1,17 @@
 import { expect, test } from '../fixtures/baseFixtures';
 import ReportDetailsPage from '../model/reportDetails.pageModel';
-import FormExportPageModel from '../model/formExport.pageModel';
+import FormExportPageModel from '../model/form/formExport.pageModel';
 import ReportPage from '../model/report.pageModel';
-import ReportFormPage from '../model/reportForm.pageModel';
+import ReportFormPage from '../model/form/reportForm.pageModel';
 
 test.skip('Add an Export in a report and check the export is present in content', async ({ page }) => {
   const reportPage = new ReportPage(page);
   const reportForm = new ReportFormPage(page);
   const reportDetailsPage = new ReportDetailsPage(page);
   const formExportPage = new FormExportPageModel(page);
   await page.goto('/dashboard/analyses/reports');
-  await reportPage.addNewReport();
-  await reportForm.fillNameInput('test e2e object-markings');
+  await reportPage.openNewReportForm();
+  await reportForm.nameField.fill('test e2e object-markings');
   await reportPage.getCreateReportButton().click();
   await reportPage.getItemFromList('test e2e object-markings').click();
   await reportDetailsPage.getExportButton().click();

diff --git a/opencti-platform/opencti-front/tests_e2e/dashboard/createDashboard.spec.ts b/opencti-platform/opencti-front/tests_e2e/dashboard/createDashboard.spec.ts
@@ -1,7 +1,7 @@
 import { expect, test } from '../fixtures/baseFixtures';
 import DashboardPage from '../model/dashboard.pageModel';
 import DashboardDetailsPage from '../model/dashboardDetails.pageModel';
-import DashboardFormPage from '../model/dashboardForm.pageModel';
+import DashboardFormPage from '../model/form/dashboardForm.pageModel';
 
 test('Create a new dashboard page', async ({ page }) => {
   const dashboardPage = new DashboardPage(page);

diff --git a/opencti-platform/opencti-front/tests_e2e/dashboard/updateDashboard.spec.ts b/opencti-platform/opencti-front/tests_e2e/dashboard/updateDashboard.spec.ts
@@ -1,7 +1,7 @@
 import { expect, test } from '../fixtures/baseFixtures';
 import DashboardPage from '../model/dashboard.pageModel';
 import DashboardDetailsPage from '../model/dashboardDetails.pageModel';
-import DashboardFormPage from '../model/dashboardForm.pageModel';
+import DashboardFormPage from '../model/form/dashboardForm.pageModel';
 
 test('Create a new dashboard page and test update', async ({ page }) => {
   const dashboardPage = new DashboardPage(page);

diff --git a/opencti-platform/opencti-front/tests_e2e/enableReferences/addReportObservable.spec.ts b/opencti-platform/opencti-front/tests_e2e/enableReferences/addReportObservable.spec.ts
@@ -2,20 +2,20 @@ import { expect, test } from '../fixtures/baseFixtures';
 import ReportPage from '../model/report.pageModel';
 import ContainerObservablesPage from '../model/containerObservables.pageModel';
 import ReportDetailsPage from '../model/reportDetails.pageModel';
-import ReportFormPage from '../model/reportForm.pageModel';
+import ReportFormPage from '../model/form/reportForm.pageModel';
 import LoginPage from '../model/login.pageModel';
 import DashboardPage from '../model/dashboard.pageModel';
 import CommitMessagePage from '../model/commitMessage.pageModel';
 import ContainerAddObservablesPage from '../model/containerAddObservables.pageModel';
 import RolesSettingsPage from '../model/rolesSettings.pageModel';
-import RoleFormPage from '../model/roleForm.pageModel';
+import RoleFormPage from '../model/form/roleForm.pageModel';
 import RolePage from '../model/role.pageModel';
 import GroupsSettingsPage from '../model/groupsSettings.pageModel';
 import GroupPage from '../model/group.pageModel';
-import GroupFormPage from '../model/groupForm.pageModel';
+import GroupFormPage from '../model/form/groupForm.pageModel';
 import UsersSettingsPage from '../model/usersSettings.pageModel';
 import UserPage from '../model/user.pageModel';
-import UserFormPage from '../model/userForm.pageModel';
+import UserFormPage from '../model/form/userForm.pageModel';
 import LeftBarPage from '../model/menu/leftBar.pageModel';
 
 const noBypassUserAuthFile = 'tests_e2e/.setup/.auth/no-bypass-ref-user.json';
@@ -116,12 +116,12 @@ test('Add and remove observable from Observables tab of a Report as Admin user',
   // Create a report and check that adding an observable is possible
   await page.goto('/dashboard/analyses/reports');
   await page.getByTestId('ChevronRightIcon').click();
-  await reportPage.addNewReport();
-  await reportForm.fillNameInput('Test add observable e2e');
+  await reportPage.openNewReportForm();
+  await reportForm.nameField.fill('Test add observable e2e');
   await reportPage.getCreateReportButton().click();
   await reportPage.getItemFromList('Test add observable e2e').click();
   await expect(reportDetailsPage.getReportDetailsPage()).toBeVisible();
-  await reportDetailsPage.getObservablesTab().click();
+  await reportDetailsPage.goToObservablesTab();
   await expect(containerObservablesPage.getContainerObservablesPage()).toBeVisible();
   await containerObservablesPage.getAddObservableListButton().click();
   await containerAddObservablesPage.createNewIPV4Observable('8.8.8.8');
@@ -140,7 +140,7 @@ test('Add and remove observable from Observables tab of a Report as Admin user',
 
   await leftBarPage.clickOnMenu('Analyses', 'Reports');
   await reportPage.getItemFromList('Test add observable e2e').click();
-  await reportDetailsPage.getObservablesTab().click();
+  await reportDetailsPage.goToObservablesTab();
   await expect(containerObservablesPage.getContainerObservablesPage()).toBeVisible();
   await containerObservablesPage.getAddObservableListButton().click();
   await expect(containerAddObservablesPage.getObservable('IPv4 address 8.8.8.8')).toBeVisible();
@@ -168,12 +168,12 @@ test.describe('Add and remove observable from Observables tab of a Report as noB
     // Create a report and check that adding an observable is possible
     await page.goto('/dashboard/analyses/reports');
     await page.getByTestId('ChevronRightIcon').click();
-    await reportPage.addNewReport();
-    await reportForm.fillNameInput('Test add observable e2e 2');
+    await reportPage.openNewReportForm();
+    await reportForm.nameField.fill('Test add observable e2e 2');
     await reportPage.getCreateReportButton().click();
     await reportPage.getItemFromList('Test add observable e2e 2').click();
     await expect(reportDetailsPage.getReportDetailsPage()).toBeVisible();
-    await reportDetailsPage.getObservablesTab().click();
+    await reportDetailsPage.goToObservablesTab();
     await expect(containerObservablesPage.getContainerObservablesPage()).toBeVisible();
     await containerObservablesPage.getAddObservableListButton().click();
     await containerAddObservablesPage.createNewIPV4Observable('9.9.9.9');
@@ -192,7 +192,7 @@ test.describe('Add and remove observable from Observables tab of a Report as noB
 
     await leftBarPage.clickOnMenu('Analyses', 'Reports');
     await reportPage.getItemFromList('Test add observable e2e 2').click();
-    await reportDetailsPage.getObservablesTab().click();
+    await reportDetailsPage.goToObservablesTab();
     await expect(containerObservablesPage.getContainerObservablesPage()).toBeVisible();
     await containerObservablesPage.getAddObservableListButton().click();
     await expect(containerAddObservablesPage.getObservable('IPv4 address 9.9.9.9')).toBeVisible();

diff --git a/opencti-platform/opencti-front/tests_e2e/groupings/createGrouping.spec.ts b/opencti-platform/opencti-front/tests_e2e/groupings/createGrouping.spec.ts
@@ -1,6 +1,6 @@
 import { expect, test } from '../fixtures/baseFixtures';
 import GroupingsPage from '../model/grouping.pageModel';
-import GroupingFormPage from '../model/groupingForm.pageModel';
+import GroupingFormPage from '../model/form/groupingForm.pageModel';
 import GroupingDetailsPage from '../model/groupingDetails.pageModel';
 import StixDomainObjectContentTabPage from '../model/StixDomainObjectContentTab.pageModel';
 

diff --git a/opencti-platform/opencti-front/tests_e2e/intrusionSet/createIntrusionSetRelationship.spec.ts b/opencti-platform/opencti-front/tests_e2e/intrusionSet/createIntrusionSetRelationship.spec.ts
@@ -1,8 +1,8 @@
 import { expect, test } from '../fixtures/baseFixtures';
 import IntrusionSetPage from '../model/intrusionSet.pageModel';
-import IntrusionSetFormPage from '../model/intrusionSetForm.pageModel';
+import IntrusionSetFormPage from '../model/form/intrusionSetForm.pageModel';
 import IntrusionSetDetailsPage from '../model/intrusionSetDetails.pageModel';
-import StixCoreRelationshipCreationFromEntityFormPage from '../model/stixCoreRelationshipCreationFromEntityForm.pageModel';
+import StixCoreRelationshipCreationFromEntityFormPage from '../model/form/stixCoreRelationshipCreationFromEntityForm.pageModel';
 
 test('Create a new relationship in intrusion set knowledge', async ({ page }) => {
   const intrusionSetPage = new IntrusionSetPage(page);

diff --git a/opencti-platform/opencti-front/tests_e2e/model/field/AutocompleteField.pageModel.ts b/opencti-platform/opencti-front/tests_e2e/model/field/AutocompleteField.pageModel.ts
@@ -0,0 +1,37 @@
+import { Locator, Page } from '@playwright/test';
+
+export default class AutocompleteFieldPageModel {
+  private readonly inputLocator: Locator;
+  private readonly parentLocator: Locator;
+
+  constructor(
+    private readonly page: Page,
+    private readonly label: string,
+    private readonly multiple: boolean,
+    readonly rootLocator?: Locator,
+  ) {
+    this.inputLocator = (rootLocator ?? page).getByRole('combobox', { name: label });
+    this.parentLocator = this.inputLocator.locator('../../../..');
+  }
+
+  async selectOption(option: string) {
+    await this.inputLocator.click();
+    await this.inputLocator.fill(option);
+    const list = this.page.getByRole('listbox', { name: this.label });
+    return list.getByText(option, { exact: true }).click();
+  }
+
+  getOption(option: string) {
+    return this.multiple
+      ? this.parentLocator.getByRole('button', { name: option })
+      : this.inputLocator;
+  }
+
+  openAddOptionForm() {
+    return this.parentLocator.getByRole('button', { name: 'Add', exact: true }).click();
+  }
+
+  getByText(input: string) {
+    return this.parentLocator.getByText(input);
+  }
+}