@openedx/frontend-base 1.0.0-alpha.0 → 1.0.0-alpha.2

package/runtime/react/ErrorBoundary.test.jsx

@@ -0,0 +1,83 @@
+import { render } from '@testing-library/react';
+
+import ErrorBoundary from './ErrorBoundary';
+import { initializeMockApp } from '..';
+
+describe('ErrorBoundary', () => {
+  let logError = jest.fn();
+
+  beforeEach(async () => {
+    // This is a gross hack to suppress error logs in the invalid parentSelector test
+    jest.spyOn(console, 'error');
+    global.console.error.mockImplementation(() => { });
+
+    const { loggingService } = initializeMockApp();
+    logError = loggingService.logError;
+  });
+
+  afterEach(() => {
+    global.console.error.mockRestore();
+    jest.clearAllMocks();
+  });
+
+  it('should render children if no error', () => {
+    const component = (
+      <ErrorBoundary>
+        <div>Yay</div>
+      </ErrorBoundary>
+    );
+    const { container: wrapper } = render(component);
+
+    const element = wrapper.querySelector('div');
+    expect(element.textContent).toEqual('Yay');
+  });
+
+  it('should render ErrorPage if it has an error', () => {
+    const ExplodingComponent = () => {
+      throw new Error('booyah');
+    };
+
+    const component = (
+      <ErrorBoundary>
+        <ExplodingComponent />
+      </ErrorBoundary>
+    );
+
+    render(component);
+
+    expect(logError).toHaveBeenCalledTimes(1);
+    expect(logError).toHaveBeenCalledWith(
+      new Error('booyah'),
+      expect.objectContaining({
+        stack: expect.stringContaining('ExplodingComponent'),
+      }),
+    );
+  });
+  it('should render the fallback component when an error occurs', () => {
+    function FallbackComponent() {
+      return <div data-testid="fallback-component">Oops, something went wrong!</div>;
+    }
+    function ComponentError() {
+      throw new Error('An error occurred during the click event!');
+    }
+    const wrapper = render(
+      <ErrorBoundary fallbackComponent={<FallbackComponent />}>
+        <ComponentError />
+      </ErrorBoundary>,
+    );
+
+    expect(wrapper.queryByTestId('fallback-component')).toBeInTheDocument();
+  });
+
+  it('should render the ErrorPage fallbackComponent is null', () => {
+    function ComponentError() {
+      throw new Error('An error occurred during the click event!');
+    }
+    const wrapper = render(
+      <ErrorBoundary fallbackComponent={null}>
+        <ComponentError />
+      </ErrorBoundary>,
+    );
+    expect(wrapper.queryByTestId('error-page')).toBeInTheDocument();
+  });
+});

package/runtime/react/SiteProvider.test.jsx

@@ -0,0 +1,66 @@
+import { render } from '@testing-library/react';
+import { initialize } from '../initialize';
+import SiteProvider from './SiteProvider';
+
+jest.mock('../auth', () => ({
+  configureAuth: () => { },
+  getAuthenticatedUser: () => null,
+  fetchAuthenticatedUser: () => null,
+  getAuthenticatedHttpClient: () => ({}),
+  AUTHENTICATED_USER_CHANGED: 'user_changed',
+}));
+
+jest.mock('../analytics', () => ({
+  configureAnalytics: () => { },
+  identifyAnonymousUser: jest.fn(),
+  identifyAuthenticatedUser: jest.fn(),
+}));
+
+jest.mock('./hooks', () => ({
+  ...jest.requireActual('./hooks'),
+  useTrackColorSchemeChoice: jest.fn(),
+}));
+
+describe('SiteProvider', () => {
+  beforeEach(async () => {
+    await initialize({
+      loggingService: jest.fn(() => ({
+        logError: jest.fn(),
+        logInfo: jest.fn(),
+      })),
+      messages: {
+        ar: {},
+        'es-419': {},
+        fr: {},
+        'zh-cn': {},
+        ca: {},
+        he: {},
+        id: {},
+        'ko-kr': {},
+        pl: {},
+        'pt-br': {},
+        ru: {},
+        th: {},
+        uk: {},
+        'fa-ir': {},
+        fa: {},
+      },
+    });
+  });
+
+  it('should render its children with a router', () => {
+    const component = (
+      <SiteProvider>
+        <div className="child">Child One</div>
+        <div className="child">Child Two</div>
+      </SiteProvider>
+    );
+
+    const wrapper = render(component);
+    const list = wrapper.container.querySelectorAll('div.child');
+
+    expect(list.length).toEqual(2);
+    expect(list[0].textContent).toEqual('Child One');
+    expect(list[1].textContent).toEqual('Child Two');
+  });
+});

