test(e2e): make some assertions asynchronous

- Refactors some tests in onboarding.spec.ts using `browser.waitUntil` to reduce flakiness
  - These assertions will now poll for the result instead of failing immediately
- Simulates Radicle installation in the onboarding process by renaming the node home directory
- Extracts common queries, actions, and assertions to helper files

Signed-off-by: Zacharias Fragkiadakis <zacfragkiadakis@gmail.com>

test/e2e/constants/config.ts

@@ -11,3 +11,9 @@ export const e2eTestDirPath = join(__dirname, '..')
  * files outside of the e2e test directory.
  */
 export const rootDirPath = join(__dirname, '../../..')
+
+/**
+ * The path to the node home directory. This is where the Radicle node stores its
+ * configuration and data.
+ */
+export const pathToNodeHome = process.env['RAD_HOME']

test/e2e/helpers/actions.ts

@@ -0,0 +1,15 @@
+import type { Workbench } from 'wdio-vscode-service'
+
+/**
+ * Opens the Radicle view container in the sidebar, by clicking the radicle button in the
+ * activity bar.
+ */
+export async function openRadicleViewContainer(workbench: Workbench) {
+  const activityBar = workbench.getActivityBar()
+  await activityBar.wait()
+
+  const radicleViewControl = await activityBar.getViewControl('Radicle')
+  await radicleViewControl?.wait()
+
+  await radicleViewControl?.openView()
+}

test/e2e/helpers/assertions.ts

@@ -0,0 +1,24 @@
+import { browser } from '@wdio/globals'
+import type { Workbench } from 'wdio-vscode-service'
+
+/**
+ * Asserts that the CLI Commands and Patches sections are visible in the sidebar. This is
+ * considered the default state when the workspace is open with a git and rad initialized
+ * repository.
+ */
+export async function expectCliCommandsAndPatchesToBeVisible(workbench: Workbench) {
+  const sidebarView = workbench.getSideBar().getContent()
+  await sidebarView.wait()
+
+  await browser.waitUntil(async () => {
+    let sectionsFound = false
+    try {
+      await sidebarView.getSection('CLI COMMANDS')
+      await sidebarView.getSection('PATCHES')
+      sectionsFound = true
+      // eslint-disable-next-line prettier-vue/prettier
+    } catch { }
+
+    return sectionsFound
+  })
+}

test/e2e/helpers/queries.ts

@@ -0,0 +1,21 @@
+import type { Workbench } from 'wdio-vscode-service'
+
+/**
+ * Retrieves the welcome text content from the first section in the sidebar view.
+ *
+ * @example await getFirstWelcomeViewText(workbench) // ["Welcome to Radicle!", "Get started by ..."]
+ *
+ * @returns The text content found as an array of strings split by newlines. If no content is
+ * found, an empty array.
+ */
+export async function getFirstWelcomeViewText(workbench: Workbench) {
+  const sidebarView = workbench.getSideBar().getContent()
+  await sidebarView.wait()
+
+  const welcomeText =
+    (await (
+      await (await sidebarView.getSections())[0]?.findWelcomeContent()
+    )?.getTextSections()) ?? []
+
+  return welcomeText
+}

test/e2e/specs/onboarding.spec.ts

@@ -1,9 +1,13 @@
 import path from 'node:path'
 import { browser, expect } from '@wdio/globals'
-import { e2eTestDirPath } from 'test/e2e/constants/config'
-import type { ViewSection, Workbench } from 'wdio-vscode-service'
-import { $, cd, echo } from 'zx'
+import { e2eTestDirPath, pathToNodeHome } from 'test/e2e/constants/config'
+import type { Workbench } from 'wdio-vscode-service'
+import { $, cd } from 'zx'
 import type * as VsCode from 'vscode'
