test: add tests for git connection (#1289)

* chore: add data-test attributes

* test: add github connection test, add applications modal

* chore: embed test GITHUB_CLIENT_* environment values

---------

Co-authored-by: Ali BARIN <ali.barin53@gmail.com>

packages/e2e-tests/fixtures/apps/github/add-github-connection-modal.js

@@ -0,0 +1,49 @@
+import { GithubPopup } from './github-popup';
+
+const { BasePage } = require('../../base-page');
+
+export class AddGithubConnectionModal extends BasePage {
+
+  /**
+   * @param {import('@playwright/test').Page} page
+   */
+  constructor (page) {
+    super(page);
+    this.modal = page.getByTestId('add-app-connection-dialog');
+    this.oauthRedirectInput = page.getByTestId('oAuthRedirectUrl-text');
+    this.clientIdInput = page.getByTestId('consumerKey-text');
+    this.clientIdSecretInput = page.getByTestId('consumerSecret-text');
+    this.submitButton = page.getByTestId('create-connection-button');
+  }
+
+  async visible () {
+    return await this.modal.isVisible();
+  }
+
+  async inputForm () {
+    await connectionModal.clientIdInput.fill(
+      process.env.GITHUB_CLIENT_ID
+    );
+    await connectionModal.clientIdSecretInput.fill(
+      process.env.GITHUB_CLIENT_SECRET
+    );
+  }
+
+  /**
+   * @returns {import('@playwright/test').Page}
+   */
+  async submit () {
+    const popupPromise = this.page.waitForEvent('popup');
+    await this.submitButton.click();
+    const popup = await popupPromise;
+    await popup.bringToFront();
+    return popup;
+  }
+
+  /**
+   * @param {import('@playwright/test').Page} page
+   */
+  async handlePopup (page) {
+    return await GithubPopup.handle(page);
+  }
+}

packages/e2e-tests/fixtures/apps/github/github-page.js

@@ -0,0 +1,65 @@
+const { BasePage } = require('../../base-page');
+const { AddGithubConnectionModal } = require('./add-github-connection-modal');
+
+export class GithubPage extends BasePage {
+
+  constructor (page) {
+    super(page)
+    this.addConnectionButton = page.getByTestId('add-connection-button');
+    this.connectionsTab = page.getByTestId('connections-tab');
+    this.flowsTab = page.getByTestId('flows-tab');
+    this.connectionRows = page.getByTestId('connection-row');
+    this.flowRows = page.getByTestId('flow-row');
+    this.firstConnectionButton = page.getByTestId('connections-no-results');
+    this.firstFlowButton = page.getByTestId('flows-no-results');
+    this.addConnectionModal = new AddGithubConnectionModal(page);
+  }
+
+  async goto () {
+    await this.page.goto('/app/github/connections');
+  }
+
+  async openConnectionModal () {
+    await this.addConnectionButton.click();
+    await expect(this.addConnectionButton.modal).toBeVisible();
+    return this.addConnectionModal;
+  }
+
+  async flowsVisible () {
+    return this.page.url() === await this.flowsTab.getAttribute('href');
+  }
+
+  async connectionsVisible () {
+    return this.page.url() === await this.connectionsTab.getAttribute('href');
+  }
+
+  async hasFlows () {
+    if (!(await this.flowsVisible())) {
+      await this.flowsTab.click();
+      await expect(this.flowsTab).toBeVisible();
+    }
+    return await this.flowRows.count() > 0
+  }
+
+  async hasConnections () {
+    if (!(await this.connectionsVisible())) {
+      await this.connectionsTab.click();
+      await expect(this.connectionsTab).toBeVisible();
+    }
+    return await this.connectionRows.count() > 0;
+  }
+}
+
+/**
+ *
+ * @param {import('@playwright/test').Page} page
+ */
+export async function initGithubConnection (page) {
+  // assumes already logged in
+  const githubPage = new GithubPage(page);
+  await githubPage.goto();
+  const modal = await githubPage.openConnectionModal();
+  await modal.inputForm();
+  const popup = await modal.submit();
+  await modal.handlePopup(popup);
+}

packages/e2e-tests/fixtures/apps/github/github-popup.js

@@ -0,0 +1,92 @@
+const { BasePage } = require('../../base-page');
+
+export class GithubPopup extends BasePage {
+
+  /**
+   * @param {import('@playwright/test').Page} page
+   */
+  static async handle (page) {
+    const popup = new GithubPopup(page);
+    return await popup.handleAuthFlow();
+  }
+
+  getPathname () {
+    const url = this.page.url()
+    try {
+      return new URL(url).pathname;
+    } catch (e) {
+      return new URL(`https://github.com/${url}`).pathname;
+    }
+  }
+
+  async handleAuthFlow () {
+    if (this.getPathname() === '/login') {
+      await this.handleLogin();
+    }
+    if (this.page.isClosed()) { return; }
+    if (this.getPathname() === '/login/oauth/authorize') {
+      await this.handleAuthorize();
+    }
+  }
+
+  async handleLogin () {
+    const loginInput = this.page.getByLabel('Username or email address');
+    loginInput.click();
+    await loginInput.fill(process.env.GITHUB_USERNAME);
+    const passwordInput = this.page.getByLabel('Password');
+    passwordInput.click()
+    await passwordInput.fill(process.env.GITHUB_PASSWORD);
+    await this.page.getByRole('button', { name: 'Sign in' }).click();
+    // await this.page.waitForTimeout(2000);
+    if (this.page.isClosed()) {
+      return
+    }
+    // await this.page.waitForLoadState('networkidle', 30000);
+    this.page.waitForEvent('load');
+    if (this.page.isClosed()) {
+      return
+    }
+    await this.page.waitForURL(function (url) {
+      const u = new URL(url);
+      return (
+        u.pathname === '/login/oauth/authorize'
+      ) && u.searchParams.get('client_id');
+    });
+  }
+
+  async handleAuthorize () {
+    if (this.page.isClosed()) { return }
+    const authorizeButton = this.page.getByRole(
+      'button',
+      { name: 'Authorize' }
+    );
+    await this.page.waitForEvent('load');
+    await authorizeButton.click();
+    await this.page.waitForURL(function (url) {
+      const u = new URL(url);
+      return (
+        u.pathname === '/login/oauth/authorize'
+      ) && (
+        u.searchParams.get('client_id') === null
+      );
+    })
+    const passwordInput = this.page.getByLabel('Password');
+    if (await passwordInput.isVisible()) {
+      await passwordInput.fill(process.env.GITHUB_PASSWORD);
+      const submitButton = this.page
+        .getByRole('button')
+        .filter({ hasText: /confirm|submit|enter|go|sign in/gmi });
+      if (await submitButton.isVisible()) {
+        submitButton.waitFor();
+        await expect(submitButton).toBeEnabled();
+        await submitButton.click();
+      } else {
+        throw {
+          page: this.page,
+          error: 'Could not find submit button for confirming user account'
+        };
+      }
+    }
+    await this.page.waitForEvent('close')
+  }
+}