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.

Sign up for GitHub

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

refactor: Split ui-editor playwright tests into smaller tests #14008

Merged
merged 2 commits into from
Nov 7, 2024
Merged

refactor: Split ui-editor playwright tests into smaller tests #14008

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b5df5f8
refactor: Split ui-editor playwright tests into smaller tests
wrt95 Nov 7, 2024
290d913
Merge branch 'main' into refactor-playwright-tests-to-be-split-into-m…
wrt95 Nov 7, 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
161 changes: 100 additions & 61 deletions frontend/testing/playwright/tests/ui-editor/ui-editor-data-model-binding-and-gitea.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,21 +10,21 @@ import { Header } from '../../components/Header';
import { DataModelPage } from '../../pages/DataModelPage';
import { GiteaPage } from '../../pages/GiteaPage';

const getAppTestName = (app: string) => `bindings-${app}`;
// This line must be there to ensure that the tests do not run in parallell, and
// that the before all call is being executed before we start the tests
test.describe.configure({ mode: 'serial' });

// Before the tests starts, we need to create the data model app
test.beforeAll(async ({ testAppName, request, storageState }) => {
// Create a new app
const designerApi = new DesignerApi({ app: getAppTestName(testAppName) });
const designerApi = new DesignerApi({ app: testAppName });
const response = await designerApi.createApp(request, storageState as StorageState);
expect(response.ok()).toBeTruthy();
});

test.afterAll(async ({ request, testAppName }) => {
const gitea = new Gitea();
const response = await request.delete(
gitea.getDeleteAppEndpoint({ app: getAppTestName(testAppName) }),
);
const response = await request.delete(gitea.getDeleteAppEndpoint({ app: testAppName }));
expect(response.ok()).toBeTruthy();
});

Expand All @@ -41,31 +41,44 @@ const setupAndVerifyUiEditorPage = async (
localStorage.setItem('featureFlags', JSON.stringify(flag));
}, featureFlag);
}

await uiEditorPage.clickOnPageAccordion(pageName);
await uiEditorPage.verifyUiEditorPage(pageName);

return uiEditorPage;
};