package/runtime/react/hooks.test.jsx

@@ -0,0 +1,104 @@
+import { act, renderHook } from '@testing-library/react';
+import siteConfig from 'site.config';
+import { EnvironmentTypes } from '../../types';
+import { sendTrackEvent } from '../analytics';
+import { setAuthenticatedUser } from '../auth';
+import { initializeMockApp } from '../testing';
+import SiteProvider from './SiteProvider';
+import { useAuthenticatedUser, useSiteConfig, useTrackColorSchemeChoice } from './hooks';
+
+jest.mock('../analytics');
+
+const mockAddEventListener = jest.fn();
+const mockRemoveEventListener = jest.fn();
+let matchesMock;
+
+Object.defineProperty(window, 'matchMedia', {
+  value: jest.fn(() => ({
+    addEventListener: mockAddEventListener,
+    removeEventListener: mockRemoveEventListener,
+    matches: matchesMock,
+  })),
+});
+
+describe('useTrackColorSchemeChoice hook', () => {
+  afterEach(() => {
+    mockAddEventListener.mockClear();
+    mockRemoveEventListener.mockClear();
+    sendTrackEvent.mockClear();
+  });
+
+  it('sends dark preferred color schema event if query matches', async () => {
+    matchesMock = true;
+    renderHook(() => useTrackColorSchemeChoice());
+
+    expect(sendTrackEvent).toHaveBeenCalledTimes(1);
+    expect(sendTrackEvent).toHaveBeenCalledWith(
+      'openedx.ui.frontend-base.prefers-color-scheme.selected',
+      { preferredColorScheme: 'dark' },
+    );
+  });
+
+  it('sends light preferred color schema event if query does not match', async () => {
+    matchesMock = false;
+    renderHook(() => useTrackColorSchemeChoice());
+
+    expect(sendTrackEvent).toHaveBeenCalledTimes(1);
+    expect(sendTrackEvent).toHaveBeenCalledWith(
+      'openedx.ui.frontend-base.prefers-color-scheme.selected',
+      { preferredColorScheme: 'light' },
+    );
+  });
+
+  it('adds change event listener to matchMedia query', async () => {
+    renderHook(() => useTrackColorSchemeChoice());
+
+    expect(mockAddEventListener).toHaveBeenCalledTimes(1);
+    expect(mockAddEventListener).toHaveBeenCalledWith('change', expect.any(Function));
+  });
+});
+
+describe('useAuthenticatedUser', () => {
+  it('returns null when the user is anonymous', () => {
+    const { result } = renderHook(() => useAuthenticatedUser());
+    expect(result.current).toBeNull();
+  });
+
+  describe('with a user', () => {
+    const user = {
+      administrator: true,
+      email: 'admin@example.com',
+      name: 'Admin',
+      roles: ['admin'],
+      userId: 1,
+      username: 'admin-user',
+      avatar: 'http://localhost/admin.png',
+    };
+
+    beforeEach(() => {
+      initializeMockApp({
+        authenticatedUser: user,
+      });
+    });
+
+    afterEach(() => {
+      act(() => {
+        setAuthenticatedUser(null);
+      });
+    });
+
+    it('returns a User when the user exists', () => {
+      const { result } = renderHook(() => useAuthenticatedUser(), { wrapper: SiteProvider });
+      expect(result.current).toBe(user);
+    });
+  });
+});
+
+describe('useSiteConfig', () => {
+  it('returns the site config', () => {
+    const { result } = renderHook(() => useSiteConfig());
+    expect(result.current).toHaveProperty('apps', siteConfig.apps);
+    expect(result.current).toHaveProperty('environment', EnvironmentTypes.TEST);
+    expect(result.current).toHaveProperty('baseUrl', 'http://localhost:8080');
+  });
+});

