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

package/src/lib/hooks/useExperimentVariant.spec.tsx

@@ -1,111 +0,0 @@
-import { renderHook } from '@testing-library/react-hooks';
-import React from 'react';
-
-import * as dotcmsClient from '@dotcms/client';
-
-import { useExperimentVariant } from './useExperimentVariant';
-
-import MockDotExperimentsContext from '../contexts/DotExperimentsContext';
-import { EXPERIMENT_DEFAULT_VARIANT_NAME } from '../shared/constants';
-import { LocationMock } from '../shared/mocks/mock';
-
-interface WrapperProps {
-    children: React.ReactNode;
-}
-
-const createMockDotExperimentsContext = (variantResponse: unknown) => {
-    const mockGetVariantFromHref = jest.fn().mockImplementation(() => variantResponse);
-
-    return React.createContext({
-        getVariantFromHref: mockGetVariantFromHref
-    });
-};
-
-jest.mock('../contexts/DotExperimentsContext', () => ({
-    __esModule: true,
-    default: createMockDotExperimentsContext({ name: 'variant-1' })
-}));
-
-const wrapper = ({ children }: WrapperProps) => (
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    <MockDotExperimentsContext.Provider value={React.useContext(MockDotExperimentsContext)}>
-        {children}
-    </MockDotExperimentsContext.Provider>
-);
-
-describe('useExperimentVariant', () => {
-    describe('shouldWaitForVariant `false`', () => {
-        it('if is insideEditor is `false`', () => {
-            const mockData = {
-                runningExperimentId: '1',
-                viewAs: { variantId: '1' }
-            };
-
-            jest.spyOn(dotcmsClient, 'isInsideEditor').mockReturnValue(true);
-
-            const { result } = renderHook(() => useExperimentVariant(mockData));
-
-            const { shouldWaitForVariant } = result.current;
-
-            expect(shouldWaitForVariant).toBe(false);
-        });
-
-        it(' if `runningExperimentId` is undefined', () => {
-            const mockData = {
-                viewAs: { variantId: EXPERIMENT_DEFAULT_VARIANT_NAME }
-            };
-
-            jest.spyOn(dotcmsClient, 'isInsideEditor').mockReturnValue(false);
-
-            const { result } = renderHook(() => useExperimentVariant(mockData));
-
-            const { shouldWaitForVariant } = result.current;
-
-            expect(shouldWaitForVariant).toBe(false);
-        });
-
-        it(' if VariantId get from `PageApi` is same of VariantAssigned', () => {
-            const locationSpy = jest.spyOn(window, 'location', 'get');
-
-            const locationMock = { ...LocationMock, pathname: '/blog' };
-
-            locationSpy.mockReturnValue(locationMock);
-
-            jest.spyOn(dotcmsClient, 'isInsideEditor').mockReturnValue(false);
-
-            const { result } = renderHook(
-                () =>
-                    useExperimentVariant({
-                        runningExperimentId: 'exp-id',
-                        viewAs: { variantId: 'variant-1' }
-                    }),
-                { wrapper }
-            );
-
-            expect(result.current.shouldWaitForVariant).toBe(false);
-        });
-
-        describe('shouldWaitForVariant `true`', () => {
-            it(' if VariantId get from `PageApi` is different of VariantAssigned', () => {
-                const locationSpy = jest.spyOn(window, 'location', 'get');
-
-                const locationMock = { ...LocationMock, pathname: '/blog' };
-
-                locationSpy.mockReturnValue(locationMock);
-
-                jest.spyOn(dotcmsClient, 'isInsideEditor').mockReturnValue(false);
-
-                const { result } = renderHook(
-                    () =>
-                        useExperimentVariant({
-                            runningExperimentId: 'exp-id',
-                            viewAs: { variantId: EXPERIMENT_DEFAULT_VARIANT_NAME }
-                        }),
-                    { wrapper }
-                );
-
-                expect(result.current.shouldWaitForVariant).toBe(true);
-            });
-        });
-    });
-});

