Searchable dropdown (#2312)

* Searchable dropdown * format fix * Refactor SearchableDropdown with Fluent UI components, extract styles, and add tests (#2329) * Initial plan * Refactor SearchableDropdown with Fluent UI components and add tests - Replace native HTML elements with Fluent UI components (Stack, DefaultButton, Text) - Extract inline styles to SearchableDropdown.styles.ts - Add comprehensive unit tests (14 test cases) - Verify behavior consistency with AccountSwitcher tests Co-authored-by: nishthaAhujaa <45535788+nishthaAhujaa@users.noreply.github.com> * Optimize SearchableDropdown with useMemo for filteredItems Co-authored-by: nishthaAhujaa <45535788+nishthaAhujaa@users.noreply.github.com> * Fix text alignment to match original UI - ensure left alignment - Add flexContainer.justifyContent: "flex-start" to button styles - Add textAlign: "left" to button label, item styles, and empty message - Restore original left-aligned appearance for placeholder and selected text Co-authored-by: nishthaAhujaa <45535788+nishthaAhujaa@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: nishthaAhujaa <45535788+nishthaAhujaa@users.noreply.github.com> * Fix TypeScript implicit type errors in SearchableDropdown tests (#2355) * Initial plan * Fix TypeScript compilation errors in SearchableDropdown.test.tsx Co-authored-by: nishthaAhujaa <45535788+nishthaAhujaa@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: nishthaAhujaa <45535788+nishthaAhujaa@users.noreply.github.com> * ui fixes minor * format fix * added search icon and updated the text * removed callbacks * added mocked playwright data * fixed formatting --------- Co-authored-by: nishthaAhujaa <nishtha17354@iiittd.ac.in> Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com> Co-authored-by: Sakshi Gupta <sakshig@microsoft.com> Co-authored-by: sakshigupta12feb <sakshigupta12feb1@gmail.com>
2026-04-17 12:00:40 +01:00 · 2026-03-12 20:35:59 +05:30
parent 1dce9c1f37
commit 3c97778da5
10 changed files with 842 additions and 40 deletions
--- a/test/component-fixtures/searchableDropdown/SearchableDropdownFixture.tsx
+++ b/test/component-fixtures/searchableDropdown/SearchableDropdownFixture.tsx
@@ -0,0 +1,112 @@
+import { initializeIcons, Stack } from "@fluentui/react";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { SearchableDropdown } from "../../../src/Common/SearchableDropdown";
+
+// Initialize Fluent UI icons
+initializeIcons();
+
+/**
+ * Mock subscription data matching the Subscription interface shape.
+ */
+interface MockSubscription {
+  subscriptionId: string;
+  displayName: string;
+  state: string;
+}
+
+/**
+ * Mock database account data matching the DatabaseAccount interface shape.
+ */
+interface MockDatabaseAccount {
+  id: string;
+  name: string;
+  location: string;
+  type: string;
+  kind: string;
+}
+
+const mockSubscriptions: MockSubscription[] = [
+  { subscriptionId: "sub-001", displayName: "Development Subscription", state: "Enabled" },
+  { subscriptionId: "sub-002", displayName: "Production Subscription", state: "Enabled" },
+  { subscriptionId: "sub-003", displayName: "Testing Subscription", state: "Enabled" },
+  { subscriptionId: "sub-004", displayName: "Staging Subscription", state: "Enabled" },
+  { subscriptionId: "sub-005", displayName: "QA Subscription", state: "Enabled" },
+];
+
+const mockAccounts: MockDatabaseAccount[] = [
+  {
+    id: "acc-001",
+    name: "cosmos-dev-westus",
+    location: "westus",
+    type: "Microsoft.DocumentDB/databaseAccounts",
+    kind: "GlobalDocumentDB",
+  },
+  {
+    id: "acc-002",
+    name: "cosmos-prod-eastus",
+    location: "eastus",
+    type: "Microsoft.DocumentDB/databaseAccounts",
+    kind: "GlobalDocumentDB",
+  },
+  {
+    id: "acc-003",
+    name: "cosmos-test-northeurope",
+    location: "northeurope",
+    type: "Microsoft.DocumentDB/databaseAccounts",
+    kind: "GlobalDocumentDB",
+  },
+  {
+    id: "acc-004",
+    name: "cosmos-staging-westus2",
+    location: "westus2",
+    type: "Microsoft.DocumentDB/databaseAccounts",
+    kind: "GlobalDocumentDB",
+  },
+];
+
+const SearchableDropdownTestFixture: React.FC = () => {
+  const [selectedSubscription, setSelectedSubscription] = React.useState<MockSubscription | null>(null);
+  const [selectedAccount, setSelectedAccount] = React.useState<MockDatabaseAccount | null>(null);
+
+  return (
+    <Stack tokens={{ childrenGap: 20 }} style={{ padding: 20, maxWidth: 400 }}>
+      <div data-test="subscription-dropdown">
+        <SearchableDropdown<MockSubscription>
+          label="Subscription"
+          items={mockSubscriptions}
+          selectedItem={selectedSubscription}
+          onSelect={(sub) => setSelectedSubscription(sub)}
+          getKey={(sub) => sub.subscriptionId}
+          getDisplayText={(sub) => sub.displayName}
+          placeholder="Select a Subscription"
+          filterPlaceholder="Search by Subscription name"
+          className="subscriptionDropdown"
+        />
+      </div>
+
+      <div data-test="account-dropdown">
+        <SearchableDropdown<MockDatabaseAccount>
+          label="Cosmos DB Account"
+          items={selectedSubscription ? mockAccounts : []}
+          selectedItem={selectedAccount}
+          onSelect={(account) => setSelectedAccount(account)}
+          getKey={(account) => account.id}
+          getDisplayText={(account) => account.name}
+          placeholder="Select an Account"
+          filterPlaceholder="Search by Account name"
+          className="accountDropdown"
+          disabled={!selectedSubscription}
+        />
+      </div>
+
+      {/* Display selection state for test assertions */}
+      <div data-test="selection-state">
+        <div data-test="selected-subscription">{selectedSubscription?.displayName || ""}</div>
+        <div data-test="selected-account">{selectedAccount?.name || ""}</div>
+      </div>
+    </Stack>
+  );
+};
+
+ReactDOM.render(<SearchableDropdownTestFixture />, document.getElementById("root"));
--- a/test/component-fixtures/searchableDropdown/searchableDropdown.html
+++ b/test/component-fixtures/searchableDropdown/searchableDropdown.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SearchableDropdown Test Fixture</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
--- a/test/component-fixtures/searchableDropdown/searchableDropdown.spec.ts
+++ b/test/component-fixtures/searchableDropdown/searchableDropdown.spec.ts
@@ -0,0 +1,251 @@
+import { expect, test } from "@playwright/test";
+
+const FIXTURE_URL = "https://127.0.0.1:1234/searchableDropdownFixture.html";
+
+test.describe("SearchableDropdown Component", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(FIXTURE_URL);
+    await page.waitForSelector("[data-test='subscription-dropdown']");
+  });
+
+  test("renders subscription dropdown with label and placeholder", async ({ page }) => {
+    await expect(page.getByText("Subscription", { exact: true })).toBeVisible();
+    await expect(page.getByText("Select a Subscription")).toBeVisible();
+  });
+
+  test("renders account dropdown as disabled when no subscription is selected", async ({ page }) => {
+    const accountButton = page.locator("[data-test='account-dropdown'] button");
+    await expect(accountButton).toBeDisabled();
+  });
+
+  test("opens subscription dropdown and shows all mock items", async ({ page }) => {
+    await page.getByText("Select a Subscription").click();
+
+    await expect(page.getByText("Development Subscription")).toBeVisible();
+    await expect(page.getByText("Production Subscription")).toBeVisible();
+    await expect(page.getByText("Testing Subscription")).toBeVisible();
+    await expect(page.getByText("Staging Subscription")).toBeVisible();
+    await expect(page.getByText("QA Subscription")).toBeVisible();
+  });
+
+  test("filters subscription items by search text", async ({ page }) => {
+    await page.getByText("Select a Subscription").click();
+
+    const searchBox = page.getByPlaceholder("Search by Subscription name");
+    await searchBox.fill("Dev");
+
+    await expect(page.getByText("Development Subscription")).toBeVisible();
+    await expect(page.getByText("Production Subscription")).not.toBeVisible();
+    await expect(page.getByText("Testing Subscription")).not.toBeVisible();
+  });
+
+  test("performs case-insensitive filtering", async ({ page }) => {
+    await page.getByText("Select a Subscription").click();
+
+    const searchBox = page.getByPlaceholder("Search by Subscription name");
+    await searchBox.fill("production");
+
+    await expect(page.getByText("Production Subscription")).toBeVisible();
+    await expect(page.getByText("Development Subscription")).not.toBeVisible();
+  });
+
+  test("shows 'No items found' when search yields no results", async ({ page }) => {
+    await page.getByText("Select a Subscription").click();
+
+    const searchBox = page.getByPlaceholder("Search by Subscription name");
+    await searchBox.fill("NonexistentSubscription");
+
+    await expect(page.getByText("No items found")).toBeVisible();
+  });
+
+  test("selects a subscription and updates button text", async ({ page }) => {
+    await page.getByText("Select a Subscription").click();
+    await page.getByText("Development Subscription").click();
+
+    // Dropdown should close and show selected item
+    await expect(
+      page.locator("[data-test='subscription-dropdown']").getByText("Development Subscription"),
+    ).toBeVisible();
+    // External state should update
+    await expect(page.locator("[data-test='selected-subscription']")).toHaveText("Development Subscription");
+  });
+
+  test("enables account dropdown after subscription is selected", async ({ page }) => {
+    // Select a subscription first
+    await page.getByText("Select a Subscription").click();
+    await page.getByText("Production Subscription").click();
+
+    // Account dropdown should now be enabled
+    const accountButton = page.locator("[data-test='account-dropdown'] button");
+    await expect(accountButton).toBeEnabled();
+  });
+
+  test("shows account items after subscription selection", async ({ page }) => {
+    // Select subscription
+    await page.getByText("Select a Subscription").click();
+    await page.getByText("Development Subscription").click();
+
+    // Open account dropdown
+    await page.getByText("Select an Account").click();
+
+    await expect(page.getByText("cosmos-dev-westus")).toBeVisible();
+    await expect(page.getByText("cosmos-prod-eastus")).toBeVisible();
+    await expect(page.getByText("cosmos-test-northeurope")).toBeVisible();
+    await expect(page.getByText("cosmos-staging-westus2")).toBeVisible();
+  });
+
+  test("filters account items by search text", async ({ page }) => {
+    // Select subscription
+    await page.getByText("Select a Subscription").click();
+    await page.getByText("Testing Subscription").click();
+
+    // Open account dropdown and filter
+    await page.getByText("Select an Account").click();
+    const searchBox = page.getByPlaceholder("Search by Account name");
+    await searchBox.fill("prod");
+
+    await expect(page.getByText("cosmos-prod-eastus")).toBeVisible();
+    await expect(page.getByText("cosmos-dev-westus")).not.toBeVisible();
+  });
+
+  test("selects an account and updates both dropdowns", async ({ page }) => {
+    // Select subscription
+    await page.getByText("Select a Subscription").click();
+    await page.getByText("Staging Subscription").click();
+
+    // Select account
+    await page.getByText("Select an Account").click();
+    await page.getByText("cosmos-dev-westus").click();
+
+    // Verify both selections
+    await expect(page.locator("[data-test='selected-subscription']")).toHaveText("Staging Subscription");
+    await expect(page.locator("[data-test='selected-account']")).toHaveText("cosmos-dev-westus");
+  });
+
+  test("clears search filter when dropdown is closed and reopened", async ({ page }) => {
+    await page.getByText("Select a Subscription").click();
+
+    const searchBox = page.getByPlaceholder("Search by Subscription name");
+    await searchBox.fill("Dev");
+
+    // Select an item to close dropdown
+    await page.getByText("Development Subscription").click();
+
+    // Reopen dropdown
+    await page.locator("[data-test='subscription-dropdown']").getByText("Development Subscription").click();
+
+    // Search box should be cleared
+    const reopenedSearchBox = page.getByPlaceholder("Search by Subscription name");
+    await expect(reopenedSearchBox).toHaveValue("");
+
+    // All items should be visible again
+    await expect(page.getByText("Production Subscription")).toBeVisible();
+    await expect(page.getByText("Testing Subscription")).toBeVisible();
+  });
+
+  test("renders account dropdown with label and placeholder after subscription selected", async ({ page }) => {
+    await page.getByText("Select a Subscription").click();
+    await page.getByText("Development Subscription").click();
+
+    await expect(page.getByText("Cosmos DB Account")).toBeVisible();
+    await expect(page.getByText("Select an Account")).toBeVisible();
+  });
+
+  test("performs case-insensitive filtering on account dropdown", async ({ page }) => {
+    await page.getByText("Select a Subscription").click();
+    await page.getByText("Development Subscription").click();
+
+    await page.getByText("Select an Account").click();
+    const searchBox = page.getByPlaceholder("Search by Account name");
+    await searchBox.fill("COSMOS-TEST");
+
+    await expect(page.getByText("cosmos-test-northeurope")).toBeVisible();
+    await expect(page.getByText("cosmos-dev-westus")).not.toBeVisible();
+    await expect(page.getByText("cosmos-prod-eastus")).not.toBeVisible();
+    await expect(page.getByText("cosmos-staging-westus2")).not.toBeVisible();
+  });
+
+  test("shows 'No items found' in account dropdown when search yields no results", async ({ page }) => {
+    await page.getByText("Select a Subscription").click();
+    await page.getByText("Production Subscription").click();
+
+    await page.getByText("Select an Account").click();
+    const searchBox = page.getByPlaceholder("Search by Account name");
+    await searchBox.fill("nonexistent-account");
+
+    await expect(page.getByText("No items found")).toBeVisible();
+  });
+
+  test("clears account search filter when dropdown is closed and reopened", async ({ page }) => {
+    await page.getByText("Select a Subscription").click();
+    await page.getByText("Testing Subscription").click();
+
+    // Open account dropdown and filter
+    await page.getByText("Select an Account").click();
+    const searchBox = page.getByPlaceholder("Search by Account name");
+    await searchBox.fill("prod");
+
+    // Select an item to close
+    await page.getByText("cosmos-prod-eastus").click();
+
+    // Reopen and verify filter is cleared
+    await page.locator("[data-test='account-dropdown']").getByText("cosmos-prod-eastus").click();
+    const reopenedSearchBox = page.getByPlaceholder("Search by Account name");
+    await expect(reopenedSearchBox).toHaveValue("");
+
+    // All items visible again
+    await expect(page.getByText("cosmos-dev-westus")).toBeVisible();
+    await expect(page.getByText("cosmos-test-northeurope")).toBeVisible();
+    await expect(page.getByText("cosmos-staging-westus2")).toBeVisible();
+  });
+
+  test("account dropdown updates button text after selection", async ({ page }) => {
+    await page.getByText("Select a Subscription").click();
+    await page.getByText("QA Subscription").click();
+
+    await page.getByText("Select an Account").click();
+    await page.getByText("cosmos-test-northeurope").click();
+
+    // Button should show selected account name
+    await expect(page.locator("[data-test='account-dropdown']").getByText("cosmos-test-northeurope")).toBeVisible();
+    await expect(page.locator("[data-test='selected-account']")).toHaveText("cosmos-test-northeurope");
+  });
+
+  test("account dropdown shows all 4 mock accounts", async ({ page }) => {
+    await page.getByText("Select a Subscription").click();
+    await page.getByText("Staging Subscription").click();
+
+    await page.getByText("Select an Account").click();
+
+    await expect(page.getByText("cosmos-dev-westus")).toBeVisible();
+    await expect(page.getByText("cosmos-prod-eastus")).toBeVisible();
+    await expect(page.getByText("cosmos-test-northeurope")).toBeVisible();
+    await expect(page.getByText("cosmos-staging-westus2")).toBeVisible();
+  });
+
+  test("shows 'No Cosmos DB Accounts Found' when account list is empty (no subscription selected)", async ({
+    page,
+  }) => {
+    // The account dropdown shows "No Cosmos DB Accounts Found" when disabled with no items
+    const accountButtonText = page.locator("[data-test='account-dropdown'] button");
+    await expect(accountButtonText).toHaveText("No Cosmos DB Accounts Found");
+  });
+
+  test("full flow: select subscription, filter accounts, select account", async ({ page }) => {
+    // Step 1: Select a subscription
+    await page.getByText("Select a Subscription").click();
+    const subSearchBox = page.getByPlaceholder("Search by Subscription name");
+    await subSearchBox.fill("QA");
+    await page.getByText("QA Subscription").click();
+
+    // Step 2: Open account dropdown and filter
+    await page.getByText("Select an Account").click();
+    const accountSearchBox = page.getByPlaceholder("Search by Account name");
+    await accountSearchBox.fill("staging");
+    await page.getByText("cosmos-staging-westus2").click();
+
+    // Step 3: Verify final state
+    await expect(page.locator("[data-test='selected-subscription']")).toHaveText("QA Subscription");
+    await expect(page.locator("[data-test='selected-account']")).toHaveText("cosmos-staging-westus2");
+  });
+});