test: add in-between assertions and more fixtures (#1224)

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

@@ -2,15 +2,15 @@
 const { test, expect } = require('../../fixtures/index');
 
 test.describe('Apps page', () => {
-  test.beforeEach(async ({ page, applicationsPage }) => {
-    await page.getByTestId('apps-page-drawer-link').click();
+  test.beforeEach(async ({ applicationsPage }) => {
+    await applicationsPage.drawerLink.click();
   });
 
-  test('displays applications', async ({ page, applicationsPage }) => {
-    await page.getByTestId('apps-loader').waitFor({
+  test('displays applications', async ({ applicationsPage }) => {
+    await applicationsPage.page.getByTestId('apps-loader').waitFor({
       state: 'detached',
     });
-    await expect(page.getByTestId('app-row')).not.toHaveCount(0);
+    await expect(applicationsPage.page.getByTestId('app-row')).not.toHaveCount(0);
 
     await applicationsPage.screenshot({
       path: 'Applications.png',
@@ -18,49 +18,56 @@ test.describe('Apps page', () => {
   });
 
   test.describe('can add connection', () => {
-    test.beforeEach(async ({ page }) => {
-      await expect(page.getByTestId('add-connection-button')).toBeVisible();
-      await page.getByTestId('add-connection-button').click();
-      await page
+    test.beforeEach(async ({ applicationsPage }) => {
+      await expect(applicationsPage.addConnectionButton).toBeClickableLink();
+      await applicationsPage.addConnectionButton.click();
+      await applicationsPage
+        .page
         .getByTestId('search-for-app-loader')
         .waitFor({ state: 'detached' });
     });
 
-    test('lists applications', async ({ page, applicationsPage }) => {
-      const appListItemCount = await page.getByTestId('app-list-item').count();
+    test('lists applications', async ({ applicationsPage }) => {
+      const appListItemCount = await applicationsPage.page.getByTestId('app-list-item').count();
       expect(appListItemCount).toBeGreaterThan(10);
 
       await applicationsPage.clickAway();
     });
 
-    test('searches an application', async ({ page, applicationsPage }) => {
-      await page.getByTestId('search-for-app-text-field').fill('DeepL');
-      await expect(page.getByTestId('app-list-item')).toHaveCount(1);
+    test('searches an application', async ({ applicationsPage }) => {
+      await applicationsPage.page.getByTestId('search-for-app-text-field').fill('DeepL');
+      await applicationsPage
+        .page
+        .getByTestId('search-for-app-loader')
+        .waitFor({ state: 'detached' });
+
+      await expect(applicationsPage.page.getByTestId('app-list-item')).toHaveCount(1);
 
       await applicationsPage.clickAway();
     });
 
     test('goes to app page to create a connection', async ({
-      page,
       applicationsPage,
     }) => {
-      await page.getByTestId('app-list-item').first().click();
-      await expect(page).toHaveURL('/app/deepl/connections/add?shared=false');
-      await expect(page.getByTestId('add-app-connection-dialog')).toBeVisible();
+      // loading app, app config, app auth clients take time
+      test.setTimeout(60000);
+
+      await applicationsPage.page.getByTestId('app-list-item').first().click();
+      await expect(applicationsPage.page).toHaveURL('/app/deepl/connections/add?shared=false');
+      await expect(applicationsPage.page.getByTestId('add-app-connection-dialog')).toBeVisible();
 
       await applicationsPage.clickAway();
     });
 
     test('closes the dialog on backdrop click', async ({
-      page,
       applicationsPage,
     }) => {
-      await page.getByTestId('app-list-item').first().click();
-      await expect(page).toHaveURL('/app/deepl/connections/add?shared=false');
-      await expect(page.getByTestId('add-app-connection-dialog')).toBeVisible();
+      await applicationsPage.page.getByTestId('app-list-item').first().click();
+      await expect(applicationsPage.page).toHaveURL('/app/deepl/connections/add?shared=false');
+      await expect(applicationsPage.page.getByTestId('add-app-connection-dialog')).toBeVisible();
       await applicationsPage.clickAway();
-      await expect(page).toHaveURL('/app/deepl/connections');
-      await expect(page.getByTestId('add-app-connection-dialog')).toBeHidden();
+      await expect(applicationsPage.page).toHaveURL('/app/deepl/connections');
+      await expect(applicationsPage.page.getByTestId('add-app-connection-dialog')).toBeHidden();
     });
   });
 });

packages/e2e-tests/tests/connections/create-connection.spec.js

@@ -19,7 +19,7 @@ test.describe('Connections page', () => {
 
   test.describe('can add connection', () => {
     test('has a button to open add connection dialog', async ({ page }) => {
-      await expect(page.getByTestId('add-connection-button')).toBeVisible();
+      await expect(page.getByTestId('add-connection-button')).toBeClickableLink();
     });
 
     test('add connection button takes user to add connection page', async ({

packages/e2e-tests/tests/flow-editor/create-flow.spec.js

@@ -13,28 +13,30 @@ test.beforeAll(async ({ browser }) => {
   flowEditorPage = new FlowEditorPage(page);
 });
 
-test('create flow', async ({}) => {
+test('create flow', async () => {
   await flowEditorPage.page.getByTestId('create-flow-button').click();
   await expect(flowEditorPage.page).toHaveURL(/\/editor\/create/);
   await expect(flowEditorPage.page).toHaveURL(
     /\/editor\/[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}/
   );
+
+  await expect(flowEditorPage.stepCircularLoader).not.toBeVisible();
 });
 
-test('has two steps by default', async ({}) => {
+test('has two steps by default', async () => {
   await expect(flowEditorPage.page.getByTestId('flow-step')).toHaveCount(2);
 });
 
 test.describe('arrange Scheduler trigger', () => {
   test.describe('choose app and event substep', () => {
-    test('choose application', async ({}) => {
+    test('choose application', async () => {
       await flowEditorPage.appAutocomplete.click();
       await flowEditorPage.page
         .getByRole('option', { name: 'Scheduler' })
         .click();
     });
 
-    test('choose an event', async ({}) => {
+    test('choose an event', async () => {
       await expect(flowEditorPage.eventAutocomplete).toBeVisible();
       await flowEditorPage.eventAutocomplete.click();
       await flowEditorPage.page
@@ -42,34 +44,34 @@ test.describe('arrange Scheduler trigger', () => {
         .click();
     });
 
-    test('continue to next step', async ({}) => {
+    test('continue to next step', async () => {
       await flowEditorPage.continueButton.click();
     });
 
-    test('collapses the substep', async ({}) => {
+    test('collapses the substep', async () => {
       await expect(flowEditorPage.appAutocomplete).not.toBeVisible();
       await expect(flowEditorPage.eventAutocomplete).not.toBeVisible();
     });
   });
 
   test.describe('set up a trigger', () => {
-    test('choose "yes" in "trigger on weekends?"', async ({}) => {
+    test('choose "yes" in "trigger on weekends?"', async () => {
       await expect(flowEditorPage.trigger).toBeVisible();
       await flowEditorPage.trigger.click();
       await flowEditorPage.page.getByRole('option', { name: 'Yes' }).click();
     });
 
-    test('continue to next step', async ({}) => {
+    test('continue to next step', async () => {
       await flowEditorPage.continueButton.click();
     });
 
-    test('collapses the substep', async ({}) => {
+    test('collapses the substep', async () => {
       await expect(flowEditorPage.trigger).not.toBeVisible();
     });
   });
 
   test.describe('test trigger', () => {
-    test('show sample output', async ({}) => {
+    test('show sample output', async () => {
       await expect(flowEditorPage.testOuput).not.toBeVisible();
       await flowEditorPage.continueButton.click();
       await expect(flowEditorPage.testOuput).toBeVisible();
@@ -83,12 +85,12 @@ test.describe('arrange Scheduler trigger', () => {
 
 test.describe('arrange Ntfy action', () => {
   test.describe('choose app and event substep', () => {
-    test('choose application', async ({}) => {
+    test('choose application', async () => {
       await flowEditorPage.appAutocomplete.click();
       await flowEditorPage.page.getByRole('option', { name: 'Ntfy' }).click();
     });
 
-    test('choose an event', async ({}) => {
+    test('choose an event', async () => {
       await expect(flowEditorPage.eventAutocomplete).toBeVisible();
       await flowEditorPage.eventAutocomplete.click();
       await flowEditorPage.page
@@ -96,33 +98,33 @@ test.describe('arrange Ntfy action', () => {
         .click();
     });
 
-    test('continue to next step', async ({}) => {
+    test('continue to next step', async () => {
       await flowEditorPage.continueButton.click();
     });
 
-    test('collapses the substep', async ({}) => {
+    test('collapses the substep', async () => {
       await expect(flowEditorPage.appAutocomplete).not.toBeVisible();
       await expect(flowEditorPage.eventAutocomplete).not.toBeVisible();
     });
   });
 
   test.describe('choose connection', () => {
-    test('choose connection list item', async ({}) => {
+    test('choose connection list item', async () => {
       await flowEditorPage.connectionAutocomplete.click();
       await flowEditorPage.page.getByRole('option').first().click();
     });
 
-    test('continue to next step', async ({}) => {
+    test('continue to next step', async () => {
       await flowEditorPage.continueButton.click();
     });
 
-    test('collapses the substep', async ({}) => {
+    test('collapses the substep', async () => {
       await expect(flowEditorPage.connectionAutocomplete).not.toBeVisible();
     });
   });
 
   test.describe('set up action', () => {
-    test('fill topic and message body', async ({}) => {
+    test('fill topic and message body', async () => {
       await flowEditorPage.page
         .getByTestId('parameters.topic-power-input')
         .locator('[contenteditable]')
@@ -133,17 +135,17 @@ test.describe('arrange Ntfy action', () => {
         .fill('Message body');
     });
 
-    test('continue to next step', async ({}) => {
+    test('continue to next step', async () => {
       await flowEditorPage.continueButton.click();
     });
 
-    test('collapses the substep', async ({}) => {
+    test('collapses the substep', async () => {
       await expect(flowEditorPage.connectionAutocomplete).not.toBeVisible();
     });
   });
 
   test.describe('test trigger', () => {
-    test('show sample output', async ({}) => {
+    test('show sample output', async () => {
       await expect(flowEditorPage.testOuput).not.toBeVisible();
       await flowEditorPage.page
         .getByTestId('flow-substep-continue-button')
@@ -159,34 +161,34 @@ test.describe('arrange Ntfy action', () => {
 });
 
 test.describe('publish and unpublish', () => {
-  test('publish flow', async ({}) => {
+  test('publish flow', async () => {
     await expect(flowEditorPage.unpublishFlowButton).not.toBeVisible();
     await expect(flowEditorPage.publishFlowButton).toBeVisible();
     await flowEditorPage.publishFlowButton.click();
     await expect(flowEditorPage.publishFlowButton).not.toBeVisible();
   });
 
-  test('shows read-only sticky snackbar', async ({}) => {
+  test('shows read-only sticky snackbar', async () => {
     await expect(flowEditorPage.infoSnackbar).toBeVisible();
     await flowEditorPage.screenshot({
       path: 'Published flow.png',
     });
   });
 
-  test('unpublish from snackbar', async ({}) => {
+  test('unpublish from snackbar', async () => {
     await flowEditorPage.page
       .getByTestId('unpublish-flow-from-snackbar')
       .click();
     await expect(flowEditorPage.infoSnackbar).not.toBeVisible();
   });
 
-  test('publish once again', async ({}) => {
+  test('publish once again', async () => {
     await expect(flowEditorPage.publishFlowButton).toBeVisible();
     await flowEditorPage.publishFlowButton.click();
     await expect(flowEditorPage.publishFlowButton).not.toBeVisible();
   });
 
-  test('unpublish from layout top bar', async ({}) => {
+  test('unpublish from layout top bar', async () => {
     await expect(flowEditorPage.unpublishFlowButton).toBeVisible();
     await flowEditorPage.unpublishFlowButton.click();
     await expect(flowEditorPage.unpublishFlowButton).not.toBeVisible();
@@ -197,7 +199,7 @@ test.describe('publish and unpublish', () => {
 });
 
 test.describe('in layout', () => {
-  test('can go back to flows page', async ({}) => {
+  test('can go back to flows page', async () => {
     await flowEditorPage.page.getByTestId('editor-go-back-button').click();
     await expect(flowEditorPage.page).toHaveURL('/flows');
   });