@openedx/frontend-base 1.0.0-alpha.4 → 1.0.0-alpha.41

package/runtime/scripts/GoogleAnalyticsLoader.test.ts

@@ -1,77 +0,0 @@
-import { GoogleAnalyticsLoader } from './index';
-
-const googleAnalyticsId = 'test-key';
-
-describe('GoogleAnalytics', () => {
-  let body;
-  let gaScriptSrc;
-  let gaScriptGtag;
-  let data;
-
-  beforeEach(() => {
-    // @ts-expect-error We're adding it, this is fine.
-    window.googleAnalytics = [];
-  });
-
-  function loadGoogleAnalytics(scriptData) {
-    const script = new GoogleAnalyticsLoader(scriptData);
-    script.loadScript();
-  }
-
-  describe('with valid GOOGLE_ANALYTICS_4_ID', () => {
-    beforeEach(() => {
-      document.body.innerHTML = '<script id="stub" />';
-      data = {
-        config: {
-          GOOGLE_ANALYTICS_4_ID: googleAnalyticsId,
-        },
-      };
-      loadGoogleAnalytics(data);
-      expect(global.googleAnalytics.invoked).toBe(true);
-      body = document.body.innerHTML;
-      gaScriptSrc = `https://www.googletagmanager.com/gtag/js?id=${googleAnalyticsId}`;
-      gaScriptGtag = `gtag('config', '${googleAnalyticsId}');`;
-    });
-
-    it('should initialize google analytics', () => {
-      expect(body).toMatch(gaScriptSrc);
-      expect(body).toMatch(gaScriptGtag);
-    });
-
-    it('should not invoke snippet twice', () => {
-      loadGoogleAnalytics(data);
-
-      expect(global.googleAnalytics.invoked).toBe(true);
-
-      expect(body).toMatch(gaScriptSrc);
-      expect(body).toMatch(gaScriptGtag);
-
-      let count = (body.match(new RegExp(gaScriptSrc.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g')) || []).length;
-      expect(count).toBe(1);
-
-      count = (body.match(new RegExp(gaScriptGtag.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g')) || []).length;
-      expect(count).toBe(1);
-    });
-  });
-
-  describe('with invalid GOOGLE_ANALYTICS_ID', () => {
-    beforeEach(() => {
-      document.body.innerHTML = '<script id="stub" />';
-      data = {
-        config: {
-          GOOGLE_ANALYTICS_4_ID: '',
-        },
-      };
-      loadGoogleAnalytics(data);
-      body = document.body.innerHTML;
-      gaScriptSrc = 'https://www.googletagmanager.com/gtag/js?id=';
-      gaScriptGtag = "gtag('config', '');";
-      expect(global.googleAnalytics.invoked).toBeFalsy();
-    });
-
-    it('should not initialize google analytics', () => {
-      expect(body).not.toMatch(gaScriptSrc);
-      expect(body).not.toMatch(gaScriptGtag);
-    });
-  });
-});

package/runtime/scripts/GoogleAnalyticsLoader.ts

@@ -1,59 +0,0 @@
-/**
- * @implements {GoogleAnalyticsLoader}
- * @memberof module:GoogleAnalytics
- */
-class GoogleAnalyticsLoader {
-  analyticsId: string;
-
-  constructor({ config }) {
-    this.analyticsId = config.GOOGLE_ANALYTICS_4_ID;
-  }
-
-  loadScript() {
-    if (!this.analyticsId) {
-      return;
-    }
-
-    global.googleAnalytics = global.googleAnalytics || [];
-    // @ts-expect-error We just added googleAnalytics to global, it's there.
-    const { googleAnalytics } = global;
-
-    // If the snippet was invoked do nothing.
-    if (googleAnalytics.invoked) {
-      return;
-    }
-
-    // Invoked flag, to make sure the snippet
-    // is never invoked twice.
-    googleAnalytics.invoked = true;
-
-    googleAnalytics.load = (key, options) => {
-      const scriptSrc = document.createElement('script');
-      scriptSrc.type = 'text/javascript';
-      scriptSrc.async = true;
-      scriptSrc.src = `https://www.googletagmanager.com/gtag/js?id=${key}`;
-
-      const scriptGtag = document.createElement('script');
-      scriptGtag.innerHTML = `
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', '${key}');
-      `;
-
-      // Insert our scripts next to the first script element.
-      const first = document.getElementsByTagName('script')[0];
-      if (first?.parentNode === null) {
-        throw new Error('No script to insert Google analytics script before.');
-      }
-      first.parentNode.insertBefore(scriptSrc, first);
-      first.parentNode.insertBefore(scriptGtag, first);
-      googleAnalytics._loadOptions = options;
-    };
-
-    // Load GoogleAnalytics with your key.
-    googleAnalytics.load(this.analyticsId);
-  }
-}
-
-export default GoogleAnalyticsLoader;

package/runtime/scripts/index.ts

@@ -1 +0,0 @@
-export { default as GoogleAnalyticsLoader } from './GoogleAnalyticsLoader';

package/runtime/setupTest.js

@@ -1,49 +0,0 @@
-import '@testing-library/jest-dom';
-
-import siteConfig from 'site.config';
-import { mergeSiteConfig } from './config';
-
-jest.mock('universal-cookie', () => {
-  const mCookie = {
-    get: jest.fn(),
-    remove: jest.fn(),
-  };
-  return jest.fn(() => mCookie);
-});
-
-mergeSiteConfig(siteConfig);
-
-global.PARAGON_THEME = {
-  paragon: {
-    version: '1.0.0',
-    themeUrls: {
-      core: {
-        fileName: 'core.min.css',
-      },
-      defaults: {
-        light: 'light',
-      },
-      variants: {
-        light: {
-          fileName: 'light.min.css',
-        },
-      },
-    },
-  },
-  brand: {
-    version: '1.0.0',
-    themeUrls: {
-      core: {
-        fileName: 'core.min.css',
-      },
-      defaults: {
-        light: 'light',
-      },
-      variants: {
-        light: {
-          fileName: 'light.min.css',
-        },
-      },
-    },
-  },
-};

package/runtime/site.config.test.tsx

@@ -1,33 +0,0 @@
-import { EnvironmentTypes, SiteConfig } from '../types';
-
-const siteConfig: SiteConfig = {
-  siteId: 'runtime',
-  siteName: 'edX',
-  baseUrl: 'http://localhost:8080',
-  lmsBaseUrl: 'http://localhost:18000',
-  loginUrl: 'http://localhost:18000/login',
-  logoutUrl: 'http://localhost:18000/logout',
-
-  environment: EnvironmentTypes.TEST,
-  apps: [{
-    appId: 'test-app',
-    routes: [{
-      path: '/app1',
-      element: (
-        <div>Test App 1</div>
-      ),
-      handle: {
-        role: 'test-app-1'
-      }
-    }]
-  }],
-  accessTokenCookieName: 'edx-jwt-cookie-header-payload',
-  csrfTokenApiPath: '/csrf/api/v1/token',
-  languagePreferenceCookieName: 'openedx-language-preference',
-  refreshAccessTokenApiPath: '/login_refresh',
-  userInfoCookieName: 'edx-user-info',
-  ignoredErrorRegex: null,
-  segmentKey: 'segment_whoa',
-};
-
-export default siteConfig;

package/runtime/slots/Slot.test.tsx

@@ -1,40 +0,0 @@
-import { render } from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom';
-import { useContext } from 'react';
-import { useLayoutForSlotId } from './layout/hooks';
-import Slot from './Slot';
-import SlotContext from './SlotContext';
-
-jest.mock('./layout/hooks');
-
-describe('Slot component', () => {
-  it('renders with default layout', () => {
-    (useLayoutForSlotId as jest.Mock).mockReturnValue(null);
-    const { container } = render(<MemoryRouter><Slot id="test-slot.ui" /></MemoryRouter>);
-    expect(container).toBeEmptyDOMElement();
-  });
-
-  it('successfully passes the slot ID through a SlotContext', () => {
-    function IdPrintingLayout() {
-      const { id } = useContext(SlotContext);
-      return <div>Slot ID: {id}</div>;
-    }
-    (useLayoutForSlotId as jest.Mock).mockReturnValue(IdPrintingLayout);
-    const { getByText } = render(<Slot id="test-slot.ui" />);
-    expect(getByText('Slot ID: test-slot.ui')).toBeInTheDocument();
-  });
-
-  it('renders with a component override layout', () => {
-    const CustomLayoutComponent = () => <div>Custom Layout Component</div>;
-    (useLayoutForSlotId as jest.Mock).mockReturnValue(CustomLayoutComponent);
-    const { getByText } = render(<Slot id="test-slot.ui" />);
-    expect(getByText('Custom Layout Component')).toBeInTheDocument();
-  });
-
-  it('renders with an element override layout', () => {
-    const CustomLayoutElement = <div>Custom Layout Element</div>;
-    (useLayoutForSlotId as jest.Mock).mockReturnValue(null);
-    const { getByText } = render(<Slot id="test-slot.ui" layout={CustomLayoutElement} />);
-    expect(getByText('Custom Layout Element')).toBeInTheDocument();
-  });
-});

package/runtime/slots/Slot.tsx

@@ -1,32 +0,0 @@
-import { ComponentType, createElement, isValidElement, ReactNode } from 'react';
-import DefaultSlotLayout from './layout/DefaultSlotLayout';
-import { useLayoutForSlotId } from './layout/hooks';
-import SlotContext from './SlotContext';
-
-interface SlotProps {
-  id: string,
-  children?: ReactNode,
-  layout?: ComponentType | ReactNode,
-  [key: string]: unknown,
-}
-
-export default function Slot({ id, children, layout = DefaultSlotLayout, ...props }: SlotProps) {
-  let layoutElement: ComponentType | ReactNode = layout;
-
-  const overrideLayout = useLayoutForSlotId(id);
-
-  // Weed out any ReactNode types that aren't actually JSX.
-  if (overrideLayout && overrideLayout !== null && overrideLayout !== undefined && typeof overrideLayout !== 'boolean') {
-    layoutElement = overrideLayout;
-  }
-
-  if (!isValidElement(layoutElement)) {
-    layoutElement = createElement(layoutElement as ComponentType);
-  }
-
-  return (
-    <SlotContext.Provider value={{ id, children, ...props }}>
-      {layoutElement}
-    </SlotContext.Provider>
-  );
-}

package/runtime/slots/SlotContext.tsx

@@ -1,8 +0,0 @@
-import { createContext, ReactNode } from 'react';
-
-const SlotContext = createContext<{ id: string, children?: ReactNode, [key: string]: unknown }>({
-  id: '',
-  children: null,
-});
-
-export default SlotContext;

package/runtime/slots/hooks.ts

@@ -1,35 +0,0 @@
-import { useContext, useEffect, useState } from 'react';
-import { useLocation } from 'react-router-dom';
-
-import { SlotOperation } from './types';
-import { getSlotOperations } from './utils';
-import SlotContext from './SlotContext';
-import { createWidgetAppendOperation } from './widget';
-
-/**
- * The useSlotOperations hook will trigger re-renders when the slot configuration changes.
- * It is a fundamental hook that is used by many of the others to ensure they're using up-to-date
- * config as it changes.
- */
-export function useSlotOperations(id: string) {
-  const { children } = useSlotContext();
-  const location = useLocation();
-  const [operations, setOperations] = useState<SlotOperation[]>([]);
-
-  useEffect(() => {
-    // Setting default content has to happen inside `useEffect()` so that re-renders only happen
-    // when [children] props change.  This avoids an endless render loop.  After all, the whole
-    // point of a slot is to modify its children via slot operations.
-    const defaultOperation = createWidgetAppendOperation('defaultContent', id, children);
-    setOperations(getSlotOperations(id, defaultOperation));
-
-    // We depend on [location] to force re-renders on navigation.  This guarantees changes in active
-    // roles (and thus, changes in what conditional widgets are shown) properly.
-  }, [id, children, location]);
-
-  return operations;
-}
-
-export function useSlotContext() {
-  return useContext(SlotContext);
-}

package/runtime/slots/layout/DefaultSlotLayout.test.tsx

@@ -1,31 +0,0 @@
-import { render } from '@testing-library/react';
-import { useWidgets } from '../widget/hooks';
-import DefaultSlotLayout from './DefaultSlotLayout';
-
-// Mock the useWidgets hook
-jest.mock('../widget/hooks', () => ({
-  useWidgets: jest.fn(),
-}));
-
-describe('DefaultSlotLayout', () => {
-  it('renders widgets returned by useWidgets hook', () => {
-    const mockWidgets = [
-      <div key="widget1">Widget One</div>,
-      <div key="widget2">Widget Two</div>,
-    ];
-    (useWidgets as jest.Mock).mockReturnValue(mockWidgets);
-
-    const { getByText } = render(<DefaultSlotLayout />);
-
-    expect(getByText('Widget One')).toBeInTheDocument();
-    expect(getByText('Widget Two')).toBeInTheDocument();
-  });
-
-  it('renders empty when no widgets are returned', () => {
-    (useWidgets as jest.Mock).mockReturnValue([]);
-
-    const { container } = render(<DefaultSlotLayout />);
-
-    expect(container).toBeEmptyDOMElement();
-  });
-});

package/runtime/slots/layout/DefaultSlotLayout.tsx

@@ -1,9 +0,0 @@
-import { useWidgets } from '../widget/hooks';
-
-export default function DefaultSlotLayout() {
-  const widgets = useWidgets();
-
-  return (
-    <>{widgets}</>
-  );
-}

package/runtime/slots/layout/hooks.test.tsx

@@ -1,178 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import { SlotOperation } from '../types';
-import * as slotHooks from '../hooks';
-import * as slotUtils from '../utils';
-import { WidgetAppendOperation, WidgetOperationTypes } from '../widget';
-import { useLayoutForSlotId, useLayoutOptions, useLayoutOptionsForId } from './hooks';
-import { LayoutOperationTypes, LayoutReplaceOperation } from './types';
-
-jest.mock('../hooks'); // mocks the useSlotOperations hook
-
-function MockLayout() {
-  return (
-    <div>Mock Component</div>
-  );
-}
-
-describe('useLayoutForSlotId', () => {
-  beforeEach(() => {
-    jest.restoreAllMocks();
-  });
-
-  it('should return null when no replace layout operations are provided', () => {
-    (slotHooks.useSlotOperations as jest.Mock).mockReturnValue([]);
-    const { result } = renderHook(() => useLayoutForSlotId('test-slot.ui'));
-    expect(result.current).toBeNull();
-  });
-
-  it('should return a layout component when replace layout operation is present', () => {
-    const operation: LayoutReplaceOperation = {
-      slotId: 'test-slot.ui',
-      op: LayoutOperationTypes.REPLACE,
-      component: MockLayout
-    };
-
-    (slotHooks.useSlotOperations as jest.Mock).mockReturnValue([operation]);
-    const { result } = renderHook(() => useLayoutForSlotId('test-slot.ui'));
-    expect(result.current).toEqual(MockLayout);
-  });
-
-  it('should return null if the operation condition is not satisfied', () => {
-    const operation: LayoutReplaceOperation = {
-      slotId: 'test-slot.ui',
-      op: LayoutOperationTypes.REPLACE,
-      component: MockLayout
-    };
-
-    jest.spyOn(slotUtils, 'isSlotOperationConditionSatisfied').mockReturnValue(false);
-    (slotHooks.useSlotOperations as jest.Mock).mockReturnValue([operation]);
-    const { result } = renderHook(() => useLayoutForSlotId('test-slot.ui'));
-    expect(result.current).toBeNull();
-  });
-
-  it('should return a layout element when replace layout operation is present', () => {
-    const operation: LayoutReplaceOperation = {
-      slotId: 'test-slot.ui',
-      op: LayoutOperationTypes.REPLACE,
-      element: <div>Mock layout</div>
-    };
-
-    // @ts-expect-error This is an intentionally malformed operation to test what happens when component/element are not present.
-    const malformedOperation: SlotOperation = {
-      slotId: 'test-slot.ui',
-      op: LayoutOperationTypes.REPLACE,
-    };
-
-    const unrelatedOperation: WidgetAppendOperation = {
-      slotId: 'test-slot.ui',
-      id: 'test-slot.widget1',
-      op: WidgetOperationTypes.APPEND,
-      element: <div>Widget</div>
-    };
-
-    (slotHooks.useSlotOperations as jest.Mock).mockReturnValue([operation, malformedOperation, unrelatedOperation]);
-    const { result } = renderHook(() => useLayoutForSlotId('test-slot.ui'));
-    expect(result.current).toEqual(<div>Mock layout</div>);
-  });
-
-  it('should return the last layout component in the operations list', () => {
-    const SecondMockLayout = () => <div>First Component</div>;
-
-    const operation1: LayoutReplaceOperation = {
-      slotId: 'test-slot.ui',
-      op: LayoutOperationTypes.REPLACE,
-      component: MockLayout
-    };
-
-    const operation2: LayoutReplaceOperation = {
-      slotId: 'test-slot.ui',
-      op: LayoutOperationTypes.REPLACE,
-      component: SecondMockLayout
-    };
-
-    (slotHooks.useSlotOperations as jest.Mock).mockReturnValue([operation1, operation2]);
-    const { result } = renderHook(() => useLayoutForSlotId('test-slot.ui'));
-    expect(result.current).toEqual(SecondMockLayout);
-  });
-});
-
-describe('useLayoutOptionsForId', () => {
-  beforeEach(() => {
-    jest.restoreAllMocks();
-  });
-
-  it('should return an empty object whent here are no layout options operations', () => {
-    (slotHooks.useSlotOperations as jest.Mock).mockReturnValue([]);
-    const { result } = renderHook(() => useLayoutOptionsForId('test-slot.ui'));
-    expect(result.current).toEqual({});
-  });
-
-  it('should return an object containing options from a single layout options operation', () => {
-    const mockOptions = { option1: 'value1' };
-    const operation = {
-      slotId: 'test-slot.ui',
-      op: LayoutOperationTypes.OPTIONS,
-      options: mockOptions
-    };
-
-    const otherOperation: LayoutReplaceOperation = {
-      slotId: 'test-slot.ui',
-      op: LayoutOperationTypes.REPLACE,
-      element: <div>Layout</div>
-    };
-
-    (slotHooks.useSlotOperations as jest.Mock).mockReturnValue([operation, otherOperation]);
-    const { result } = renderHook(() => useLayoutOptionsForId('test-slot.ui'));
-    expect(result.current).toEqual(mockOptions);
-  });
-
-  describe('when various failure conditions are true', () => {
-    const mockOptions = { option1: 'value1' };
-    const operation = {
-      slotId: 'test-slot.ui',
-      op: LayoutOperationTypes.OPTIONS,
-      options: mockOptions
-    };
-
-    it('should return an empty object if the operation condition is not satisfied.', () => {
-      jest.spyOn(slotUtils, 'isSlotOperationConditionSatisfied').mockReturnValue(false);
-      (slotHooks.useSlotOperations as jest.Mock).mockReturnValue([operation]);
-      const { result } = renderHook(() => useLayoutOptionsForId('test-slot.ui'));
-      expect(result.current).toEqual({});
-    });
-  });
-
-  it('should return merged layout options from multiple operations', () => {
-    const mockOptions1 = { option1: 'value1', optionOverride: 'foo', };
-    const mockOptions2 = { option2: 'value2', optionOverride: 'bar' };
-    const operation1 = {
-      slotId: 'test-slot.ui',
-      op: LayoutOperationTypes.OPTIONS,
-      options: mockOptions1
-    };
-    const operation2 = {
-      slotId: 'test-slot.ui',
-      op: LayoutOperationTypes.OPTIONS,
-      options: mockOptions2
-    };
-
-    (slotHooks.useSlotOperations as jest.Mock).mockReturnValue([operation1, operation2]);
-    const { result } = renderHook(() => useLayoutOptionsForId('test-slot.ui'));
-    expect(result.current).toEqual({ option1: 'value1', option2: 'value2', optionOverride: 'bar' });
-  });
-});
-
-describe('useLayoutOptions', () => {
-  it('should call useLayoutOptionsForId with the correct id ', () => {
-    const mockOptions1 = { option1: 'value1' };
-    const operation = {
-      slotId: 'test-slot.ui',
-      op: LayoutOperationTypes.OPTIONS,
-      options: mockOptions1
-    };
-    (slotHooks.useSlotOperations as jest.Mock).mockReturnValue([operation]);
-    jest.spyOn(slotHooks, 'useSlotContext').mockReturnValue({ id: 'test-slot.ui' });
-    const { result } = renderHook(() => useLayoutOptions());
-    expect(result.current).toEqual({ option1: 'value1' });
-  });
-});

package/runtime/slots/layout/hooks.ts

@@ -1,65 +0,0 @@
-import { ComponentType, ReactNode, useEffect, useState } from 'react';
-import { useSlotContext, useSlotOperations } from '../hooks';
-import { isSlotOperationConditionSatisfied } from '../utils';
-import { LayoutComponentProps, LayoutElementProps, LayoutOperation } from './types';
-import { isLayoutOperation, isLayoutOptionsOperation, isLayoutReplaceOperation } from './utils';
-
-function hasLayoutComponentProps(operation: LayoutOperation): operation is (LayoutOperation & LayoutComponentProps) {
-  return isLayoutOperation(operation) && 'component' in operation;
-}
-
-function hasLayoutElementProps(operation: LayoutOperation): operation is (LayoutOperation & LayoutElementProps) {
-  return isLayoutOperation(operation) && 'element' in operation;
-}
-
-export function useLayoutForSlotId(id: string) {
-  const operations = useSlotOperations(id);
-  let layoutElement: ReactNode | ComponentType = null;
-
-  for (const operation of operations) {
-    if (isSlotOperationConditionSatisfied(operation)) {
-      if (isLayoutReplaceOperation(operation)) {
-        if (hasLayoutComponentProps(operation)) {
-          layoutElement = operation.component;
-        } else if (hasLayoutElementProps(operation)) {
-          layoutElement = operation.element;
-        }
-      }
-    }
-  }
-  return layoutElement;
-}
-
-/**
- * useLayoutOptions iterates through the slot's operations to find any which are "layout
- * options" operations.  It merges these into a single object and returns them - operations are
- * merged in declaration order, meaning last one in wins.  useLayoutOptions only triggers a
- * re-render when the options change.
- */
-export function useLayoutOptions() {
-  const { id } = useSlotContext();
-  return useLayoutOptionsForId(id);
-}
-
-export function useLayoutOptionsForId(id: string) {
-  const operations = useSlotOperations(id);
-  const [options, setOptions] = useState<Record<string, unknown>>({});
-
-  useEffect(() => {
-    const findOptions = () => {
-      let nextOptions: Record<string, unknown> = {};
-      for (const operation of operations) {
-        if (isSlotOperationConditionSatisfied(operation)) {
-          if (isLayoutOptionsOperation(operation)) {
-            nextOptions = { ...nextOptions, ...operation.options };
-          }
-        }
-      }
-      return nextOptions;
-    };
-
-    setOptions(findOptions());
-  }, [operations]);
-
-  return options;
-}