package/src/lib/hooks/useExperimentVariant.ts

@@ -1,55 +0,0 @@
-import { useContext, useEffect, useState } from 'react';
-
-import { isInsideEditor } from '@dotcms/client';
-
-import DotExperimentsContext from '../contexts/DotExperimentsContext';
-
-/**
- * A React Hook that determines whether to wait for the correct variant in an A/B testing scenario.
- * This is used to avoid flickering - showing the original content before redirecting to the assigned variant.
- *
- * The hook uses the running experiment id and viewAs (containing variantId) from the provided data.
- * It then works with the DotExperimentsContext to synchronize between the assigned variant and the one requested.
- * If the hook is executed inside an editor or if no running experiment id is provided, it immediately signals not to wait for the variant.
- * Similarly, if the assigned variant matches the requested one, it signals not to wait for the variant.
- * By default, the hook signals to wait for the variant.
- *
- * @param {Object} data - An object containing the runningExperimentId and viewAs (containing variantId).
- * @returns {Object} An object with a function `shouldWaitForVariant` that, when called, returns `true` if it should wait for the correct variant, `false` otherwise.
- */
-export const useExperimentVariant = (data: {
-    runningExperimentId?: string;
-    viewAs: { variantId: string };
-}): { shouldWaitForVariant: boolean } => {
-    const dotExperimentInstance = useContext(DotExperimentsContext);
-
-    const { runningExperimentId, viewAs } = data;
-
-    const { variantId } = viewAs;
-
-    // By default, wait for the variant
-    const [shouldWaitForVariant, setShouldWaitForVariant] = useState<boolean>(true);
-
-    useEffect(() => {
-        if (isInsideEditor() || !runningExperimentId) {
-            setShouldWaitForVariant(false);
-
-            return;
-        }
-
-        const location = typeof window !== 'undefined' ? window.location : undefined;
-
-        if (location && dotExperimentInstance) {
-            const variantAssigned = dotExperimentInstance.getVariantFromHref(location.pathname);
-
-            if (variantAssigned && variantId === variantAssigned.name) {
-                // the data requested and the variant assigned is the correct no need to wait
-                setShouldWaitForVariant(false);
-
-                return;
-            }
-        }
-    }, [dotExperimentInstance, data]);
-
-    return { shouldWaitForVariant };
-};

package/src/lib/hooks/useExperiments.ts

@@ -1,90 +0,0 @@
-import { useEffect } from 'react';
-
-import { isInsideEditor } from '@dotcms/client';
-
-import { DotExperiments } from '../dot-experiments';
-import { EXPERIMENT_DEFAULT_VARIANT_NAME, EXPERIMENT_QUERY_PARAM_KEY } from '../shared/constants';
-
-/**
- * Custom hook `useExperiments`.
- *
- * This hook is designed to handle changes in the location of the current DotExperiments
- * instance and set a global click handler that redirects the application when an element with an
- * assigned variant is clicked.
- *
- * It also manages adding or removing the experimentation query parameter from the URL as
- * appropriate when a click occurs.
- *
- * @returns {void}
- */
-export const useExperiments = (instance: DotExperiments | null): void => {
-    /**
-     * This `useEffect` hook is responsible for tracking location changes when not inside an editor environment, and invoking the
-     * `locationChanged` method from `experimentContext` with current location and custom redirection function.
-     *
-     */
-    useEffect(() => {
-        if (!instance || typeof document === 'undefined') {
-            return;
-        }
-
-        const insideEditor = isInsideEditor();
-
-        if (!insideEditor) {
-            const location = typeof window !== 'undefined' ? window.location : undefined;
-
-            if (instance && location) {
-                instance.locationChanged(location, instance.customRedirectFn);
-            }
-        }
-    }, [instance]);
-
-    /**
-     * This effect sets a click handler on the document.
-     * It captures click events and redirects to a new URL if the clicked anchor has a variant assigned,
-     * additional removing the experiment query param from the URL.
-     */
-    useEffect(() => {
-        if (!instance) {
-            return;
-        }
-
-        const customClickHandler = (event: MouseEvent) => {
-            const target = (event.target as HTMLElement).closest('a');
-
-            if (!target) {
-                return;
-            }
-
-            const clickedHref = target.getAttribute('href');
-
-            if (clickedHref) {
-                const modifiedUrl = new URL(clickedHref, instance.location.href);
-
-                // Remove the experiment query param from the URL
-                modifiedUrl.searchParams.delete(EXPERIMENT_QUERY_PARAM_KEY);
-
-                event.preventDefault();
-
-                // Get the variant from the href of the clicked anchor
-                const variant = instance.getVariantFromHref(clickedHref);
-
-                if (variant && variant.name !== EXPERIMENT_DEFAULT_VARIANT_NAME) {
-                    // Set the experiment query param in the URL if the variant is not the default one
-                    modifiedUrl.searchParams.set(EXPERIMENT_QUERY_PARAM_KEY, variant.name);
-                }
-
-                // Redirect to the new URL using the custom redirect function
-                instance.customRedirectFn(modifiedUrl.toString());
-            }
-        };
-
-        // Register the click handler to all elements in the document
-        document.addEventListener('click', customClickHandler);
-
-        return () => {
-            // Remove the click handler when the component is unmounted
-            document.removeEventListener('click', customClickHandler);
-        };
-    }, [instance]);
-};

