@croct/plug-react 0.4.2 → 0.5.0-next.2

package/src/api/fetchContent.test.ts

@@ -0,0 +1,134 @@
+import {ContentFetcher} from '@croct/sdk/contentFetcher';
+import {FetchResponse} from '@croct/plug/plug';
+import {fetchContent, FetchOptions} from './fetchContent';
+
+const mockFetch: ContentFetcher['fetch'] = jest.fn();
+
+jest.mock(
+    '@croct/sdk/contentFetcher',
+    () => ({
+        __esModule: true,
+        /*
+         * eslint-disable-next-line prefer-arrow-callback --
+         * The mock can't be an arrow function because calling new on
+         * an arrow function is not allowed in JavaScript.
+         */
+        ContentFetcher: jest.fn(function constructor(this: ContentFetcher) {
+            this.fetch = mockFetch;
+        }),
+    }),
+);
+
+describe('fetchContent', () => {
+    const apiKey = '00000000-0000-0000-0000-000000000000';
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should forward the call to the content fetcher', async () => {
+        const slotId = 'slot-id';
+
+        const options: FetchOptions = {
+            apiKey: apiKey,
+            timeout: 100,
+        };
+
+        const result: FetchResponse<typeof slotId> = {
+            content: {
+                id: 'test',
+            },
+        };
+
+        jest.mocked(mockFetch).mockResolvedValue(result);
+
+        await expect(fetchContent(slotId, options)).resolves.toEqual(result);
+
+        expect(ContentFetcher).toHaveBeenCalledWith({
+            apiKey: options.apiKey,
+        });
+
+        expect(mockFetch).toHaveBeenCalledWith(slotId, {
+            timeout: options.timeout,
+        });
+    });
+
+    it('should extract the slot ID and version', async () => {
+        const slotId = 'slot-id';
+        const version = '1';
+        const versionedSlotId = `${slotId}@${version}`;
+
+        const options: FetchOptions = {
+            apiKey: apiKey,
+            timeout: 100,
+        };
+
+        const result: FetchResponse<typeof slotId> = {
+            content: {
+                id: 'test',
+            },
+        };
+
+        jest.mocked(mockFetch).mockResolvedValue(result);
+
+        await expect(fetchContent(versionedSlotId, options)).resolves.toEqual(result);
+
+        expect(ContentFetcher).toHaveBeenCalledWith({
+            apiKey: options.apiKey,
+        });
+
+        expect(mockFetch).toHaveBeenCalledWith(slotId, {
+            timeout: options.timeout,
+            version: version,
+        });
+    });
+
+    it('should fetch content omitting the latest alias', async () => {
+        const slotId = 'slot-id';
+        const version = 'latest';
+        const versionedSlotId = `${slotId}@${version}`;
+
+        const options: FetchOptions = {
+            apiKey: apiKey,
+            timeout: 100,
+        };
+
+        const result: FetchResponse<typeof slotId> = {
+            content: {
+                id: 'test',
+            },
+        };
+
+        jest.mocked(mockFetch).mockResolvedValue(result);
+
+        await expect(fetchContent(versionedSlotId, options)).resolves.toEqual(result);
+
+        expect(ContentFetcher).toHaveBeenCalledWith({
+            apiKey: options.apiKey,
+        });
+
+        expect(mockFetch).toHaveBeenCalledWith(slotId, {
+            timeout: options.timeout,
+        });
+    });
+
+    it('should return the fallback value on error', async () => {
+        const slotId = 'slot-id';
+
+        const fallback = {
+            id: 'fallback',
+        };
+
+        const options: FetchOptions = {
+            apiKey: apiKey,
+            timeout: 100,
+            fallback: fallback,
+        };
+
+        jest.mocked(mockFetch).mockRejectedValue(new Error('error'));
+
+        await expect(fetchContent(slotId, options)).resolves.toEqual({
+            content: fallback,
+        });
+    });
+});

package/src/api/fetchContent.ts