package/runtime/routing/utils.test.ts

@@ -0,0 +1,7 @@
+import { getUrlByRouteRole } from './utils';
+
+describe('getUrlByRouteRole', () => {
+  it('returns the default path for an internal module', () => {
+    expect(getUrlByRouteRole('test-app-1')).toBe('/app1');
+  });
+});

package/runtime/scripts/GoogleAnalyticsLoader.test.ts

@@ -0,0 +1,77 @@
+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/site.config.test.tsx

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,40 @@
+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/layout/DefaultSlotLayout.test.tsx

@@ -0,0 +1,31 @@
+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/hooks.test.tsx

@@ -0,0 +1,178 @@
+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/utils.test.ts

@@ -0,0 +1,67 @@
+import { SlotOperation } from '../types';
+import { WidgetOperationTypes } from '../widget';
+import { LayoutOperationTypes } from './types';
+import { isLayoutOperation, isLayoutOptionsOperation, isLayoutReplaceOperation } from './utils';
+
+describe('UI Layout Operation utilities', () => {
+  describe('isLayoutOperation', () => {
+    it('should return true for valid LayoutOperation', () => {
+      const operation: SlotOperation = {
+        slotId: 'mock.slot.ui',
+        op: LayoutOperationTypes.OPTIONS,
+        options: {},
+      };
+      expect(isLayoutOperation(operation)).toBe(true);
+    });
+
+    it('should return false for invalid LayoutOperation', () => {
+      const operation: SlotOperation = {
+        slotId: 'mock.slot.ui',
+        op: WidgetOperationTypes.APPEND,
+        id: 'mock.slot.widget',
+        element: '',
+      };
+      expect(isLayoutOperation(operation)).toBe(false);
+    });
+  });
+
+  describe('isLayoutOptionsOperation', () => {
+    it('should return true for valid LayoutOptionsOperation', () => {
+      const operation: SlotOperation = {
+        slotId: 'mock.slot.ui',
+        op: LayoutOperationTypes.OPTIONS,
+        options: {},
+      };
+      expect(isLayoutOptionsOperation(operation)).toBe(true);
+    });
+
+    it('should return false for invalid LayoutOptionsOperation', () => {
+      const operation: SlotOperation = {
+        slotId: 'mock.slot.ui',
+        op: LayoutOperationTypes.REPLACE,
+        element: '',
+      };
+      expect(isLayoutOptionsOperation(operation)).toBe(false);
+    });
+  });
+
+  describe('isLayoutReplaceOperation', () => {
+    it('should return true for valid LayoutReplaceOperation', () => {
+      const operation: SlotOperation = {
+        slotId: 'mock.slot.ui',
+        op: LayoutOperationTypes.REPLACE,
+        element: '',
+      };
+      expect(isLayoutReplaceOperation(operation)).toBe(true);
+    });
+
+    it('should return false for invalid LayoutReplaceOperation', () => {
+      const operation: SlotOperation = {
+        slotId: 'mock.slot.ui',
+        op: LayoutOperationTypes.OPTIONS,
+        options: {},
+      };
+      expect(isLayoutReplaceOperation(operation)).toBe(false);
+    });
+  });
+});