@c-rex/contexts 0.3.0-build.40 → 0.3.0-build.42

package/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "@c-rex/contexts",
-    "version":  "0.3.0-build.40",
+    "version":  "0.3.0-build.42",
     "type":  "module",
     "files":  [
                   "src"
@@ -24,16 +24,24 @@
                 },
     "scripts":  {
                     "lint":  "eslint .",
-                    "lint:fix":  "eslint . --fix"
+                    "lint:fix":  "eslint . --fix",
+                    "test":  "jest",
+                    "test:watch":  "jest --watch"
                 },
     "devDependencies":  {
                             "@c-rex/eslint-config":  "*",
                             "@c-rex/typescript-config":  "*",
                             "@turbo/gen":  "^2.4.4",
+                            "@types/jest":  "^29.5.14",
                             "@types/node":  "^22.13.10",
                             "@types/react":  "19.0.10",
                             "@types/react-dom":  "19.0.4",
+                            "@testing-library/react":  "^16.3.0",
+                            "@testing-library/jest-dom":  "^6.6.3",
                             "eslint":  "^9.23.0",
+                            "jest":  "^29.7.0",
+                            "jest-environment-jsdom":  "^29.7.0",
+                            "ts-jest":  "^29.3.2",
                             "typescript":  "latest"
                         },
     "dependencies":  {

package/src/__tests__/config-provider.test.tsx

@@ -0,0 +1,143 @@
+/** @jest-environment jsdom */
+import React from 'react';
+import { renderHook, act } from '@testing-library/react';
+import { AppConfigProvider, useAppConfig } from '../config-provider';
+import type { CookiesConfigs, LanguageAndCountries } from '@c-rex/interfaces';
+
+const mockSetAvailableLanguages = jest.fn();
+const mockUpdatePreferences = jest.fn();
+const mockSetCookie = jest.fn();
+const mockCall = jest.fn();
+
+jest.mock('@c-rex/components/language-store', () => ({
+    useLanguageStore: {
+        getState: () => ({ setAvailableLanguages: mockSetAvailableLanguages }),
+    },
+}), { virtual: true });
+
+jest.mock('@c-rex/components/search-settings-store', () => ({
+    useSearchSettingsStore: {
+        getState: () => ({ updatePreferences: mockUpdatePreferences }),
+    },
+}), { virtual: true });
+
+jest.mock('@c-rex/utils/cookies', () => ({
+    setCookie: (...args: unknown[]) => mockSetCookie(...args),
+}));
+
+jest.mock('@c-rex/utils', () => ({
+    call: (...args: unknown[]) => mockCall(...args),
+    normalizeLanguageCode: (lang: string) => lang,
+}));
+
+const mockFetch = jest.fn();
+global.fetch = mockFetch;
+
+const initialConfig: CookiesConfigs = {
+    projectName: 'test-project',
+    titles: { main: 'Main', sub: 'Sub' },
+    languageSwitcher: { enabled: true, default: 'en', endpoint: '/api/lang' },
+    publicNextApiUrl: 'http://localhost:3001',
+    OIDC: { clientEnabled: false, userEnabled: false },
+};
+
+const availableLanguages: LanguageAndCountries[] = [
+    { country: 'US', lang: 'en', value: 'en-US' },
+];
+
+const makeWrapper = (config: CookiesConfigs = initialConfig) =>
+    ({ children }: { children: React.ReactNode }) => (
+        <AppConfigProvider
+            uiLang="en-us"
+            contentLang="en"
+            availableLanguages={availableLanguages}
+            initialConfig={config}
+        >
+            {children}
+        </AppConfigProvider>
+    );
+
+// Flush all pending async state updates in the component
+const flushEffects = async () => act(async () => { await Promise.resolve(); });
+
+beforeEach(() => {
+    jest.clearAllMocks();
+    mockFetch.mockResolvedValue({
+        ok: true,
+        json: async () => ({ value: 'token-value' }),
+    });
+});
+
+describe('AppConfigProvider', () => {
+    it('renders children and provides initialConfig', async () => {
+        const { result } = renderHook(() => useAppConfig(), { wrapper: makeWrapper() });
+        await flushEffects();
+        expect(result.current.configs).toEqual(initialConfig);
+    });
+
+    it('packageID is null initially', async () => {
+        const { result } = renderHook(() => useAppConfig(), { wrapper: makeWrapper() });
+        await flushEffects();
+        expect(result.current.packageID).toBeNull();
+    });
+
+    it('articleLang is null initially', async () => {
+        const { result } = renderHook(() => useAppConfig(), { wrapper: makeWrapper() });
+        await flushEffects();
+        expect(result.current.articleLang).toBeNull();
+    });
+
+    it('availableVersions is null initially', async () => {
+        const { result } = renderHook(() => useAppConfig(), { wrapper: makeWrapper() });
+        await flushEffects();
+        expect(result.current.availableVersions).toBeNull();
+    });
+
+    it('setPackageID updates packageID', async () => {
+        const { result } = renderHook(() => useAppConfig(), { wrapper: makeWrapper() });
+        await flushEffects();
+        act(() => { result.current.setPackageID('pkg-123'); });
+        expect(result.current.packageID).toBe('pkg-123');
+    });
+
+    it('setArticleLang updates articleLang', async () => {
+        const { result } = renderHook(() => useAppConfig(), { wrapper: makeWrapper() });
+        await flushEffects();
+        act(() => { result.current.setArticleLang('de'); });
+        expect(result.current.articleLang).toBe('de');
+    });
+
+    it('setAvailableVersions updates availableVersions', async () => {
+        const { result } = renderHook(() => useAppConfig(), { wrapper: makeWrapper() });
+        await flushEffects();
+        const versions = [{ id: 'v1', label: 'v1.0', lang: 'en', packageId: 'pkg-1' }];
+        act(() => { result.current.setAvailableVersions(versions as any); });
+        expect(result.current.availableVersions).toEqual(versions);
+    });
+
+    it('setCookie is called with UI_LANG_KEY on mount', async () => {
+        renderHook(() => useAppConfig(), { wrapper: makeWrapper() });
+        await flushEffects();
+        expect(mockSetCookie).toHaveBeenCalledWith('UI_LANG_KEY', 'en-us', { httpOnly: false });
+    });
+
+    it('setAvailableLanguages is called with provided languages on mount', async () => {
+        renderHook(() => useAppConfig(), { wrapper: makeWrapper() });
+        await flushEffects();
+        expect(mockSetAvailableLanguages).toHaveBeenCalledWith(availableLanguages);
+    });
+
+    it('updatePreferences is called with normalized content lang on mount', async () => {
+        renderHook(() => useAppConfig(), { wrapper: makeWrapper() });
+        await flushEffects();
+        expect(mockUpdatePreferences).toHaveBeenCalledWith({ language: 'en' });
+    });
+
+    it('throws when used outside AppConfigProvider', () => {
+        const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
+        expect(() => {
+            renderHook(() => useAppConfig());
+        }).toThrow('useAppConfig must be used within AppConfigProvider');
+        spy.mockRestore();
+    });
+});

package/src/__tests__/highlight-provider.test.tsx

@@ -0,0 +1,94 @@
+/** @jest-environment jsdom */
+import React from 'react';
+import { renderHook, act } from '@testing-library/react';
+import { HighlightProvider, useHighlight } from '../highlight-provider';
+
+Element.prototype.scrollIntoView = jest.fn();
+
+const wrapper = ({ children }: { children: React.ReactNode }) => (
+    <HighlightProvider>{children}</HighlightProvider>
+);
+
+describe('HighlightProvider', () => {
+    it('starts with currentIndex=-1 and total=0', () => {
+        const { result } = renderHook(() => useHighlight(), { wrapper });
+        expect(result.current.currentIndex).toBe(-1);
+        expect(result.current.total).toBe(0);
+    });
+
+    it('registerContainer with marks updates total and sets currentIndex=0', () => {
+        const { result } = renderHook(() => useHighlight(), { wrapper });
+        const container = document.createElement('div');
+        container.innerHTML = '<mark>A</mark><mark>B</mark>';
+        act(() => { result.current.registerContainer(container); });
+        expect(result.current.total).toBe(2);
+        expect(result.current.currentIndex).toBe(0);
+    });
+
+    it('registerContainer with no marks keeps total=0 and currentIndex=-1', () => {
+        const { result } = renderHook(() => useHighlight(), { wrapper });
+        const container = document.createElement('div');
+        act(() => { result.current.registerContainer(container); });
+        expect(result.current.total).toBe(0);
+        expect(result.current.currentIndex).toBe(-1);
+    });
+
+    it('registerContainer(null) resets state', () => {
+        const { result } = renderHook(() => useHighlight(), { wrapper });
+        const container = document.createElement('div');
+        container.innerHTML = '<mark>A</mark>';
+        act(() => { result.current.registerContainer(container); });
+        act(() => { result.current.registerContainer(null); });
+        expect(result.current.total).toBe(0);
+        expect(result.current.currentIndex).toBe(-1);
+    });
+
+    it('next() advances currentIndex', () => {
+        const { result } = renderHook(() => useHighlight(), { wrapper });
+        const container = document.createElement('div');
+        container.innerHTML = '<mark>A</mark><mark>B</mark><mark>C</mark>';
+        act(() => { result.current.registerContainer(container); });
+        act(() => { result.current.next(); });
+        expect(result.current.currentIndex).toBe(1);
+        act(() => { result.current.next(); });
+        expect(result.current.currentIndex).toBe(2);
+    });
+
+    it('next() wraps around to 0 after last mark', () => {
+        const { result } = renderHook(() => useHighlight(), { wrapper });
+        const container = document.createElement('div');
+        container.innerHTML = '<mark>A</mark><mark>B</mark>';
+        act(() => { result.current.registerContainer(container); });
+        act(() => { result.current.next(); });
+        act(() => { result.current.next(); });
+        expect(result.current.currentIndex).toBe(0);
+    });
+
+    it('prev() wraps to last mark from index 0', () => {
+        const { result } = renderHook(() => useHighlight(), { wrapper });
+        const container = document.createElement('div');
+        container.innerHTML = '<mark>A</mark><mark>B</mark><mark>C</mark>';
+        act(() => { result.current.registerContainer(container); });
+        act(() => { result.current.prev(); });
+        expect(result.current.currentIndex).toBe(2);
+    });
+
+    it('refreshMarks re-syncs marks from container', () => {
+        const { result } = renderHook(() => useHighlight(), { wrapper });
+        const container = document.createElement('div');
+        container.innerHTML = '<mark>A</mark>';
+        act(() => { result.current.registerContainer(container); });
+        expect(result.current.total).toBe(1);
+        container.innerHTML = '<mark>A</mark><mark>B</mark><mark>C</mark>';
+        act(() => { result.current.refreshMarks(); });
+        expect(result.current.total).toBe(3);
+    });
+
+    it('throws when used outside HighlightProvider', () => {
+        const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
+        expect(() => {
+            renderHook(() => useHighlight());
+        }).toThrow('useHighlight must be used inside HighlightProvider');
+        spy.mockRestore();
+    });
+});

package/src/__tests__/search-context.test.tsx

@@ -0,0 +1,45 @@
+/** @jest-environment jsdom */
+import React from 'react';
+import { renderHook, act } from '@testing-library/react';
+import { SearchProvider, useSearchContext } from '../search';
+
+jest.mock('@c-rex/components/loading', () => ({
+    Loading: () => <div data-testid="loading-overlay" />,
+}), { virtual: true });
+
+const wrapper = ({ children }: { children: React.ReactNode }) => (
+    <SearchProvider>{children}</SearchProvider>
+);
+
+describe('SearchContext', () => {
+    it('provides loading=false initially', () => {
+        const { result } = renderHook(() => useSearchContext(), { wrapper });
+        expect(result.current.loading).toBe(false);
+    });
+
+    it('exposes setLoading function', () => {
+        const { result } = renderHook(() => useSearchContext(), { wrapper });
+        expect(typeof result.current.setLoading).toBe('function');
+    });
+
+    it('setLoading(true) updates loading state', () => {
+        const { result } = renderHook(() => useSearchContext(), { wrapper });
+        act(() => { result.current.setLoading(true); });
+        expect(result.current.loading).toBe(true);
+    });
+
+    it('setLoading(false) resets loading state', () => {
+        const { result } = renderHook(() => useSearchContext(), { wrapper });
+        act(() => { result.current.setLoading(true); });
+        act(() => { result.current.setLoading(false); });
+        expect(result.current.loading).toBe(false);
+    });
+
+    it('throws when used outside SearchProvider', () => {
+        const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
+        expect(() => {
+            renderHook(() => useSearchContext());
+        }).toThrow('useSearchContext must be used within a SearchProvider');
+        spy.mockRestore();
+    });
+});