@dotcms/experiments 0.0.1-alpha.37 → 0.0.1-alpha.39

package/src/lib/shared/persistence/index-db-database-handler.ts

@@ -0,0 +1,218 @@
+/**
+ * Represents the configuration for a database connection.
+ * @interface
+ */
+import {
+    EXPERIMENT_ALREADY_CHECKED_KEY,
+    EXPERIMENT_FETCH_EXPIRE_TIME_KEY,
+    LOCAL_STORAGE_TIME_DURATION_MILLISECONDS
+} from '../constants';
+
+/**
+ * Represents the configuration for a database connection.
+ * @interface
+ */
+interface DbConfig {
+    db_name: string;
+    db_store: string;
+    db_key_path: string;
+}
+
+/**
+ * The default version of the database.
+ *
+ * @type {number}
+ * @constant
+ */
+const DB_DEFAULT_VERSION = 1;
+
+/**
+ * The `DatabaseHandler` class offers specific methods to store and get data
+ * from IndexedDB.
+ *
+ * @example
+ * // To fetch data from the IndexedDB
+ * const data = await DatabaseHandler.getData();
+ *
+ * @example
+ * // To store an object of type AssignedExperiments to IndexedDB
+ * await DatabaseHandler.persistData(anAssignedExperiment);
+ *
+ * @example
+ * // To get an object of type AssignedExperiments to IndexedDB
+ * await DatabaseHandler.persistData(anAssignedExperiment);
+ *
+ */
+
+export class IndexDBDatabaseHandler {
+    constructor(private config: DbConfig) {
+        if (!config) {
+            throw new Error('Config is required');
+        }
+
+        const { db_name, db_store, db_key_path } = config;
+
+        if (!db_name) {
+            throw new Error("'db_name' is required in config");
+        }
+
+        if (!db_store) {
+            throw new Error("'db_store' is required in config");
+        }
+
+        if (!db_key_path) {
+            throw new Error("'db_key_path' is required in config");
+        }
+    }
+
+    /**
+     * Saves the provided data to indexDB.
+     *
+     * @async
+     * @param {AssignedExperiments} data - The data to be saved.
+     * @returns {Promise<any>} - The result of the save operation.
+     */
+    public async persistData<T>(data: T): Promise<IDBValidKey> {
+        const db = await this.openDB();
+
+        return await new Promise((resolve, reject) => {
+            const transaction = db.transaction([this.config.db_store], 'readwrite');
+
+            const store = transaction.objectStore(this.config.db_store);
+
+            const clearRequest = store.clear();
+
+            clearRequest.onerror = () => reject(clearRequest.error);
+            clearRequest.onsuccess = () => {
+                const request = store.put(data, this.config.db_key_path);
+
+                request.onsuccess = () => resolve(request.result);
+                request.onerror = () => reject(request.error);
+            };
+        });
+    }
+
+    /**
+     * Retrieves data from the database using a specific key.
+     *
+     * @async
+     * @returns {Promise<any>} A promise that resolves with the data retrieved from the database.
+     */
+    public async getData<T>(): Promise<T> {
+        const db = await this.openDB();
+
+        return await new Promise((resolve, reject) => {
+            const transaction = db.transaction([this.config.db_store], 'readonly');
+
+            const store = transaction.objectStore(this.config.db_store);
+
+            const request = store.get(this.config.db_key_path);
+
+            request.onsuccess = () => resolve(request.result as T);
+            request.onerror = () => reject(request.error);
+        });
+    }
+
+    /**
+     * Deletes all the data from the IndexedDB store.
+     *
+     * @async
+     * @returns {Promise<void>} - The result of the delete operation.
+     */
+    public async clearData(): Promise<void> {
+        const db = await this.openDB();
+
+        return await new Promise((resolve, reject) => {
+            const transaction = db.transaction([this.config.db_store], 'readwrite');
+
+            const store = transaction.objectStore(this.config.db_store);
+
+            const request = store.clear();
+
+            request.onsuccess = () => resolve();
+            request.onerror = () => reject(request.error);
+        });
+    }
+
+    /**
+     * Sets the flag indicating that the experiment has already been checked.
+     *
+     * @function setFlagExperimentAlreadyChecked
+     * @returns {void}
+     */
+    setFlagExperimentAlreadyChecked(): void {
+        sessionStorage.setItem(EXPERIMENT_ALREADY_CHECKED_KEY, 'true');
+    }
+
+    /**
+     * Sets the fetch expired time in the local storage.
+     *
+     * @return {void}
+     */
+    setFetchExpiredTime(): void {
+        const expireTime = Date.now() + LOCAL_STORAGE_TIME_DURATION_MILLISECONDS;
+
+        localStorage.setItem(EXPERIMENT_FETCH_EXPIRE_TIME_KEY, expireTime.toString());
+    }
+
+    /**
+     * Builds an error message based on the provided error object.
+     * @param {DOMException | null} error - The error object to build the message from.
+     * @returns {string} The constructed error message.
+     */
+    private getOnErrorMessage(error: DOMException | null): string {
+        let errorMessage =
+            'A database error occurred while using IndexedDB. Your browser may not support IndexedDB or IndexedDB might not be enabled.';
+
+        if (error) {
+            errorMessage += error.name ? ` Error Name: ${error.name}` : '';
+            errorMessage += error.message ? ` Error Message: ${error.message}` : '';
+            errorMessage += error.code ? ` Error Code: ${error.code}` : '';
+        }
+
+        return errorMessage;
+    }
+
+    /**
+     * Creates or opens a IndexedDB database with the specified version.
+     *
+     *
+     * @returns {Promise<IDBDatabase>} A promise that resolves to the opened database.
+     * The promise will be rejected with an error message if there was a database error.
+     */
+    private openDB(): Promise<IDBDatabase> {
+        return new Promise<IDBDatabase>((resolve, reject) => {
+            const request = indexedDB.open(this.config.db_name, DB_DEFAULT_VERSION);
+
+            request.onupgradeneeded = (event: IDBVersionChangeEvent) => {
+                const db = this.getRequestResult(event);
+
+                if (!db.objectStoreNames.contains(this.config.db_store)) {
+                    db.createObjectStore(this.config.db_store);
+                }
+            };
+
+            request.onerror = (event) => {
+                const errorMsj = this.getOnErrorMessage((event.target as IDBRequest).error);
+
+                reject(errorMsj);
+            };
+
+            request.onsuccess = (event: Event) => {
+                const db = this.getRequestResult(event);
+
+                resolve(db);
+            };
+        });
+    }
+
+    /**
+     * Retrieves the result of a database request from an Event object.
+     *
+     * @param {Event} event - The Event object containing the database request.
+     * @returns {IDBDatabase} - The result of the database request, casted as an IDBDatabase object.
+     */
+    private getRequestResult(event: Event): IDBDatabase {
+        return (event.target as IDBRequest).result as IDBDatabase;
+    }
+}

