test(user-interface-configuration): write initial tests (#1242)

* test(user-interface): add tests with playwright

* test: refactor UI configuration tests

---------

Co-authored-by: Ali BARIN <ali.barin53@gmail.com>

packages/e2e-tests/fixtures/applications-page.js

@@ -1,7 +1,9 @@
 const path = require('node:path');
-const { BasePage } = require('./base-page');
+const { AuthenticatedPage } = require('./authenticated-page');
+
+export class ApplicationsPage extends AuthenticatedPage {
+  screenshotPath = '/applications';
 
-export class ApplicationsPage extends BasePage {
   /**
    * @param {import('@playwright/test').Page} page
    */
@@ -11,12 +13,4 @@ export class ApplicationsPage extends BasePage {
     this.drawerLink = this.page.getByTestId('apps-page-drawer-link');
     this.addConnectionButton = this.page.getByTestId('add-connection-button');
   }
-
-  async screenshot(options = {}) {
-    const { path: plainPath, ...restOptions } = options;
-
-    const computedPath = path.join('applications', plainPath);
-
-    return await super.screenshot({ path: computedPath, ...restOptions });
-  }
 }

packages/e2e-tests/fixtures/authenticated-page.js

@@ -0,0 +1,21 @@
+const path = require('node:path');
+const { expect } = require('@playwright/test');
+const { BasePage } = require('./base-page');
+const { LoginPage } = require('./login-page');
+
+export class AuthenticatedPage extends BasePage {
+  /**
+   * @param {import('@playwright/test').Page} page
+   */
+  constructor(page) {
+    super(page);
+
+    this.profileMenuButton = this.page.getByTestId('profile-menu-button');
+    this.adminMenuItem = this.page.getByRole('menuitem', { name: 'Admin' });
+    this.userInterfaceDrawerItem = this.page.getByTestId('user-interface-drawer-link');
+    this.appBar = this.page.getByTestId('app-bar');
+    this.goToDashboardButton = this.page.getByTestId('go-back-drawer-link');
+    this.typographyLogo = this.page.getByTestId('typography-logo');
+    this.customLogo = this.page.getByTestId('custom-logo');
+  }
+}

packages/e2e-tests/fixtures/base-page.js

@@ -1,11 +1,14 @@
 const path = require('node:path');
 
 export class BasePage {
+  screenshotPath = '/';
+
   /**
    * @param {import('@playwright/test').Page} page
    */
   constructor(page) {
     this.page = page;
+    this.snackbar = this.page.locator('#notistack-snackbar');
   }
 
   async clickAway() {
@@ -15,7 +18,11 @@ export class BasePage {
   async screenshot(options = {}) {
     const { path: plainPath, ...restOptions } = options;
 
-    const computedPath = path.join('output/screenshots', plainPath);
+    const computedPath = path.join(
+      'output/screenshots',
+      this.screenshotPath,
+      plainPath
+    );
 
     return await this.page.screenshot({ path: computedPath, ...restOptions });
   }

packages/e2e-tests/fixtures/connections-page.js

@@ -1,14 +1,8 @@
 const path = require('node:path');
-const { BasePage } = require('./base-page');
+const { AuthenticatedPage } = require('./authenticated-page');
 
-export class ConnectionsPage extends BasePage {
-  async screenshot(options = {}) {
-    const { path: plainPath, ...restOptions } = options;
-
-    const computedPath = path.join('connections', plainPath);
-
-    return await super.screenshot({ path: computedPath, ...restOptions });
-  }
+export class ConnectionsPage extends AuthenticatedPage {
+  screenshotPath = '/connections';
 
   async clickAddConnectionButton() {
     await this.page.getByTestId('add-connection-button').click();

packages/e2e-tests/fixtures/executions-page.js

@@ -1,12 +1,6 @@
 const path = require('node:path');
-const { BasePage } = require('./base-page');
+const { AuthenticatedPage } = require('./authenticated-page');
 
-export class ExecutionsPage extends BasePage {
-  async screenshot(options = {}) {
-    const { path: plainPath, ...restOptions } = options;
-
-    const computedPath = path.join('executions', plainPath);
-
-    return await super.screenshot({ path: computedPath, ...restOptions });
-  }
+export class ExecutionsPage extends AuthenticatedPage {
+  screenshotPath = '/executions';
 }

packages/e2e-tests/fixtures/flow-editor-page.js

@@ -1,7 +1,9 @@
 const path = require('node:path');
-const { BasePage } = require('./base-page');
+const { AuthenticatedPage } = require('./authenticated-page');
+
+export class FlowEditorPage extends AuthenticatedPage {
+  screenshotPath = '/flow-editor';
 
-export class FlowEditorPage extends BasePage {
   /**
    * @param {import('@playwright/test').Page} page
    */
@@ -21,12 +23,4 @@ export class FlowEditorPage extends BasePage {
     this.trigger = this.page.getByLabel('Trigger on weekends?');
     this.stepCircularLoader = this.page.getByTestId('step-circular-loader');
   }
-
-  async screenshot(options = {}) {
-    const { path: plainPath, ...restOptions } = options;
-
-    const computedPath = path.join('flow-editor', plainPath);
-
-    return await super.screenshot({ path: computedPath, ...restOptions });
-  }
 }

packages/e2e-tests/fixtures/index.js

@@ -1,8 +1,9 @@
-const { test, expect} = require('@playwright/test');
+const { test, expect } = require('@playwright/test');
 const { ApplicationsPage } = require('./applications-page');
 const { ConnectionsPage } = require('./connections-page');
 const { ExecutionsPage } = require('./executions-page');
 const { FlowEditorPage } = require('./flow-editor-page');
+const { UserInterfacePage } = require('./user-interface-page');
 const { LoginPage } = require('./login-page');
 
 exports.test = test.extend({
@@ -23,6 +24,9 @@ exports.test = test.extend({
   flowEditorPage: async ({ page }, use) => {
     await use(new FlowEditorPage(page));
   },
+  userInterfacePage: async ({ page }, use) => {
+    await use(new UserInterfacePage(page));
+  },
 });
 
 expect.extend({
@@ -30,7 +34,7 @@ expect.extend({
     await expect(locator).not.toHaveAttribute('aria-disabled', 'true');
 
     return { pass: true };
-  }
+  },
 });
 
 exports.expect = expect;

packages/e2e-tests/fixtures/login-page.js

@@ -3,6 +3,8 @@ const { expect } = require('@playwright/test');
 const { BasePage } = require('./base-page');
 
 export class LoginPage extends BasePage {
+  path = '/login';
+
   /**
    * @param {import('@playwright/test').Page} page
    */
@@ -15,8 +17,6 @@ export class LoginPage extends BasePage {
     this.loginButton = this.page.getByTestId('login-button');
   }
 
-  path = '/login';
-
   async login() {
     await this.page.goto(this.path);
     await this.emailTextField.fill(process.env.LOGIN_EMAIL);

packages/e2e-tests/fixtures/user-interface-page.js

@@ -0,0 +1,53 @@
+const path = require('node:path');
+const { AuthenticatedPage } = require('./authenticated-page');
+
+export class UserInterfacePage extends AuthenticatedPage {
+  screenshotPath = '/user-interface';
+
+  /**
+   * @param {import('@playwright/test').Page} page
+   */
+  constructor(page) {
+    super(page);
+
+    this.flowRowCardActionArea = this.page
+      .getByTestId('flow-row')
+      .first()
+      .getByTestId('card-action-area');
+    this.updateButton = this.page.getByTestId('update-button');
+    this.primaryMainColorInput = this.page
+      .getByTestId('primary-main-color-input')
+      .getByTestId('color-text-field');
+    this.primaryDarkColorInput = this.page
+      .getByTestId('primary-dark-color-input')
+      .getByTestId('color-text-field');
+    this.primaryLightColorInput = this.page
+      .getByTestId('primary-light-color-input')
+      .getByTestId('color-text-field');
+    this.logoSvgCodeInput = this.page.getByTestId('logo-svg-data-text-field');
+    this.primaryMainColorButton = this.page
+      .getByTestId('primary-main-color-input')
+      .getByTestId('color-button');
+    this.primaryDarkColorButton = this.page
+      .getByTestId('primary-dark-color-input')
+      .getByTestId('color-button');
+    this.primaryLightColorButton = this.page
+      .getByTestId('primary-light-color-input')
+      .getByTestId('color-button');
+  }
+
+  hexToRgb(hexColor) {
+    hexColor = hexColor.replace('#', '');
+    const r = parseInt(hexColor.substring(0, 2), 16);
+    const g = parseInt(hexColor.substring(2, 4), 16);
+    const b = parseInt(hexColor.substring(4, 6), 16);
+
+    return `rgb(${r}, ${g}, ${b})`;
+  }
+
+  encodeSVG(svgCode) {
+    const encoded = encodeURIComponent(svgCode);
+
+    return `data:image/svg+xml;utf8,${encoded}`;
+  }
+}