+import isEqual from 'lodash/isEqual'
+import { expectCliCommandsAndPatchesToBeVisible } from '../helpers/assertions'
+import { openRadicleViewContainer } from '../helpers/actions'
+import { getFirstWelcomeViewText } from '../helpers/queries'
 
 describe('Onboarding Flow', () => {
   let workbench: Workbench
@@ -13,6 +17,18 @@ describe('Onboarding Flow', () => {
   })
 
   describe('VS Code, *before* Radicle is installed,', () => {
+    const tempPathToNodeHome = `${pathToNodeHome}.temp`
+
+    before(async () => {
+      // Simulate radicle "not being installed" by renaming the node home directory
+      await $`mv ${pathToNodeHome} ${tempPathToNodeHome}`
+    })
+
+    after(async () => {
+      await $`mv ${tempPathToNodeHome} ${pathToNodeHome}`
+      await workbench.executeCommand('Developer: Reload Window')
+    })
+
     it('has our Radicle extension installed and available', async () => {
       const extensions = await browser.executeWorkbench(
         (vscode: typeof VsCode) => vscode.extensions.all,
@@ -49,28 +65,27 @@ describe('Onboarding Flow', () => {
   })
 
   describe('VS Code, *before* the workspace is git-initialized,', () => {
-    before(() => {
-      installRadicle()
-    })
-
     it('guides the user on how to git-initialize their workspace', async () => {
       await openRadicleViewContainer(workbench)
 
-      const welcomeText = await getFirstWelcomeViewText(workbench)
-      const welcomeButtonTitles = await getFirstWelcomeViewButtonTitles(workbench)
-
-      expect(welcomeText).toEqual([
-        /* eslint-disable max-len */
-        'The folder currently opened in your workspace is not a Git code repository.',
-        'In order to use Radicle with it, this folder must first be initialized as a Git code repository.',
-        'To learn more about how to use Git and source control in VS Code read the docs.',
-        /* eslint-enable max-len */
-      ])
-
-      expect(welcomeButtonTitles).toEqual([
-        'Initialize Repository With Git',
-        'Choose a Different Folder',
-      ])
+      await browser.waitUntil(async () => {
+        const welcomeText = await getFirstWelcomeViewText(workbench)
+        const welcomeButtonTitles = await getFirstWelcomeViewButtonTitles(workbench)
+
+        return (
+          isEqual(welcomeText, [
+            /* eslint-disable max-len */
+            'The folder currently opened in your workspace is not a Git code repository.',
+            'In order to use Radicle with it, this folder must first be initialized as a Git code repository.',
+            'To learn more about how to use Git and source control in VS Code read the docs.',
+            /* eslint-enable max-len */
+          ]) &&
+          isEqual(welcomeButtonTitles, [
+            'Initialize Repository With Git',
+            'Choose a Different Folder',
+          ])
+        )
+      })
     })
   })
 
@@ -82,72 +97,45 @@ describe('Onboarding Flow', () => {
     it('guides the user on how to rad-initialize their git repo', async () => {
       await openRadicleViewContainer(workbench)
 
-      const welcomeText = await getFirstWelcomeViewText(workbench)
-
-      expect(welcomeText).toEqual([
-        /* eslint-disable max-len */
-        'The Git repository currently opened in your workspace is not yet initialized with Radicle.',
-        'To use Radicle with it, please run `rad init` in your terminal.',
-        'Once rad-initialized, this repo will have access to advanced source control, collaboration and project management capabilities powered by both Git and Radicle.',
-        'During this reversible rad-initializing process you also get to choose whether your repo will be private or public, among other options.',
-        'To learn more read the Radicle User Guide.',
-        /* eslint-enable max-len */
-      ])
+      await browser.waitUntil(async () => {
+        const welcomeText = await getFirstWelcomeViewText(workbench)
+
+        return isEqual(welcomeText, [
+          /* eslint-disable max-len */
+          'The Git repository currently opened in your workspace is not yet initialized with Radicle.',
+          'To use Radicle with it, please run `rad init` in your terminal.',
+          'Once rad-initialized, this repo will have access to advanced source control, collaboration and project management capabilities powered by both Git and Radicle.',
+          'During this reversible rad-initializing process you also get to choose whether your repo will be private or public, among other options.',
+          'To learn more read the Radicle User Guide.',
+          /* eslint-enable max-len */
+        ])
+      })
     })
   })
 
   describe('VS Code, *after* the workspace is rad-initialized,', () => {
-    let cliCommandsSection: ViewSection
-
     before(async () => {
       await $`rad init --private --default-branch main --name "A_test_blog" --description "Some repo" --no-confirm --verbose`
-      await openRadicleViewContainer(workbench)
-      const sidebarView = workbench.getSideBar().getContent()
-      await sidebarView.wait()
-
-      cliCommandsSection = await sidebarView.getSection('CLI COMMANDS')
-      await cliCommandsSection.collapse()
-
-      const patchesSection = await sidebarView.getSection('PATCHES')
-      await patchesSection.collapse()
+      await workbench.executeCommand('Developer: Reload Window')
     })
 
     it('hides the non rad-initialized guide', async () => {
-      const welcomeText = await getFirstWelcomeViewText(workbench)
+      await browser.waitUntil(async () => {
+        const welcomeText = await getFirstWelcomeViewText(workbench)
 
-      expect(welcomeText.some((text) => text.includes('rad init'))).not.toBe(true)
+        return welcomeText.some((text) => text.includes('rad init')) === false
+      })
     })
 
-    it('shows the CLI Commands section', async () => {
-      await cliCommandsSection.expand()
-      // Fixes flakiness on macOS CI
-      await browser.pause(100)
-
-      const welcomeContent = await cliCommandsSection?.findWelcomeContent()
-      const welcomeText = (await welcomeContent?.getTextSections()) ?? []
-      const buttons = (await welcomeContent?.getButtons()) ?? []
-      const buttonTitles = await Promise.all(
-        buttons.map(async (button) => await button.getTitle()),
-      )
-
-      expect(
-        welcomeText.some((text) =>
-          /Use the buttons below to perform common interactions with the Radicle network./i.test(
-            text,
-          ),
-        ),
-      ).toBe(true)
+    it('shows the CLI Commands and Patches sections', async () => {
+      const sidebarView = workbench.getSideBar().getContent()
+      await sidebarView.wait()
 
-      expect(buttonTitles).toEqual(['Sync', 'Fetch', 'Announce'])
+      await expectCliCommandsAndPatchesToBeVisible(workbench)
     })
   })
 })
 
-function installRadicle() {
-  // TODO: zac implement this
-  echo('To be implemented')
-}
-
 async function initGitRepo() {
   const repoDirPath = path.join(e2eTestDirPath, 'fixtures/workspaces/basic')
 
@@ -162,28 +150,6 @@ async function initGitRepo() {
   await $`git commit -m 'adds readme' --no-gpg-sign`
 }
 
-async function openRadicleViewContainer(workbench: Workbench) {
-  const activityBar = workbench.getActivityBar()
-  await activityBar.wait()
-
-  const radicleViewControl = await activityBar.getViewControl('Radicle')
-  await radicleViewControl?.wait()
-
-  await radicleViewControl?.openView()
-}
-
-async function getFirstWelcomeViewText(workbench: Workbench) {
-  const sidebarView = workbench.getSideBar().getContent()
-  await sidebarView.wait()
-
-  const welcomeText =
-    (await (
-      await (await sidebarView.getSections())[0]?.findWelcomeContent()
-    )?.getTextSections()) ?? []
-
-  return welcomeText
-}
-
 async function getFirstWelcomeViewButtonTitles(workbench: Workbench) {
   const sidebarView = workbench.getSideBar().getContent()
   await sidebarView.wait()