package/src/lib/shared/utils/DotLogger.ts

@@ -0,0 +1,57 @@
+/**
+ * Logger for the dotCMS SDK
+ */
+export class DotLogger {
+    private readonly isDebug: boolean;
+    private readonly packageName: string;
+
+    constructor(isDebug: boolean, packageName: string) {
+        this.isDebug = isDebug;
+        this.packageName = packageName;
+    }
+
+    public group(label: string) {
+        if (this.isDebug) {
+            // eslint-disable-next-line no-console
+            console.group(label);
+        }
+    }
+
+    public groupEnd() {
+        if (this.isDebug) {
+            // eslint-disable-next-line no-console
+            console.groupEnd();
+        }
+    }
+
+    public time(label: string) {
+        if (this.isDebug) {
+            // eslint-disable-next-line no-console
+            console.time(label);
+        }
+    }
+
+    public timeEnd(label: string) {
+        if (this.isDebug) {
+            // eslint-disable-next-line no-console
+            console.timeEnd(label);
+        }
+    }
+
+    public log(message: string) {
+        if (this.isDebug) {
+            // eslint-disable-next-line no-console
+            console.log(`[dotCMS ${this.packageName}] ${message}`);
+        }
+    }
+
+    public warn(message: string) {
+        if (this.isDebug) {
+            console.warn(`[dotCMS ${this.packageName}] ${message}`);
+        }
+    }
+
+    public error(message: string) {
+        console.error(`[dotCMS ${this.packageName}] ${message}`);
+    }
+}

