test(e2e): add e2e test for scope chooser with filtered targets (#2644)

* test(e2e): add e2e test for scope chooser with filtered targets

Closes: https://hashicorp.atlassian.net/browse/ICU-16121

* Add missing copyright headers

* chore(e2e): use prettier on scope.spec.js

* refactor(e2e): use explicit checks for scope in summary

* refactor(e2e): move test hooks and associated variables to top-level

Move beforeEach and afterEach and the associated variables setup in
hooks to top-level within scope.spec.js. This matches the patterns
used in other tests.

* refactor(e2e): use simpler scoped locator for summary element within header-nav

---------

Co-authored-by: hashicc <[email protected]>

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

@@ -0,0 +1,92 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import { expect, test } from '../fixtures/baseTest.js';
+import * as boundaryHttp from '../../helpers/boundary-http.js';
+
+let orgA;
+let projectA;
+let targetA;
+
+let orgB;
+let projectB;
+let targetB;
+
+test.beforeEach(async ({ request, targetAddress, targetPort }) => {
+  // Group A resources
+  orgA = await boundaryHttp.createOrg(request);
+  projectA = await boundaryHttp.createProject(request, orgA.id);
+  targetA = await boundaryHttp.createTarget(request, {
+    scopeId: projectA.id,
+    type: 'tcp',
+    port: targetPort,
+    address: targetAddress,
+  });
+
+  // Group B resources
+  orgB = await boundaryHttp.createOrg(request);
+  projectB = await boundaryHttp.createProject(request, orgB.id);
+  targetB = await boundaryHttp.createTarget(request, {
+    scopeId: projectB.id,
+    type: 'tcp',
+    port: targetPort,
+    address: targetAddress,
+  });
+});
+
+test.afterEach(async ({ request }) => {
+  if (orgA) {
+    await boundaryHttp.deleteOrg(request, orgA.id);
+  }
+
+  if (orgB) {
+    await boundaryHttp.deleteOrg(request, orgB.id);
+  }
+});
+
+test.describe('Scope tests', async () => {
+  test('Shows the filtered targets based on selected scope', async ({
+    authedPage,
+  }) => {
+    const headerNavLocator = await authedPage.getByLabel('header-nav');
+    await expect(headerNavLocator).toBeVisible();
+    await expect(headerNavLocator.locator('summary')).toHaveText('Global');
+
+    await expect(
+      authedPage.getByRole('link', { name: targetA.name }),
+    ).toBeVisible();
+    await expect(
+      authedPage.getByRole('link', { name: targetB.name }),
+    ).toBeVisible();
+
+    await headerNavLocator.click();
+    const orgAHeaderNavLink = await authedPage.getByRole('link', {
+      name: orgA.name,
+    });
+    await orgAHeaderNavLink.click();
+
+    await expect(headerNavLocator.locator('summary')).toHaveText(orgA.name);
+    await expect(
+      authedPage.getByRole('link', { name: targetA.name }),
+    ).toBeVisible();
+    await expect(
+      authedPage.getByRole('link', { name: targetB.name }),
+    ).not.toBeVisible();
+
+    await headerNavLocator.click();
+    const orgBHeaderNavLink = await authedPage.getByRole('link', {
+      name: orgB.name,
+    });
+    await orgBHeaderNavLink.click();
+
+    await expect(headerNavLocator.locator('summary')).toHaveText(orgB.name);
+    await expect(
+      authedPage.getByRole('link', { name: targetB.name }),
+    ).toBeVisible();
+    await expect(
+      authedPage.getByRole('link', { name: targetA.name }),
+    ).not.toBeVisible();
+  });
+});