package/src/lib/shared/mocks/mock.ts

@@ -1,209 +0,0 @@
-import { Experiment, ExperimentEvent, IsUserIncludedApiResponse } from '../models';
-
-/**
- * Represents the response object for the IsUserIncluded API.
- * @typedef {Object} IsUserIncludedResponse
- * @property {IsUserIncludedApiResponse} entity - The response entity.
- * @property {string[]} errors - Array of error messages, if any.
- * @property {Object} i18nMessagesMap - Map of internationalization messages.
- * @property {string[]} messages - Array of additional messages, if any.
- */
-export const IsUserIncludedResponse: IsUserIncludedApiResponse = {
-    entity: {
-        excludedExperimentIds: [],
-        excludedExperimentIdsEnded: [],
-        experiments: [
-            {
-                id: '11111-11111-11111-11111-11111',
-                lookBackWindow: {
-                    expireMillis: 1209600000,
-                    value: 'AAAAAAAAAA'
-                },
-                name: 'Exp1',
-                pageUrl: '/blog/index',
-                regexs: {
-                    isExperimentPage:
-                        '^(http|https):\\/\\/(localhost|127.0.0.1|\\b(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\\.)+[a-z]{2,})(:\\d{1,5})?\\/blog(\\/index|\\/)?(\\/?\\?.*)?$',
-                    isTargetPage: '.*destinations.*'
-                },
-                runningId: '1111111-22222222',
-                variant: {
-                    name: 'variant-1',
-                    url: '/blog/index?variantName=variant-1'
-                }
-            }
-        ],
-        includedExperimentIds: ['11111-11111-11111-11111-11111']
-    },
-    errors: [],
-    i18nMessagesMap: {},
-    messages: []
-};
-
-export const NewIsUserIncludedResponse: IsUserIncludedApiResponse = {
-    entity: {
-        excludedExperimentIds: ['11111-11111-11111-11111-11111'],
-        excludedExperimentIdsEnded: ['11111-11111-11111-11111-11111'],
-        experiments: [
-            {
-                id: '222222-222222-222222-222222-222222',
-                lookBackWindow: {
-                    expireMillis: 1209600000,
-                    value: 'BBBBBBBBBBBBBB'
-                },
-                name: 'Exp2',
-                pageUrl: '/destinations/index',
-                regexs: {
-                    isExperimentPage:
-                        '^(http|https):\\/\\/(localhost|127.0.0.1|\\b(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\\.)+[a-z]{2,})(:\\d{1,5})?\\/destinations(\\/index|\\/)?(\\/?\\?.*)?$',
-                    isTargetPage: null
-                },
-                runningId: '33333333-3333333333',
-                variant: {
-                    name: 'variant-1',
-                    url: '/blog/index?variantName=variant-1'
-                }
-            }
-        ],
-        includedExperimentIds: ['222222-222222-222222-222222-222222']
-    },
-    errors: [],
-    i18nMessagesMap: {},
-    messages: []
-};
-
-export const After15DaysIsUserIncludedResponse: IsUserIncludedApiResponse = {
-    entity: {
-        excludedExperimentIds: ['222222-222222-222222-222222-222222'],
-        excludedExperimentIdsEnded: [],
-        experiments: [],
-        includedExperimentIds: []
-    },
-    errors: [],
-    i18nMessagesMap: {},
-    messages: []
-};
-
-export const NoExperimentsIsUserIncludedResponse: IsUserIncludedApiResponse = {
-    entity: {
-        excludedExperimentIds: [],
-        excludedExperimentIdsEnded: [],
-        experiments: [],
-        includedExperimentIds: []
-    },
-    errors: [],
-    i18nMessagesMap: {},
-    messages: []
-};
-
-export const MOCK_CURRENT_TIMESTAMP = 1704096000000;
-
-export const TIME_15_DAYS_MILLISECONDS = 1296000 * 1000;
-
-export const TIME_5_DAYS_MILLISECONDS = 432000 * 1000;
-
-export const MockDataStoredIndexDB: Experiment[] = [
-    {
-        ...IsUserIncludedResponse.entity.experiments[0],
-        lookBackWindow: {
-            ...IsUserIncludedResponse.entity.experiments[0].lookBackWindow,
-            // Added expireTime to the lookBackWindow
-            expireTime:
-                MOCK_CURRENT_TIMESTAMP +
-                IsUserIncludedResponse.entity.experiments[0].lookBackWindow.expireMillis
-        }
-    }
-];
-
-export const MockDataStoredIndexDBNew: Experiment[] = [
-    {
-        ...NewIsUserIncludedResponse.entity.experiments[0],
-        lookBackWindow: {
-            ...NewIsUserIncludedResponse.entity.experiments[0].lookBackWindow,
-            // Added expireTime to the lookBackWindow
-            expireTime:
-                // 2nd request, 5 days later, so expireTime is 5 days from MOCK_CURRENT_TIMESTAMP
-                MOCK_CURRENT_TIMESTAMP +
-                TIME_5_DAYS_MILLISECONDS +
-                NewIsUserIncludedResponse.entity.experiments[0].lookBackWindow.expireMillis
-        }
-    }
-];
-
-// Final data to be stored in IndexedDB only the last, the first will be removed by was ended from `excludedExperimentIdsEnded`
-export const MockDataStoredIndexDBWithNew: Experiment[] = [...MockDataStoredIndexDBNew];
-
-// Mock Store after 15 days
-export const MockDataStoredIndexDBWithNew15DaysLater: Experiment[] = [...MockDataStoredIndexDBNew];
-
-/**
- * Represents an event that indicates the expected experiments parsed from a response to send to Analytics.
- *
- * @typedef {Object} ExpectedExperimentsParsedEvent
- * @property {ExperimentEvent[]} experiments - An array of experiment events.
- */
-export const ExpectedExperimentsParsedEvent: ExperimentEvent[] = [
-    {
-        experiment: IsUserIncludedResponse.entity.experiments[0].id,
-        runningId: IsUserIncludedResponse.entity.experiments[0].runningId,
-        variant: IsUserIncludedResponse.entity.experiments[0].variant.name,
-        lookBackWindow: IsUserIncludedResponse.entity.experiments[0].lookBackWindow.value,
-        isExperimentPage: false,
-        isTargetPage: false
-    }
-];
-
-/**
- * Represents a mock location object.
- *
- * @typedef {Object} LocationMock
- * @property {string} href - The complete URL.
- *
- */
-export const LocationMock: Location = {
-    hash: '',
-    host: '',
-    hostname: '',
-    href: 'http://localhost/blog',
-    origin: '',
-    pathname: '',
-    port: '',
-    protocol: '',
-    search: '',
-    assign: () => {
-        //
-    },
-    replace: () => {
-        //
-    },
-    reload: () => {
-        //
-    },
-    toString: () => {
-        return '';
-    },
-    ancestorOrigins: {} as DOMStringList
-};
-
-const store: { [key: string]: string } = {};
-
-export const sessionStorageMock = {
-    getItem: function (key: string): string | null {
-        return store[key] || null;
-    },
-    setItem: function (key: string, value: string) {
-        store[key] = value;
-    },
-    removeItem: function (key: string) {
-        delete store[key];
-    },
-    clear: function () {
-        Object.keys(store).forEach((key) => delete store[key]);
-    },
-    key: function (index: number) {
-        return Object.keys(store)[index] || null;
-    },
-    get length() {
-        return Object.keys(store).length;
-    }
-};

