From 8d10f26f56b49d1512545ca15c8e95be97b0d6a7 Mon Sep 17 00:00:00 2001 From: "Jakub P." Date: Fri, 6 Sep 2024 15:32:00 +0200 Subject: [PATCH] test: add pop-up notification test --- .../add-mattermost-connection-modal.js | 25 ++++++++ .../e2e-tests/fixtures/flow-editor-page.js | 1 + .../enabled-pop-up-reminder.spec.js | 63 +++++++++++++++++++ .../src/components/AddAppConnection/index.jsx | 1 + 4 files changed, 90 insertions(+) create mode 100644 packages/e2e-tests/fixtures/apps/mattermost/add-mattermost-connection-modal.js create mode 100644 packages/e2e-tests/tests/connections/enabled-pop-up-reminder.spec.js diff --git a/packages/e2e-tests/fixtures/apps/mattermost/add-mattermost-connection-modal.js b/packages/e2e-tests/fixtures/apps/mattermost/add-mattermost-connection-modal.js new file mode 100644 index 00000000..9bf99ca5 --- /dev/null +++ b/packages/e2e-tests/fixtures/apps/mattermost/add-mattermost-connection-modal.js @@ -0,0 +1,25 @@ +const { BasePage } = require('../../base-page'); + +export class AddMattermostConnectionModal extends BasePage { + + /** + * @param {import('@playwright/test').Page} page + */ + constructor (page) { + super(page); + this.clientIdInput = page.getByTestId('clientId-text'); + this.clientIdSecretInput = page.getByTestId('clientSecret-text'); + this.instanceUrlInput = page.getByTestId("instanceUrl-text"); + this.submitButton = page.getByTestId('create-connection-button'); + } + + async fillConnectionForm() { + await this.instanceUrlInput.fill('https://mattermost.com'); + await this.clientIdInput.fill('aaa'); + await this.clientIdSecretInput.fill('bbb'); + } + + async submitConnectionForm() { + await this.submitButton.click(); + } +} \ No newline at end of file diff --git a/packages/e2e-tests/fixtures/flow-editor-page.js b/packages/e2e-tests/fixtures/flow-editor-page.js index c68ab398..a4db7003 100644 --- a/packages/e2e-tests/fixtures/flow-editor-page.js +++ b/packages/e2e-tests/fixtures/flow-editor-page.js @@ -18,6 +18,7 @@ export class FlowEditorPage extends AuthenticatedPage { this.connectionAutocomplete = this.page.getByTestId( 'choose-connection-autocomplete' ); + 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'); this.unpublishFlowButton = this.page.getByTestId('unpublish-flow-button'); diff --git a/packages/e2e-tests/tests/connections/enabled-pop-up-reminder.spec.js b/packages/e2e-tests/tests/connections/enabled-pop-up-reminder.spec.js new file mode 100644 index 00000000..32d30525 --- /dev/null +++ b/packages/e2e-tests/tests/connections/enabled-pop-up-reminder.spec.js @@ -0,0 +1,63 @@ +const { test, expect } = require('../../fixtures/index'); +const {AddMattermostConnectionModal} = require('../../fixtures/apps/mattermost/add-mattermost-connection-modal'); + +test.describe('Pop-up message on connections', () => { + test.beforeEach(async ({ flowEditorPage, page }) => { + await page.getByTestId('create-flow-button').click(); + await page.waitForURL( + /\/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(page.getByTestId('flow-step')).toHaveCount(2); + + await flowEditorPage.flowName.click(); + await flowEditorPage.flowNameInput.fill('PopupFlow'); + await flowEditorPage.createWebhookTrigger(true); + + await flowEditorPage.chooseAppAndEvent('Mattermost', 'Send a message to channel'); + await expect(flowEditorPage.continueButton).toHaveCount(1); + await expect(flowEditorPage.continueButton).not.toBeEnabled(); + + await flowEditorPage.connectionAutocomplete.click(); + await flowEditorPage.addNewConnectionItem.click(); }); + + test('should show error to remind to enable pop-up on connection create', async ({ + page, + }) => { + const addMattermostConnectionModal = new AddMattermostConnectionModal(page); + + // Inject script to override window.open + await page.evaluate(() => { + // eslint-disable-next-line no-undef + window.open = function() { + console.log('Popup blocked!'); + return null; + }; + }); + + await addMattermostConnectionModal.fillConnectionForm(); + await addMattermostConnectionModal.submitConnectionForm(); + + await expect(page.getByTestId("add-connection-error")).toHaveCount(1); + await expect(page.getByTestId("add-connection-error")).toHaveText('Make sure pop-ups are enabled in your browser.'); + }); + + test('should not show pop-up error if pop-ups are enabled on connection create', async ({ + page, + }) => { + const addMattermostConnectionModal = new AddMattermostConnectionModal(page); + + await addMattermostConnectionModal.fillConnectionForm(); + const popupPromise = page.waitForEvent('popup'); + await addMattermostConnectionModal.submitConnectionForm(); + + const popup = await popupPromise; + await expect(popup.url()).toContain("mattermost"); + await expect(page.getByTestId("add-connection-error")).toHaveCount(0); + + await test.step('Should show error on failed credentials verification', async () => { + await popup.close(); + await expect(page.getByTestId("add-connection-error")).toHaveCount(1); + await expect(page.getByTestId("add-connection-error")).toHaveText('Error occured while verifying credentials!'); + }); + }); +}); \ No newline at end of file diff --git a/packages/web/src/components/AddAppConnection/index.jsx b/packages/web/src/components/AddAppConnection/index.jsx index 2d1b468c..bb019cc6 100644 --- a/packages/web/src/components/AddAppConnection/index.jsx +++ b/packages/web/src/components/AddAppConnection/index.jsx @@ -136,6 +136,7 @@ function AddAppConnection(props) { {error && (