Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

11503 e2e tests for process editor #12976

Merged
merged 28 commits into from
Jun 24, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
934acea
add first test for process editor and logic to click inside bpmn
wrt95 Jun 4, 2024
d7f40a2
removing spinner and implementing drag on editor
wrt95 Jun 5, 2024
2ca3fa2
refactoring logic
wrt95 Jun 5, 2024
2fd5e95
Almost working
wrt95 Jun 6, 2024
4f51797
Merge branch 'main' into 11503-e2e-tests-for-process-editor
wrt95 Jun 6, 2024
5d93f91
implementing more on new test
wrt95 Jun 6, 2024
8dcde7b
writing more tests
wrt95 Jun 7, 2024
c5034fe
adding tests for actions
wrt95 Jun 10, 2024
fc01a1d
Remove feature flag for endEvent in process and update url to docs
wrt95 Jun 10, 2024
65a6c79
Merge branch 'main' into 11503-e2e-tests-for-process-editor
wrt95 Jun 10, 2024
1dbe3ce
Merge branch 'main' into 11503-e2e-tests-for-process-editor
wrt95 Jun 10, 2024
d55661d
adding changed files
wrt95 Jun 12, 2024
e6daeaf
Merge branch 'main' into 11503-e2e-tests-for-process-editor
wrt95 Jun 12, 2024
4bf2ccd
Merge branch '12714-remove-feature-flag-and-update-url-to-docs' into …
wrt95 Jun 12, 2024
5718b77
Merge branch 'main' into 12714-remove-feature-flag-and-update-url-to-…
wrt95 Jun 12, 2024
7517e9a
Completing test for CustomEndEvent
wrt95 Jun 13, 2024
7403fda
Merge branch 'main' into 11503-e2e-tests-for-process-editor
wrt95 Jun 13, 2024
e7c0969
Merge branch 'main' into 12714-remove-feature-flag-and-update-url-to-…
wrt95 Jun 13, 2024
13f80e3
removing unused comments
wrt95 Jun 13, 2024
a3e8e30
Merge branch 'main' into 12714-remove-feature-flag-and-update-url-to-…
wrt95 Jun 17, 2024
3d3f1a8
fixing feedback from PR
wrt95 Jun 17, 2024
d206b28
Merge branch 'main' into 12714-remove-feature-flag-and-update-url-to-…
wrt95 Jun 17, 2024
bfd28a0
Merge branch 'main' into 12714-remove-feature-flag-and-update-url-to-…
wrt95 Jun 17, 2024
918e0f3
removing css variable
wrt95 Jun 17, 2024
e5209b2
Merge branch '12714-remove-feature-flag-and-update-url-to-docs' of gi…
wrt95 Jun 17, 2024
e8d43fe
Merge branch 'main' into 12714-remove-feature-flag-and-update-url-to-…
wrt95 Jun 17, 2024
66562e6
Merge branch '12714-remove-feature-flag-and-update-url-to-docs' into …
wrt95 Jun 17, 2024
8daf66b
merge main
wrt95 Jun 17, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions frontend/language/src/nb.json
Original file line number Diff line number Diff line change
Expand Up @@ -763,12 +763,12 @@
"process_editor.configuration_panel.edit_policy_alert_message": "Du må ha tilgangsregler som dekker alle oppgaver. Gå til Tilganger for å sjekke om du har en regel som dekker denne oppgaven. Hvis du ikke har en regel for oppgaven, kan du enten lage en ny regel eller inkludere denne oppgaven i en regel som allerede finnes.",
"process_editor.configuration_panel.edit_policy_open_policy_editor_button": "Gå til Tilganger",
"process_editor.configuration_panel.edit_policy_open_policy_editor_heading": "Åpne Tilganger for å redigere tilgangsregler",
"process_editor.configuration_panel_actions_action_label": "Handling {{ actionIndex }}: {{ actionName }}",
"process_editor.configuration_panel_actions_action_label": "Handling {{actionIndex}}: {{actionName}}",
"process_editor.configuration_panel_actions_action_type_help_text": "Hjelpetekst for valg av handlingstype",
"process_editor.configuration_panel_actions_add_new": "Legg til ny handling",
"process_editor.configuration_panel_actions_combobox_description": "Velg en predefinert handling eller definer din egen ved å skrive inn navnet som fritekst i feltet",
"process_editor.configuration_panel_actions_custom_action": "Skriv en egendefinert handling",
"process_editor.configuration_panel_actions_delete_action": "Slett {{ actionName }}-handlingen",
"process_editor.configuration_panel_actions_delete_action": "Slett {{actionName}}-handlingen",
"process_editor.configuration_panel_actions_set_server_action_info": "Handlingen skal utføres uten å endre status på prosessen. Dette alternativet er kun tilgjengelig for egendefinerte handlinger.",
"process_editor.configuration_panel_actions_set_server_action_label": "Handlingen skal ikke påvirke prosessen",
"process_editor.configuration_panel_actions_title": "Handlinger",
Expand Down Expand Up @@ -824,7 +824,7 @@
"process_editor.configuration_panel_select_data_model": "Velg en datamodell",
"process_editor.configuration_panel_set_data_model": "Datamodell:",
"process_editor.configuration_panel_set_data_model_link": "Legg til datamodell",
"process_editor.configuration_panel_set_data_types_to_sign": "Datyper som skal signeres:",
"process_editor.configuration_panel_set_data_types_to_sign": "Datatyper som skal signeres:",
"process_editor.configuration_panel_signing_task": "Oppgave: Signering",
"process_editor.configuration_view_panel_id_label": "ID:",
"process_editor.configuration_view_panel_name_label": "Navn: ",
Expand All @@ -848,7 +848,7 @@
"process_editor.sync_error_layout_sets_data_type": "En feil oppsto under synkronisering av datatype i filen 'layoutsets.json'. Vennligst forsikre deg om at 'layoutsets.json' kun inneholder gyldig JSON-struktur og prøv igjen.",
"process_editor.sync_error_layout_sets_task_id": "En feil oppsto under synkronisering av oppgave-ID i filen 'layoutsets.json'. Vennligst forsikre deg om at 'layoutsets.json' kun inneholder gyldig JSON-struktur og prøv igjen.",
"process_editor.sync_error_policy_file_task_id": "En feil oppsto under synkronisering av oppgave-ID i filen 'policy.json'. Vennligst forsikre deg om at 'policy.json' kun inneholder gyldig JSON-struktur og prøv igjen.",
"process_editor.too_old_version_helptext_content": "Du har nå versjon {{ version }} av app-biblioteket vårt.\n\nVi lanserer muligheten til å redigere prosessen sammen med versjon 8 av biblioteket. Når du har oppgradert til versjon 8, får du funksjonalitet for å redigere prosessen.\n\nFør det kan du bare se prosessen og eventuelle oppsett som er knyttet til den.",
"process_editor.too_old_version_helptext_content": "Du har nå versjon {{version}} av app-biblioteket vårt.\n\nVi lanserer muligheten til å redigere prosessen sammen med versjon 8 av biblioteket. Når du har oppgradert til versjon 8, får du funksjonalitet for å redigere prosessen.\n\nFør det kan du bare se prosessen og eventuelle oppsett som er knyttet til den.",
"process_editor.too_old_version_helptext_title": "Informasjon om hvorfor prosessen ikke kan redigeres",
"process_editor.too_old_version_title": "Prosessen kan ikke redigeres",
"process_editor.unknown_heading_error_message": "Obs, noe gikk galt!",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -163,6 +163,7 @@ class SupportedPaletteProvider {
className: 'bpmn-icon-task-generic bpmn-icon-data-task',
title: translate('Create Altinn Data Task'),
action: {
click: createCustomTask('data'),
dragstart: createCustomTask('data'),
},
},
Expand All @@ -171,6 +172,7 @@ class SupportedPaletteProvider {
title: translate('Create Altinn Feedback Task'),
className: 'bpmn-icon-task-generic bpmn-icon-feedback-task',
action: {
click: createCustomTask('feedback'),
dragstart: createCustomTask('feedback'),
},
},
Expand All @@ -179,6 +181,7 @@ class SupportedPaletteProvider {
className: 'bpmn-icon-task-generic bpmn-icon-signing-task',
title: translate('Create Altinn signing Task'),
action: {
click: createCustomSigningTask(),
dragstart: createCustomSigningTask(),
},
},
Expand All @@ -187,6 +190,7 @@ class SupportedPaletteProvider {
className: 'bpmn-icon-task-generic bpmn-icon-confirmation-task',
title: translate('Create Altinn Confirm Task'),
action: {
click: createCustomConfirmationTask(),
dragstart: createCustomConfirmationTask(),
},
},
Expand All @@ -195,6 +199,7 @@ class SupportedPaletteProvider {
className: `bpmn-icon-task-generic ${shouldDisplayFeature('displayPaymentTaskProcessEditor') ? 'bpmn-icon-payment-task' : 'payment-is-hidden-based-on-feature-toggle'}`,
title: translate('Payment'),
action: {
click: createCustomPaymentTask(),
dragstart: createCustomPaymentTask(),
},
},
Expand Down
Original file line number Diff line number Diff line change
@@ -1,14 +1,3 @@
.container {
visibility: hidden;
}

