feat(account): polish reviews favorites and account UI

src/__tests__/unit/AppSidebar.account.test.ts

@@ -46,10 +46,22 @@ describe("AppSidebar account entry", () => {
     expect(screen.getByText("退出登录")).toBeTruthy();
   });
 
+  it("closes the quick menu after clicking outside the account area", async () => {
+    render(AppSidebar, { props: { ...baseProps, currentUser: user } });
+
+    await fireEvent.click(screen.getByRole("button", { name: /Momen/ }));
+    expect(screen.getByText("用户管理")).toBeTruthy();
+
+    await fireEvent.mouseDown(document.body);
+
+    expect(screen.queryByRole("button", { name: "用户管理" })).toBeNull();
+  });
+
   it("keeps long account names inside the sidebar account entry", () => {
     const longUser: SparkUser = {
       ...user,
-      displayName: "SuperEndermanSMSuperEndermanSMSuperEndermanSM",
+      username: "SuperEndermanSMSuperEndermanSMSuperEndermanSM",
+      displayName: "",
     };
 
     const { container } = render(AppSidebar, {
@@ -62,22 +74,43 @@ describe("AppSidebar account entry", () => {
     const textWrapper = accountButton.querySelector(
       "[data-testid='account-text']",
     );
-    const accountName = screen.getByText(longUser.displayName);
+    const accountName = screen.getByText(longUser.username);
 
     expect(textWrapper?.className).toContain("min-w-0");
     expect(accountName.className).toContain("truncate");
-    expect(container.textContent).toContain(longUser.displayName);
+    expect(container.textContent).toContain(longUser.username);
   });
 
-  it("closes the quick menu after selecting an account action", async () => {
+  it.each([
+    ["用户管理", "open-user-management"],
+    ["我的收藏", "open-favorites"],
+    ["论坛首页", "open-forum"],
+    ["修改论坛资料", "edit-profile"],
+    ["退出登录", "logout"],
+  ] as const)(
+    "closes the quick menu after selecting %s",
+    async (label, eventName) => {
+      const rendered = render(AppSidebar, {
+        props: { ...baseProps, currentUser: user },
+      });
+
+      await fireEvent.click(screen.getByRole("button", { name: /Momen/ }));
+      await fireEvent.click(screen.getByRole("button", { name: label }));
+
+      expect(rendered.emitted(eventName)).toHaveLength(1);
+      expect(screen.queryByRole("button", { name: "用户管理" })).toBeNull();
+    },
+  );
+
+  it("closes the quick menu after selecting a sidebar action", async () => {
     const rendered = render(AppSidebar, {
       props: { ...baseProps, currentUser: user },
     });
 
     await fireEvent.click(screen.getByRole("button", { name: /Momen/ }));
-    await fireEvent.click(screen.getByRole("button", { name: "用户管理" }));
+    await fireEvent.click(screen.getByRole("button", { name: "应用管理" }));
 
-    expect(rendered.emitted("open-user-management")).toHaveLength(1);
+    expect(rendered.emitted("list")).toHaveLength(1);
     expect(screen.queryByRole("button", { name: "用户管理" })).toBeNull();
   });
 });