test('That it is possible to add a data model binding, and that the files are updated accordingly in Gitea', async ({
test('That it is possible to drag in a new component, add a title to the newly added component and add a data model binding', async ({
page,
testAppName,
}): Promise<void> => {
const app = getAppTestName(testAppName);
const header = new Header(page, { app });
const dataModelPage = new DataModelPage(page, { app });
const giteaPage = new GiteaPage(page, { app });
const uiEditorPage = await setupAndVerifyUiEditorPage(page, app);

const pageName: string = 'Side1';
await openPageAccordionAndVerifyUpdatedUrl(uiEditorPage, pageName);
const uiEditorPage = await setupAndVerifyUiEditorPage(page, testAppName);
await uiEditorPage.verifyThatPageIsEmpty();

const newInputLabel: string = 'Input Label 1';
await uiEditorPage.dragComponentIntoDroppableList(ComponentType.Input);
await uiEditorPage.waitForComponentTreeItemToBeVisibleInDroppableList(ComponentType.Input);
await addNewLabelToTreeItemComponent(uiEditorPage, newInputLabel);

await uiEditorPage.clickOnComponentTextConfigAccordion();
await uiEditorPage.clickOnTitleTextButton();
await uiEditorPage.writeTitleTextInTextarea(newInputLabel);
await uiEditorPage.clickOnSaveNewLabelName();
await uiEditorPage.waitForTreeItemToGetNewLabel(newInputLabel);

await uiEditorPage.verifyThatTreeItemByNameIsNotVisibleInDroppableList(ComponentType.Input);
await uiEditorPage.verifyThatTreeItemByNameIsVisibleInDroppableList(newInputLabel);

await uiEditorPage.clickOnComponentDataModelBindingConfigAccordion();
await uiEditorPage.clickOnAddDataModelButton(ComponentType.Input);
await uiEditorPage.clickOnDataModelFieldBindingCombobox();
});

test('That it is possible to navigate to Gitea and that data model bindings are not present', async ({
page,
testAppName,
}): Promise<void> => {
const uiEditorPage = await setupAndVerifyUiEditorPage(page, testAppName);
const header = new Header(page, { app: testAppName });
const giteaPage = new GiteaPage(page, { app: testAppName });

await header.clickOnThreeDotsMenu();
await header.clickOnGoToGiteaRepository();
Expand All @@ -75,34 +88,53 @@ test('That it is possible to add a data model binding, and that the files are up
await giteaPage.goBackNPages(6); // 5 because of: Gitea -> App -> ui -> layoutsSet -> layouts -> page1.json

await uiEditorPage.verifyUiEditorPage(pageName);
});

test('That it is possible to navigate to datamodel page and create a new data model', async ({
page,
testAppName,
}): Promise<void> => {
await setupAndVerifyUiEditorPage(page, testAppName);
const header = new Header(page, { app: testAppName });
const dataModelPage = new DataModelPage(page, { app: testAppName });

await header.clickOnNavigateToPageInTopMenuHeader('data_model');
await dataModelPage.verifyDataModelPage();

// Add data model
await dataModelPage.clickOnCreateNewDataModelButton();
const dataModelName: string = 'testDataModel';
await dataModelPage.typeDataModelName(dataModelName);
await dataModelPage.clickOnCreateModelButton();
await dataModelPage.waitForDataModelToAppear(dataModelName);
await dataModelPage.clickOnGenerateDataModelButton();
await dataModelPage.checkThatSuccessAlertIsVisibleOnScreen();
await dataModelPage.waitForSuccessAlertToDisappear();
await createNewDataModel(dataModelPage, dataModelName);
});

test('That it is possible to navigate back to ui-editor page and add the data model', async ({
page,
testAppName,
}): Promise<void> => {
const uiEditorPage = await setupAndVerifyUiEditorPage(page, testAppName);
const header = new Header(page, { app: testAppName });

await header.clickOnNavigateToPageInTopMenuHeader('create');
await uiEditorPage.verifyUiEditorPage();
await openPageAccordionAndVerifyUpdatedUrl(uiEditorPage, pageName);
await uiEditorPage.clickOnPageAccordion(pageName);
await uiEditorPage.verifyUiEditorPage(pageName);
await uiEditorPage.clickOnTreeItem(newInputLabel);

await uiEditorPage.clickOnComponentDataModelBindingConfigAccordion();
await uiEditorPage.clickOnAddDataModelButton(ComponentType.Input);
await uiEditorPage.clickOnDataModelFieldBindingCombobox();
await uiEditorPage.verifyThatThereAreOptionsInTheDataModelFieldList();

const dataModelBindingName = 'property1';
await uiEditorPage.clickOnDataModelFieldPropertyOption(dataModelBindingName);
await uiEditorPage.clickOnSaveDataModel();
await uiEditorPage.waitForDataModelToBeSelected();
});

test('That it is possible to upload the changes to Gitea and view the changes in Gitea', async ({
page,
testAppName,
}): Promise<void> => {
await setupAndVerifyUiEditorPage(page, testAppName);
const header = new Header(page, { app: testAppName });
const giteaPage = new GiteaPage(page, { app: testAppName });

await header.clickOnUploadLocalChangesButton();
await header.clickOnValidateChanges();
Expand All @@ -117,31 +149,31 @@ test('That it is possible to add a data model binding, and that the files are up
);
});

test('That is possible to select a different data model binding, and that the files are updated accordingly in Gitea', async ({
test('That it is possible to navigate to data model page and create another data model', async ({
page,
testAppName,
}): Promise<void> => {
const app = getAppTestName(testAppName);
const header = new Header(page, { app });
const dataModelPage = new DataModelPage(page, { app });
const uiEditorPage = await setupAndVerifyUiEditorPage(page, app, ['multipleDataModelsPerTask']);
const pageName: string = 'Side1';
const giteaPage = new GiteaPage(page, { app });
await setupAndVerifyUiEditorPage(page, testAppName, ['multipleDataModelsPerTask']);
const header = new Header(page, { app: testAppName });
const dataModelPage = new DataModelPage(page, { app: testAppName });

await header.clickOnNavigateToPageInTopMenuHeader('data_model');
await createNewDataModel(dataModelPage, newDataModel);
});

const newDataModel = 'testDataModel2';
await dataModelPage.clickOnCreateNewDataModelButton();
await dataModelPage.typeDataModelName(newDataModel);
await dataModelPage.clickOnCreateModelButton();
await dataModelPage.waitForDataModelToAppear(newDataModel);
await dataModelPage.clickOnGenerateDataModelButton();
await dataModelPage.checkThatSuccessAlertIsVisibleOnScreen();
await dataModelPage.waitForSuccessAlertToDisappear();
test('That it is possible to navigate back to ui-editor page and add the newly added data model using data model binding combobox', async ({
page,
testAppName,
}): Promise<void> => {
const uiEditorPage = await setupAndVerifyUiEditorPage(page, testAppName, [
'multipleDataModelsPerTask',
]);
const header = new Header(page, { app: testAppName });

await header.clickOnNavigateToPageInTopMenuHeader('create');
await uiEditorPage.verifyUiEditorPage();
await openPageAccordionAndVerifyUpdatedUrl(uiEditorPage, pageName);
await uiEditorPage.clickOnPageAccordion(pageName);
await uiEditorPage.verifyUiEditorPage(pageName);

await uiEditorPage.dragComponentIntoDroppableList(ComponentType.Input);
await uiEditorPage.waitForComponentTreeItemToBeVisibleInDroppableList(ComponentType.Input);
Expand All @@ -152,6 +184,15 @@ test('That is possible to select a different data model binding, and that the fi
await uiEditorPage.clickOnDataModelPropertyOption(newDataModel);
await uiEditorPage.clickOnSaveDataModel();
await uiEditorPage.waitForDataModelToBeSelected();
});

test('That it is possible to upload to Gitea and that files are updated correctly', async ({
page,
testAppName,
}): Promise<void> => {
await setupAndVerifyUiEditorPage(page, testAppName);
const header = new Header(page, { app: testAppName });
const giteaPage = new GiteaPage(page, { app: testAppName });

await header.clickOnUploadLocalChangesButton();
await header.clickOnValidateChanges();
Expand All @@ -166,6 +207,13 @@ test('That is possible to select a different data model binding, and that the fi
);
});

// Shared variables
const pageName: string = 'Side1';
const newInputLabel: string = 'Input Label 1';
const dataModelBindingName: string = 'property1';
const newDataModel: string = 'testDataModel2';

// Helper functions
const navigateInToLayoutJsonFile = async (giteaPage: GiteaPage, layoutName: string) => {
await giteaPage.verifyGiteaPage();
await giteaPage.clickOnAppFilesButton();
Expand All @@ -175,24 +223,15 @@ const navigateInToLayoutJsonFile = async (giteaPage: GiteaPage, layoutName: stri
await giteaPage.clickOnLayoutJsonFile(layoutName);
};

const addNewLabelToTreeItemComponent = async (
uiEditorPage: UiEditorPage,
newInputLabel: string,
) => {
await uiEditorPage.clickOnComponentTextConfigAccordion();
await uiEditorPage.clickOnTitleTextButton();
await uiEditorPage.writeTitleTextInTextarea(newInputLabel);
await uiEditorPage.clickOnSaveNewLabelName();
await uiEditorPage.waitForTreeItemToGetNewLabel(newInputLabel);

await uiEditorPage.verifyThatTreeItemByNameIsNotVisibleInDroppableList(ComponentType.Input);
await uiEditorPage.verifyThatTreeItemByNameIsVisibleInDroppableList(newInputLabel);
};

const openPageAccordionAndVerifyUpdatedUrl = async (
uiEditorPage: UiEditorPage,
pageName: string,
const createNewDataModel = async (
dataModelPage: DataModelPage,
dataModelName: string,
): Promise<void> => {
await uiEditorPage.clickOnPageAccordion(pageName);
await uiEditorPage.verifyUiEditorPage(pageName); // When clicking the page, the url is updated to include the layout
await dataModelPage.clickOnCreateNewDataModelButton();
await dataModelPage.typeDataModelName(dataModelName);
await dataModelPage.clickOnCreateModelButton();
await dataModelPage.waitForDataModelToAppear(dataModelName);
await dataModelPage.clickOnGenerateDataModelButton();
await dataModelPage.checkThatSuccessAlertIsVisibleOnScreen();
await dataModelPage.waitForSuccessAlertToDisappear();
};