test: add import and export flow tests

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

@@ -12,12 +12,16 @@ export class FlowEditorPage extends AuthenticatedPage {
     super(page);
 
     this.appAutocomplete = this.page.getByTestId('choose-app-autocomplete');
+    this.appAutocompleteInput = this.appAutocomplete.locator('input');
     this.eventAutocomplete = this.page.getByTestId('choose-event-autocomplete');
+    this.eventAutocompleteInput = this.eventAutocomplete.locator('input');
     this.continueButton = this.page.getByTestId('flow-substep-continue-button');
     this.testAndContinueButton = this.page.getByText('Test & Continue');
     this.connectionAutocomplete = this.page.getByTestId(
       'choose-connection-autocomplete'
     );
+    this.connectionAutocompleteInput =
+      this.connectionAutocomplete.locator('input');
     this.addNewConnectionItem = this.page.getByText('Add new connection');
     this.testOutput = this.page.getByTestId('flow-test-substep-output');
     this.hasNoOutput = this.page.getByTestId('flow-test-substep-no-output');
@@ -32,6 +36,9 @@ export class FlowEditorPage extends AuthenticatedPage {
       .locator('input');
 
     this.flowStep = this.page.getByTestId('flow-step');
+    this.goBackButton = this.page.getByTestId('editor-go-back-button');
+    this.exportFlowButton = page.getByTestId('export-flow-button');
+    this.stepName = page.getByTestId('step-name');
   }
 
   async createWebhookTrigger(workSynchronously) {
@@ -76,7 +83,11 @@ export class FlowEditorPage extends AuthenticatedPage {
     await expect(this.eventAutocomplete).toBeVisible();
     await this.eventAutocomplete.click();
     await Promise.all([
-      this.page.waitForResponse(resp => /(apps\/.*\/actions\/.*\/substeps)/.test(resp.url()) && resp.status() === 200),
+      this.page.waitForResponse(
+        (resp) =>
+          /(apps\/.*\/actions\/.*\/substeps)/.test(resp.url()) &&
+          resp.status() === 200
+      ),
       this.page.getByRole('option', { name: eventName }).click(),
     ]);
     await this.continueButton.click();

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

@@ -0,0 +1,10 @@
+const { AuthenticatedPage } = require('./authenticated-page');
+
+export class FlowsPage extends AuthenticatedPage {
+  constructor(page) {
+    super(page);
+
+    this.flowRow = this.page.getByTestId('flow-row');
+    this.importFlowButton = page.getByTestId('import-flow-button');
+  }
+}

packages/e2e-tests/fixtures/import-flow-dialog.js

@@ -0,0 +1,20 @@
+const { AuthenticatedPage } = require('./authenticated-page');
+
+export class ImportFlowDialog extends AuthenticatedPage {
+  constructor(page) {
+    super(page);
+
+    this.fileName = page.getByTestId('file-name');
+    this.fileNameWrapper = page.getByTestId('file-name-wrapper');
+    this.importButton = page.getByTestId('import-flow-dialog-import-button');
+    this.fileInput = page.locator("input[type='file']");
+    this.genericImportError = page.getByTestId(
+      'import-flow-dialog-generic-error-alert'
+    );
+    this.importParsingError = page.getByTestId(
+      'import-flow-dialog-parsing-error-alert'
+    );
+    this.successAlert = page.getByTestId('import-flow-dialog-success-alert');
+    this.successAlertLink = this.successAlert.getByRole('link');
+  }
+}

packages/e2e-tests/fixtures/index.js

@@ -10,6 +10,7 @@ const { AcceptInvitation } = require('./accept-invitation-page');
 const { adminFixtures } = require('./admin');
 const { AdminSetupPage } = require('./admin-setup-page');
 const { AdminCreateUserPage } = require('./admin/create-user-page');
+const { FlowsPage } = require('./flows-page');
 
 exports.test = test.extend({
   page: async ({ page }, use) => {
@@ -36,6 +37,9 @@ exports.test = test.extend({
   flowEditorPage: async ({ page }, use) => {
     await use(new FlowEditorPage(page));
   },
+  flowsPage: async ({ page }, use) => {
+    await use(new FlowsPage(page));
+  },
   userInterfacePage: async ({ page }, use) => {
     await use(new UserInterfacePage(page));
   },