@cccsaurora/howler-ui 2.16.0-dev.378 → 2.16.0-dev.381

package/components/routes/hits/search/ViewLink.test.js

@@ -1,29 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/* eslint-disable react/jsx-no-literals */
-/* eslint-disable import/imports-first */
 /// <reference types="vitest" />
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent, {} from '@testing-library/user-event';
-import React, { createContext, useContext } from 'react';
+import {} from 'react';
+import { setupReactRouterMock } from '@cccsaurora/howler-ui/tests/mocks';
 import { vi } from 'vitest';
-globalThis.IS_REACT_ACT_ENVIRONMENT = true;
-// Mock use-context-selector
-vi.mock('use-context-selector', async () => {
-    return {
-        createContext,
-        useContextSelector: (context, selector) => {
-            return selector(useContext(context));
-        }
-    };
-});
-// Mock react-router-dom
-vi.mock('react-router-dom', async () => {
-    const actual = await vi.importActual('react-router-dom');
-    return {
-        ...actual,
-        Link: React.forwardRef(({ to, children, ...props }, ref) => (_jsx("a", { ref: ref, href: to, ...props, children: children })))
-    };
-});
+setupReactRouterMock();
 // Import component after mocks
 import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
@@ -33,22 +15,25 @@ import { I18nextProvider } from 'react-i18next';
 import { createMockView } from '@cccsaurora/howler-ui/tests/utils';
 import ViewLink from './ViewLink';
 // Mock contexts
-const mockSearch = vi.fn();
 let mockParameterContext = {
     query: 'howler.id:*',
     sort: 'event.created desc',
     span: 'date.range.1.month',
+    views: ['test-view-id'],
     setQuery: vi.fn(),
     setSort: vi.fn(),
-    setSpan: vi.fn()
+    setSpan: vi.fn(),
+    removeView: vi.fn(),
+    setView: vi.fn()
 };
 let mockHitSearchContext = {
-    viewId: 'test-view-id',
-    search: mockSearch
+    search: vi.fn()
 };
 let mockViewContext = {
+    getCurrentViews: vi.fn(),
     views: {
-        'test-view-id': createMockView()
+        'test-view-id': createMockView(),
+        'another-view-id': createMockView({ view_id: 'another-view-id', title: 'Another View' })
     }
 };
 // Test wrapper
@@ -61,315 +46,376 @@ describe('ViewLink', () => {
         user = userEvent.setup();
         vi.clearAllMocks();
         // Reset mock contexts to defaults
-        mockHitSearchContext.viewId = 'test-view-id';
         mockParameterContext.query = 'howler.id:*';
         mockParameterContext.sort = 'event.created desc';
         mockParameterContext.span = 'date.range.1.month';
+        mockParameterContext.views = ['test-view-id'];
+        mockParameterContext.removeView = vi.fn();
+        mockParameterContext.setView = vi.fn();
+        mockHitSearchContext.search = vi.fn();
+        mockViewContext.getCurrentViews = vi.fn().mockResolvedValue([createMockView()]);
         mockViewContext.views = {
-            'test-view-id': createMockView()
+            'test-view-id': createMockView(),
+            'another-view-id': createMockView({ view_id: 'another-view-id', title: 'Another View' })
         };
     });