.spinner {
display: flex;
flex: 1;
justify-content: center;
align-content: center;
}

.editorContainer {
border: 1px solid var(--fds-semantic-border-neutral-default);
border-radius: 5px;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,6 @@ jest.mock('../../../hooks/useBpmnEditor', () => ({

describe('BPMNEditor', () => {
afterEach(jest.clearAllMocks);
it('render spinner when pendingApiOperations is true', () => {
renderBpmnEditor({ pendingApiOperations: true });

screen.getByText(textMock('process_editor.loading'));
});

it('does not render spinner when pendingApiOperations is false', () => {
renderBpmnEditor({ pendingApiOperations: false });
Expand Down
Original file line number Diff line number Diff line change
@@ -1,28 +1,10 @@
import React from 'react';
import classes from './BPMNEditor.module.css';
import { useBpmnEditor } from '../../../hooks/useBpmnEditor';

import './BPMNEditor.css';
import { useBpmnApiContext } from '../../../contexts/BpmnApiContext';
import { StudioSpinner } from '@studio/components';
import { useTranslation } from 'react-i18next';

export const BPMNEditor = (): React.ReactElement => {
const { t } = useTranslation();
const { canvasRef } = useBpmnEditor();
const { pendingApiOperations } = useBpmnApiContext();

return (
<>
{pendingApiOperations && (
<div className={classes.spinner}>
<StudioSpinner spinnerTitle={t('process_editor.loading')} />
</div>
)}
<div
className={pendingApiOperations ? classes.container : classes.editorContainer}
ref={canvasRef}
></div>
</>
);
return <div className={classes.editorContainer} ref={canvasRef}></div>;
};
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,12 @@ import { BPMNEditor } from './BPMNEditor';
import { VersionHelpText } from './VersionHelpText';

export const Canvas = (): React.ReactElement => {
const { isEditAllowed, bpmnXml } = useBpmnContext();
const { isEditAllowed } = useBpmnContext();

return (
<>
{!isEditAllowed && <VersionHelpText />}
<div className={classes.wrapper} key={bpmnXml}>
{isEditAllowed ? <BPMNEditor /> : <BPMNViewer />}
</div>
<div className={classes.wrapper}>{isEditAllowed ? <BPMNEditor /> : <BPMNViewer />}</div>
</>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export const EditActions = () => {
<>
{actionElements.map((actionElement: ModdleElement, index: number) => (
<EditAction
key={actionElement.action}
key={actionElement.action + index.toString()}
actionElementToEdit={actionElement}
availablePredefinedActions={availablePredefinedActions}
bpmnDetails={bpmnDetails}
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions frontend/testing/playwright/enum/AppNames.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,5 @@ export enum AppNames {
SETTINGS_MODAL_APP = 'settings-modal-app-test',
UI_EDITOR_APP = 'ui-editor-app-test',
TEXT_EDITOR_APP = 'text-editor-app-test',
PROCESS_EDITOR_APP = 'process-editor-app-test',
}
1 change: 1 addition & 0 deletions frontend/testing/playwright/enum/TestNames.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,5 @@ export enum TestNames {
GIT_SYNC = 'git-sync',
SETTINGS_MODAL = 'settings-modal',
TEXT_EDITOR = 'text-editor',
PROCESS_EDITOR = 'process-editor',
}
20 changes: 20 additions & 0 deletions frontend/testing/playwright/helpers/BpmnJSQuery.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import type { Page } from '@playwright/test';

type SvgElement = 'svg' | 'g';

export class BpmnJSQuery {
public readonly page: Page;

constructor(page: Page) {
this.page = page;
}

/**
* Gets the BPMN element by its 'data-element-id'
*/
public async getTaskByIdAndType(id: string, type: SvgElement): Promise<string> {
const elementSelector = `${type}[data-element-id="${id}"]`;
await this.page.waitForSelector(elementSelector);
return elementSelector;
}
}
9 changes: 4 additions & 5 deletions frontend/testing/playwright/pages/DataModelPage.ts
Original file line number Diff line number Diff line change
Expand Up @@ -113,11 +113,10 @@ export class DataModelPage extends BasePage {
}

public async checkThatSuccessAlertIsVisibleOnScreen(): Promise<void> {
await this.page
.getByRole('alert', {
name: this.textMock('schema_editor.data_model_generation_success_message'),
})
.isVisible();
const alert = this.page.getByText(
this.textMock('schema_editor.data_model_generation_success_message'),
);
await expect(alert).toBeVisible();
}

public async checkThatDataModelOptionExists(option: string): Promise<void> {
Expand Down
106 changes: 106 additions & 0 deletions frontend/testing/playwright/pages/GiteaPage.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import type { LanguageCode } from '../enum/LanguageCode';
import { BasePage } from '../helpers/BasePage';
import type { Environment } from '../helpers/StudioEnvironment';
import type { Page } from '@playwright/test';
import { type BpmnTaskType } from '../types/BpmnTaskType';
import { expect } from '@playwright/test';

// Since this page is Gitea's page, it's not using the nb/en.json files, which are used in the frontend.
const giteaPageTexts: Record<string, string> = {
Expand All @@ -12,6 +14,8 @@ const giteaPageTexts: Record<string, string> = {
dataModelBindings: 'dataModelBindings',
config: 'config',
texts: 'texts',
process: 'process',
applicationmetadata: 'applicationmetadata',
};

export class GiteaPage extends BasePage {
Expand Down Expand Up @@ -105,4 +109,106 @@ export class GiteaPage extends BasePage {
public async verifyTextIdAndValue(id: string, value: string): Promise<void> {
await this.page.getByText(`"id": "${id}", "value": "${value}"`, { exact: true }).isVisible();
}

public async clickOnProcessFilesButton(): Promise<void> {
await this.page.getByRole('link', { name: giteaPageTexts['process'], exact: true }).click();
}

public async clickOnProcessBpmnFile(): Promise<void> {
await this.page.getByRole('link', { name: `${giteaPageTexts['process']}.bpmn` }).click();
}

public async verifyThatTheNewTaskIsVisible(id: string, task: BpmnTaskType): Promise<void> {
const text = this.page.getByText(`<bpmn:task id="${id}" name="Altinn ${task} task">`);
await expect(text).toBeVisible();
}

public async verifyThatTheNewTaskIsHidden(id: string, task: BpmnTaskType): Promise<void> {
await this.page.getByText(`<bpmn:task id="${id}" name="Altinn ${task} task">`).isHidden();
}

public async verifySequenceFlowDirection(fromId: string, toId: string): Promise<void> {
const firstPartOfText = this.page.getByText('<bpmn:sequenceFlow id="Flow_');
await expect(firstPartOfText).toBeVisible();

const secondPartOfText = this.page.getByText(`" sourceRef="${fromId}" targetRef="${toId}" />`);
await expect(secondPartOfText).toBeVisible();
}

public async clickOnApplicationMetadataFile(): Promise<void> {
await this.page
.getByRole('link', { name: `${giteaPageTexts['applicationmetadata']}.json` })
.click();
}

public async verifyIdInDataModel(id: string, dataModel: string): Promise<void> {
const text = `
"id": "${dataModel}",
"allowedContentTypes": [
"application/xml"
],
"appLogic": {
"autoCreate": true,
"classRef": "Altinn.App.Models.${dataModel}.${dataModel}",
"allowAnonymousOnStateless": false,
"autoDeleteOnProcessEnd": false
},
"taskId": "${id}",
"maxCount": 1,
"minCount": 1,
"enablePdfCreation": true,
"enableFileScan": false,
"validationErrorOnPendingFileScan": false,
"enabledFileAnalysers": [],
"enabledFileValidators": []
`;
const textLocator = this.page.getByText(text);
expect(textLocator).toBeVisible();
}

public async verifyThatActionIsVisible(action: string): Promise<void> {
await this.page.getByText(`<altinn:action>${action}</altinn:action>`).isVisible();
}

public async verifyThatActionIsHidden(action: string): Promise<void> {
await this.page.getByText(`<altinn:action>${action}</altinn:action>`).isHidden();
}

public async verifyThatTaskIsHidden(task: string): Promise<void> {
await this.page.getByText(`<altinn:taskType>${task}</altinn:taskType>`).isHidden();
}

public async verifyThatTaskIsVisible(task: string): Promise<void> {
await this.page.getByText(`<altinn:taskType>${task}</altinn:taskType>`).isVisible();
}

public async verifyThatDataTypeToSignIsHidden(dataTypeToSign: string): Promise<void> {
const text = `
<altinn:signatureConfig>
<altinn:dataTypesToSign>
<altinn:dataType>${dataTypeToSign}</altinn:dataType>
</altinn:dataTypesToSign>
</altinn:signatureConfig>
`;
await this.page.getByText(text).isHidden();
}

public async verifyThatDataTypeToSignIsVisible(dataTypeToSign: string): Promise<void> {
const text = `
<altinn:signatureConfig>
<altinn:dataTypesToSign>
<altinn:dataType>${dataTypeToSign}</altinn:dataType>
</altinn:dataTypesToSign>
</altinn:signatureConfig>
`;
await this.page.getByText(text).isVisible();
}

public async verifyThatCustomReceiptIsNotVisible(): Promise<void> {
await this.page.getByText('"taskId": "CustomReceipt"').isHidden();
}

public async verifyThatCustomReceiptIsVisible(): Promise<void> {
await this.page.getByText('"taskId": "CustomReceipt"').isVisible();
}
}
Loading