@@ -0,0 +1,47 @@
+import {
+    ContentFetcher,
+    DynamicContentOptions as BaseDynamicOptions,
+    StaticContentOptions as BaseStaticOptions,
+} from '@croct/sdk/contentFetcher';
+import {JsonObject} from '@croct/plug/sdk/json';
+import {FetchResponse} from '@croct/plug/plug';
+import {SlotContent, VersionedSlotId} from '@croct/plug/slot';
+
+type ServerSideOptions<T extends JsonObject> = {
+    apiKey: string,
+    fallback?: T,
+};
+
+export type DynamicContentOptions<T extends JsonObject = JsonObject> =
+    Omit<BaseDynamicOptions, 'version'> & ServerSideOptions<T>;
+
+export type StaticContentOptions<T extends JsonObject = JsonObject> =
+    Omit<BaseStaticOptions, 'version'> & ServerSideOptions<T>;
+
+export type FetchOptions<T extends JsonObject = JsonObject> = DynamicContentOptions<T> | StaticContentOptions<T>;
+
+export function fetchContent<I extends VersionedSlotId, C extends JsonObject>(
+    slotId: I,
+    options?: FetchOptions<SlotContent<I, C>>,
+): Promise<Omit<FetchResponse<I, C>, 'payload'>> {
+    const {apiKey, fallback, ...fetchOptions} = options ?? {};
+    const [id, version = 'latest'] = slotId.split('@') as [I, `${number}` | 'latest' | undefined];
+
+    const promise = (new ContentFetcher({apiKey: apiKey}))
+        .fetch<SlotContent<I, C>>(
+            id,
+            version === 'latest'
+                ? fetchOptions
+                : {...fetchOptions, version: version},
+        );
+
+    if (fallback !== undefined) {
+        return promise.catch(
+            () => ({
+                content: fallback,
+            }),
+        );
+    }
+
+    return promise;
+}

package/src/api/index.ts

@@ -0,0 +1,2 @@
+export * from './evaluate';
+export * from './fetchContent';

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './Personalization';
+export * from './Slot';

package/src/global.d.ts

@@ -0,0 +1,7 @@
+import {EapFeatures} from '@croct/plug/eap';
+
+declare global {
+    interface Window {
+        croctEap?: Partial<EapFeatures>;
+    }
+}

package/src/hooks/Cache.test.ts

