Merge branch 'main' into amy/add-sb-metadata-2

ui/desktop/tests/end2end/authentication.spec.js

@@ -1,37 +1,13 @@
 /* eslint-disable no-undef */
 const { test, expect } = require('@playwright/test');
 const { _electron: electron } = require('playwright');
-const path = require('path');
+const {
+  generateScreenshotPath,
+  returnExecutablePath,
+} = require('./test-helpers');
 
 let electronApp = null;
-const generateScreenshotPath = (fileName) => {
-  const screenshotPath = 'tests/end2end/screenshots/authentication/';
-  const screenshotFormat = '.png';
-  return path.join(screenshotPath, fileName).concat(screenshotFormat);
-};
-
-// Todo: move this function to a test helpers file so it could be used by other tests.
-// Returns the executable path for the Boundary binary the test suite will run.
-const returnExecutablePath = (platform, arch) => {
-  try {
-    // Just mac
-    if (platform === 'darwin') {
-      if (arch === 'x64') {
-        // Intel chips
-        return 'electron-app/out/Boundary-darwin-x64/Boundary.app/Contents/MacOS/Boundary';
-      } else if (arch === 'arm64') {
-        // M1 chips
-        return 'electron-app/out/Boundary-darwin-arm64/Boundary.app/Contents/MacOS/Boundary';
-      } else {
-        throw new Error('The test suite is not compatible with your arch.');
-      }
-    } else {
-      throw new Error('The test suite is not compatible with your Platform.');
-    }
-  } catch (error) {
-    console.error(error);
-  }
-};
+const screenshotsDirectory = 'authentication/';
 const executablePath = returnExecutablePath(process.platform, process.arch);
 
 test.beforeEach(async () => {
@@ -62,11 +38,11 @@ test.describe('Authentication end to end test suite', async () => {
       const authLoginPasswordValue = 'password';
 
       // Fill the origin input
-      await boundaryWindow.waitForSelector('.ember-text-field');
-      await boundaryWindow.fill('.ember-text-field', originValue);
+      await boundaryWindow.waitForSelector('[name=host]');
+      await boundaryWindow.fill('[name=host]', originValue);
       // Take screenshot
       await boundaryWindow.screenshot({
-        path: generateScreenshotPath('fillOrigin'),
+        path: generateScreenshotPath(screenshotsDirectory, 'fillOrigin'),
         fullPage: true,
       });
 
@@ -82,7 +58,7 @@ test.describe('Authentication end to end test suite', async () => {
       await boundaryWindow.fill('[name="password"]', authLoginPasswordValue);
       // Take screenshot
       await boundaryWindow.screenshot({
-        path: generateScreenshotPath('fillUserPassword'),
+        path: generateScreenshotPath(screenshotsDirectory, 'fillUserPassword'),
         fullPage: true,
       });
 
@@ -91,14 +67,15 @@ test.describe('Authentication end to end test suite', async () => {
       await boundaryWindow.$eval('button[type="submit"]', (element) =>
         element.click()
       );
+
       // Check we are in Targets
-      await boundaryWindow.waitForSelector('h2 >> text=Targets');
-      expect(await boundaryWindow.innerText('h2 >> text=Targets')).toEqual(
-        'Targets '
-      );
+      await boundaryWindow.waitForURL('**/#/scopes/global/projects/targets');
+      const windowUrl = new URL(await boundaryWindow.url());
+      expect(windowUrl.hash).toEqual('#/scopes/global/projects/targets');
+
       // Take screenshot
       await boundaryWindow.screenshot({
-        path: generateScreenshotPath('afterLogin'),
+        path: generateScreenshotPath(screenshotsDirectory, 'afterLogin'),
         fullPage: true,
       });
 
@@ -113,7 +90,7 @@ test.describe('Authentication end to end test suite', async () => {
       expect(await boundaryWindow.isVisible('details'));
       // Take screenshot
       await boundaryWindow.screenshot({
-        path: generateScreenshotPath('userDropdown'),
+        path: generateScreenshotPath(screenshotsDirectory, 'userDropdown'),
         fullPage: true,
       });
 
@@ -130,7 +107,7 @@ test.describe('Authentication end to end test suite', async () => {
 
       // Take screenshot
       await boundaryWindow.screenshot({
-        path: generateScreenshotPath('afterLogout'),
+        path: generateScreenshotPath(screenshotsDirectory, 'afterLogout'),
         fullPage: true,
       });
     });
@@ -146,10 +123,10 @@ test.describe('Authentication end to end test suite', async () => {
       const authLoginPasswordValue = '123456';
 
       // Fill the origin input
-      await boundaryWindow.fill('.ember-text-field', originValue);
+      await boundaryWindow.fill('[name=host]', originValue);
       // Take screenshot
       await boundaryWindow.screenshot({
-        path: generateScreenshotPath('fillOrigin'),
+        path: generateScreenshotPath(screenshotsDirectory, 'fillOrigin'),
         fullPage: true,
       });
 
@@ -179,7 +156,10 @@ test.describe('Authentication end to end test suite', async () => {
 
       // Take screenshot
       await boundaryWindow.screenshot({
-        path: generateScreenshotPath('notificationFailed'),
+        path: generateScreenshotPath(
+          screenshotsDirectory,
+          'notificationFailed'
+        ),
         fullPage: true,
       });
     });
@@ -205,8 +185,8 @@ test.describe('Authentication end to end test suite', async () => {
       const originValue = 'http://localhost:9200';
 
       // Fill the origin input
-      await boundaryWindow.waitForSelector('.ember-text-field');
-      await boundaryWindow.fill('.ember-text-field', originValue);
+      await boundaryWindow.waitForSelector('[name=host]');
+      await boundaryWindow.fill('[name=host]', originValue);
 
       // Click the submit button
       // Due to an error with await boundaryWindow.click('button[type="submit"]'); we are using a workaround.

ui/desktop/tests/end2end/targets.spec.js

@@ -0,0 +1,130 @@
+/* eslint-disable no-undef */
+const { test, expect } = require('@playwright/test');
+const { _electron: electron } = require('playwright');
+const {
+  generateScreenshotPath,
+  returnExecutablePath,
+} = require('./test-helpers');
+
+let electronApp = null;
+const screenshotsDirectory = 'targets/';
+const executablePath = returnExecutablePath(process.platform, process.arch);
+
+test.beforeEach(async () => {
+  electronApp = await electron.launch({
+    executablePath: executablePath,
+    env: {
+      NODE_ENV: 'test',
+      BYPASS_APP_UPDATER: true,
+    },
+  });
+});
+
+test.afterEach(async () => {
+  electronApp.close();
+  electronApp = null; // Not sure we should do this.
+});
+
+test.describe('Targets end to end test suite', async () => {
+  test('Connects to a target', async () => {
+    const boundaryWindow = await electronApp.firstWindow(); // The window that contains the app.
+    // Override local storage origin
+    await boundaryWindow.evaluate(() =>
+      window.localStorage.setItem('desktop:origin', null)
+    );
+
+    const originValue = 'http://localhost:9200';
+    const authLoginNameValue = 'admin';
+    const authLoginPasswordValue = 'password';
+
+    // Fill the origin input
+    await boundaryWindow.waitForSelector('[name=host]');
+    await boundaryWindow.fill('[name=host]', originValue);
+
+    // Click the submit button
+    // Due to an error with await boundaryWindow.click('button[type="submit"]'); we are using a workaround.
+    // More info about it here: https://github.com/microsoft/playwright/issues/1808
+    await boundaryWindow.waitForSelector('button[type="submit"]');
+    await boundaryWindow.$eval('button[type="submit"]', (element) =>
+      element.click()
+    );
+    // Fill user & password
+    await boundaryWindow.fill('[name="identification"]', authLoginNameValue);
+    await boundaryWindow.fill('[name="password"]', authLoginPasswordValue);
+
+    // Click submit
+    await boundaryWindow.waitForSelector('button[type="submit"]');
+    await boundaryWindow.$eval('button[type="submit"]', (element) =>
+      element.click()
+    );
+
+    // Check we are in Targets
+    await boundaryWindow.waitForURL('**/#/scopes/global/projects/targets');
+    const windowUrl = new URL(await boundaryWindow.url());
+    expect(windowUrl.hash).toEqual('#/scopes/global/projects/targets');
+
+    // Click connect to a target
+    await boundaryWindow.waitForSelector('table.rose-table');
+    await boundaryWindow.$eval(
+      'table.rose-table >> tbody >> tr >> nth=0 >> button >> text=Connect',
+      (element) => element.click()
+    );
+
+    // The target popup opens
+    await boundaryWindow.waitForSelector('section.dialog-detail');
+    // Take screenshot
+    await boundaryWindow.screenshot({
+      path: generateScreenshotPath(
+        screenshotsDirectory,
+        'targetConnectionDetails'
+      ),
+      fullPage: true,
+    });
+    // Click copyable in popup
+    // TODO: read clipboard value. Running into issues reading clipboard, so will take a shortcut for now
+    await boundaryWindow.$eval(
+      'section.dialog-detail >> div.rose-dialog-body >> button',
+      (element) => element.click()
+    );
+    // Temporary: persist proxy from target
+    const persistedProxy = await boundaryWindow.innerText(
+      'section.dialog-detail >> div.rose-dialog-body >> span.copyable-content'
+    );
+
+    // Click close popup
+    await boundaryWindow.$eval(
+      'section.dialog-detail >> footer >> button',
+      (element) => element.click()
+    );
+
+    // On left nav menu, click Sessions
+    await boundaryWindow.waitForSelector('section.rose-layout-global >> aside');
+    await boundaryWindow.$eval(
+      'section.rose-layout-global >> aside >> nav >> a >> text=Sessions',
+      (element) => element.click()
+    );
+
+    // Take screenshot
+    await boundaryWindow.screenshot({
+      path: generateScreenshotPath(screenshotsDirectory, 'sessions'),
+      fullPage: true,
+    });
+
+    // Check the right session has status pending.
+    await boundaryWindow.waitForSelector(
+      'main >> div.rose-layout-page-body >> table.rose-table'
+    );
+    // Select Proxy
+    const currentProxy = await boundaryWindow.innerText(
+      'div.rose-layout-page-body >> table >> tbody >> tr >> nth=0 >> td >> nth=1 >> .copyable-content'
+    );
+    const currentStatus = await boundaryWindow.innerText(
+      'div.rose-layout-page-body >> table >> tbody >> tr >> nth=0 >> td >> nth=3 >> .rose-badge-body'
+    );
+
+    expect(await persistedProxy).toEqual(await currentProxy);
+    expect(await currentStatus).toEqual('pending');
+    // TODO: before closing the app we should terminate sessions.
+    // TODO: add test to check if sessions are not terminated we promp the confirmation dialog
+  });
+});

ui/desktop/tests/end2end/test-helpers.js

@@ -0,0 +1,44 @@
+/* eslint-disable no-undef */
+const path = require('path');
+
+/**
+ *
+ * @param {string} screenshotTestDirectory screenshot directory for the specific test suite
+ * @param {string} fileName The file name.
+ * @returns A full path where to save the screenshot.
+ */
+exports.generateScreenshotPath = (screenshotTestDirectory, fileName) => {
+  const screenshotFormat = '.png';
+  const screenshotsRootPath = path.join(__dirname, 'screenshots');
+  const screenshotPath = path.join(
+    screenshotsRootPath,
+    screenshotTestDirectory
+  );
+  return path.join(screenshotPath, fileName).concat(screenshotFormat);
+};
+
+/**
+ *
+ * @param {string} platform The operating system.
+ * @param {string} arch The CPU architecture.
+ * @returns A full path where the Desktop Client executable is located.
+ */
+exports.returnExecutablePath = (platform, arch) => {
+  try {
+    switch (platform) {
+      case 'darwin':
+        switch (arch) {
+          case 'x64': // Intel chips
+            return 'electron-app/out/Boundary-darwin-x64/Boundary.app/Contents/MacOS/Boundary';
+          case 'arm64': // M1 chips
+            return 'electron-app/out/Boundary-darwin-arm64/Boundary.app/Contents/MacOS/Boundary';
+          default:
+            throw new Error('The test suite is not compatible with your arch.');
+        }
+      default:
+        throw new Error('The test suite is not compatible with your platform.');
+    }
+  } catch (error) {
+    console.error(error);
+  }
+};