12135 replace designer cypress (#12204)

* Moving all e2e tests from Cypress to Playwright

* initial commit

* initial commit

* creating overview page

* fixing typo

* fixing feedback from PR

* almost implementing all tests

* Finalinsing navigation Playwright test

* fix cypress

* fix

* fixing cypress

* implementing header class

* adding more delay to playwright tests

* initial commit

* adding 1 of 2 designer tests

* Completing designer cypress to playwright

* Removing unused cypress

* merge main

frontend/testing/cypress/src/selectors/designer.js

@@ -6,8 +6,6 @@ const getToolbarItems = () => cy.findAllByTestId(testids.draggableToolbarItem);
 export const designer = {
   getAddPageButton: () => cy.findByRole('button', { name: texts['ux_editor.pages_add'] }),
   getDroppableList: () => cy.findByTestId(testids.droppableList),
-  getPageHeaderButton: (page) => cy.findByRole('button', { name: `${page}` }),
-  getPageAccordionByName: (page) => cy.findByTestId(testids.pageAccordionContent(page)),
   getToolbarItemByText: (text) => getToolbarItems().findByText(text),
   getToolbarItems,
 };

frontend/testing/playwright/enum/AppNames.ts

@@ -4,4 +4,5 @@ export enum AppNames {
   DASHBOARD_APP = 'dashboard-app-test',
   GIT_SYNC_APP = 'git-sync-app-test',
   MAIN_NAVIGATION_APP = 'navigation-app-test',
+  UI_EDITOR_APP = 'ui-editor-app-test',
 }

frontend/testing/playwright/enum/TestNames.ts

@@ -5,5 +5,6 @@ export enum TestNames {
   DASHBOARD = 'dashboard',
   LOGOUT_AND_INVALID_LOGIN_ONLY = 'logout-and-invalid-login-only',
   MAIN_NAVIGATION_BETWEEN_SUB_APPS = 'main-navigation-between-sub-apps',
+  UI_EDITOR = 'ui-editor',
   GIT_SYNC = 'git-sync',
 }

frontend/testing/playwright/helpers/RouterRoute.ts

@@ -35,18 +35,18 @@ export class RouterRoute extends StudioEnvironment {
     super(environment);
   }
 
-  public getRoute(route: SupportedRoutes): string {
+  public getRoute(route: SupportedRoutes, useTtdAsOrg: boolean = false): string {
     const routerRoute: string = routerRoutes[route];
 
     if (this.includesOrgAndApp(routerRoute)) {
-      return this.replaceOrgAndMap(routerRoute);
+      return this.replaceOrgAndMap(routerRoute, useTtdAsOrg);
     }
 
     return routerRoute;
   }
 
-  private replaceOrgAndMap(route: string): string {
-    return route.replace('{{org}}', this.org).replace('{{app}}', this.app);
+  private replaceOrgAndMap(route: string, useTtdAsOrg: boolean = false): string {
+    return route.replace('{{org}}', useTtdAsOrg ? 'ttd' : this.org).replace('{{app}}', this.app);
   }
 
   private includesOrgAndApp(route: string): boolean {

frontend/testing/playwright/pages/OverviewPage.ts

@@ -11,7 +11,7 @@ export class OverviewPage extends BasePage {
     await this.page.goto(this.getRoute('editorOverview'));
   }
 
-  public async verifyOverviewPage(): Promise<void> {
-    await this.page.waitForURL(this.getRoute('editorOverview'));
+  public async verifyOverviewPage(useTtdAsOrg: boolean = false): Promise<void> {
+    await this.page.waitForURL(this.getRoute('editorOverview', useTtdAsOrg));
   }
 }

frontend/testing/playwright/pages/UiEditorPage.ts

@@ -1,6 +1,7 @@
 import { BasePage } from '../helpers/BasePage';
 import type { Environment } from '../helpers/StudioEnvironment';
-import type { Page } from '@playwright/test';
+import type { Locator, Page } from '@playwright/test';
+import * as testids from '../../testids';
 
 export class UiEditorPage extends BasePage {
   constructor(page: Page, environment?: Environment) {
@@ -21,6 +22,35 @@ export class UiEditorPage extends BasePage {
     }
   }
 
+  public async clickOnPageAccordion(pageName: string): Promise<void> {
+    await this.page.getByRole('button', { name: pageName, exact: true }).click();
+  }
+
+  public async verifyThatPageIsEmpty(): Promise<void> {
+    await this.page.getByText(this.textMock('ux_editor.container_empty')).isVisible();
+  }
+
+  public async dragTitleInputComponentInToDroppableList(): Promise<void> {
+    const dropDestination = this.getDroppableList();
+    await this.getToolbarItems()
+      .getByText(this.textMock('ux_editor.component_title.Input'))
+      .dragTo(dropDestination);
+  }
+
+  public async verifyThatInputComponentTreeItemIsVisibleInDroppableList(): Promise<void> {
+    await this.page
+      .getByRole('treeitem', {
+        name: this.textMock('ux_editor.component_title.Input'),
+      })
+      .isVisible();
+  }
+
+  public async clickOnDeleteInputComponentButton(): Promise<void> {
+    await this.getDroppableList()
+      .getByRole('button', { name: this.textMock('general.delete') })
+      .click();
+  }
+
   public async verifyThatNewPageIsHidden(pageName: string): Promise<void> {
     await this.page.getByRole('button', { name: pageName, exact: true }).isHidden();
   }
@@ -32,4 +62,24 @@ export class UiEditorPage extends BasePage {
   public async verifyThatNewPageIsVisible(pageName: string): Promise<void> {
     await this.page.getByRole('heading', { name: pageName, level: 3, exact: true }).isVisible();
   }
+
+  public async verifyThatPageEmptyMessageIsHidden(): Promise<void> {
+    await this.page.getByText(this.textMock('ux_editor.container_empty')).isHidden();
+  }
+
+  public async verifyThatNavigationButtonsAreAddedToPage(): Promise<void> {
+    await this.page
+      .getByRole('treeitem', {
+        name: this.textMock('ux_editor.component_title.NavigationButtons'),
+      })
+      .isVisible();
+  }
+
+  private getToolbarItems(): Locator {
+    return this.page.getByTestId(testids.draggableToolbarItem);
+  }
+
+  private getDroppableList(): Locator {
+    return this.page.getByTestId(testids.droppableList);
+  }
 }

frontend/testing/playwright/playwright.config.ts

@@ -81,16 +81,30 @@ export default defineConfig<ExtendedTestOptions>({
         headless: true,
       },
     },
+    {
+      name: TestNames.UI_EDITOR,
+      dependencies: ['setup'],
+      testDir: './tests/ui-editor/',
+      testMatch: '*.spec.ts',
+      use: {
+        ...devices['Desktop Chrome'],
+        baseURL: process.env.PLAYWRIGHT_TEST_BASE_URL,
+        storageState: '.playwright/auth/user.json',
+        testAppName: AppNames.UI_EDITOR_APP,
+        headless: true,
+      },
+    },
     {
       name: TestNames.LOGOUT_AND_INVALID_LOGIN_ONLY,
       // Add ALL other test names here to make sure that the log out test is the last test to be executed
       dependencies: [
         TestNames.SETUP,
         TestNames.CREATE_APP_ONLY,
-        TestNames.DASHBOARD,
         TestNames.DATA_MODEL,
+        TestNames.DASHBOARD,
         TestNames.MAIN_NAVIGATION_BETWEEN_SUB_APPS,
         TestNames.GIT_SYNC,
+        TestNames.UI_EDITOR,
       ],
       testDir: './tests/logout-and-invalid-login-only/',
       testMatch: '*.spec.ts',

frontend/testing/playwright/tests/ui-editor/ui-editor.spec.ts

@@ -0,0 +1,80 @@
+import { expect } from '@playwright/test';
+import type { Page } from '@playwright/test';
+import { test } from '../../extenders/testExtend';
+import { DesignerApi } from '../../helpers/DesignerApi';
+import type { StorageState } from '../../types/StorageState';
+import { UiEditorPage } from '../../pages/UiEditorPage';
+import { Gitea } from '../../helpers/Gitea';
+
+// 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: 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: testAppName }));
+  expect(response.ok()).toBeTruthy();
+});
+
+const setupAndVerifyDashboardPage = async (
+  page: Page,
+  testAppName: string,
+): Promise<UiEditorPage> => {
+  const uiEditorPage = new UiEditorPage(page, { app: testAppName });
+  await uiEditorPage.loadUiEditorPage();
+  await uiEditorPage.verifyUiEditorPage();
+  return uiEditorPage;
+};
+
+test('That it is possible to add and delete form components', async ({
+  page,
+  testAppName,
+}): Promise<void> => {
+  const uiEditorPage = await setupAndVerifyDashboardPage(page, testAppName);
+
+  const page1: string = 'Side1';
+  await uiEditorPage.clickOnPageAccordion(page1);
+  await uiEditorPage.verifyThatPageIsEmpty();
+  await uiEditorPage.verifyUiEditorPage(page1); // When clicking the page, the url is updated to include the layout
+
+  await uiEditorPage.dragTitleInputComponentInToDroppableList();
+  await uiEditorPage.verifyThatInputComponentTreeItemIsVisibleInDroppableList();
+  await uiEditorPage.verifyThatPageEmptyMessageIsHidden();
+  await uiEditorPage.clickOnDeleteInputComponentButton();
+
+  await uiEditorPage.verifyThatPageIsEmpty();
+});
+
+test('That when adding more than one page, navigation buttons are added to the pages', async ({
+  page,
+  testAppName,
+}): Promise<void> => {
+  const uiEditorPage = await setupAndVerifyDashboardPage(page, testAppName);
+
+  const page1: string = 'Side1';
+  const page2: string = 'Side2';
+
+  await uiEditorPage.clickOnPageAccordion(page1);
+  await uiEditorPage.verifyThatPageIsEmpty();
+  await uiEditorPage.verifyUiEditorPage(page1);
+
+  await uiEditorPage.clickOnAddNewPage();
+  await uiEditorPage.verifyThatNewPageIsVisible(page2);
+  await uiEditorPage.verifyUiEditorPage(page2);
+
+  await uiEditorPage.verifyThatPageEmptyMessageIsHidden();
+  await uiEditorPage.verifyThatNavigationButtonsAreAddedToPage();
+
+  await uiEditorPage.clickOnPageAccordion(page1);
+  await uiEditorPage.verifyUiEditorPage(page1);
+  await uiEditorPage.verifyThatPageEmptyMessageIsHidden();
+  await uiEditorPage.verifyThatNavigationButtonsAreAddedToPage();
+});