@@ -0,0 +1,280 @@
+import {Cache, EntryOptions} from './Cache';
+
+describe('Cache', () => {
+    afterEach(() => {
+        jest.clearAllTimers();
+        jest.resetAllMocks();
+    });
+
+    it('should load and cache the value for the default cache time', async () => {
+        jest.useFakeTimers();
+
+        const cache = new Cache(10);
+
+        const loader = jest.fn()
+            .mockResolvedValueOnce('result1')
+            .mockResolvedValueOnce('result2');
+
+        const options: EntryOptions<string> = {
+            cacheKey: 'key',
+            loader: loader,
+        };
+
+        let promise: Promise<any>|undefined;
+
+        try {
+            cache.load(options);
+        } catch (result: any|undefined) {
+            promise = result;
+        }
+
+        await expect(promise).resolves.toEqual('result1');
+
+        expect(cache.load(options)).toEqual('result1');
+
+        expect(loader).toHaveBeenCalledTimes(1);
+
+        jest.advanceTimersByTime(10);
+
+        try {
+            cache.load(options);
+        } catch (result: any|undefined) {
+            promise = result;
+        }
+
+        await expect(promise).resolves.toEqual('result2');
+
+        expect(loader).toHaveBeenCalledTimes(2);
+    });
+
+    it('should load the value once before expiration', async () => {
+        jest.useFakeTimers();
+
+        const cache = new Cache(10);
+
+        const loader = jest.fn(
+            () => new Promise<string>(resolve => {
+                setTimeout(() => resolve('done'), 10);
+            }),
+        );
+
+        const options: EntryOptions<string> = {
+            cacheKey: 'key',
+            loader: loader,
+        };
+
+        let promise1: Promise<any>|undefined;
+
+        try {
+            cache.load(options);
+        } catch (result: any|undefined) {
+            promise1 = result;
+        }
+
+        let promise2: Promise<any>|undefined;
+
+        try {
+            cache.load(options);
+        } catch (result: any|undefined) {
+            promise2 = result;
+        }
+
+        expect(promise1).toBe(promise2);
+
+        jest.advanceTimersByTime(10);
+
+        await expect(promise1).resolves.toEqual('done');
+        await expect(promise2).resolves.toEqual('done');
+
+        expect(loader).toHaveBeenCalledTimes(1);
+    });
+
+    it('should load and cache the value for the specified time', async () => {
+        jest.useFakeTimers();
+
+        const cache = new Cache(10);
+
+        const loader = jest.fn()
+            .mockResolvedValueOnce('result1')
+            .mockResolvedValueOnce('result2');
+
+        const options: EntryOptions<string> = {
+            cacheKey: 'key',
+            loader: loader,
+            expiration: 15,
+        };
+
+        let promise: Promise<any>|undefined;
+
+        try {
+            cache.load(options);
+        } catch (result: any|undefined) {
+            promise = result;
+        }
+
+        await expect(promise).resolves.toEqual('result1');
+
+        expect(cache.load(options)).toEqual('result1');
+
+        expect(loader).toHaveBeenCalledTimes(1);
+
+        jest.advanceTimersByTime(15);
+
+        try {
+            cache.load(options);
+        } catch (result: any|undefined) {
+            promise = result;
+        }
+
+        await expect(promise).resolves.toEqual('result2');
+
+        expect(loader).toHaveBeenCalledTimes(2);
+    });
+
+    it('should load and cache the value for undetermined time', async () => {
+        jest.useFakeTimers();
+
+        const cache = new Cache(10);
+
+        const loader = jest.fn()
+            .mockResolvedValueOnce('result1')
+            .mockResolvedValueOnce('result2');
+
+        const options: EntryOptions<string> = {
+            cacheKey: 'key',
+            loader: loader,
+            expiration: -1,
+        };
+
+        let promise: Promise<any>|undefined;
+
+        try {
+            cache.load(options);
+        } catch (result: any|undefined) {
+            promise = result;
+        }
+
+        await expect(promise).resolves.toEqual('result1');
+
+        jest.advanceTimersByTime(60_000);
+
+        expect(cache.load(options)).toEqual('result1');
+
+        expect(loader).toHaveBeenCalledTimes(1);
+    });
+
+    it('should return the fallback value on error', async () => {
+        const cache = new Cache(10);
+
+        const loader = jest.fn().mockRejectedValue(new Error('failed'));
+        const options: EntryOptions<string> = {
+            cacheKey: 'key',
+            loader: loader,
+            fallback: 'fallback',
+        };
+
+        let promise: Promise<any>|undefined;
+
+        try {
+            cache.load(options);
+        } catch (result: any|undefined) {
+            promise = result;
+        }
+
+        await expect(promise).resolves.toBeUndefined();
+
+        expect(cache.load(options)).toEqual('fallback');
+
+        // Should cache the result but not the fallback value
+        expect(cache.load({...options, fallback: 'error'})).toEqual('error');
+
+        expect(loader).toHaveBeenCalledTimes(1);
+    });
+
+    it('should throw the error if no fallback is specified', async () => {
+        const cache = new Cache(10);
+
+        const error = new Error('failed');
+
+        const loader = jest.fn().mockRejectedValue(error);
+        const options: EntryOptions<string> = {
+            cacheKey: 'key',
+            loader: loader,
+        };
+
+        let promise: Promise<any>|undefined;
+
+        try {
+            cache.load(options);
+        } catch (result: any|undefined) {
+            promise = result;
+        }
+
+        await expect(promise).resolves.toBeUndefined();
+
+        await expect(() => cache.load(options)).toThrow(error);
+    });
+
+    it('should cache the error', async () => {
+        const cache = new Cache(10);
+
+        const error = new Error('error');
+        const loader = jest.fn().mockRejectedValue(error);
+        const options: EntryOptions<string> = {
+            cacheKey: 'key',
+            loader: loader,
+        };
+
+        let promise: Promise<any>|undefined;
+
+        try {
+            cache.load(options);
+        } catch (result: any|undefined) {
+            promise = result;
+        }
+
+        await expect(promise).resolves.toBeUndefined();
+
+        expect(() => cache.load(options)).toThrow(error);
+        expect(cache.get(options.cacheKey)?.error).toBe(error);
+    });
+
+    it('should provide the cached values', async () => {
+        jest.useFakeTimers();
+
+        const cache = new Cache(10);
+
+        const loader = jest.fn().mockResolvedValue('loaded');
+        const options: EntryOptions<string> = {
+            cacheKey: 'key',
+            loader: loader,
+        };
+
+        let promise: Promise<any>|undefined;
+
+        try {
+            cache.load(options);
+        } catch (result: any|undefined) {
+            promise = result;
+        }
+
+        await promise;
+
+        jest.advanceTimersByTime(9);
+
+        const entry = cache.get(options.cacheKey);
+
+        expect(entry?.result).toBe('loaded');
+        expect(entry?.promise).toBe(promise);
+        expect(entry?.timeout).not.toBeUndefined();
+        expect(entry?.error).toBeUndefined();
+
+        entry?.dispose();
+
+        jest.advanceTimersByTime(9);
+
+        expect(cache.get(options.cacheKey)).toBe(entry);
+
+        expect(loader).toHaveBeenCalledTimes(1);
+    });
+});

package/src/hooks/Cache.ts

