From d5a2634eece9ed3e8131b020e8665ad1deac0c78 Mon Sep 17 00:00:00 2001
From: Kev <kevslashnull@gmail.com>
Date: Wed, 8 Dec 2021 19:47:59 +0000
Subject: [PATCH] Use Playwright

---
 index.html                   |  2 +-
 login.html                   |  2 +-
 package.json                 |  1 +
 test/bookmarks.spec.js       | 66 +++++++++++++++++-------------------
 test/features.spec.js        | 20 +++++------
 test/launch.spec.js          | 52 +++++++++++-----------------
 test/recently-viewed.spec.js | 32 ++++++++---------
 test/themes.spec.js          | 16 ++++-----
 test/util/index.js           | 38 +++++++++++----------
 9 files changed, 105 insertions(+), 124 deletions(-)
diff --git a/index.html b/index.html
index 86eef4b..48e1df5 100644
--- a/index.html
+++ b/index.html
@@ -12,7 +12,7 @@
     />
   </head>
 
-  <body>
+  <body data-testid="gitdock">
     <div id="header">
       <div id="user"></div>
       <div id="counts">
diff --git a/login.html b/login.html
index cf3cbe9..1f51a04 100644
--- a/login.html
+++ b/login.html
@@ -11,7 +11,7 @@
       rel="stylesheet"
     />
   </head>
-  <body>
+  <body data-testid="gitdock">
     <div id="login-page-wrapper">
       <div id="login-page">
         <div id="hero-wrapper">
diff --git a/package.json b/package.json
index 7ef2ac6..3000d0a 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "menubar": "^9.0.5",
     "node-browser-history": "^2.4.6",
     "node-fetch": "^2.6.1",
