test: rewrite connections tests with playwright (#1203)

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

@@ -0,0 +1,16 @@
+const path = require('node:path');
+const { BasePage } = require('./base-page');
+
+export class ConnectionsPage extends BasePage {
+  async screenshot(options = {}) {
+    const { path: plainPath, ...restOptions } = options;
+
+    const computedPath = path.join('connections', plainPath);
+
+    return await super.screenshot({ path: computedPath, ...restOptions });
+  }
+
+  async clickAddConnectionButton() {
+    await this.page.getByTestId('add-connection-button').click();
+  }
+}

packages/e2e-tests/fixtures/index.js

@@ -1,9 +1,13 @@
 const base = require('@playwright/test');
 const { ApplicationsPage } = require('./applications-page');
+const { ConnectionsPage } = require('./connections-page');
 
 exports.test = base.test.extend({
   applicationsPage: async ({ page }, use) => {
     await use(new ApplicationsPage(page));
   },
+  connectionsPage: async ({ page }, use) => {
+    await use(new ConnectionsPage(page));
+  },
 });
 exports.expect = base.expect;

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

@@ -1,3 +1,4 @@
+// @ts-check
 const { test, expect } = require('../../fixtures/index');
 
 test.describe('Apps page', () => {

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

@@ -0,0 +1,50 @@
+// @ts-check
+const { test, expect } = require('../../fixtures/index');
+
+test.describe('Connections page', () => {
+  test.beforeEach(async ({ page, connectionsPage }) => {
+    await connectionsPage.login();
+    await page.getByTestId('apps-page-drawer-link').click();
+    await page.goto('/app/ntfy/connections');
+  });
+
+  test('shows connections if any', async ({ page, connectionsPage }) => {
+    await page.getByTestId('apps-loader').waitFor({
+      state: 'detached',
+    });
+
+    await connectionsPage.screenshot({
+      path: 'Connections.png',
+    });
+  });
+
+  test.describe('can add connection', () => {
+    test('has a button to open add connection dialog', async ({ page }) => {
+      await expect(page.getByTestId('add-connection-button')).toBeVisible();
+    });
+
+    test('add connection button takes user to add connection page', async ({
+      page,
+      connectionsPage,
+    }) => {
+      await connectionsPage.clickAddConnectionButton();
+      await expect(page).toHaveURL('/app/ntfy/connections/add');
+    });
+
+    test('shows add connection dialog to create a new connection', async ({
+      page,
+      connectionsPage,
+    }) => {
+      await connectionsPage.clickAddConnectionButton();
+      await expect(page).toHaveURL('/app/ntfy/connections/add');
+      await page.getByTestId('create-connection-button').click();
+      await expect(
+        page.getByTestId('create-connection-button')
+      ).not.toBeVisible();
+
+      await connectionsPage.screenshot({
+        path: 'Ntfy connections after creating a connection.png',
+      });
+    });
+  });
+});