@@ -0,0 +1,97 @@
+export type EntryLoader<R> = (...args: any) => Promise<R>;
+
+export type EntryOptions<R> = {
+    cacheKey: string,
+    loader: EntryLoader<R>,
+    fallback?: R,
+    expiration?: number,
+};
+
+type Entry<R = any> = {
+    promise: Promise<any>,
+    result?: R,
+    dispose: () => void,
+    timeout?: number,
+    error?: any,
+};
+
+export class Cache {
+    private readonly cache: Record<string, Entry> = {};
+
+    private readonly defaultExpiration: number;
+
+    public constructor(defaultExpiration: number) {
+        this.defaultExpiration = defaultExpiration;
+    }
+
+    public load<R>(configuration: EntryOptions<R>): R {
+        const {cacheKey, loader, fallback, expiration = this.defaultExpiration} = configuration;
+
+        const cachedEntry = this.get<R>(cacheKey);
+
+        if (cachedEntry !== undefined) {
+            if (cachedEntry.error !== undefined) {
+                if (fallback !== undefined) {
+                    return fallback;
+                }
+
+                throw cachedEntry.error;
+            }
+
+            if (cachedEntry.result !== undefined) {
+                return cachedEntry.result;
+            }
+
+            throw cachedEntry.promise;
+        }
+
+        const entry: Entry<R> = {
+            dispose: () => {
+                if (entry.timeout !== undefined || expiration < 0) {
+                    return;
+                }
+
+                entry.timeout = window.setTimeout(
+                    (): void => {
+                        delete this.cache[cacheKey];
+                    },
+                    expiration,
+                );
+            },
+            promise: loader()
+                .then((result): R => {
+                    entry.result = result;
+
+                    return result;
+                })
+                .catch(error => {
+                    entry.error = error;
+                })
+                .finally(() => {
+                    entry.dispose();
+                }),
+        };
+
+        this.cache[cacheKey] = entry;
+
+        throw entry.promise;
+    }
+
+    public get<R>(cacheKey: string): Entry<R>|undefined {
+        const entry = this.cache[cacheKey];
+
+        if (entry === undefined) {
+            return undefined;
+        }
+
+        if (entry.timeout !== undefined) {
+            clearTimeout(entry.timeout);
+
+            delete entry.timeout;
+
+            entry.dispose();
+        }
+
+        return entry;
+    }
+}

package/src/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from './useEvaluation';
+export * from './useContent';
+export * from './useCroct';

package/src/hooks/useContent.ssr.test.ts

@@ -0,0 +1,23 @@
+import {renderHook} from '@testing-library/react';
+import {useContent} from './useContent';
+
+jest.mock(
+    '../ssr-polyfills',
+    () => ({
+        __esModule: true,
+        isSsr: (): boolean => true,
+    }),
+);
+
+describe('useContent (SSR)', () => {
+    it('should render the initial value on the server-side', () => {
+        const {result} = renderHook(() => useContent('slot-id', {initial: 'foo'}));
+
+        expect(result.current).toBe('foo');
+    });
+
+    it('should require an initial value for server-side rending', () => {
+        expect(() => useContent('slot-id'))
+            .toThrow(new Error('The initial value is required for server-side rendering (SSR).'));
+    });
+});

package/src/hooks/useContent.test.ts

@@ -0,0 +1,66 @@
+import {renderHook} from '@testing-library/react';
+import {Plug} from '@croct/plug';
+import {useCroct} from './useCroct';
+import {useLoader} from './useLoader';
+import {useContent} from './useContent';
+
+jest.mock(
+    './useCroct',
+    () => ({
+        useCroct: jest.fn(),
+    }),
+);
+
+jest.mock(
+    './useLoader',
+    () => ({
+        useLoader: jest.fn(),
+    }),
+);
+
+describe('useContent (CSR)', () => {
+    it('should evaluate fetch the content', () => {
+        const fetch: Plug['fetch'] = jest.fn().mockResolvedValue({
+            payload: {
+                title: 'loaded',
+            },
+        });
+
+        jest.mocked(useCroct).mockReturnValue({fetch: fetch} as Plug);
+        jest.mocked(useLoader).mockReturnValue('foo');
+
+        const slotId = 'home-banner@1';
+
+        const {result} = renderHook(
+            () => useContent<{title: string}>(slotId, {
+                preferredLocale: 'en',
+                cacheKey: 'unique',
+                fallback: {
+                    title: 'error',
+                },
+                expiration: 50,
+            }),
+        );
+
+        expect(useCroct).toHaveBeenCalled();
+        expect(useLoader).toHaveBeenCalledWith({
+            cacheKey: `useContent:unique:${slotId}`,
+            fallback: {
+                title: 'error',
+            },
+            expiration: 50,
+            loader: expect.any(Function),
+        });
+
+        jest.mocked(useLoader)
+            .mock
+            .calls[0][0]
+            .loader();
+
+        expect(fetch).toHaveBeenCalledWith(slotId, {
+            preferredLocale: 'en',
+        });
+
+        expect(result.current).toBe('foo');
+    });
+});