test(ui): Test the scope picker on the top menu bar (#2788)

* test(ui): Test the scope picker on the top menu bar
* test(ui): Fixing based on recent menu bar changes

e2e-tests/admin/pages/orgs.js

@@ -51,4 +51,25 @@ export class OrgsPage extends BaseResourcePage {
       this.page.getByRole('listitem').getByText(policyName),
     ).toBeVisible();
   }
+
+  /**
+   * Switches the scope using the dropdown on the top menu bar.
+   * @param {string} fromScope the current scope, required to click dropdown
+   * @param {string} toScope name of the scope to click in the dropdown
+   */
+  async chooseScopeFromDropdown(fromScope, toScope) {
+    await this.page
+      .getByRole('button', { name: fromScope, exact: true })
+      .click()
+    await this.page
+      .getByRole('option', { name: toScope, exact: true })
+      .click()
+    await expect(
+      this.page.getByRole('button', { name: toScope, exact: true })
+    ).toBeVisible()
+    if (toScope != 'Global')
+      await expect(
+        this.page.getByRole('link', { name: toScope, exact: true })
+      ).toBeVisible()
+  }
 }

e2e-tests/admin/tests/scope.spec.js

@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import { test } from '../../global-setup.js';
+import { expect } from '@playwright/test';
+import { OrgsPage } from '../pages/orgs.js';
+
+import * as boundaryHttp from '../../helpers/boundary-http.js';
+
+test(
+    'Session picker',
+    { tag: ['@ce', '@ent', '@aws', '@docker'] },
+    async ({ page, request }) => {
+        let org;
+        try {
+            //Create an org and project attached to the org
+            org = await boundaryHttp.createOrg(request);
+            const project = await boundaryHttp.createProject(request, org.id);
+
+            //Choose the org from the scope picker
+            await page.goto('/');
+            const orgsPage = new OrgsPage(page);
+            await orgsPage.chooseScopeFromDropdown('Global', org.name);
+
+            //Expect the project to be displayed on the projects page
+            await expect(
+                page.getByRole('link', { name: project.name })
+            ).toBeVisible()
+
+            //Switch back to global scope
+            await orgsPage.chooseScopeFromDropdown(org.name, 'Global');
+
+            //Expect to be back on the orgs page
+            await expect(
+                page.getByRole('heading', { name: 'Orgs' })
+            ).toBeVisible()
+        } finally {
+            if (org.id) {
+                org = await request.delete(`/v1/scopes/${org.id}`);
+            }
+        }
+    },
+);