sidebar: test for scenario without query params

Vizzuality · Feb 27, 2025 · a4c92ec · a4c92ec
1 parent 92fc584
commit a4c92ec
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 9 deletions.
diff --git a/client/src/containers/my-projects/sidebar.test.tsx b/client/src/containers/my-projects/sidebar.test.tsx
@@ -23,36 +23,61 @@ const TEST_SECTIONS: ComponentProps<typeof Sidebar>['sections'] = [
 const TEST_PATHNAME = '/test-pathname';
 const ACTIVE_CLASS = 'bg-green-80';
 
+const mockedHook = vi.hoisted(() => vi.fn());
+
 vi.mock('next/navigation', () => ({
   usePathname: () => TEST_PATHNAME,
-  useSearchParams: () => new URLSearchParams({ step: TEST_SECTIONS[0].value }),
+  useSearchParams: mockedHook.mockReturnValue(new URLSearchParams()),
 }));
 
 describe('sidebar', () => {
-  const { container } = render(<Sidebar sections={TEST_SECTIONS} />);
-  const sections = container.querySelectorAll('li');
-
   it('renders the correct number of sections', () => {
+    const { container } = render(<Sidebar sections={TEST_SECTIONS} />);
+    const sections = container.querySelectorAll('li');
+
     expect(sections).toHaveLength(TEST_SECTIONS.length);
   });
 
   it('renders a section with the correct name', () => {
+    const { container } = render(<Sidebar sections={TEST_SECTIONS} />);
+    const sections = container.querySelectorAll('li');
+
     expect(sections[0].querySelector('a')?.textContent).toBe(TEST_SECTIONS[0].label);
   });
 
   it('renders a section with the correct href', () => {
+    const { container } = render(<Sidebar sections={TEST_SECTIONS} />);
+    const sections = container.querySelectorAll('li');
+
     expect(sections[0].querySelector('a')).toHaveAttribute(
       'href',
       `${TEST_PATHNAME}?step=${TEST_SECTIONS[0].value}`
     );
   });
 
   it('expects the selected section to have the active class applied', () => {
+    mockedHook.mockReturnValue(new URLSearchParams({ step: TEST_SECTIONS[0].value }));
+
+    const { container } = render(<Sidebar sections={TEST_SECTIONS} />);
+    const sections = container.querySelectorAll('li');
+
     expect(sections[0].querySelector('a')).toHaveClass(ACTIVE_CLASS);
   });
 
   it('expects other sections (not the selected one) to not have the active class applied ', () => {
+    const { container } = render(<Sidebar sections={TEST_SECTIONS} />);
+    const sections = container.querySelectorAll('li');
+
     expect(sections[1].querySelector('a')).not.toHaveClass(ACTIVE_CLASS);
     expect(sections[2].querySelector('a')).not.toHaveClass(ACTIVE_CLASS);
   });
+
+  it('if no query params are present, the sidebar defaults to the first section', () => {
+    mockedHook.mockReturnValue(new URLSearchParams());
+
+    const { container } = render(<Sidebar sections={TEST_SECTIONS} />);
+    const sections = container.querySelectorAll('li');
+
+    expect(sections[0].querySelector('a')).toHaveClass(ACTIVE_CLASS);
+  });
 });
diff --git a/client/src/containers/my-projects/sidebar.tsx b/client/src/containers/my-projects/sidebar.tsx
@@ -24,7 +24,9 @@ export default function MyProjectsSidebar({
               href={`${pathname}?step=${step.value}`}
               theme="transparent-alt"
               className={cn('uppercase font-semibold justify-start px-4', {
-                'bg-green-80': queryParams.get('step')?.includes(step.value),
+                'bg-green-80':
+                  queryParams.get('step')?.includes(step.value) ??
+                  sections?.[0].value === step.value,
               })}
             >
               {step.label}

diff --git a/client/tsconfig.json b/client/tsconfig.json
@@ -2,8 +2,15 @@
   "compilerOptions": {
     "baseUrl": "./src",
     "target": "es6",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "types": ["vitest/globals", "@testing-library/jest-dom"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "types": [
+      "vitest/globals",
+      "@testing-library/jest-dom"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
@@ -15,14 +22,21 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "incremental": true
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "strictNullChecks": true
   },
   "include": [
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
     "**/*.test.*",
-    "**/*.d.ts"
+    "**/*.d.ts",
+    ".next/types/**/*.ts"
   ],
   "exclude": [
     "node_modules",