-    describe('Rendering Conditions', () => {
-        it('should return null when viewId is not set', () => {
-            mockHitSearchContext.viewId = null;
-            const { container } = render(_jsx(ViewLink, {}), { wrapper: Wrapper });
-            expect(container.firstChild).toBeNull();
-        });
-        it('should return null when viewId is undefined', () => {
-            mockHitSearchContext.viewId = undefined;
-            const { container } = render(_jsx(ViewLink, {}), { wrapper: Wrapper });
-            expect(container.firstChild).toBeNull();
-        });
-        it('should render selected view UI when viewId exists and view is found', () => {
-            render(_jsx(ViewLink, {}), { wrapper: Wrapper });
-            expect(screen.getByText('Test View')).toBeInTheDocument();
-        });
-        it('should render error alert when viewId exists but view is not found', () => {
-            mockHitSearchContext = { ...mockHitSearchContext, viewId: 'non-existent-view' };
-            mockViewContext = {
-                ...mockViewContext,
-                views: {
-                    ...mockViewContext.views,
-                    'non-existent-view': null
-                }
-            };
-            render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
-            const alert = screen.getByRole('alert');
-            expect(alert).toBeInTheDocument();
-            expect(alert).toHaveAttribute('aria-live', 'assertive');
+    describe('Loading State', () => {
+        it('should show loading spinner while fetching view', () => {
+            mockViewContext.getCurrentViews = vi.fn(() => new Promise(() => { })); // Never resolves
+            render(_jsx(ViewLink, { id: 0, viewId: "test-view-id" }), { wrapper: Wrapper });
+            expect(screen.getByRole('progressbar')).toBeInTheDocument();
+        });
+        it('should hide loading spinner after view is fetched', async () => {
+            mockViewContext.getCurrentViews = vi.fn().mockResolvedValue([createMockView()]);
+            render(_jsx(ViewLink, { id: 0, viewId: "test-view-id" }), { wrapper: Wrapper });
+            await screen.findByText('Test View');
+            expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
+        });
+    });
+    describe('View Selection Mode (Empty String)', () => {
+        it('should render selection UI when viewId is empty string', async () => {
+            render(_jsx(ViewLink, { id: 0, viewId: "" }), { wrapper: Wrapper });
+            expect(await screen.findAllByText(i18n.t('hit.search.view.select'))).toHaveLength(1);
+        });
+        it('should show autocomplete for view selection', async () => {
+            render(_jsx(ViewLink, { id: 0, viewId: "" }), { wrapper: Wrapper });
+            await user.click(await screen.findByText(i18n.t('hit.search.view.select')));
+            const autocomplete = screen.getByRole('combobox');
+            expect(autocomplete).toBeInTheDocument();
+        });
+        it('should filter out views already in currentViews', async () => {
+            mockParameterContext.views = ['test-view-id']; // Already selected
+            render(_jsx(ViewLink, { id: 1, viewId: "" }), { wrapper: Wrapper });
+            await user.click(await screen.findByText(i18n.t('hit.search.view.select')));
+            // Open the autocomplete
+            const autocomplete = screen.getByRole('combobox');
+            await user.click(autocomplete);
+            // test-view-id should not be in options, but another-view-id should be available
+            expect(screen.queryByText('Test View')).not.toBeInTheDocument();
+            expect(screen.queryByText('Another View')).toBeInTheDocument();
+        });
+        it('should call setView when view is selected from autocomplete', async () => {
+            mockParameterContext.views = [];
+            render(_jsx(ViewLink, { id: 0, viewId: "" }), { wrapper: Wrapper });
+            await user.click(await screen.findByText(i18n.t('hit.search.view.select')));
+            const autocomplete = screen.getByRole('combobox');
+            await user.click(autocomplete);
+            expect(mockParameterContext.setView).not.toHaveBeenCalled(); // Not clicked yet
+            await screen.findByText('Test View');
+            await user.click(await screen.findByText('Test View'));
+            expect(mockParameterContext.setView).toHaveBeenCalledOnce();
+            expect(mockParameterContext.setView).toHaveBeenCalledWith(0, 'test-view-id'); // Clicked yet
+        });
+        it('should show delete button in selection mode', async () => {
+            render(_jsx(ViewLink, { id: 0, viewId: "" }), { wrapper: Wrapper });
+            await user.click(await screen.findByText(i18n.t('hit.search.view.select')));
+            const deleteButton = screen.getByLabelText(i18n.t('hit.search.view.remove'));
+            expect(deleteButton).toBeInTheDocument();
+        });
+        it('should call removeView when delete button is clicked in selection mode', async () => {
+            render(_jsx(ViewLink, { id: 0, viewId: "" }), { wrapper: Wrapper });
+            await user.click(await screen.findByText(i18n.t('hit.search.view.select')));
+            const deleteButton = screen.getByLabelText(i18n.t('hit.search.view.remove'));
+            await user.click(deleteButton);
+            expect(mockParameterContext.removeView).toHaveBeenCalledWith('');
         });
-        it('should not render error alert when views object is empty (not ready)', () => {
-            mockHitSearchContext.viewId = 'non-existent-view';
-            mockViewContext.views = {};
-            render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
-            expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+    });
+    describe('View Not Found', () => {
+        it('should show error chip when view is not found', async () => {
+            mockViewContext.getCurrentViews = vi.fn().mockResolvedValue([]);
+            render(_jsx(ViewLink, { id: 0, viewId: "non-existent-view" }), { wrapper: Wrapper });
+            expect(await screen.findByRole('alert')).toBeInTheDocument();
+            expect(screen.getByText(i18n.t('view.notfound'))).toBeInTheDocument();
+        });
+        it('should have proper accessibility attributes on error alert', async () => {
+            mockViewContext.getCurrentViews = vi.fn().mockResolvedValue([]);
+            render(_jsx(ViewLink, { id: 0, viewId: "non-existent-view" }), { wrapper: Wrapper });
+            const alert = await screen.findByRole('alert');
+            expect(alert).toHaveAttribute('aria-live', 'assertive');
+            expect(alert).toHaveAttribute('aria-atomic', 'true');
+        });
+        it('should call removeView when error chip is deleted', async () => {
+            mockViewContext.getCurrentViews = vi.fn().mockResolvedValue([]);
+            render(_jsx(ViewLink, { id: 0, viewId: "non-existent-view" }), { wrapper: Wrapper });
+            const errorChip = await screen.findByRole('alert');
+            const deleteButton = errorChip.querySelector('[data-testid="CancelIcon"]')?.closest('button');
+            if (deleteButton) {
+                await user.click(deleteButton);
+                expect(mockParameterContext.removeView).toHaveBeenCalledWith('non-existent-view');
+            }
         });
     });
-    describe('UI Element Display', () => {
-        it('should display view title as link with correct href', () => {
-            render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
-            const titleLink = screen.getByText('Test View').closest('a');
-            expect(titleLink).toHaveAttribute('href', '/views/test-view-id/edit');
-        });
-        it('should display tooltip with view query on title', () => {
-            render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
-            const tooltip = screen.getByText('Test View');
-            expect(tooltip).toHaveAttribute('aria-label', 'Test View - howler.status:open');
-        });
-        it('should display translated view title', () => {
-            mockViewContext.views['test-view-id'] = createMockView({
-                title: 'view.assigned_to_me'
-            });
-            render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
+    describe('Valid View Display', () => {
+        it('should display view title as link', async () => {
+            mockViewContext.getCurrentViews = vi.fn().mockResolvedValue([createMockView()]);
+            render(_jsx(ViewLink, { id: 0, viewId: "test-view-id" }), { wrapper: Wrapper });
+            const titleLink = await screen.findByText('Test View');
+            expect(titleLink.closest('a')).toHaveAttribute('href', '/views/test-view-id/edit');
+        });
+        it('should display tooltip with view query on title', async () => {
+            mockViewContext.getCurrentViews = vi.fn().mockResolvedValue([createMockView()]);
+            render(_jsx(ViewLink, { id: 0, viewId: "test-view-id" }), { wrapper: Wrapper });
+            const tooltip = await screen.findByText('Test View');
+            expect(tooltip).toHaveAttribute('aria-label', expect.stringContaining('howler.status:open'));
+        });
+        it('should display translated view title', async () => {
+            mockViewContext.getCurrentViews = vi.fn().mockResolvedValue([
+                createMockView({
+                    title: 'view.assigned_to_me'
+                })
+            ]);
+            render(_jsx(ViewLink, { id: 0, viewId: "test-view-id" }), { wrapper: Wrapper });
             // The i18n mock should translate this key
-            expect(screen.getByText(/assigned/i)).toBeInTheDocument();
+            expect(await screen.findByText(/assigned/i)).toBeInTheDocument();
+        });
+        it('should display correct icon based on view type', async () => {
+            const viewTypes = ['personal', 'global', 'readonly'];
+            for (const type of viewTypes) {
+                vi.clearAllMocks();
+                mockViewContext.getCurrentViews = vi.fn().mockResolvedValue([createMockView({ type })]);
+                const { unmount } = render(_jsx(ViewLink, { id: 0, viewId: "test-view-id" }), { wrapper: Wrapper });
+                expect(await screen.findByLabelText(i18n.t(`route.views.manager.${type}`))).toBeInTheDocument();
+                unmount();
+            }
+        });
+        it('should display delete button to remove view', async () => {
+            mockViewContext.getCurrentViews = vi.fn().mockResolvedValue([createMockView()]);
+            render(_jsx(ViewLink, { id: 0, viewId: "test-view-id" }), { wrapper: Wrapper });
+            await screen.findByText('Test View');
+            // The chip should have a delete button
+            const chip = screen.getByText('Test View').closest('[role="button"]');
+            expect(chip?.querySelector('[data-testid="CancelIcon"]')).toBeInTheDocument();
+        });
+        it('should call removeView when delete button is clicked', async () => {
+            mockViewContext.getCurrentViews = vi.fn().mockResolvedValue([createMockView()]);
+            render(_jsx(ViewLink, { id: 0, viewId: "test-view-id" }), { wrapper: Wrapper });
+            await screen.findByText('Test View');
+            // Find and click the delete button on the chip
+            const chip = screen.getByText('Test View').closest('[role="button"]');
+            const deleteButton = chip?.querySelector('[data-testid="CancelIcon"]')?.closest('button');
+            if (deleteButton) {
+                await user.click(deleteButton);
+                expect(mockParameterContext.removeView).toHaveBeenCalledWith('test-view-id');
+            }
         });
-        it('should display edit icon when viewId exists', () => {
-            render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
-            // Edit icon should be present (MUI Edit icon)
-            const editButton = screen.getByRole('link', { name: /edit /i });
+    });
+    describe('Action Buttons', () => {
+        beforeEach(async () => {
+            mockViewContext.getCurrentViews = vi.fn().mockResolvedValue([createMockView()]);
+        });
+        it('should display edit button', async () => {
+            render(_jsx(ViewLink, { id: 0, viewId: "test-view-id" }), { wrapper: Wrapper });
+            await screen.findByText('Test View');
+            await user.click(screen.getByText('Test View').parentElement);
+            const editButton = await screen.findByLabelText(i18n.t('route.views.edit'));
             expect(editButton).toBeInTheDocument();
         });
-        it('should display refresh button when viewId exists', () => {
-            render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
-            const refreshButton = screen.getByRole('button');
+        it('should navigate to edit page when edit button is clicked', async () => {
+            render(_jsx(ViewLink, { id: 0, viewId: "test-view-id" }), { wrapper: Wrapper });
+            await screen.findByText('Test View');
+            await user.click(screen.getByText('Test View').parentElement);
+            const editButton = await screen.findByLabelText(i18n.t('route.views.edit'));
+            expect(editButton.closest('a')).toHaveAttribute('href', '/views/test-view-id/edit');
+        });
+        it('should display refresh button', async () => {
+            render(_jsx(ViewLink, { id: 0, viewId: "test-view-id" }), { wrapper: Wrapper });
+            await screen.findByText('Test View');
+            await user.click(screen.getByText('Test View').parentElement);
+            const refreshButton = await screen.findByLabelText(i18n.t('view.refresh'));
             expect(refreshButton).toBeInTheDocument();
         });
-        it('should display open button when viewId exists', () => {
-            render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
-            const openLink = screen.getByRole('link', { name: /open /i });
-            expect(openLink).toBeInTheDocument();
-            expect(openLink).toHaveAttribute('href', '/search?query=howler.status:open');
-        });
-        it('should not display refresh button when viewId is null', () => {
-            mockHitSearchContext.viewId = null;
-            render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
-            expect(screen.queryByRole('button')).not.toBeInTheDocument();
-        });
-        it('should not display open button when viewId is null', () => {
-            mockHitSearchContext.viewId = null;
-            render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
-            expect(screen.queryByRole('link', { name: /open /i })).not.toBeInTheDocument();
-        });
-    });
-    describe('Button States & Interactions', () => {
         it('should call search function when refresh button is clicked', async () => {
-            render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
-            const refreshButton = screen.getByRole('button');
+            render(_jsx(ViewLink, { id: 0, viewId: "test-view-id" }), { wrapper: Wrapper });
+            await screen.findByText('Test View');
+            await user.click(screen.getByText('Test View').parentElement);
+            const refreshButton = await screen.findByLabelText(i18n.t('view.refresh'));
             await user.click(refreshButton);
-            expect(mockSearch).toHaveBeenCalledWith('howler.id:*');
-        });
-        it('should navigate to search when open button is clicked', () => {
-            render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
-            const openLink = screen.getByRole('link', { name: /open /i });
-            expect(openLink).toHaveAttribute('href', '/search?query=howler.status:open');
-        });
-        it('should navigate to /search when error alert close button is clicked', () => {
-            mockHitSearchContext = { ...mockHitSearchContext, viewId: 'non-existent-view' };
-            mockViewContext = {
-                ...mockViewContext,
-                views: {
-                    ...mockViewContext.views,
-                    'non-existent-view': null
-                }
-            };
-            render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
-            const closeButton = screen.getByRole('alert').querySelector('a');
-            expect(closeButton).toHaveAttribute('href', '/search');
-        });
-        it('should have correct tooltip on refresh button', () => {
-            render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
-            const tooltip = screen.getByRole('button');
-            expect(tooltip).toHaveAttribute('aria-label', expect.stringContaining('Refresh'));
-        });
-        it('should have correct tooltip on open button', () => {
-            render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
-            const openLink = screen.getByRole('link', { name: /open /i });
-            expect(openLink).toHaveAttribute('aria-label', expect.stringContaining('Open'));
+            expect(mockHitSearchContext.search).toHaveBeenCalledWith('howler.id:*');
+        });
+        it('should display open button', async () => {
+            render(_jsx(ViewLink, { id: 0, viewId: "test-view-id" }), { wrapper: Wrapper });
+            await screen.findByText('Test View');
+            await user.click(screen.getByText('Test View').parentElement);
+            const openButton = await screen.findByLabelText(i18n.t('view.open'));
+            expect(openButton).toBeInTheDocument();
+        });
+        it('should navigate to search with view query when open button is clicked', async () => {
+            render(_jsx(ViewLink, { id: 0, viewId: "test-view-id" }), { wrapper: Wrapper });
+            await screen.findByText('Test View');
+            await user.click(screen.getByText('Test View').parentElement);
+            const openButton = await screen.findByLabelText(i18n.t('view.open'));
+            expect(openButton.closest('a')).toHaveAttribute('href', '/search?query=howler.status:open');
         });
     });
-    describe('URL Generation (viewUrl)', () => {
-        it('should generate edit URL when viewId exists', () => {
-            render(_jsx(ViewLink, {}), { wrapper: Wrapper });
-            const editButton = screen.getByRole('link', { name: /edit/i });
-            expect(editButton).toHaveAttribute('href', '/views/test-view-id/edit');
-        });
-        it('should have edit tooltip when viewId exists', () => {
-            render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
-            const editButton = screen.getByRole('link', { name: /edit/i });
-            expect(editButton).toHaveAttribute('aria-label', expect.stringContaining('Edit'));
+    describe('URL Generation', () => {
+        it('should generate edit URL when view exists', async () => {
+            mockViewContext.getCurrentViews = vi.fn().mockResolvedValue([createMockView()]);
+            render(_jsx(ViewLink, { id: 0, viewId: "test-view-id" }), { wrapper: Wrapper });
+            await screen.findByText('Test View');
+            await user.click(screen.getByText('Test View').parentElement);
+            const editButton = await screen.findByLabelText(i18n.t('route.views.edit'));
+            expect(editButton.closest('a')).toHaveAttribute('href', '/views/test-view-id/edit');
+        });
+        it('should generate create URL with query params when view does not exist', async () => {
+            mockViewContext.getCurrentViews = vi.fn().mockResolvedValue([]);
+            mockParameterContext.query = 'test-query';
+            mockParameterContext.sort = 'test-sort';
+            mockParameterContext.span = 'test-span';
+            render(_jsx(ViewLink, { id: 0, viewId: "new-view" }), { wrapper: Wrapper });
+            // Wait for loading to complete
+            await screen.findByRole('alert');
+            // The viewUrl memo should generate create URL with params
+            // This is tested indirectly through the edit button when view is null
+        });
+        it('should generate create URL without params when no query/sort/span', async () => {
+            mockViewContext.getCurrentViews = vi.fn().mockResolvedValue([]);
+            mockParameterContext.query = null;
+            mockParameterContext.sort = null;
+            mockParameterContext.span = null;
+            render(_jsx(ViewLink, { id: 0, viewId: "new-view" }), { wrapper: Wrapper });
+            await screen.findByRole('alert');
+            // Should generate /views/create without query params
         });
     });
     describe('Edge Cases', () => {
-        it('should handle selectedView with missing title', () => {
-            mockViewContext.views['test-view-id'] = createMockView({
-                title: undefined
-            });
-            const { container } = render(_jsx(ViewLink, {}), { wrapper: Wrapper });
-            expect(container).toBeInTheDocument();
+        it('should handle view with missing title', async () => {
+            mockViewContext.getCurrentViews = vi.fn().mockResolvedValue([
+                createMockView({
+                    title: undefined
+                })
+            ]);
+            const { container } = render(_jsx(ViewLink, { id: 0, viewId: "test-view-id" }), { wrapper: Wrapper });
             // Component should still render without crashing
-        });
-        it('should handle selectedView with missing query', () => {
-            mockViewContext.views['test-view-id'] = createMockView({
-                query: undefined
-            });
-            const { container } = render(_jsx(ViewLink, {}), { wrapper: Wrapper });
-            expect(container).toBeInTheDocument();
-            // Query tooltip should be empty or undefined
-            const tooltip = screen.getByText('Test View');
-            expect(tooltip).toHaveAttribute('aria-label', 'Test View - Unknown');
-        });
-        it('should handle rapid context changes', () => {
-            const { rerender } = render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
-            // Change viewId
-            mockHitSearchContext = { ...mockHitSearchContext, viewId: 'another-view-id' };
-            mockViewContext = {
-                ...mockViewContext,
-                views: {
-                    ...mockViewContext.views,
-                    'another-view-id': createMockView({
-                        view_id: 'another-view-id',
-                        title: 'Another View'
-                    })
-                }
-            };
-            rerender(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
-            expect(screen.getByText('Another View')).toBeInTheDocument();
-            // Change back
-            mockHitSearchContext = { ...mockHitSearchContext, viewId: 'test-view-id' };
-            rerender(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
-            expect(screen.getByText('Test View')).toBeInTheDocument();
-        });
-        it('should handle undefined query in parameter context', () => {
+            await waitFor(() => expect(container).toBeInTheDocument());
+        });
+        it('should handle view with missing query', async () => {
+            mockViewContext.getCurrentViews = vi.fn().mockResolvedValue([
+                createMockView({
+                    query: undefined
+                })
+            ]);
+            render(_jsx(ViewLink, { id: 0, viewId: "test-view-id" }), { wrapper: Wrapper });
+            const titleLink = await screen.findByText('Test View');
+            expect(titleLink).toHaveAttribute('aria-label', expect.stringContaining(i18n.t('unknown')));
+        });
+        it('should handle undefined query in parameter context', async () => {
             mockParameterContext.query = undefined;
-            render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
-            const refreshButton = screen.getByRole('button');
-            fireEvent.click(refreshButton);
-            expect(mockSearch).toHaveBeenCalledWith(undefined);
-        });
-        it('should handle null sort in parameter context', () => {
-            mockParameterContext.sort = null;
-            const { container } = render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
-            expect(container).toBeInTheDocument();
-        });
-        it('should handle null span in parameter context', () => {
-            mockParameterContext.span = null;
-            const { container } = render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
-            expect(container).toBeInTheDocument();
-        });
-        it('should handle view with all optional fields missing', () => {
-            mockViewContext.views['test-view-id'] = {
-                view_id: 'test-view-id'
-            };
-            const { container } = render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
-            expect(container).toBeInTheDocument();
-        });
-        it('should handle empty views object', () => {
-            mockViewContext.views = {};
-            mockHitSearchContext.viewId = 'test-view-id';
-            render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
-            // Should not render error alert because viewsReady is false
-            expect(screen.queryByRole('alert')).not.toBeInTheDocument();
-        });
-    });
-    describe('Integration Tests', () => {
-        it('should work with all three contexts simultaneously', () => {
-            render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
-            // Should use values from ParameterContext
-            const refreshButton = screen.getByRole('button');
-            fireEvent.click(refreshButton);
-            expect(mockSearch).toHaveBeenCalledWith('howler.id:*');
-            // Should use values from ViewContext
-            expect(screen.getByText('Test View')).toBeInTheDocument();
-            // Should use values from HitSearchContext
-            const editButton = screen.getByRole('link', { name: /edit/i });
-            expect(editButton).toHaveAttribute('href', '/views/test-view-id/edit');
-        });
-        it('should render correctly with different view types', () => {
-            const viewTypes = ['personal', 'global', 'readonly'];
-            const { rerender } = render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
-            viewTypes.forEach(type => {
-                mockViewContext = {
-                    ...mockViewContext,
-                    views: {
-                        ...mockViewContext.views,
-                        'test-view-id': createMockView({ type })
-                    }
-                };
-                rerender(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
-                expect(screen.getByLabelText(i18n.t(`route.views.manager.${type}`))).toBeInTheDocument();
-            });
-        });
-        it('should handle multiple view IDs correctly', () => {
-            mockViewContext.views = {
-                'view-1': createMockView({ view_id: 'view-1', title: 'View 1' }),
-                'view-2': createMockView({ view_id: 'view-2', title: 'View 2' }),
-                'view-3': createMockView({ view_id: 'view-3', title: 'View 3' })
-            };
-            mockHitSearchContext.viewId = 'view-2';
-            render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
-            expect(screen.getByText('View 2')).toBeInTheDocument();
-            expect(screen.queryByText('View 1')).not.toBeInTheDocument();
-            expect(screen.queryByText('View 3')).not.toBeInTheDocument();
+            mockViewContext.getCurrentViews = vi.fn().mockResolvedValue([createMockView()]);
+            render(_jsx(ViewLink, { id: 0, viewId: "test-view-id" }), { wrapper: Wrapper });
+            await screen.findByText('Test View');
+            await user.click(screen.getByText('Test View').parentElement);
+            const refreshButton = await screen.findByLabelText(i18n.t('view.refresh'));
+            await user.click(refreshButton);
+            expect(mockHitSearchContext.search).toHaveBeenCalledWith(undefined);
+        });
+        it('should handle custom span correctly', async () => {
+            mockParameterContext.span = 'date.range.custom';
+            mockViewContext.getCurrentViews = vi.fn().mockResolvedValue([createMockView()]);
+            render(_jsx(ViewLink, { id: 0, viewId: "test-view-id" }), { wrapper: Wrapper });
+            await screen.findByText('Test View');
+            await user.click(screen.getByText('Test View').parentElement);
+            // Edit button should be disabled when span is custom
+            const editButton = await screen.findByLabelText(i18n.t('route.views.edit'));
+            expect(editButton).toHaveAttribute('aria-disabled', 'true');
+        });
+        it('should disable edit button when no query and no view', async () => {
+            mockParameterContext.query = null;
+            mockViewContext.getCurrentViews = vi.fn().mockResolvedValue([]);
+            render(_jsx(ViewLink, { id: 0, viewId: "new-view" }), { wrapper: Wrapper });
+            await screen.findByRole('alert');
+            // Can't test disabled state directly on error chip
+        });
+        it('should handle rapid viewId changes', async () => {
+            const { rerender } = render(_jsx(ViewLink, { id: 0, viewId: "test-view-id" }), { wrapper: Wrapper });
+            expect(await screen.findByText('Test View')).toBeInTheDocument();
+            // Change viewId
+            mockViewContext.getCurrentViews = vi.fn().mockResolvedValue([
+                createMockView({
+                    view_id: 'another-view-id',
+                    title: 'Another View'
+                })
+            ]);
+            rerender(_jsx(ViewLink, { id: 0, viewId: "another-view-id" }));
+            expect(await screen.findByText('Another View')).toBeInTheDocument();
+        });
+        it('should call getCurrentViews when viewId changes', async () => {
+            const { rerender } = render(_jsx(ViewLink, { id: 0, viewId: "test-view-id" }), { wrapper: Wrapper });
+            await screen.findByText('Test View');
+            expect(mockViewContext.getCurrentViews).toHaveBeenCalledWith({ viewId: 'test-view-id', ignoreParams: true });
+            mockViewContext.getCurrentViews = vi.fn().mockResolvedValue([
+                createMockView({
+                    view_id: 'another-view-id',
+                    title: 'Another View'
+                })
+            ]);
+            rerender(_jsx(ViewLink, { id: 0, viewId: "another-view-id" }));
+            await screen.findByText('Another View');
+            expect(mockViewContext.getCurrentViews).toHaveBeenCalledWith({ viewId: 'another-view-id', ignoreParams: true });
         });
     });
     describe('Accessibility', () => {
-        it('should have tooltips for all icon buttons', () => {
-            render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
-            const editButton = screen.getByRole('link', { name: /edit /i });
-            const refreshButton = screen.getByRole('button');
-            const openButton = screen.getByRole('link', { name: /open /i });
+        it('should have accessible link text for view title', async () => {
+            mockViewContext.getCurrentViews = vi.fn().mockResolvedValue([createMockView()]);
+            render(_jsx(ViewLink, { id: 0, viewId: "test-view-id" }), { wrapper: Wrapper });
+            const titleLink = await screen.findByText('Test View');
+            expect(titleLink).toHaveAttribute('role', 'link');
+            expect(titleLink.textContent).toBe('Test View');
+        });
+        it('should have tooltips for all action buttons', async () => {
+            mockViewContext.getCurrentViews = vi.fn().mockResolvedValue([createMockView()]);
+            render(_jsx(ViewLink, { id: 0, viewId: "test-view-id" }), { wrapper: Wrapper });
+            await screen.findByText('Test View');
+            await user.click(screen.getByText('Test View').parentElement);
+            const editButton = await screen.findByLabelText(i18n.t('route.views.edit'));
+            const refreshButton = await screen.findByLabelText(i18n.t('view.refresh'));
+            const openButton = await screen.findByLabelText(i18n.t('view.open'));
             expect(editButton).toHaveAttribute('aria-label');
             expect(refreshButton).toHaveAttribute('aria-label');
             expect(openButton).toHaveAttribute('aria-label');
         });
-        it('should have proper role for error alert', () => {
-            mockHitSearchContext.viewId = 'non-existent-view';
-            mockViewContext.views = {
-                'non-existent-view': null,
-                'test-view-id': createMockView()
-            };
-            render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
-            const alert = screen.getByRole('alert');
-            expect(alert).toBeInTheDocument();
-        });
-        it('should have accessible link text for view title', () => {
-            render(_jsx(ViewLink, {}), { wrapper: Wrapper });
-            const titleLink = screen.getByText('Test View').closest('a');
-            expect(titleLink).toHaveAttribute('href', '/views/test-view-id/edit');
-            expect(titleLink.textContent).toBe('Test View');
+        it('should have proper ARIA attributes on view type icon', async () => {
+            mockViewContext.getCurrentViews = vi.fn().mockResolvedValue([createMockView()]);
+            render(_jsx(ViewLink, { id: 0, viewId: "test-view-id" }), { wrapper: Wrapper });
+            const icon = await screen.findByLabelText(i18n.t('route.views.manager.personal'));
+            expect(icon).toHaveAttribute('aria-label');
         });
     });
-    describe('Memoization', () => {
-        it('should not re-render unnecessarily when unrelated context values change', () => {
-            const { rerender } = render(_jsx(ViewLink, {}), { wrapper: Wrapper });
-            // Change an unrelated value
-            mockParameterContext.setQuery = vi.fn();
-            rerender(_jsx(ViewLink, {}));
-            const secondRenderButton = screen.getByRole('button');
-            // Components should still be present
-            expect(secondRenderButton).toBeInTheDocument();
-        });
-        it('should update when viewId changes', () => {
-            const { rerender } = render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
-            expect(screen.getByText('Test View')).toBeInTheDocument();
-            mockHitSearchContext = { ...mockHitSearchContext, viewId: 'another-view' };
-            mockViewContext.views['another-view'] = createMockView({
-                view_id: 'another-view',
-                title: 'Another View'
-            });
-            rerender(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
-            expect(screen.getByText('Another View')).toBeInTheDocument();
-        });
-        it('should update when query changes', () => {
-            const { rerender } = render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
-            const refreshButton = screen.getByRole('button');
-            fireEvent.click(refreshButton);
-            expect(mockSearch).toHaveBeenCalledWith('howler.id:*');
-            mockParameterContext = { ...mockParameterContext, query: 'howler.status:closed' };
-            rerender(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
-            fireEvent.click(refreshButton);
-            expect(mockSearch).toHaveBeenCalledWith('howler.status:closed');
+    describe('Integration with Context', () => {
+        it('should use getCurrentViews from ViewContext', async () => {
+            mockViewContext.getCurrentViews = vi.fn().mockResolvedValue([createMockView()]);
+            render(_jsx(ViewLink, { id: 0, viewId: "test-view-id" }), { wrapper: Wrapper });
+            await screen.findByText('Test View');
+            expect(mockViewContext.getCurrentViews).toHaveBeenCalledWith({ viewId: 'test-view-id', ignoreParams: true });
+        });
+        it('should use removeView from ParameterContext', async () => {
+            mockViewContext.getCurrentViews = vi.fn().mockResolvedValue([createMockView()]);
+            render(_jsx(ViewLink, { id: 0, viewId: "test-view-id" }), { wrapper: Wrapper });
+            await screen.findByText('Test View');
+            const chip = screen.getByText('Test View').closest('[role="button"]');
+            const deleteButton = chip?.querySelector('[data-testid="CancelIcon"]')?.closest('button');
+            if (deleteButton) {
+                await user.click(deleteButton);
+                expect(mockParameterContext.removeView).toHaveBeenCalledWith('test-view-id');
+            }
+        });
+        it('should use search from HitSearchContext', async () => {
+            mockViewContext.getCurrentViews = vi.fn().mockResolvedValue([createMockView()]);
+            render(_jsx(ViewLink, { id: 0, viewId: "test-view-id" }), { wrapper: Wrapper });
+            await screen.findByText('Test View');
+            await user.click(screen.getByText('Test View').parentElement);
+            const refreshButton = await screen.findByLabelText(i18n.t('view.refresh'));
+            await user.click(refreshButton);
+            expect(mockHitSearchContext.search).toHaveBeenCalledWith('howler.id:*');
+        });
+        it('should filter available views using currentViews from ParameterContext', async () => {
+            mockParameterContext.views = ['test-view-id'];
+            render(_jsx(ViewLink, { id: 1, viewId: "" }), { wrapper: Wrapper });
+            await user.click(await screen.findByText(i18n.t('hit.search.view.select')));
+            // Open the autocomplete
+            const autocomplete = screen.getByRole('combobox');
+            await user.click(autocomplete);
+            expect(screen.queryByText('Test View')).not.toBeInTheDocument();
+            expect(screen.queryByText('Another View')).toBeInTheDocument();
         });
     });
 });