test: add tests for executions

.github/workflows/playwright.yml

@@ -114,6 +114,7 @@ jobs:
       - name: Run Playwright tests
         working-directory: ./packages/e2e-tests
         env:
+          PORT: 3000
           LOGIN_EMAIL: user@automatisch.io
           LOGIN_PASSWORD: sample
           BASE_URL: http://localhost:3000

packages/backend/src/controllers/api/v1/apps/get-connections.test.js

@@ -87,14 +87,14 @@ describe('GET /api/v1/apps/:appKey/connections', () => {
 
   it('should return not found response for invalid connection UUID', async () => {
     await createPermission({
-      action: 'read',
+      action: 'update',
       subject: 'Connection',
       roleId: currentUserRole.id,
       conditions: ['isCreator'],
     });
 
     await request(app)
-      .get('/api/v1/apps/invalid-connection-id/connections')
+      .get('/api/v1/connections/invalid-connection-id/connections')
       .set('Authorization', token)
       .expect(404);
   });

packages/backend/src/controllers/api/v1/steps/create-dynamic-data.test.js

@@ -193,7 +193,7 @@ describe('POST /api/v1/steps/:stepId/dynamic-data', () => {
     const notExistingStepUUID = Crypto.randomUUID();
 
     await request(app)
-      .post(`/api/v1/steps/${notExistingStepUUID}/dynamic-data`)
+      .get(`/api/v1/steps/${notExistingStepUUID}/dynamic-data`)
       .set('Authorization', token)
       .expect(404);
   });
@@ -216,7 +216,7 @@ describe('POST /api/v1/steps/:stepId/dynamic-data', () => {
     const step = await createStep({ appKey: null });
 
     await request(app)
-      .post(`/api/v1/steps/${step.id}/dynamic-data`)
+      .get(`/api/v1/steps/${step.id}/dynamic-data`)
       .set('Authorization', token)
       .expect(404);
   });

packages/backend/src/controllers/api/v1/steps/create-dynamic-fields.test.js

@@ -118,7 +118,7 @@ describe('POST /api/v1/steps/:stepId/dynamic-fields', () => {
     const notExistingStepUUID = Crypto.randomUUID();
 
     await request(app)
-      .post(`/api/v1/steps/${notExistingStepUUID}/dynamic-fields`)
+      .get(`/api/v1/steps/${notExistingStepUUID}/dynamic-fields`)
       .set('Authorization', token)
       .expect(404);
   });
@@ -138,11 +138,10 @@ describe('POST /api/v1/steps/:stepId/dynamic-fields', () => {
       conditions: [],
     });
 
-    const step = await createStep();
+    const step = await createStep({ appKey: null });
-    await step.$query().patch({ appKey: null });
 
     await request(app)
-      .post(`/api/v1/steps/${step.id}/dynamic-fields`)
+      .get(`/api/v1/steps/${step.id}/dynamic-fields`)
       .set('Authorization', token)
       .expect(404);
   });

packages/backend/src/models/user.test.js

@@ -996,9 +996,21 @@ describe('User model', () => {
 
       const user = await createUser();
 
+      const presentDate = DateTime.fromObject(
+        { year: 2024, month: 11, day: 17, hour: 11, minute: 30 },
+        { zone: 'UTC+0' }
+      );
+
+      vi.setSystemTime(presentDate);
+
       await user.startTrialPeriod();
 
-      vi.setSystemTime(DateTime.now().plus({ month: 1 }));
+      const futureDate = DateTime.fromObject(
+        { year: 2025, month: 1, day: 1 },
+        { zone: 'UTC+0' }
+      );
+
+      vi.setSystemTime(futureDate);
 
       const refetchedUser = await user.$query();
 
@@ -1106,9 +1118,7 @@ describe('User model', () => {
 
       const user = await createUser();
 
-      await expect(() => user.getPlanAndUsage()).rejects.toThrow(
+      expect(() => user.getPlanAndUsage()).rejects.toThrow('NotFoundError');
-        'NotFoundError'
-      );
     });
   });
 