package/src/lib/shared/parser/parse.spec.ts

@@ -1,187 +0,0 @@
-import { parseData, parseDataForAnalytics } from './parser';
-
-import {
-    IsUserIncludedResponse,
-    LocationMock,
-    MOCK_CURRENT_TIMESTAMP,
-    MockDataStoredIndexDB,
-    MockDataStoredIndexDBWithNew,
-    MockDataStoredIndexDBWithNew15DaysLater,
-    NewIsUserIncludedResponse,
-    TIME_15_DAYS_MILLISECONDS,
-    TIME_5_DAYS_MILLISECONDS
-} from '../mocks/mock';
-import { Experiment, ExperimentParsed, FetchExperiments } from '../models';
-
-const assignedExperiments: Experiment[] = IsUserIncludedResponse.entity.experiments;
-
-const experimentMock = IsUserIncludedResponse.entity.experiments[0];
-
-describe('Parsers', () => {
-    describe('parseData For Analytics', () => {
-        it('returns `isExperimentPage` true and `isTargetPage` false when location is /blog', () => {
-            const expectedURL = 'http://localhost/blog';
-
-            const expectedExperimentsParsed: ExperimentParsed = {
-                href: expectedURL,
-                experiments: [
-                    {
-                        experiment: experimentMock.id,
-                        runningId: experimentMock.runningId,
-                        variant: experimentMock.variant.name,
-                        lookBackWindow: experimentMock.lookBackWindow.value,
-                        isExperimentPage: true,
-                        isTargetPage: false
-                    }
-                ]
-            };
-
-            const location: Location = { ...LocationMock, href: expectedURL };
-
-            const parsedData: ExperimentParsed = parseDataForAnalytics(
-                assignedExperiments,
-                location
-            );
-
-            expect(parsedData).toStrictEqual(expectedExperimentsParsed);
-        });
-
-        it('returns `isExperimentPage` false and `isTargetPage` true when location is /destinations', () => {
-            const expectedURL = 'http://localhost/destinations';
-
-            const expectedExperimentsParsed: ExperimentParsed = {
-                href: expectedURL,
-                experiments: [
-                    {
-                        experiment: experimentMock.id,
-                        runningId: experimentMock.runningId,
-                        variant: experimentMock.variant.name,
-                        lookBackWindow: experimentMock.lookBackWindow.value,
-                        isExperimentPage: false,
-                        isTargetPage: true
-                    }
-                ]
-            };
-
-            const location: Location = { ...LocationMock, href: expectedURL };
-
-            const parsedData: ExperimentParsed = parseDataForAnalytics(
-                assignedExperiments,
-                location
-            );
-
-            expect(parsedData).toStrictEqual(expectedExperimentsParsed);
-        });
-
-        it('returns `isExperimentPage` false and `isTargetPage` false when location is /other-url', () => {
-            const expectedURL = 'http://localhost/other-url';
-
-            const expectedExperimentsParsed: ExperimentParsed = {
-                href: expectedURL,
-                experiments: [
-                    {
-                        experiment: experimentMock.id,
-                        runningId: experimentMock.runningId,
-                        variant: experimentMock.variant.name,
-                        lookBackWindow: experimentMock.lookBackWindow.value,
-                        isExperimentPage: false,
-                        isTargetPage: false
-                    }
-                ]
-            };
-
-            const location: Location = { ...LocationMock, href: expectedURL };
-
-            const parsedData: ExperimentParsed = parseDataForAnalytics(
-                assignedExperiments,
-                location
-            );
-
-            expect(parsedData).toStrictEqual(expectedExperimentsParsed);
-        });
-    });
-
-    describe('parseData For Store', () => {
-        const mockNow = jest.spyOn(Date, 'now');
-
-        mockNow.mockImplementation(() => MOCK_CURRENT_TIMESTAMP);
-
-        beforeEach(() => {
-            jest.clearAllMocks();
-        });
-
-        it('should handle case where only NEW data is available', () => {
-            // First request, expire in now + experiment.lookBackWindow.expireMillis
-            const newData: FetchExperiments = {
-                experiments: IsUserIncludedResponse.entity.experiments,
-                excludedExperimentIdsEnded: []
-            };
-
-            const dataFromIndexDB: Experiment[] | undefined = undefined;
-
-            const parsedData = parseData(newData, dataFromIndexDB);
-
-            expect(parsedData).toStrictEqual(MockDataStoredIndexDB);
-            expect(newData.experiments.length).toBe(parsedData.length);
-        });
-
-        it('should handle case where only OLD data is available', () => {
-            //No new request, not touch anything if not expired
-
-            const newData: FetchExperiments = {
-                experiments: [],
-                excludedExperimentIdsEnded: []
-            };
-
-            const dataFromIndexDB: Experiment[] | undefined = MockDataStoredIndexDB;
-
-            const parsedData = parseData(newData, dataFromIndexDB);
-
-            expect(parsedData).toStrictEqual(MockDataStoredIndexDB);
-            expect(MockDataStoredIndexDB.length).toBe(parsedData.length);
-        });
-
-        it('should handle case where both OLD and NEW data are available', () => {
-            //new request, stored data + new data. No delete anything only 5 days passed, 2 to store
-
-            const nowPlus5Days = MOCK_CURRENT_TIMESTAMP + TIME_5_DAYS_MILLISECONDS;
-
-            mockNow.mockImplementation(() => nowPlus5Days);
-
-            const newData: FetchExperiments = {
-                experiments: NewIsUserIncludedResponse.entity.experiments,
-                excludedExperimentIdsEnded: [
-                    ...NewIsUserIncludedResponse.entity.excludedExperimentIdsEnded
-                ]
-            };
-
-            const dataFromIndexDB: Experiment[] | undefined = MockDataStoredIndexDB;
-
-            const parsedData = parseData(newData, dataFromIndexDB);
-
-            expect(parsedData).toStrictEqual(MockDataStoredIndexDBWithNew);
-
-            expect(parsedData.length).toBe(MockDataStoredIndexDBWithNew.length);
-        });
-
-        it('should remove from stored experiment the experiments expired', () => {
-            // no new request, 15 days later, so expireTime is 15 days from MOCK_CURRENT_TIMESTAMP
-            // 1st experiment expired, so only 1 to store
-            const now15Days = MOCK_CURRENT_TIMESTAMP + TIME_15_DAYS_MILLISECONDS;
-
-            mockNow.mockImplementation(() => now15Days);
-
-            const newData: FetchExperiments = {
-                experiments: [],
-                excludedExperimentIdsEnded: []
-            };
-
-            const dataFromIndexDB: Experiment[] | undefined = MockDataStoredIndexDBWithNew;
-
-            const parsedData = parseData(newData, dataFromIndexDB);
-
-            expect(parsedData.length).toBe(MockDataStoredIndexDBWithNew15DaysLater.length);
-            expect(parsedData).toStrictEqual(MockDataStoredIndexDBWithNew15DaysLater);
-        });
-    });
-});