package/src/lib/shared/utils/memoize.spec.ts

@@ -0,0 +1,49 @@
+import { renderHook } from '@testing-library/react-hooks';
+
+import { useMemoizedObject } from './memoize';
+
+describe('useMemoizedObject', () => {
+    it('should return the same object if it has not changed', () => {
+        const initialObject = { a: 1, b: 2 };
+
+        const { result, rerender } = renderHook(({ obj }) => useMemoizedObject(obj), {
+            initialProps: { obj: initialObject }
+        });
+
+        const firstRenderResult = result.current;
+
+        rerender({ obj: initialObject });
+        expect(result.current).toBe(firstRenderResult);
+    });
+
+    it('should return a new object if it has changed', () => {
+        const initialObject = { a: 1, b: 2 };
+
+        const newObject = { a: 1, b: 3 };
+
+        const { result, rerender } = renderHook(({ obj }) => useMemoizedObject(obj), {
+            initialProps: { obj: initialObject }
+        });
+
+        const firstRenderResult = result.current;
+
+        rerender({ obj: newObject });
+        expect(result.current).not.toBe(firstRenderResult);
+        expect(result.current).toBe(newObject);
+    });
+
+    it('should return the same object if a deeply equal but different reference is passed', () => {
+        const initialObject = { a: 1, b: 2 };
+
+        const newObject = { a: 1, b: 2 };
+
+        const { result, rerender } = renderHook(({ obj }) => useMemoizedObject(obj), {
+            initialProps: { obj: initialObject }
+        });
+
+        const firstRenderResult = result.current;
+
+        rerender({ obj: newObject });
+        expect(result.current).toBe(firstRenderResult);
+    });
+});

package/src/lib/shared/utils/memoize.ts

@@ -0,0 +1,49 @@
+import { useRef } from 'react';
+
+/**
+ * Compares two objects and returns true if they are equal, false otherwise.
+ * @param objA The first object to compare.
+ * @param objB The second object to compare.
+ * @returns
+ */
+function shallowEqual<T>(objA: T, objB: T): boolean {
+    if (Object.is(objA, objB)) {
+        return true;
+    }
+
+    if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
+        return false;
+    }
+
+    const keysA = Object.keys(objA) as Array<keyof T>;
+
+    const keysB = Object.keys(objB) as Array<keyof T>;
+
+    if (keysA.length !== keysB.length) {
+        return false;
+    }
+
+    for (const key of keysA) {
+        if (!Object.prototype.hasOwnProperty.call(objB, key) || !Object.is(objA[key], objB[key])) {
+            return false;
+        }
+    }
+
+    return true;
+}
+
+/**
+ * Memoizes an object and returns the memoized object.
+ * Mantaing the same reference if the object is the same independently if is called inside any component.
+ * @param object
+ * @returns
+ */
+export function useMemoizedObject<T extends object>(object: T): T {
+    const ref = useRef<T>(object);
+
+    if (!shallowEqual(ref.current, object)) {
+        ref.current = object;
+    }
+
+    return ref.current;
+}

package/src/lib/shared/utils/utils.spec.ts