@@ -1179,7 +1189,7 @@ describe('User model', () => {
     });
 
     it('should throw not found error when user role does not exist', async () => {
-      await expect(() =>
+      expect(() =>
         User.registerUser({
           fullName: 'Sample user',
           email: 'user@automatisch.io',
@@ -1247,8 +1257,6 @@ describe('User model', () => {
 
   describe('createUsageData', () => {
     it('should create usage data if Automatisch is a cloud installation', async () => {
-      vi.useFakeTimers();
-
       vi.spyOn(appConfig, 'isCloud', 'get').mockReturnValue(true);
 
       const user = await createUser({
@@ -1256,14 +1264,10 @@ describe('User model', () => {
         email: 'user@automatisch.io',
       });
 
-      vi.setSystemTime(DateTime.now().plus({ month: 1 }));
-
       const usageData = await user.createUsageData();
       const currentUsageData = await user.$relatedQuery('currentUsageData');
 
       expect(usageData).toStrictEqual(currentUsageData);
-
-      vi.useRealTimers();
     });
 
     it('should not create usage data if Automatisch is not a cloud installation', async () => {

packages/backend/src/queues/action.js

@@ -11,6 +11,10 @@ const redisConnection = {
 
 const actionQueue = new Queue('action', redisConnection);
 
+process.on('SIGTERM', async () => {
+  await actionQueue.close();
+});
+
 actionQueue.on('error', (error) => {
   if (error.code === CONNECTION_REFUSED) {
     logger.error(

packages/backend/src/queues/delete-user.ee.js

@@ -11,6 +11,10 @@ const redisConnection = {
 
 const deleteUserQueue = new Queue('delete-user', redisConnection);
 
+process.on('SIGTERM', async () => {
+  await deleteUserQueue.close();
+});
+
 deleteUserQueue.on('error', (error) => {
   if (error.code === CONNECTION_REFUSED) {
     logger.error(

packages/backend/src/queues/email.js

@@ -11,6 +11,10 @@ const redisConnection = {
 
 const emailQueue = new Queue('email', redisConnection);
 
+process.on('SIGTERM', async () => {
+  await emailQueue.close();
+});
+
 emailQueue.on('error', (error) => {
   if (error.code === CONNECTION_REFUSED) {
     logger.error(

packages/backend/src/queues/flow.js

@@ -11,6 +11,10 @@ const redisConnection = {
 
 const flowQueue = new Queue('flow', redisConnection);
 
+process.on('SIGTERM', async () => {
+  await flowQueue.close();
+});
+
 flowQueue.on('error', (error) => {
   if (error.code === CONNECTION_REFUSED) {
     logger.error(

packages/backend/src/queues/index.js

@@ -1,21 +0,0 @@
-import appConfig from '../config/app.js';
-import actionQueue from './action.js';
-import emailQueue from './email.js';
-import flowQueue from './flow.js';
-import triggerQueue from './trigger.js';
-import deleteUserQueue from './delete-user.ee.js';
-import removeCancelledSubscriptionsQueue from './remove-cancelled-subscriptions.ee.js';
-
-const queues = [
-  actionQueue,
-  emailQueue,
-  flowQueue,
-  triggerQueue,
-  deleteUserQueue,
-];
-
-if (appConfig.isCloud) {
-  queues.push(removeCancelledSubscriptionsQueue);
-}
-
-export default queues;

packages/backend/src/queues/remove-cancelled-subscriptions.ee.js

@@ -14,6 +14,10 @@ const removeCancelledSubscriptionsQueue = new Queue(
   redisConnection
 );
 
+process.on('SIGTERM', async () => {
+  await removeCancelledSubscriptionsQueue.close();
+});
+
 removeCancelledSubscriptionsQueue.on('error', (error) => {
   if (error.code === CONNECTION_REFUSED) {
     logger.error(

packages/backend/src/queues/trigger.js

@@ -11,6 +11,10 @@ const redisConnection = {
 
 const triggerQueue = new Queue('trigger', redisConnection);
 
+process.on('SIGTERM', async () => {
+  await triggerQueue.close();
+});
+
 triggerQueue.on('error', (error) => {
   if (error.code === CONNECTION_REFUSED) {
     logger.error(

packages/backend/src/worker.js

@@ -1,22 +1,20 @@
 import * as Sentry from './helpers/sentry.ee.js';
-import process from 'node:process';
+import appConfig from './config/app.js';
 
 Sentry.init();
 
 import './config/orm.js';
 import './helpers/check-worker-readiness.js';
-import queues from './queues/index.js';
+import './workers/flow.js';
-import workers from './workers/index.js';
+import './workers/trigger.js';
+import './workers/action.js';
+import './workers/email.js';
+import './workers/delete-user.ee.js';
 
-process.on('SIGTERM', async () => {
+if (appConfig.isCloud) {
-  for (const queue of queues) {
+  import('./workers/remove-cancelled-subscriptions.ee.js');
-    await queue.close();
+  import('./queues/remove-cancelled-subscriptions.ee.js');
-  }
+}
-
-  for (const worker of workers) {
-    await worker.close();
-  }
-});
 
 import telemetry from './helpers/telemetry/index.js';
 

packages/backend/src/workers/action.js

@@ -1,4 +1,5 @@
 import { Worker } from 'bullmq';
+import process from 'node:process';
 
 import * as Sentry from '../helpers/sentry.ee.js';
 import redisConfig from '../config/redis.js';
@@ -14,7 +15,7 @@ import delayAsMilliseconds from '../helpers/delay-as-milliseconds.js';
 
 const DEFAULT_DELAY_DURATION = 0;
 
-const actionWorker = new Worker(
+export const worker = new Worker(
   'action',
   async (job) => {
     const { stepId, flowId, executionId, computedParameters, executionStep } =
@@ -54,11 +55,11 @@ const actionWorker = new Worker(
   { connection: redisConfig }
 );
 
-actionWorker.on('completed', (job) => {
+worker.on('completed', (job) => {
   logger.info(`JOB ID: ${job.id} - FLOW ID: ${job.data.flowId} has started!`);
 });
 
-actionWorker.on('failed', (job, err) => {
+worker.on('failed', (job, err) => {
   const errorMessage = `
     JOB ID: ${job.id} - FLOW ID: ${job.data.flowId} has failed to start with ${err.message}
     \n ${err.stack}
@@ -73,4 +74,6 @@ actionWorker.on('failed', (job, err) => {
   });
 });
 
-export default actionWorker;
+process.on('SIGTERM', async () => {
+  await worker.close();
+});

packages/backend/src/workers/delete-user.ee.js

@@ -1,4 +1,5 @@
 import { Worker } from 'bullmq';
+import process from 'node:process';
 
 import * as Sentry from '../helpers/sentry.ee.js';
 import redisConfig from '../config/redis.js';
@@ -7,7 +8,7 @@ import appConfig from '../config/app.js';
 import User from '../models/user.js';
 import ExecutionStep from '../models/execution-step.js';
 
-const deleteUserWorker = new Worker(
+export const worker = new Worker(
   'delete-user',
   async (job) => {
     const { id } = job.data;
@@ -45,13 +46,13 @@ const deleteUserWorker = new Worker(
   { connection: redisConfig }
 );
 
-deleteUserWorker.on('completed', (job) => {
+worker.on('completed', (job) => {
   logger.info(
     `JOB ID: ${job.id} - The user with the ID of '${job.data.id}' has been deleted!`
   );
 });
 
-deleteUserWorker.on('failed', (job, err) => {
+worker.on('failed', (job, err) => {
   const errorMessage = `
     JOB ID: ${job.id} - The user with the ID of '${job.data.id}' has failed to be deleted! ${err.message}
     \n ${err.stack}
@@ -66,4 +67,6 @@ deleteUserWorker.on('failed', (job, err) => {
   });
 });
 
-export default deleteUserWorker;
+process.on('SIGTERM', async () => {
+  await worker.close();
+});

packages/backend/src/workers/email.js

@@ -1,4 +1,5 @@
 import { Worker } from 'bullmq';
+import process from 'node:process';
 
 import * as Sentry from '../helpers/sentry.ee.js';
 import redisConfig from '../config/redis.js';
@@ -15,7 +16,7 @@ const isAutomatischEmail = (email) => {
   return email.endsWith('@automatisch.io');
 };
 
-const emailWorker = new Worker(
+export const worker = new Worker(
   'email',
   async (job) => {
     const { email, subject, template, params } = job.data;
@@ -38,13 +39,13 @@ const emailWorker = new Worker(
   { connection: redisConfig }
 );
 
-emailWorker.on('completed', (job) => {
+worker.on('completed', (job) => {
   logger.info(
     `JOB ID: ${job.id} - ${job.data.subject} email sent to ${job.data.email}!`
   );
 });
 
-emailWorker.on('failed', (job, err) => {
+worker.on('failed', (job, err) => {
   const errorMessage = `
     JOB ID: ${job.id} - ${job.data.subject} email to ${job.data.email} has failed to send with ${err.message}
     \n ${err.stack}
@@ -59,4 +60,6 @@ emailWorker.on('failed', (job, err) => {
   });
 });
 
-export default emailWorker;
+process.on('SIGTERM', async () => {
+  await worker.close();
+});

packages/backend/src/workers/flow.js

@@ -1,4 +1,5 @@
 import { Worker } from 'bullmq';
+import process from 'node:process';
 
 import * as Sentry from '../helpers/sentry.ee.js';
 import redisConfig from '../config/redis.js';
@@ -12,7 +13,7 @@ import {
   REMOVE_AFTER_7_DAYS_OR_50_JOBS,
 } from '../helpers/remove-job-configuration.js';
 
-const flowWorker = new Worker(
+export const worker = new Worker(
   'flow',
   async (job) => {
     const { flowId } = job.data;
@@ -63,11 +64,11 @@ const flowWorker = new Worker(
   { connection: redisConfig }
 );
 
-flowWorker.on('completed', (job) => {
+worker.on('completed', (job) => {
   logger.info(`JOB ID: ${job.id} - FLOW ID: ${job.data.flowId} has started!`);
 });
 
-flowWorker.on('failed', async (job, err) => {
+worker.on('failed', async (job, err) => {
   const errorMessage = `
     JOB ID: ${job.id} - FLOW ID: ${job.data.flowId} has failed to start with ${err.message}
     \n ${err.stack}
@@ -94,4 +95,6 @@ flowWorker.on('failed', async (job, err) => {
   });
 });
 
-export default flowWorker;
+process.on('SIGTERM', async () => {
+  await worker.close();
+});

packages/backend/src/workers/index.js

@@ -1,21 +0,0 @@
-import appConfig from '../config/app.js';
-import actionWorker from './action.js';
-import emailWorker from './email.js';
-import flowWorker from './flow.js';
-import triggerWorker from './trigger.js';
-import deleteUserWorker from './delete-user.ee.js';
-import removeCancelledSubscriptionsWorker from './remove-cancelled-subscriptions.ee.js';
-
-const workers = [
-  actionWorker,
-  emailWorker,
-  flowWorker,
-  triggerWorker,
-  deleteUserWorker,
-];
-
-if (appConfig.isCloud) {
-  workers.push(removeCancelledSubscriptionsWorker);
-}
-
-export default workers;

packages/backend/src/workers/remove-cancelled-subscriptions.ee.js

@@ -1,11 +1,12 @@
 import { Worker } from 'bullmq';
+import process from 'node:process';
 import { DateTime } from 'luxon';
 import * as Sentry from '../helpers/sentry.ee.js';
 import redisConfig from '../config/redis.js';
 import logger from '../helpers/logger.js';
 import Subscription from '../models/subscription.ee.js';
 
-const removeCancelledSubscriptionsWorker = new Worker(
+export const worker = new Worker(
   'remove-cancelled-subscriptions',
   async () => {
     await Subscription.query()
@@ -22,13 +23,13 @@ const removeCancelledSubscriptionsWorker = new Worker(
   { connection: redisConfig }
 );
 
-removeCancelledSubscriptionsWorker.on('completed', (job) => {
+worker.on('completed', (job) => {
   logger.info(
     `JOB ID: ${job.id} - The cancelled subscriptions have been removed!`
   );
 });
 
-removeCancelledSubscriptionsWorker.on('failed', (job, err) => {
+worker.on('failed', (job, err) => {
   const errorMessage = `
     JOB ID: ${job.id} - ERROR: The cancelled subscriptions can not be removed! ${err.message}
     \n ${err.stack}
@@ -41,4 +42,6 @@ removeCancelledSubscriptionsWorker.on('failed', (job, err) => {
   });
 });
 
-export default removeCancelledSubscriptionsWorker;
+process.on('SIGTERM', async () => {
+  await worker.close();
+});

packages/backend/src/workers/trigger.js

@@ -1,4 +1,5 @@
 import { Worker } from 'bullmq';
+import process from 'node:process';
 
 import * as Sentry from '../helpers/sentry.ee.js';
 import redisConfig from '../config/redis.js';
@@ -11,7 +12,7 @@ import {
   REMOVE_AFTER_7_DAYS_OR_50_JOBS,
 } from '../helpers/remove-job-configuration.js';
 
-const triggerWorker = new Worker(
+export const worker = new Worker(
   'trigger',
   async (job) => {
     const { flowId, executionId, stepId, executionStep } = await processTrigger(
@@ -40,11 +41,11 @@ const triggerWorker = new Worker(
   { connection: redisConfig }
 );
 
-triggerWorker.on('completed', (job) => {
+worker.on('completed', (job) => {
   logger.info(`JOB ID: ${job.id} - FLOW ID: ${job.data.flowId} has started!`);
 });
 
-triggerWorker.on('failed', (job, err) => {
+worker.on('failed', (job, err) => {
   const errorMessage = `
     JOB ID: ${job.id} - FLOW ID: ${job.data.flowId} has failed to start with ${err.message}
     \n ${err.stack}
@@ -59,4 +60,6 @@ triggerWorker.on('failed', (job, err) => {
   });
 });
 
-export default triggerWorker;
+process.on('SIGTERM', async () => {
+  await worker.close();
+});

packages/e2e-tests/fixtures/admin/delete-role-modal.js

@@ -9,7 +9,6 @@ export class DeleteRoleModal {
     this.modal = page.getByTestId('delete-role-modal');
     this.cancelButton = this.modal.getByTestId('confirmation-cancel-button');
     this.deleteButton = this.modal.getByTestId('confirmation-confirm-button');
-    this.deleteAlert = this.modal.getByTestId('confirmation-dialog-error-alert');
   }
 
   async close () {

packages/e2e-tests/fixtures/execution-details-page.js

@@ -0,0 +1,21 @@
+const { AuthenticatedPage } = require('./authenticated-page');
+const { expect } = require('@playwright/test');
+
+export class ExecutionDetailsPage extends AuthenticatedPage {
+  constructor(page) {
+    super(page);
+
+    this.executionCreatedAt = page.getByTestId('execution-created-at');
+    this.executionId = page.getByTestId('execution-id');
+    this.executionName = page.getByTestId('execution-name');
+    this.executionStep = page.getByTestId('execution-step');
+  }
+
+  async verifyExecutionData(flowId) {
+    await expect(this.executionCreatedAt).toContainText(/\d+ seconds? ago/);
+    await expect(this.executionId).toHaveText(
+      /Execution ID: [0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i
+    );
+    await expect(this.executionName).toHaveText(flowId);
+  }
+}

packages/e2e-tests/fixtures/execution-step-details.js

@@ -0,0 +1,93 @@
+const { ExecutionDetailsPage } = require('./execution-details-page');
+const { expect } = require('@playwright/test');
+
+export class ExecutionStepDetails extends ExecutionDetailsPage {
+  constructor(page, executionStep) {
+    super(page);
+
+    this.executionStep = executionStep;
+    this.stepType = executionStep.getByTestId('step-type');
+    this.stepPositionAndName = executionStep.getByTestId(
+      'step-position-and-name'
+    );
+    this.executionStepId = executionStep.getByTestId('execution-step-id');
+    this.executionStepExecutedAt = executionStep.getByTestId(
+      'execution-step-executed-at'
+    );
+    this.dataInTab = executionStep.getByTestId('data-in-tab');
+    this.dataInPanel = executionStep.getByTestId('data-in-panel');
+    this.dataOutTab = executionStep.getByTestId('data-out-tab');
+    this.dataOutPanel = executionStep.getByTestId('data-out-panel');
+  }
+
+  async expectDataInTabToBeSelectedByDefault() {
+    await expect(this.dataInTab).toHaveClass(/Mui-selected/);
+  }
+
+  async expectDataInToContainText(searchText, desiredText) {
+    await expect(this.dataInPanel).toContainText(desiredText);
+    await this.dataInPanel.locator('#search-input').fill(searchText);
+    await expect(this.dataInPanel).toContainText(desiredText);
+  }
+
+  async expectDataOutToContainText(searchText, desiredText) {
+    await expect(this.dataOutPanel).toContainText(desiredText);
+    await this.dataOutPanel.locator('#search-input').fill(searchText);
+    await expect(this.dataOutPanel).toContainText(desiredText);
+  }
+
+  async verifyTriggerExecutionStep({
+    stepPositionAndName,
+    stepDataInKey,
+    stepDataInValue,
+    stepDataOutKey,
+    stepDataOutValue,
+  }) {
+    await expect(this.stepType).toHaveText('Trigger');
+    await this.verifyExecutionStep({
+      stepPositionAndName,
+      stepDataInKey,
+      stepDataInValue,
+      stepDataOutKey,
+      stepDataOutValue,
+    });
+  }
+
+  async verifyActionExecutionStep({
+    stepPositionAndName,
+    stepDataInKey,
+    stepDataInValue,
+    stepDataOutKey,
+    stepDataOutValue,
+  }) {
+    await expect(this.stepType).toHaveText('Action');
+    await this.verifyExecutionStep({
+      stepPositionAndName,
+      stepDataInKey,
+      stepDataInValue,
+      stepDataOutKey,
+      stepDataOutValue,
+    });
+  }
+
+  async verifyExecutionStep({
+    stepPositionAndName,
+    stepDataInKey,
+    stepDataInValue,
+    stepDataOutKey,
+    stepDataOutValue,
+  }) {
+    await expect(this.stepPositionAndName).toHaveText(stepPositionAndName);
+    await expect(this.executionStepId).toHaveText(
+      /ID: [0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i
+    );
+    await expect(this.executionStepExecutedAt).toContainText(
+      /executed \d+ seconds? ago/
+    );
+    await this.expectDataInTabToBeSelectedByDefault();
+    await this.expectDataInToContainText(stepDataInKey, stepDataInValue);
+    await this.dataOutTab.click();
+    await expect(this.dataOutPanel).toContainText(stepDataOutValue);
+    await this.expectDataOutToContainText(stepDataOutKey, stepDataOutValue);
+  }
+}

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

@@ -2,4 +2,11 @@ const { AuthenticatedPage } = require('./authenticated-page');
 
 export class ExecutionsPage extends AuthenticatedPage {
   screenshotPath = '/executions';
+
+  constructor(page) {
+    super(page);
+
+    this.executionRow = this.page.getByTestId('execution-row');
+    this.executionsPageLoader = this.page.getByTestId('executions-loader');
+  }
 }

packages/e2e-tests/fixtures/index.js

@@ -2,6 +2,7 @@ const { test, expect } = require('@playwright/test');
 const { ApplicationsPage } = require('./applications-page');
 const { ConnectionsPage } = require('./connections-page');
 const { ExecutionsPage } = require('./executions-page');
+const { ExecutionDetailsPage } = require('./execution-details-page');
 const { FlowEditorPage } = require('./flow-editor-page');
 const { UserInterfacePage } = require('./user-interface-page');
 const { LoginPage } = require('./login-page');
@@ -29,6 +30,9 @@ exports.test = test.extend({
   executionsPage: async ({ page }, use) => {
     await use(new ExecutionsPage(page));
   },
+  executionDetailsPage: async ({ page }, use) => {
+    await use(new ExecutionDetailsPage(page));
+  },
   flowEditorPage: async ({ page }, use) => {
     await use(new FlowEditorPage(page));
   },

packages/e2e-tests/helpers/auth-api-helper.js

@@ -0,0 +1,15 @@
+const { expect } = require('../fixtures/index');
+
+export const getToken = async (apiRequest) => {
+  const tokenResponse = await apiRequest.post(
+    `http://localhost:${process.env.PORT}/api/v1/access-tokens`,
+    {
+      data: {
+        email: process.env.LOGIN_EMAIL,
+        password: process.env.LOGIN_PASSWORD,
+      },
+    }
+  );
+  await expect(tokenResponse.status()).toBe(200);
+  return await tokenResponse.json();
+};

packages/e2e-tests/helpers/flow-api-helper.js

@@ -0,0 +1,108 @@
+const { expect } = require('../fixtures/index');
+
+export const createFlow = async (request, token) => {
+  const response = await request.post(
+    `http://localhost:${process.env.PORT}/api/v1/flows`,
+    { headers: { Authorization: token } }
+  );
+  await expect(response.status()).toBe(201);
+  return await response.json();
+};
+
+export const getFlow = async (request, token, flowId) => {
+  const response = await request.get(
+    `http://localhost:${process.env.PORT}/api/v1/flows/${flowId}`,
+    { headers: { Authorization: token } }
+  );
+  await expect(response.status()).toBe(200);
+  return await response.json();
+};
+
+export const updateFlowName = async (request, token, flowId) => {
+  const updateFlowNameResponse = await request.patch(
+    `http://localhost:${process.env.PORT}/api/v1/flows/${flowId}`,
+    {
+      headers: { Authorization: token },
+      data: { name: flowId },
+    }
+  );
+  await expect(updateFlowNameResponse.status()).toBe(200);
+};
+
+export const updateFlowStep = async (request, token, stepId, requestBody) => {
+  const updateTriggerStepResponse = await request.patch(
+    `http://localhost:${process.env.PORT}/api/v1/steps/${stepId}`,
+    {
+      headers: { Authorization: token },
+      data: requestBody,
+    }
+  );
+  await expect(updateTriggerStepResponse.status()).toBe(200);
+  return await updateTriggerStepResponse.json();
+};
+
+export const testStep = async (request, token, stepId) => {
+  const testTriggerStepResponse = await request.post(
+    `http://localhost:${process.env.PORT}/api/v1/steps/${stepId}/test`,
+    {
+      headers: { Authorization: token },
+    }
+  );
+  await expect(testTriggerStepResponse.status()).toBe(200);
+};
+
+export const publishFlow = async (request, token, flowId) => {
+  const publishFlowResponse = await request.patch(
+    `http://localhost:${process.env.PORT}/api/v1/flows/${flowId}/status`,
+    {
+      headers: { Authorization: token },
+      data: { active: true },
+    }
+  );
+  await expect(publishFlowResponse.status()).toBe(200);
+  return publishFlowResponse.json();
+};
+
+export const triggerFlow = async (request, url) => {
+  const triggerFlowResponse = await request.get(url);
+  await expect(triggerFlowResponse.status()).toBe(204);
+};
+
+export const addWebhookFlow = async (request, token) => {
+  let flow = await createFlow(request, token);
+  const flowId = flow.data.id;
+  await updateFlowName(request, token, flowId);
+  flow = await getFlow(request, token, flowId);
+  const flowSteps = flow.data.steps;
+
+  const triggerStepId = flowSteps.find((step) => step.type === 'trigger').id;
+  const actionStepId = flowSteps.find((step) => step.type === 'action').id;
+
+  const triggerStep = await updateFlowStep(request, token, triggerStepId, {
+    appKey: 'webhook',
+    key: 'catchRawWebhook',
+    parameters: {
+      workSynchronously: false,
+    },
+  });
+  await request.get(triggerStep.data.webhookUrl);
+  await testStep(request, token, triggerStepId);
+
+  await updateFlowStep(request, token, actionStepId, {
+    appKey: 'webhook',
+    key: 'respondWith',
+    parameters: {
+      statusCode: '200',
+      body: 'ok',
+      headers: [
+        {
+          key: '',
+          value: '',
+        },
+      ],
+    },
+  });
+  await testStep(request, token, actionStepId);
+
+  return flowId;
+};

packages/e2e-tests/tests/admin-setup/admin.setup.js

@@ -2,11 +2,14 @@ const { publicTest: setup, expect } = require('../../fixtures/index');
 
 setup.describe.serial('Admin setup page', () => {
   // eslint-disable-next-line no-unused-vars
-  setup('should not be able to login if admin is not created', async ({ page, adminSetupPage, loginPage }) => {
+  setup(
-    await expect(async () => {
+    'should not be able to login if admin is not created',
-      await expect(await page.url()).toContain(adminSetupPage.path);
+    async ({ page, adminSetupPage }) => {
-    }).toPass();
+      await expect(async () => {
-  });
+        await expect(await page.url()).toContain(adminSetupPage.path);
+      }).toPass();
+    }
+  );
 
   setup('should validate the inputs', async ({ adminSetupPage }) => {
     await adminSetupPage.open();

packages/e2e-tests/tests/admin/manage-roles.spec.js

@@ -218,7 +218,12 @@ test.describe('Role management page', () => {
         const row = await adminRolesPage.getRoleRowByName('Delete Role');
         const modal = await adminRolesPage.clickDeleteRole(row);
         await modal.deleteButton.click();
-        await expect(modal.deleteAlert).toHaveCount(1);
+        await adminRolesPage.snackbar.waitFor({
+          state: 'attached',
+        });
+        const snackbar = await adminRolesPage.getSnackbarData('snackbar-delete-role-error');
+        await expect(snackbar.variant).toBe('error');
+        await adminRolesPage.closeSnackbar();
         await modal.close();
       }
     );
@@ -313,6 +318,7 @@ test.describe('Role management page', () => {
       const row = await adminUsersPage.findUserPageWithEmail(
         'user-delete-role-test@automatisch.io'
       );
+      // await test.waitForTimeout(10000);
       const modal = await adminUsersPage.clickDeleteUser(row);
       await modal.deleteButton.click();
       await adminUsersPage.snackbar.waitFor({
@@ -329,7 +335,15 @@ test.describe('Role management page', () => {
       const row = await adminRolesPage.getRoleRowByName('Cannot Delete Role');
       const modal = await adminRolesPage.clickDeleteRole(row);
       await modal.deleteButton.click();
-      await expect(modal.deleteAlert).toHaveCount(1);
+      await adminRolesPage.snackbar.waitFor({
+        state: 'attached',
+      });
+      /*
+        * TODO: await snackbar - make assertions based on product
+        * decisions
+        const snackbar = await adminRolesPage.getSnackbarData();
+        await expect(snackbar.variant).toBe('...');
+        */
       await adminRolesPage.closeSnackbar();
     });
   });

packages/e2e-tests/tests/executions/display-execution.spec.js

@@ -1,37 +1,138 @@
+const { request } = require('@playwright/test');
 const { test, expect } = require('../../fixtures/index');
+const {
+  triggerFlow,
+  publishFlow,
+  addWebhookFlow,
+} = require('../../helpers/flow-api-helper');
+const {
+  ExecutionStepDetails,
+} = require('../../fixtures/execution-step-details');
+const { getToken } = require('../../helpers/auth-api-helper');
+
+test.describe('Executions page', () => {
+  let flowId;
+
+  test.beforeAll(async () => {
+    const apiRequest = await request.newContext();
+    const tokenJsonResponse = await getToken(apiRequest);
+
+    flowId = await addWebhookFlow(apiRequest, tokenJsonResponse.data.token);
+
+    const { data } = await publishFlow(
+      apiRequest,
+      tokenJsonResponse.data.token,
+      flowId
+    );
+
+    const triggerStepWebhookUrl = data.steps.find(
+      (step) => step.type === 'trigger'
+    ).webhookUrl;
+
+    await triggerFlow(apiRequest, triggerStepWebhookUrl);
+  });
 
-// no execution data exists in an empty account
-test.describe.skip('Executions page', () => {
   test.beforeEach(async ({ page }) => {
     await page.getByTestId('executions-page-drawer-link').click();
-    await page.getByTestId('execution-row').first().click();
-
-    await expect(page).toHaveURL(/\/executions\//);
   });
 
-  test('displays data in by default', async ({ page, executionsPage }) => {
+  test('show correct step data for trigger and actions on test and non-test execution', async ({
-    await expect(page.getByTestId('execution-step').last()).toBeVisible();
+    page,
-    await expect(page.getByTestId('execution-step')).toHaveCount(2);
+    executionsPage,
+    executionDetailsPage,
+  }) => {
+    await executionsPage.executionsPageLoader.waitFor({
+      state: 'detached',
+    });
+    const flowExecutions = await executionsPage.executionRow.filter({
+      hasText: flowId,
+    });
+    await test.step('show only trigger step on test execution', async () => {
+      await expect(flowExecutions.last()).toContainText('Test run');
+      await flowExecutions.last().click();
 
-    await executionsPage.screenshot({
+      await executionDetailsPage.verifyExecutionData(flowId);
-      path: 'Execution - data in.png',
+      await expect(executionDetailsPage.executionStep).toHaveCount(1);
+
+      const executionStepDetails = new ExecutionStepDetails(
+        page,
+        executionDetailsPage.executionStep.last()
+      );
+      await executionStepDetails.verifyTriggerExecutionStep({
+        stepPositionAndName: '1. Webhook',
+        stepDataInKey: 'workSynchronously',
+        stepDataInValue: 'workSynchronously',
+        stepDataOutKey: 'host',
+        stepDataOutValue: 'localhost',
+      });
+
+      await page.goBack();
+    });
+
+    await test.step('show trigger and action step on action test execution', async () => {
+      await expect(flowExecutions.nth(1)).toContainText('Test run');
+      await flowExecutions.nth(1).click();
+
+      await expect(executionDetailsPage.executionStep).toHaveCount(2);
+      await executionDetailsPage.verifyExecutionData(flowId);
+
+      const firstExecutionStepDetails = new ExecutionStepDetails(
+        page,
+        executionDetailsPage.executionStep.first()
+      );
+      await firstExecutionStepDetails.verifyTriggerExecutionStep({
+        stepPositionAndName: '1. Webhook',
+        stepDataInKey: 'workSynchronously',
+        stepDataInValue: 'workSynchronously',
+        stepDataOutKey: 'host',
+        stepDataOutValue: 'localhost',
+      });
+
+      const lastExecutionStepDetails = new ExecutionStepDetails(
+        page,
+        executionDetailsPage.executionStep.last()
+      );
+      await lastExecutionStepDetails.verifyActionExecutionStep({
+        stepPositionAndName: '2. Webhook',
+        stepDataInKey: 'body',
+        stepDataInValue: 'body:"ok"',
+        stepDataOutKey: 'body',
+        stepDataOutValue: 'body:"ok"',
+      });
+
+      await page.goBack();
+    });
+
+    await test.step('show trigger and action step on flow execution', async () => {
+      await expect(flowExecutions.first()).not.toContainText('Test run');
+      await flowExecutions.first().click();
+
+      await expect(executionDetailsPage.executionStep).toHaveCount(2);
+      await executionDetailsPage.verifyExecutionData(flowId);
+
+      const firstExecutionStepDetails = new ExecutionStepDetails(
+        page,
+        executionDetailsPage.executionStep.first()
+      );
+      await firstExecutionStepDetails.verifyTriggerExecutionStep({
+        stepPositionAndName: '1. Webhook',
+        stepDataInKey: 'workSynchronously',
+        stepDataInValue: 'workSynchronously',
+        stepDataOutKey: 'host',
+        stepDataOutValue: 'localhost',
+      });
+
+      const lastExecutionStepDetails = new ExecutionStepDetails(
+        page,
+        executionDetailsPage.executionStep.last()
+      );
+      await lastExecutionStepDetails.verifyActionExecutionStep({
+        stepPositionAndName: '2. Webhook',
+        stepDataInKey: 'body',
+        stepDataInValue: 'body:"ok"',
+        stepDataOutKey: 'body',
+        stepDataOutValue: 'body:"ok"',
+      });
     });
   });
-
-  test('displays data out', async ({ page, executionsPage }) => {
-    const executionStepCount = await page.getByTestId('execution-step').count();
-    for (let i = 0; i < executionStepCount; i++) {
-      await page.getByTestId('data-out-tab').nth(i).click();
-      await expect(page.getByTestId('data-out-panel').nth(i)).toBeVisible();
-
-      await executionsPage.screenshot({
-        path: `Execution - data out - ${i}.png`,
-        animations: 'disabled',
-      });
-    }
-  });
-
-  test('does not display error', async ({ page }) => {
-    await expect(page.getByTestId('error-tab')).toBeHidden();
-  });
 });

packages/e2e-tests/tests/executions/list-executions.spec.js

@@ -1,17 +1,54 @@
+const { request } = require('@playwright/test');
 const { test, expect } = require('../../fixtures/index');
+const {
+  triggerFlow,
+  publishFlow,
+  addWebhookFlow,
+} = require('../../helpers/flow-api-helper');
+const { getToken } = require('../../helpers/auth-api-helper');
 
 test.describe('Executions page', () => {
+  let flowId;
+
+  test.beforeAll(async () => {
+    const apiRequest = await request.newContext();
+    const tokenJsonResponse = await getToken(apiRequest);
+
+    flowId = await addWebhookFlow(apiRequest, tokenJsonResponse.data.token);
+
+    const { data } = await publishFlow(
+      apiRequest,
+      tokenJsonResponse.data.token,
+      flowId
+    );
+
+    const triggerStepWebhookUrl = data.steps.find(
+      (step) => step.type === 'trigger'
+    ).webhookUrl;
+
+    await triggerFlow(apiRequest, triggerStepWebhookUrl);
+  });
+
   test.beforeEach(async ({ page }) => {
     await page.getByTestId('executions-page-drawer-link').click();
   });
 
-  // no executions exist in an empty account
+  test('should be able to see normal and test executions', async ({
-  test.skip('displays executions', async ({ page, executionsPage }) => {
+    executionsPage,
-    await page.getByTestId('executions-loader').waitFor({
+  }) => {
+    await executionsPage.executionsPageLoader.waitFor({
       state: 'detached',
     });
-    await expect(page.getByTestId('execution-row').first()).toBeVisible();
+    const flowExecutions = await executionsPage.executionRow.filter({
+      hasText: flowId,
+    });
 
-    await executionsPage.screenshot({ path: 'Executions.png' });
+    await expect(flowExecutions).toHaveCount(4);
+    await expect(flowExecutions.first()).toContainText('Success');
+    await expect(flowExecutions.first()).not.toContainText('Test run');
+    for (let testFlow = 1; testFlow < 4; testFlow++) {
+      await expect(flowExecutions.nth(testFlow)).toContainText('Test run');
+      await expect(flowExecutions.nth(testFlow)).toContainText('Success');
+    }
   });
 });

packages/web/src/components/ConfirmationDialog/index.jsx

@@ -6,7 +6,6 @@ import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
-import Alert from '@mui/material/Alert';
 
 function ConfirmationDialog(props) {
   const {
@@ -17,7 +16,6 @@ function ConfirmationDialog(props) {
     cancelButtonChildren,
     confirmButtonChildren,
     open = true,
-    errorMessage,
   } = props;
   const dataTest = props['data-test'];
   return (
@@ -46,11 +44,6 @@ function ConfirmationDialog(props) {
           </Button>
         )}
       </DialogActions>
-      {errorMessage && (
-        <Alert data-test="confirmation-dialog-error-alert" severity="error">
-          {errorMessage}
-        </Alert>
-      )}
     </Dialog>
   );
 }
@@ -64,7 +57,6 @@ ConfirmationDialog.propTypes = {
   confirmButtonChildren: PropTypes.node.isRequired,
   open: PropTypes.bool,
   'data-test': PropTypes.string,
-  errorMessage: PropTypes.string,
 };
 
 export default ConfirmationDialog;

packages/web/src/components/DeleteRoleButton/index.ee.jsx

@@ -4,7 +4,6 @@ import IconButton from '@mui/material/IconButton';
 import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import * as React from 'react';
 
-import { getGeneralErrorMessage, getFieldErrorMessage } from 'helpers/errors';
 import Can from 'components/Can';
 import ConfirmationDialog from 'components/ConfirmationDialog';
 import useFormatMessage from 'hooks/useFormatMessage';
@@ -16,21 +15,7 @@ function DeleteRoleButton(props) {
   const formatMessage = useFormatMessage();
   const enqueueSnackbar = useEnqueueSnackbar();
 
-  const {
+  const { mutateAsync: deleteRole } = useAdminDeleteRole(roleId);
-    mutateAsync: deleteRole,
-    error: deleteRoleError,
-    reset: resetDeleteRole,
-  } = useAdminDeleteRole(roleId);
-
-  const roleErrorMessage = getFieldErrorMessage({
-    fieldName: 'role',
-    error: deleteRoleError,
-  });
-
-  const generalErrorMessage = getGeneralErrorMessage({
-    error: deleteRoleError,
-    fallbackMessage: formatMessage('deleteRoleButton.generalError'),
-  });
 
   const handleConfirm = React.useCallback(async () => {
     try {
@@ -43,13 +28,23 @@ function DeleteRoleButton(props) {
           'data-test': 'snackbar-delete-role-success',
         },
       });
-    } catch {}
+    } catch (error) {
-  }, [deleteRole, enqueueSnackbar, formatMessage]);
+      const errors = Object.values(
+        error.response.data.errors || [['Failed while deleting!']],
+      );
 
-  const handleClose = () => {
+      for (const [error] of errors) {
-    setShowConfirmation(false);
+        enqueueSnackbar(error, {
-    resetDeleteRole();
+          variant: 'error',
-  };
+          SnackbarProps: {
+            'data-test': 'snackbar-delete-role-error',
+          },
+        });
+      }
+
+      throw new Error('Failed while deleting!');
+    }
+  }, [deleteRole, enqueueSnackbar, formatMessage]);
 
   return (
     <>
@@ -70,12 +65,11 @@ function DeleteRoleButton(props) {
         open={showConfirmation}
         title={formatMessage('deleteRoleButton.title')}
         description={formatMessage('deleteRoleButton.description')}
-        onClose={handleClose}
+        onClose={() => setShowConfirmation(false)}
         onConfirm={handleConfirm}
         cancelButtonChildren={formatMessage('deleteRoleButton.cancel')}
         confirmButtonChildren={formatMessage('deleteRoleButton.confirm')}
         data-test="delete-role-modal"
-        errorMessage={roleErrorMessage || generalErrorMessage}
       />
     </>
   );

packages/web/src/components/DeleteUserButton/index.ee.jsx

@@ -3,7 +3,6 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import IconButton from '@mui/material/IconButton';
 import { useQueryClient } from '@tanstack/react-query';
 
-import { getGeneralErrorMessage } from 'helpers/errors';
 import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import * as React from 'react';
 import ConfirmationDialog from 'components/ConfirmationDialog';
@@ -13,21 +12,12 @@ import useAdminUserDelete from 'hooks/useAdminUserDelete';
 function DeleteUserButton(props) {
   const { userId } = props;
   const [showConfirmation, setShowConfirmation] = React.useState(false);
-  const {
+  const { mutateAsync: deleteUser } = useAdminUserDelete(userId);
-    mutateAsync: deleteUser,
-    error: deleteUserError,
-    reset: resetDeleteUser,
-  } = useAdminUserDelete(userId);
 
   const formatMessage = useFormatMessage();
   const enqueueSnackbar = useEnqueueSnackbar();
   const queryClient = useQueryClient();
 
-  const generalErrorMessage = getGeneralErrorMessage({
-    error: deleteUserError,
-    fallbackMessage: formatMessage('deleteUserButton.deleteError'),
-  });
-
   const handleConfirm = React.useCallback(async () => {
     try {
       await deleteUser();
@@ -39,14 +29,16 @@ function DeleteUserButton(props) {
           'data-test': 'snackbar-delete-user-success',
         },
       });
-    } catch {}
+    } catch (error) {
+      enqueueSnackbar(
+        error?.message || formatMessage('deleteUserButton.deleteError'),
+        {
+          variant: 'error',
+        },
+      );
+    }
   }, [deleteUser]);
 
-  const handleClose = () => {
-    setShowConfirmation(false);
-    resetDeleteUser();
-  };
-
   return (
     <>
       <IconButton
@@ -61,12 +53,11 @@ function DeleteUserButton(props) {
         open={showConfirmation}
         title={formatMessage('deleteUserButton.title')}
         description={formatMessage('deleteUserButton.description')}
-        onClose={handleClose}
+        onClose={() => setShowConfirmation(false)}
         onConfirm={handleConfirm}
         cancelButtonChildren={formatMessage('deleteUserButton.cancel')}
         confirmButtonChildren={formatMessage('deleteUserButton.confirm')}
         data-test="delete-user-modal"
-        errorMessage={generalErrorMessage}
       />
     </>
   );

packages/web/src/components/ExecutionHeader/index.jsx

@@ -10,7 +10,7 @@ import { ExecutionPropType } from 'propTypes/propTypes';
 
 function ExecutionName(props) {
   return (
-    <Typography variant="h3" gutterBottom>
+    <Typography data-test="execution-name" variant="h3" gutterBottom>
       {props.name}
     </Typography>
   );
@@ -29,7 +29,7 @@ function ExecutionId(props) {
   );
   return (
     <Box sx={{ display: 'flex' }}>
-      <Typography variant="body2">
+      <Typography data-test="execution-id" variant="body2">
         {formatMessage('execution.id', { id })}
       </Typography>
     </Box>
@@ -47,7 +47,7 @@ function ExecutionDate(props) {
     <Tooltip
       title={createdAt.toLocaleString(DateTime.DATETIME_FULL_WITH_SECONDS)}
     >
-      <Typography variant="body1" gutterBottom>
+      <Typography data-test="execution-created-at" variant="body1" gutterBottom>
         {relativeCreatedAt}
       </Typography>
     </Tooltip>

packages/web/src/components/ExecutionStep/index.jsx

@@ -36,7 +36,11 @@ function ExecutionStepId(props) {
 
   return (
     <Box sx={{ display: 'flex' }} gridArea="id">
-      <Typography variant="caption" fontWeight="bold">
+      <Typography
+        data-test="execution-step-id"
+        variant="caption"
+        fontWeight="bold"
+      >
         {formatMessage('executionStep.id', { id })}
       </Typography>
     </Box>
@@ -56,7 +60,11 @@ function ExecutionStepDate(props) {
     <Tooltip
       title={createdAt.toLocaleString(DateTime.DATETIME_FULL_WITH_SECONDS)}
     >
-      <Typography variant="caption" gutterBottom>
+      <Typography
+        data-test="execution-step-executed-at"
+        variant="caption"
+        gutterBottom
+      >
         {formatMessage('executionStep.executedAt', {
           datetime: relativeCreatedAt,
         })}
@@ -119,12 +127,12 @@ function ExecutionStep(props) {
             <ExecutionStepId id={executionStep.step.id} />
 
             <Box flex="1" gridArea="step">
-              <Typography variant="caption">
+              <Typography data-test="step-type" variant="caption">
                 {isTrigger && formatMessage('flowStep.triggerType')}
                 {isAction && formatMessage('flowStep.actionType')}
               </Typography>
 
-              <Typography variant="body2">
+              <Typography data-test="step-position-and-name" variant="body2">
                 {step.position}. {app?.name}
               </Typography>
             </Box>
@@ -152,7 +160,7 @@ function ExecutionStep(props) {
           </Tabs>
         </Box>
 
-        <TabPanel value={activeTabIndex} index={0}>
+        <TabPanel value={activeTabIndex} index={0} data-test="data-in-panel">
           <SearchableJSONViewer data={executionStep.dataIn} />
         </TabPanel>
 

packages/web/src/helpers/errors.js

@@ -1,29 +0,0 @@
-// Helpers to extract errors received from the API
-
-export const getGeneralErrorMessage = ({ error, fallbackMessage }) => {
-  if (!error) {
-    return;
-  }
-
-  const errors = error?.response?.data?.errors;
-  const generalError = errors?.general;
-
-  if (generalError && Array.isArray(generalError)) {
-    return generalError.join(' ');
-  }
-
-  if (!errors) {
-    return error?.message || fallbackMessage;
-  }
-};
-
-export const getFieldErrorMessage = ({ fieldName, error }) => {
-  const errors = error?.response?.data?.errors;
-  const fieldErrors = errors?.[fieldName];
-
-  if (fieldErrors && Array.isArray(fieldErrors)) {
-    return fieldErrors.join(', ');
-  }
-
-  return '';
-};

packages/web/src/locales/en.json

@@ -245,7 +245,6 @@
   "deleteRoleButton.cancel": "Cancel",
   "deleteRoleButton.confirm": "Delete",
   "deleteRoleButton.successfullyDeleted": "The role has been deleted.",
-  "deleteRoleButton.generalError": "Failed while deleting!",
   "editRolePage.title": "Edit role",
   "createRolePage.title": "Create role",
   "roleForm.name": "Name",