+    "playwright": "^1.17.1",
     "universal-analytics": "^0.4.23"
   },
   "config": {
diff --git a/test/bookmarks.spec.js b/test/bookmarks.spec.js
index a9cf6fb..68c0eb4 100644
--- a/test/bookmarks.spec.js
+++ b/test/bookmarks.spec.js
@@ -4,40 +4,38 @@ const { stopAppAfterEach, newApp } = require('./util');
 describe('"Bookmarks" section', function () {
   this.timeout(25000);
 
-  const addBookmark = async (app, link) => {
-    const bookmarkInput = await app.client.$('#bookmark-link');
-    await bookmarkInput.setValue(link);
-    const addButton = await app.client.$('#bookmark-add-button');
-    await addButton.click();
+  const addBookmark = async (window, link) => {
+    let element = await window.$('#bookmark-link');
+    await element.fill(link);
+    await window.click('#bookmark-add-button');
   };
 
   describe('without bookmarks', function () {
     beforeEach(async function () {
-      this.app = newApp({ loggedIn: true });
-      await this.app.start();
+      await newApp(this, { loggedIn: true });
     });
 
     stopAppAfterEach();
 
     it('can add and delete a bookmark', async function () {
-      await addBookmark(this.app, 'https://gitlab.com/gitlab-org/gitlab/-/issues/1');
+      await addBookmark(this.window, 'https://gitlab.com/gitlab-org/gitlab/-/issues/1');
 
-      const title = await this.app.client.$('#bookmark-title');
-      assert.equal(await title.isExisting(), true);
-      assert.equal(await title.getText(), '500 error on MR approvers edit page (#1)');
+      const title = this.window.locator('#bookmark-title');
+      assert.equal(await title.innerText(), '500 error on MR approvers edit page (#1)');
 
-      const deleteButton = await this.app.client.$('.bookmark-delete');
-      await deleteButton.click();
+      await this.window.click('.bookmark-delete');
 
-      const bookmarkInput = await this.app.client.$('#bookmark-link');
-      assert.equal(await bookmarkInput.isExisting(), true);
-      assert.equal(await title.isExisting(), false);
+      const bookmarkInput = this.window.locator('#bookmark-link');
+      assert.equal(await bookmarkInput.count(), 1);
+      assert.equal(await title.count(), 0);
     });
   });
 
   describe('with bookmarks', function () {
+    const FIRST_BOOKMARK_URL = 'https://gitlab.com/user/project/-/merge_requests/1';
+
     beforeEach(async function () {
-      this.app = newApp({
+      await newApp(this, {
         loggedIn: true,
         bookmarks: [
           {
@@ -46,41 +44,41 @@ describe('"Bookmarks" section', function () {
             parent_name: 'Test Project',
             parent_url: 'https://gitlab.com/user/project',
             type: 'merge_request',
-            web_url: 'https://gitlab.com/user/project/-/merge_requests/1',
+            web_url: FIRST_BOOKMARK_URL,
           },
         ],
       });
-      await this.app.start();
     });
 
     stopAppAfterEach();
 
     it('can delete a bookmark', async function () {
-      const title = await this.app.client.$('#bookmark-title');
-      assert.equal(await title.isExisting(), true);
+      const title = this.window.locator('#bookmark-title');
+      assert.equal(await title.count(), 1);
 
-      const deleteButton = await this.app.client.$('.bookmark-delete');
-      await deleteButton.click();
+      await this.window.click('.bookmark-delete');
 
-      assert.equal(await title.isExisting(), false);
+      assert.equal(await title.count(), 0);
     });
 
     it('can add a bookmark', async function () {
-      const addBookmarksButton = await this.app.client.$('#add-bookmark-dialog a');
-      await addBookmarksButton.click();
+      await this.window.click('#add-bookmark-dialog a');
 
-      await addBookmark(this.app, 'https://gitlab.com/gitlab-org/gitlab/-/issues/1');
-      const titles = await this.app.client.$$('.bookmark-information a');
-      assert.equal(titles.length, 2);
+      await addBookmark(this.window, 'https://gitlab.com/gitlab-org/gitlab/-/issues/1');
+
+      const titles = this.window.locator('.bookmark-information a');
+      assert.equal(await titles.count(), 2);
     });
 
     it('cannot add a bookmark twice', async function () {
-      const addBookmarksButton = await this.app.client.$('#add-bookmark-dialog a');
-      await addBookmarksButton.click();
+      await this.window.click('#add-bookmark-dialog a');
 
-      await addBookmark(this.app, 'https://gitlab.com/user/project/-/merge_requests/1');
-      const error = await this.app.client.$('#add-bookmark-error');
-      assert.equal(await error.getText(), 'This bookmark has already been added.');
+      await addBookmark(this.window, FIRST_BOOKMARK_URL);
+
+      assert.equal(
+        await this.window.textContent('#add-bookmark-error'),
+        'This bookmark has already been added.',
+      );
     });
   });
 });
diff --git a/test/features.spec.js b/test/features.spec.js
index ac6622b..76b3b85 100644
--- a/test/features.spec.js
+++ b/test/features.spec.js
@@ -5,22 +5,18 @@ describe('Feature tests', function () {
   this.timeout(25000);
 
   beforeEach(async function () {
-    this.app = newApp({ loggedIn: true });
-    await this.app.start();
+    await newApp(this, { loggedIn: true });
   });
 
   stopAppAfterEach();
 
   it('shows overview page', async function () {
-    let issues = await this.app.client.$('#issues-count');
-    let mrs = await this.app.client.$('#mrs-count');
-    let todos = await this.app.client.$('#todos-count');
-    await issues.waitForExist({ timeout: 5000 });
-    let issuesExists = await issues.isExisting();
-    let mrsExists = await mrs.isExisting();
-    let todosExists = await todos.isExisting();
-    assert.equal(issuesExists, true);
-    assert.equal(mrsExists, true);
-    assert.equal(todosExists, true);
+    const issues = this.window.locator('#issues-count');
+    const mrs = this.window.locator('#mrs-count');
+    const todos = this.window.locator('#todos-count');
+
+    assert.equal(await issues.count(), 1);
+    assert.equal(await mrs.count(), 1);
+    assert.equal(await todos.count(), 1);
   });
 });
diff --git a/test/launch.spec.js b/test/launch.spec.js
index ae053c9..344c05f 100644
--- a/test/launch.spec.js
+++ b/test/launch.spec.js
@@ -5,44 +5,32 @@ describe('Application launch', function () {
   this.timeout(25000);
 
   beforeEach(async function () {
-    this.app = newApp();
-    return this.app.start();
+    await newApp(this);
   });
 
   stopAppAfterEach();
 
   it('starts the menubar and quick actions windows', async function () {
-    const count = await this.app.client.getWindowCount();
-    assert.equal(count, 2);
-  });
-  it('has the right size', function () {
-    return this.app.client.browserWindow.getSize().then(function (sizes) {
-      assert.equal(sizes[0], 550) && assert.equal(sizes[1], 700);
-    });
+    const windows = await this.app.windows();
+    assert.equal(windows.length, 1);
   });
   it('can log in', async function () {
-    let element = await this.app.client.$('#instance-checkbox');
-    return element
-      .click()
-      .then(async () => {
-        let token = await this.app.client.$('#access-token-input');
-        let url = await this.app.client.$('#instance-url-input');
-        await token.setValue(process.env.ACCESS_TOKEN);
-        await url.setValue('https://gitlab.com');
-        let button = await this.app.client.$('#login-instance-button');
-        return button.click();
-      })
-      .then(async () => {
-        let issues = await this.app.client.$('#issues-count');
-        let mrs = await this.app.client.$('#mrs-count');
-        let todos = await this.app.client.$('#todos-count');
-        await issues.waitForExist({ timeout: 5000 });
-        let issuesExists = await issues.isExisting();
-        let mrsExists = await mrs.isExisting();
-        let todosExists = await todos.isExisting();
-        assert.equal(issuesExists, true);
-        assert.equal(mrsExists, true);
-        assert.equal(todosExists, true);
-      });
+    await this.window.click('#instance-checkbox');
+    this.window.$eval(
+      '#access-token-input',
+      (el, token) => (el.value = token),
+      process.env.ACCESS_TOKEN,
+    );
+    this.window.$eval('#instance-url-input', (el) => (el.value = 'https://gitlab.com'));
+    await this.window.click('#login-instance-button');
+    await this.window.waitForNavigation();
+
+    const issues = this.window.locator('#issues-count');
+    const mrs = this.window.locator('#mrs-count');
+    const todos = this.window.locator('#todos-count');
+
+    assert.equal(await issues.count(), 1);
+    assert.equal(await mrs.count(), 1);
+    assert.equal(await todos.count(), 1);
   });
 });
diff --git a/test/recently-viewed.spec.js b/test/recently-viewed.spec.js
index 7d7aee1..ce45a32 100644
--- a/test/recently-viewed.spec.js
+++ b/test/recently-viewed.spec.js
@@ -19,14 +19,14 @@ describe('"Recently viewed" section', function () {
     },
   ];
 
-  const supportedBrowsersText = async (app) => {
-    const element = await app.client.$('.supported-browsers');
-    return element.getText();
+  const supportedBrowsersText = async (page) => {
+    const element = await page.$('.supported-browsers');
+    return element.innerText();
   };
 
-  const historyTexts = async (app) => {
-    const elements = await app.client.$$('.history-entry');
-    const texts = await Promise.all(elements.map((element) => element.getText()));
+  const historyTexts = async (page) => {
+    const elements = await page.$$('.history-entry');
+    const texts = await Promise.all(elements.map((element) => element.innerText()));
     return texts;
   };
 
@@ -35,12 +35,11 @@ describe('"Recently viewed" section', function () {
       describe('without history', function () {
         stopAppAfterEach();
         this.beforeEach(async function () {
-          this.app = newApp({ platform, loggedIn: true });
-          await this.app.start();
+          await newApp(this, { platform, loggedIn: true });
         });
 
         it('renders the correct message', async function () {
-          const actual = await supportedBrowsersText(this.app);
+          const actual = await supportedBrowsersText(this.window);
           assert.equal(actual, emptyMessage);
         });
       });
@@ -48,7 +47,7 @@ describe('"Recently viewed" section', function () {
       describe('with history', function () {
         stopAppAfterEach();
         this.beforeEach(async function () {
-          this.app = newApp({
+          await newApp(this, {
             platform,
             loggedIn: true,
             browserHistory: [
@@ -62,11 +61,10 @@ describe('"Recently viewed" section', function () {
               ],
             ],
           });
-          await this.app.start();
         });
 
         it('renders the history', async function () {
-          const actual = await historyTexts(this.app);
+          const actual = await historyTexts(this.window);
 
           assert.equal(actual.length, 1);
           assert.equal(actual[0].includes('Test Issue (#1)'), 1);
@@ -83,12 +81,11 @@ describe('"Recently viewed" section', function () {
     describe('without history', function () {
       stopAppAfterEach();
       this.beforeEach(async function () {
-        this.app = newApp({ platform, loggedIn: true });
-        await this.app.start();
+        await newApp(this, { platform, loggedIn: true });
       });
 
       it('renders the correct message', async function () {
-        const actual = await supportedBrowsersText(this.app);
+        const actual = await supportedBrowsersText(this.window);
         assert.equal(actual, emptyMessage);
       });
     });
@@ -96,18 +93,17 @@ describe('"Recently viewed" section', function () {
     describe('with history', function () {
       stopAppAfterEach();
       this.beforeEach(async function () {
-        this.app = newApp({
+        await newApp(this, {
           platform,
           loggedIn: true,
           browserHistory: [
             { title: 'Test Issue #1', url: 'https://gitlab.com/user/project/-/issues/1' },
           ],
         });
-        await this.app.start();
       });
 
       it('renders the info message as if there was no history', async function () {
-        const actual = await supportedBrowsersText(this.app);
+        const actual = await supportedBrowsersText(this.window);
         assert.equal(actual, emptyMessage);
       });
     });
diff --git a/test/themes.spec.js b/test/themes.spec.js
index 0b8b44b..b7cfba2 100644
--- a/test/themes.spec.js
+++ b/test/themes.spec.js
@@ -4,21 +4,20 @@ const { newApp, stopAppAfterEach } = require('./util');
 describe('Themes', function () {
   this.timeout(25000);
 
-  const getBackgroundColor = async (app) =>
-    app.webContents.executeJavaScript(
-      'document.documentElement.style.getPropertyValue("--background-color")',
+  const getBackgroundColor = async (page) =>
+    await page.evaluate(() =>
+      document.documentElement.style.getPropertyValue('--background-color'),
     );
 
   describe('dark theme', function () {
     stopAppAfterEach();
 
     beforeEach(async function () {
-      this.app = newApp({ theme: 'dark' });
-      await this.app.start();
+      await newApp(this, { theme: 'dark' });
     });
 
     it('has the correct background color', async function () {
-      const color = await getBackgroundColor(this.app);
+      const color = await getBackgroundColor(this.window);
 
       assert.equal(color, '#090c10');
     });
@@ -28,12 +27,11 @@ describe('Themes', function () {
     stopAppAfterEach();
 
     beforeEach(async function () {
-      this.app = newApp({ theme: 'light' });
-      await this.app.start();
+      await newApp(this, { theme: 'light' });
     });
 
     it('has the correct background color', async function () {
-      const color = await getBackgroundColor(this.app);
+      const color = await getBackgroundColor(this.window);
 
       assert.equal(color, '#fff');
     });
diff --git a/test/util/index.js b/test/util/index.js
index 133bf26..678a77a 100644
--- a/test/util/index.js
+++ b/test/util/index.js
@@ -1,6 +1,5 @@
-const electronPath = require('electron');
 const path = require('path');
-const Application = require('spectron').Application;
+const { _electron: electron } = require('playwright-core');
 
 const userDataIfLoggedIn = (loggedIn = false) => {
   if (!loggedIn) {
@@ -23,25 +22,20 @@ module.exports = {
    *  bookmarks?: { title: string, type: string, web_url: string, parent_url: string, added: number, parent_name: string }[] },
    * }
    */
-  newApp({ theme, loggedIn, platform = process.platform, browserHistory, bookmarks = [] } = {}) {
+  async newApp(
+    thisValue,
+    { theme, loggedIn, platform = process.platform, browserHistory, bookmarks = [] } = {},
+  ) {
     const store = {
       theme,
       ...userDataIfLoggedIn(loggedIn),
       bookmarks,
     };
 
-    const app = new Application({
-      path: electronPath,
-      args: [
-        '-r',
-        `${__dirname}/mocks.js`,
-        '--no-sandbox',
-        '--ignore-certificate-error',
-        '--disable-dev-shm-usage',
-        '--whitelisted-ips=',
-        path.join(__dirname, '..', '..'),
-      ],
+    const app = await electron.launch({
+      args: ['-r', `${__dirname}/mocks.js`, path.join(__dirname, '..', '..', 'myApp.js')],
       env: {
+        ...process.env,
         NODE_ENV: 'test',
         MOCK_STORE: typeof store === 'object' ? JSON.stringify(store) : '',
         MOCK_PLATFORM: platform,
@@ -49,12 +43,22 @@ module.exports = {
         LOGGED_IN: loggedIn ? 'true' : '',
       },
     });
-    return app;
+    const window = await app.firstWindow();
+    await window.waitForSelector('[data-testid="gitdock"]');
+    window.setDefaultTimeout(5000);
+
+    if (thisValue) {
+      thisValue.app = app;
+      thisValue.window = window;
+    }
+
+    return { app, window };
   },
   stopAppAfterEach() {
     afterEach(async function () {
-      if (this.app && this.app.isRunning()) {
-        await this.app.stop();
+      if (this.app) {
+        await this.app.close();
+        this.app = null;
       }
     });
   },
