fix(web): convert pop up error as cancellation (#1516)

* fix(web): handle google popup-close oauth cancellations

Co-authored-by: Tyler Dane <tyler-dane@users.noreply.github.com>

* fix(web): wait for elements in DayView route tests

Replace getByRole/getByText with findByRole/findByText to wait for
components to render before assertions. This fixes timing-related test
failures in CI where elements weren't immediately available after render.

Co-authored-by: Tyler Dane <tyler-dane@users.noreply.github.com>

* refactor(middleware): streamline promise middleware and update imports

- Removed unused import from promise.middleware.test.ts to improve clarity.
- Simplified condition in sendResponse function of promise.middleware.ts for better readability.
- Updated import path for Google OAuth error utility in useGoogleLogin.ts to reflect new directory structure.

* fix(tests): update import path for Google OAuth error utility in test file

- Adjusted the import statement in `google-oauth-error.util.test.ts` to reflect the new directory structure for better organization and clarity.

* refactor(migrations): remove console logs and enhance migration logic

- Eliminated console log statements from data and external migration functions to reduce clutter and improve performance.
- Updated the demo data seed migration to skip seeding when existing data is present, enhancing efficiency.
- Added console method spies in test files to control logging behavior during tests, improving test clarity and reducing noise.

* chore(assets): remove unused Google OAuth and logo images

- Deleted the `google-oauth-preview.png` and `logo.png` files from the assets directory as they are no longer needed, streamlining the asset management.

* refactor(tests): update rendering methods and improve test setup

- Replaced synchronous rendering methods with asynchronous counterparts in various test files to ensure proper initialization and avoid timing issues.
- Updated utility functions to prepare storage for tests, enhancing the clarity and reliability of the test environment.
- Removed unused imports and streamlined test setups across multiple components, improving overall code organization and readability.

* fix(tests): update test command in package.json for consistency

- Changed the test command in package.json from "cross-env-shell" to "cross-env" for improved compatibility and consistency across environments.

* refactor(Task): improve drag handle visibility and floating behavior

- Updated the DraggableTask component to conditionally enable the drag handle based on the number of tasks, enhancing user experience.
- Refactored the floating behavior to only activate when the drag handle is visible and not in test environments, improving performance and reliability.
- Simplified the reference setting logic for the floating element, ensuring it only attaches when necessary.

* test(floating-ui): add mock setup for floating-ui in tests

- Introduced a new setup file to mock @floating-ui/react, allowing tests to run without real layout calculations.
- Updated TaskContextMenu and TaskList test files to include the new floating-ui mock, ensuring consistent behavior across tests.
- Simplified the DraggableTask component by removing environment checks for floating behavior, enhancing test reliability.

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: Tyler Dane <tyler-dane@users.noreply.github.com>

Author: tyler-dane

package.json

@@ -27,7 +27,7 @@
     "dev:update": "git checkout main && git pull && yarn",
     "dev:web": "cd packages/web && yarn webpack serve --mode=development --node-env=local",
     "postinstall": "husky install | chmod ug+x .husky/*",
-    "test": "cross-env-shell TZ=Etc/UTC yarn jest",
+    "test": "cross-env TZ=Etc/UTC yarn jest",
     "test:e2e": "playwright test",
     "test:backend": "yarn test backend",
     "test:core": "yarn test core",

packages/backend/src/common/middleware/promise.middleware.test.ts

@@ -1,4 +1,4 @@
-import { type NextFunction, type Request, type Response } from "express";
+import { type NextFunction, type Request } from "express";
 import { Status } from "@core/errors/status.codes";
 import { requestMiddleware } from "@backend/common/middleware/promise.middleware";
 import { type Res_Promise } from "@backend/common/types/express.types";

packages/backend/src/common/middleware/promise.middleware.ts

@@ -27,10 +27,7 @@ const sendResponse = (res: express.Response, data: unknown) => {
     return;
   }
 
-  if (
-    isStatusOnlyPayload(data) &&
-    (data.statusCode as Status) === Status.NO_CONTENT
-  ) {
+  if (isStatusOnlyPayload(data) && data.statusCode === Status.NO_CONTENT) {
     res.status(Status.NO_CONTENT).send();
     return;
   }

packages/web/src/__tests__/__mocks__/mock.render.tsx

@@ -2,7 +2,6 @@ import {
   type ComponentType,
   type PropsWithChildren,
   type ReactElement,
-  isValidElement,
 } from "react";
 import { RouterProvider, type RouterProviderProps } from "react-router-dom";
 import { configureStore } from "@reduxjs/toolkit";
@@ -50,12 +49,6 @@ const TestProviders = (props?: {
       );
     }
 
-    if (isValidElement(children)) {
-      console.warn(
-        "When providing a router, children is not a valid option and will be ignored.",
-      );
-    }
-
     return (
       <div id={ID_ROOT} data-testid={ID_ROOT}>
         <CompassRequiredProviders store={props?.store}>
@@ -91,6 +84,7 @@ const customRender = (
 
   const options: RenderOptions = { ...renderOptions };
   const BaseProviders = TestProviders({ store, router });
+  const renderUi = router ? <></> : ui;
 
   const Wrapper = ({ children }: PropsWithChildren) => {
     if (!CustomWrapper) return <BaseProviders>{children}</BaseProviders>;
@@ -103,7 +97,7 @@ const customRender = (
   };
 
   // wraps test component with providers
-  return render(ui, {
+  return render(renderUi, {
     wrapper: Wrapper,
     ...options,
   });

packages/web/src/__tests__/floating-ui.setup.ts

@@ -0,0 +1,38 @@
+/**
+ * Mocks @floating-ui/react so components like DraggableTask run the same
+ * production code paths (refs.setReference, refs.setFloating, floatingStyles)
+ * in tests without requiring real layout. We call the real useFloating and
+ * only override refs and floatingStyles so other components (SelectView,
+ * Tooltip) still receive a valid context. Individual test files may override
+ * this mock with their own jest.mock("@floating-ui/react", ...).
+ */
+jest.mock("@floating-ui/react", () => {
+  const actual =
+    jest.requireActual<typeof import("@floating-ui/react")>(
+      "@floating-ui/react",
+    );
+  return {
+    ...actual,
+    useFloating: jest.fn(
+      (options: Parameters<typeof actual.useFloating>[0]) => {
+        const result = actual.useFloating({
+          ...options,
+          whileElementsMounted: options?.whileElementsMounted
+            ? jest.fn(() => jest.fn())
+            : undefined,
+        });
+        return {
+          ...result,
+          refs: {
+            setReference: jest.fn(),
+            setFloating: jest.fn(),
+          },
+          floatingStyles: {},
+        };
+      },
+    ),
+    autoUpdate: jest.fn(() => jest.fn()),
+    inline: jest.fn(() => () => {}),
+    offset: jest.fn(() => () => {}),
+  };
+});

packages/web/src/__tests__/utils/storage/indexeddb.test.util.ts

@@ -1,8 +1,10 @@
+import { resetStorageAsync } from "@web/common/storage/adapter/adapter";
 import { DEMO_DATA_SEED_FLAG_KEY } from "@web/common/storage/migrations/external/demo-data-seed";
 
 const COMPASS_LOCAL_DB_NAME = "compass-local";
 
 export async function clearCompassLocalDb(): Promise<void> {
+  await resetStorageAsync();
   await new Promise<void>((resolve) => {
     const request = indexedDB.deleteDatabase(COMPASS_LOCAL_DB_NAME);
     request.onsuccess = () => resolve();

packages/web/src/__tests__/utils/tasks/task.test.util.ts

@@ -1,4 +1,4 @@
-import { screen, waitFor } from "@testing-library/react";
+import { act, screen, waitFor } from "@testing-library/react";
 import type userEvent from "@testing-library/user-event";
 
 type User = ReturnType<typeof userEvent.setup>;
@@ -30,9 +30,11 @@ export const addTasks = async (user: User, taskTitles: string[]) => {
       screen.getByPlaceholderText("Enter task title..."),
     )) as HTMLInputElement;
 
-    await user.clear(input);
-    await user.type(input, title);
-    await user.keyboard("{Enter}");
+    await act(async () => {
+      await user.clear(input);
+      await user.type(input, title);
+      await user.keyboard("{Enter}");
+    });
 
     // Wait for the task to be created and appear in the DOM
     await waitFor(
@@ -58,7 +60,9 @@ export const clickCreateTaskButton = async (user: User) => {
     { timeout: 5000 },
   );
 
-  await user.click(addButton);
+  await act(async () => {
+    await user.click(addButton);
+  });
 
   return waitFor(() => screen.getByRole("textbox", { name: /task title/i }), {
     timeout: 5000,

packages/web/src/assets/png/google-oauth-preview.png

@@ -0,0 +1,18 @@
+import { isGooglePopupClosedError } from "@web/auth/google/google-oauth-error.util";
+
+describe("isGooglePopupClosedError", () => {
+  it("returns true for non-oauth popup_closed type", () => {
+    expect(isGooglePopupClosedError({ type: "popup_closed" })).toBe(true);
+  });
+
+  it("returns true for popup-closed error messages", () => {
+    expect(
+      isGooglePopupClosedError({ message: "Popup window closed by user" }),
+    ).toBe(true);
+  });
+
+  it("returns false for non-popup auth failures", () => {
+    expect(isGooglePopupClosedError({ error: "access_denied" })).toBe(false);
+    expect(isGooglePopupClosedError(new Error("network down"))).toBe(false);
+  });
+});