@@ -0,0 +1,142 @@
+import {
+    checkFlagExperimentAlreadyChecked,
+    getDataExperimentAttributes,
+    getExperimentScriptTag,
+    getFullUrl,
+    getScriptDataAttributes
+} from './utils';
+
+import { EXPERIMENT_ALREADY_CHECKED_KEY, EXPERIMENT_SCRIPT_FILE_NAME } from '../constants';
+import { LocationMock } from '../mocks/mock';
+
+describe('Utility ', () => {
+    describe('getExperimentScriptTag', () => {
+        it('should throw an error if the experiment script is not found', () => {
+            document.body.innerHTML = `<script src="other-script.js"></script>`;
+            expect(() => getExperimentScriptTag()).toThrow('Experiment script not found');
+        });
+
+        it('should return the script element when the experiment script is found', () => {
+            const experimentScriptUrl = 'http://example.com/' + EXPERIMENT_SCRIPT_FILE_NAME;
+
+            document.body.innerHTML = `<script src="${experimentScriptUrl}"></script>`;
+
+            const scriptTag = getExperimentScriptTag();
+
+            expect(scriptTag).toBeDefined();
+            expect(scriptTag.src).toBe(experimentScriptUrl);
+        });
+    });
+
+    describe('getDataExperimentAttributes', () => {
+        const location: Location = { ...LocationMock, href: 'http:/localhost/' };
+
+        it('should return null and warn if data-experiment-api-key is not specified but script is present', () => {
+            const experimentScriptUrl = 'http://example.com/' + EXPERIMENT_SCRIPT_FILE_NAME;
+
+            document.body.innerHTML = `<script src="${experimentScriptUrl}"></script>`;
+
+            try {
+                getDataExperimentAttributes(location);
+                expect('This should not be reached if an error is thrown').toBeNull();
+            } catch (error) {
+                expect(() => getDataExperimentAttributes(location)).toThrow(
+                    'You need specify the `data-experiment-api-key`'
+                );
+            }
+        });
+
+        it('should return the experiment attributes if they are present', () => {
+            const experimentScriptUrl = 'http://example.com/' + EXPERIMENT_SCRIPT_FILE_NAME;
+
+            document.body.innerHTML = `<script src="${experimentScriptUrl}" data-experiment-api-key="testKey" data-experiment-server="http://localhost"></script>`;
+
+            const attributes = getDataExperimentAttributes(location);
+
+            expect(attributes).toEqual({
+                apiKey: 'testKey',
+                server: 'http://localhost',
+                debug: false
+            });
+        });
+    });
+
+    describe('getScriptDataAttributes', () => {
+        it('should return the experiment attributes if they are present', () => {
+            const experimentScriptUrl = 'http://example.com/' + EXPERIMENT_SCRIPT_FILE_NAME;
+
+            document.body.innerHTML = `<script src="${experimentScriptUrl}" data-experiment-api-key="testKey" data-experiment-server="http://localhost"></script>`;
+
+            // eslint-disable-next-line no-restricted-globals
+            const attributes = getScriptDataAttributes(location);
+
+            expect(attributes).toEqual({
+                apiKey: 'testKey',
+                server: 'http://localhost',
+                debug: false
+            });
+        });
+    });
+
+    describe('SessionStorage EXPERIMENT_ALREADY_CHECKED_KEY handle', () => {
+        Object.defineProperty(window, 'sessionStorage', {
+            value: {
+                setItem: jest.fn(),
+                getItem: jest.fn()
+            },
+            writable: true
+        });
+
+        describe('checkFlagExperimentAlreadyChecked', () => {
+            const getItemMock = window.sessionStorage.getItem as jest.MockedFunction<
+                typeof window.sessionStorage.getItem
+            >;
+
+            const testCases = [
+                { value: '', expected: false, description: 'sessionStorage value is ""' },
+                { value: 'true', expected: true, description: 'sessionStorage value is "true"' },
+                { value: null, expected: false, description: 'sessionStorage value is null' }
+            ];
+
+            testCases.forEach(({ description, value, expected }) => {
+                it(`returns ${expected} when ${description}`, () => {
+                    getItemMock.mockReturnValue(value);
+
+                    expect(checkFlagExperimentAlreadyChecked()).toBe(expected);
+                    expect(getItemMock).toHaveBeenCalledWith(EXPERIMENT_ALREADY_CHECKED_KEY);
+                });
+            });
+        });
+    });
+
+    describe('getFullUrl', () => {
+        const href = 'http://localhost/';
+
+        const location: Location = { ...LocationMock, href };
+
+        it('should return null if absolutePath is null', () => {
+            const result = getFullUrl(location, null);
+
+            expect(result).toBeNull();
+        });
+
+        it('should return the same absolutePath if it is a full URL', () => {
+            const absolutePath = href + '/test';
+
+            const expectedUrl = absolutePath;
+
+            const result = getFullUrl(location, absolutePath);
+
+            expect(result).toBe(absolutePath);
+            expect(result).toBe(expectedUrl);
+        });
+
+        it('should return a full URL if absolutePath is a relative path', () => {
+            const absolutePath = '/test';
+
+            const result = getFullUrl(location, absolutePath);
+
+            expect(result).toBe(`${location.origin}${absolutePath}`);
+        });
+    });
+});