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}`;
+  }
+}

packages/e2e-tests/tests/user-interface/user-interface-configuration.spec.js

@@ -0,0 +1,176 @@
+// @ts-check
+const { test, expect } = require('../../fixtures/index');
+
+test.describe('User interface page', () => {
+  test.beforeEach(async ({ userInterfacePage }) => {
+    await userInterfacePage.profileMenuButton.click();
+    await userInterfacePage.adminMenuItem.click();
+    await expect(userInterfacePage.page).toHaveURL(/\/admin-settings\/users/);
+    await userInterfacePage.userInterfaceDrawerItem.click();
+    await expect(userInterfacePage.page).toHaveURL(
+      /\/admin-settings\/user-interface/
+    );
+    await userInterfacePage.page.waitForURL(/\/admin-settings\/user-interface/);
+  });
+
+  test.describe('checks if the shown values are used', async () => {
+    test('checks primary main color', async ({ userInterfacePage }) => {
+      await userInterfacePage.primaryMainColorInput.waitFor({
+        state: 'attached',
+      });
+      const initialPrimaryMainColor =
+        await userInterfacePage.primaryMainColorInput.inputValue();
+      const initialRgbColor = userInterfacePage.hexToRgb(
+        initialPrimaryMainColor
+      );
+      await expect(userInterfacePage.updateButton).toHaveCSS(
+        'background-color',
+        initialRgbColor
+      );
+    });
+
+    test('checks primary dark color', async ({ userInterfacePage }) => {
+      await userInterfacePage.primaryDarkColorInput.waitFor({
+        state: 'attached',
+      });
+      const initialPrimaryDarkColor =
+        await userInterfacePage.primaryDarkColorInput.inputValue();
+      const initialRgbColor = userInterfacePage.hexToRgb(
+        initialPrimaryDarkColor
+      );
+      await expect(userInterfacePage.appBar).toHaveCSS(
+        'background-color',
+        initialRgbColor
+      );
+    });
+
+    test('checks custom logo', async ({ userInterfacePage }) => {
+      const initialLogoSvgCode =
+        await userInterfacePage.logoSvgCodeInput.inputValue();
+      const logoSrcAttribute = await userInterfacePage.customLogo.getAttribute(
+        'src'
+      );
+      const svgCode = userInterfacePage.encodeSVG(initialLogoSvgCode);
+      expect(logoSrcAttribute).toMatch(svgCode);
+    });
+  });
+
+  test.describe(
+    'fill fields and check if the inputs reflect them properly',
+    async () => {
+      test('fill primary main color and check the color input', async ({
+        userInterfacePage,
+      }) => {
+        await userInterfacePage.primaryMainColorInput.fill('#FF5733');
+        const rgbColor = userInterfacePage.hexToRgb('#FF5733');
+        const button = await userInterfacePage.primaryMainColorButton;
+        const styleAttribute = await button.getAttribute('style');
+        expect(styleAttribute).toEqual(`background-color: ${rgbColor};`);
+      });
+
+      test('fill primary dark color and check the color input', async ({
+        userInterfacePage,
+      }) => {
+        await userInterfacePage.primaryDarkColorInput.fill('#12F63F');
+        const rgbColor = userInterfacePage.hexToRgb('#12F63F');
+        const button = await userInterfacePage.primaryDarkColorButton;
+        const styleAttribute = await button.getAttribute('style');
+        expect(styleAttribute).toEqual(`background-color: ${rgbColor};`);
+      });
+
+      test('fill primary light color and check the color input', async ({
+        userInterfacePage,
+      }) => {
+        await userInterfacePage.primaryLightColorInput.fill('#1D0BF5');
+        const rgbColor = userInterfacePage.hexToRgb('#1D0BF5');
+        const button = await userInterfacePage.primaryLightColorButton;
+        const styleAttribute = await button.getAttribute('style');
+        expect(styleAttribute).toEqual(`background-color: ${rgbColor};`);
+      });
+    }
+  );
+
+  test.describe(
+    'update form based on input values and check if the inputs still reflect them',
+    async () => {
+      test('update primary main color and check color input', async ({
+        userInterfacePage,
+      }) => {
+        await userInterfacePage.primaryMainColorInput.fill('#00adef');
+        await userInterfacePage.updateButton.click();
+        const rgbColor = userInterfacePage.hexToRgb('#00adef');
+        const button = await userInterfacePage.primaryMainColorButton;
+        const styleAttribute = await button.getAttribute('style');
+        expect(styleAttribute).toBe(`background-color: ${rgbColor};`);
+      });
+
+      test('update primary dark color and check color input', async ({
+        userInterfacePage,
+      }) => {
+        await userInterfacePage.primaryDarkColorInput.fill('#222222');
+        await userInterfacePage.updateButton.click();
+        const rgbColor = userInterfacePage.hexToRgb('#222222');
+        const button = await userInterfacePage.primaryDarkColorButton;
+        const styleAttribute = await button.getAttribute('style');
+        expect(styleAttribute).toBe(`background-color: ${rgbColor};`);
+      });
+
+      test('update primary light color and check color input', async ({
+        userInterfacePage,
+      }) => {
+        await userInterfacePage.primaryLightColorInput.fill('#f90707');
+        await userInterfacePage.updateButton.click();
+        const rgbColor = userInterfacePage.hexToRgb('#f90707');
+        const button = await userInterfacePage.primaryLightColorButton;
+        const styleAttribute = await button.getAttribute('style');
+        expect(styleAttribute).toBe(`background-color: ${rgbColor};`);
+      });
+    }
+  );
+
+  test.describe('update form based on input values', async () => {
+    test('fill primary main color', async ({ userInterfacePage }) => {
+      await userInterfacePage.primaryMainColorInput.fill('#00adef');
+      await userInterfacePage.updateButton.click();
+      await userInterfacePage.snackbar.waitFor({ state: 'visible' });
+      await userInterfacePage.screenshot({
+        path: 'updated primary main color.png',
+      });
+    });
+
+    test('fill primary dark color', async ({ userInterfacePage }) => {
+      await userInterfacePage.primaryDarkColorInput.fill('#222222');
+      await userInterfacePage.updateButton.click();
+      await userInterfacePage.snackbar.waitFor({ state: 'visible' });
+      await userInterfacePage.screenshot({
+        path: 'updated primary dark color.png',
+      });
+    });
+
+    test('fill primary light color', async ({ userInterfacePage }) => {
+      await userInterfacePage.primaryLightColorInput.fill('#f90707');
+      await userInterfacePage.updateButton.click();
+      await userInterfacePage.goToDashboardButton.click();
+      await expect(userInterfacePage.page).toHaveURL('/flows');
+      const span = await userInterfacePage.flowRowCardActionArea;
+      await span.waitFor({ state: 'visible' });
+      await span.hover();
+      await userInterfacePage.screenshot({
+        path: 'updated primary light color.png',
+      });
+    });
+
+    test('fill logo svg code', async ({ userInterfacePage }) => {
+      await userInterfacePage.logoSvgCodeInput
+        .fill(`<svg width="25" height="25" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100">
+      <rect width="100%" height="100%" fill="white" />
+      <text x="10" y="40" font-family="Arial" font-size="40" fill="black">A</text>
+    </svg>`);
+      await userInterfacePage.updateButton.click();
+      await userInterfacePage.snackbar.waitFor({ state: 'visible' });
+      await userInterfacePage.screenshot({
+        path: 'updated svg code.png',
+      });
+    });
+  });
+});