@brightcove/components-embed-code-modal 1.1.2 → 1.1.3

package/__tests__/InteractivityProject.test.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { QueryClientProvider, QueryClient } from 'react-query';
+import { render, screen } from '@testing-library/react';
+import { VideoPlayer } from 'js/components';
+import { EmbedCodeModalTypes } from 'js/types/EmbedCodeModalProps';
+import { PLAYER_LIST_FOR_SELECTION, PLAYERS } from 'js/constants/player';
+
+jest.mock('../src/js/utils/featureSwitches');
+
+const wrappedComponent = (children: React.ReactElement) => (
+  <QueryClientProvider client={new QueryClient()}>
+    {children}
+  </QueryClientProvider>
+);
+
+const DEFAULT_MODAL_COMP = {
+  videoId: '123',
+  videoName: 'test video',
+  interactivityProjectId: '9876',
+  interactivityProjectName: 'test project',
+  accountId: '456',
+  duration: 10,
+};
+
+test('renders EmbedCodeModal component with right information', () => {
+  render(
+    wrappedComponent(
+      <VideoPlayer
+        video={DEFAULT_MODAL_COMP}
+        embedCodeModalType={EmbedCodeModalTypes.PROJECT}
+        playerListForSelection={PLAYER_LIST_FOR_SELECTION}
+        players={PLAYERS}
+      />,
+    ),
+  );
+  expect(
+    screen.getByText(DEFAULT_MODAL_COMP.interactivityProjectId),
+  ).toBeInTheDocument();
+  expect(
+    screen.getByText(DEFAULT_MODAL_COMP.interactivityProjectName),
+  ).toBeInTheDocument();
+  expect(
+    screen.queryByText(DEFAULT_MODAL_COMP.videoId),
+  ).not.toBeInTheDocument();
+  expect(
+    screen.queryByText(DEFAULT_MODAL_COMP.videoName),
+  ).not.toBeInTheDocument();
+  expect(screen.getByRole('tab', { name: /javascript/i })).toBeInTheDocument();
+  expect(screen.getByRole('tab', { name: /IFrame/i })).toBeInTheDocument();
+});

package/__tests__/PlayerPreview.test.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { PlayerPreview } from '../src/js/components';
+import { QueryClientProvider, QueryClient } from 'react-query';
+
+const DEFAULT_MODAL_COMP = {
+  id: 'default',
+  accountId: '456',
+};
+
+const wrappedComponent = (children: React.ReactElement) => (
+  <QueryClientProvider client={new QueryClient()}>
+    {children}
+  </QueryClientProvider>
+);
+
+test('renders PlayerPreview component with right information', () => {
+  render(wrappedComponent(<PlayerPreview {...DEFAULT_MODAL_COMP} />));
+  expect(screen.getByText('getURL')).toBeInTheDocument();
+  expect(screen.getByText('previewButton')).toBeInTheDocument();
+  expect(screen.getByRole('tab', { name: /javascript/i })).toBeInTheDocument();
+  expect(screen.getByRole('tab', { name: /IFrame/i })).toBeInTheDocument();
+});

package/__tests__/PrismLiveModal.test.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { PrismLiveModal } from '../src/js/components/prism/PrismLiveModal';
+import { LivePayload } from '../src/js/types/EmbedCodeModalProps';
+
+jest.mock('@brightcove/prism-core', () => ({
+  PrismModal: ({
+    children,
+    ...props
+  }: {
+    children: React.ReactNode;
+  } & Record<string, unknown>) => (
+    <div data-testid='prism-modal' data-props={JSON.stringify(props)}>
+      {children}
+    </div>
+  ),
+}));
+
+jest.mock('../src/js/components/prism/PrismPlayerControls', () => ({
+  PrismPlayerControls: () => <div />,
+}));
+
+jest.mock('../src/js/components/prism/PrismPlayerPreview', () => ({
+  PrismPlayerPreview: () => <div />,
+}));
+
+jest.mock('js/utils/util', () => ({
+  getVideoPreviewLink: jest.fn(() => ''),
+}));
+
+const VIDEO: LivePayload = {
+  videoId: '123',
+  accountId: '456',
+  livePlaybackToken: 'token',
+  adConfigId: '',
+};
+
+const renderModal = () =>
+  render(
+    <PrismLiveModal
+      isOpen
+      onClose={jest.fn()}
+      video={VIDEO}
+      players={{}}
+      playerListForSelection={[]}
+    />,
+  );
+
+const setViewportWidth = (width: number) =>
+  Object.defineProperty(window, 'innerWidth', {
+    configurable: true,
+    value: width,
+  });
+
+describe('PrismLiveModal', () => {
+  afterEach(() => setViewportWidth(1024));
+
+  const renderProps = () =>
+    JSON.parse(
+      screen.getByTestId('prism-modal').getAttribute('data-props') as string,
+    );
+
+  test('configures the modal through native Prism props', () => {
+    renderModal();
+
+    expect(renderProps()).toMatchObject({
+      size: 'extraLarge',
+      forceMaxHeight: true,
+      contentScroll: 'none',
+      showHeaderBottomBorder: true,
+    });
+  });
+
+  test('docks as a bottom sheet and copies the code from the mobile footer', () => {
+    setViewportWidth(800);
+    renderModal();
+
+    expect(renderProps()).toMatchObject({
+      bottomSheet: true,
+      contentScroll: 'auto',
+      primaryButtonText: 'copyCode',
+      cancelButtonText: 'done',
+    });
+  });
+});

package/__tests__/PrismPlayerControls.test.tsx

@@ -0,0 +1,139 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { PrismPlayerControls } from '../src/js/components/prism/PrismPlayerControls';
+import {
+  EmbedCodeAspectRatio,
+  EmbedCodeUnits,
+} from '../src/js/types/EmbedCodeModalProps';
+import { PLAYER_LIST_FOR_SELECTION, PLAYERS } from '../src/js/constants/player';
+
+jest.mock('@brightcove/prism-core', () => ({
+  PrismCheckbox: ({
+    label,
+    checked,
+    onChange,
+    disabled,
+  }: {
+    label: string;
+    checked: boolean;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    disabled?: boolean;
+  }) => (
+    <input
+      type='checkbox'
+      aria-label={label}
+      checked={checked}
+      onChange={onChange}
+      disabled={disabled}
+    />
+  ),
+  PrismDropDown: () => <div />,
+  PrismInput: () => <div />,
+  PrismIconButton: () => <button />,
+  PrismCodeCard: () => <div />,
+}));
+
+const DEFAULT_VIDEO = {
+  videoId: '789',
+  accountId: '456',
+  livePlaybackToken: 'token123',
+  adConfigId: '',
+};
+
+const DEFAULT_EMBED_PROPERTIES = {
+  width: 960,
+  height: 540,
+  units: EmbedCodeUnits.PX,
+  responsive: false,
+  aspectRatio: EmbedCodeAspectRatio.CUSTOM,
+};
+
+const renderControls = (extraProps = {}) =>
+  render(
+    <PrismPlayerControls
+      video={DEFAULT_VIDEO}
+      players={PLAYERS}
+      playerListForSelection={PLAYER_LIST_FOR_SELECTION}
+      selectedPlayer='default'
+      onPlayerChange={jest.fn()}
+      embedProperties={DEFAULT_EMBED_PROPERTIES}
+      setEmbedProperties={jest.fn()}
+      showDVR
+      showLowLatency
+      dvrTime={300}
+      {...extraProps}
+    />,
+  );
+
+describe('embed code reporting', () => {
+  test('reports the iframe embed for a plain player', () => {
+    const onEmbedCodeChange = jest.fn();
+    renderControls({ onEmbedCodeChange });
+
+    const code = onEmbedCodeChange.mock.calls.at(-1)?.[0] as string;
+    expect(code).toContain('<iframe');
+  });
+
+  test('reports the JavaScript embed for a player that requires it', () => {
+    const onEmbedCodeChange = jest.fn();
+    renderControls({
+      players: {
+        default: { ...PLAYERS.default, hasCampaignPlugin: true },
+      },
+      onEmbedCodeChange,
+    });
+
+    const code = onEmbedCodeChange.mock.calls.at(-1)?.[0] as string;
+    expect(code).toContain('<video-js');
+  });
+});
+
+describe('DVR and Low Latency checkboxes are independent', () => {
+  test('both checkboxes are enabled when asset supports DVR and Low Latency', () => {
+    renderControls();
+    expect(
+      screen.getByRole('checkbox', { name: 'dvr.allowDVR' }),
+    ).not.toBeDisabled();
+    expect(
+      screen.getByRole('checkbox', { name: 'lowLatency' }),
+    ).not.toBeDisabled();
+  });
+
+  test('DVR checkbox starts unchecked when Low Latency is also present', () => {
+    renderControls();
+    expect(
+      screen.getByRole('checkbox', { name: 'dvr.allowDVR' }),
+    ).not.toBeChecked();
+    expect(screen.getByRole('checkbox', { name: 'lowLatency' })).toBeChecked();
+  });
+
+  test('Low Latency checkbox stays enabled when DVR is checked', () => {
+    renderControls();
+    fireEvent.click(screen.getByRole('checkbox', { name: 'dvr.allowDVR' }));
+    expect(
+      screen.getByRole('checkbox', { name: 'lowLatency' }),
+    ).not.toBeDisabled();
+  });
+
+  test('DVR checkbox stays enabled when Low Latency is checked', () => {
+    renderControls();
+    fireEvent.click(screen.getByRole('checkbox', { name: 'lowLatency' }));
+    expect(
+      screen.getByRole('checkbox', { name: 'dvr.allowDVR' }),
+    ).not.toBeDisabled();
+  });
+
+  test('each callback fires independently without affecting the other', () => {
+    const onDVRClick = jest.fn();
+    const onLowLatencyClick = jest.fn();
+    renderControls({ onDVRClick, onLowLatencyClick });
+
+    fireEvent.click(screen.getByRole('checkbox', { name: 'dvr.allowDVR' }));
+    expect(onDVRClick).toHaveBeenCalledTimes(1);
+    expect(onLowLatencyClick).not.toHaveBeenCalled();
+
+    fireEvent.click(screen.getByRole('checkbox', { name: 'lowLatency' }));
+    expect(onLowLatencyClick).toHaveBeenCalledTimes(1);
+    expect(onDVRClick).toHaveBeenCalledTimes(1);
+  });
+});

package/__tests__/PrismPlayerPreview.test.tsx

@@ -0,0 +1,168 @@
+import React from 'react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { PrismPlayerPreview } from '../src/js/components/prism/PrismPlayerPreview';
+import { shortenUrl } from '../src/js/services/url-shortener';
+
+jest.mock('../src/js/services/url-shortener');
+
+const mockedShortenUrl = shortenUrl as jest.MockedFunction<typeof shortenUrl>;
+
+const PREVIEW_URL =
+  'https://players.brightcove.net/456/default_default/index.html?videoId=123&livePlaybackToken=abc';
+const SHORT_URL = 'https://bcove.video/4whTWpq';
+
+const DEFAULT_PROPS = {
+  accountId: '456',
+  playerId: 'default',
+  videoId: '123',
+  previewUrl: PREVIEW_URL,
+};
+
+const toaster = {
+  success: jest.fn(),
+  error: jest.fn(),
+};
+
+beforeEach(() => {
+  Object.assign(window, { brightcove: { Toaster: toaster } });
+  Object.assign(navigator, {
+    clipboard: {
+      writeText: jest.fn(() => Promise.resolve()),
+      write: jest.fn(() => Promise.reject(new Error('unsupported'))),
+    },
+  });
+});
+
+afterEach(() => {
+  jest.clearAllMocks();
+});
+
+const openCopyUrlMenu = () => {
+  fireEvent.click(screen.getByRole('button', { name: /prism.copyURL/ }));
+};
+
+test('offers both a short and a full URL option', () => {
+  render(<PrismPlayerPreview {...DEFAULT_PROPS} />);
+
+  openCopyUrlMenu();
+
+  expect(screen.getByText('prism.shortURL')).toBeInTheDocument();
+  expect(screen.getByText('prism.fullURL')).toBeInTheDocument();
+});
+
+test('copies the full URL as-is without shortening it', async () => {
+  render(<PrismPlayerPreview {...DEFAULT_PROPS} />);
+
+  openCopyUrlMenu();
+  fireEvent.click(screen.getByText('prism.fullURL'));
+
+  expect(navigator.clipboard.writeText).toHaveBeenCalledWith(PREVIEW_URL);
+  expect(mockedShortenUrl).not.toHaveBeenCalled();
+  await waitFor(() => expect(screen.getByText('prism.copied')));
+});
+
+test('copies the shortened URL when the short URL option is picked', async () => {
+  mockedShortenUrl.mockResolvedValue(SHORT_URL);
+  render(<PrismPlayerPreview {...DEFAULT_PROPS} />);
+
+  openCopyUrlMenu();
+  fireEvent.click(screen.getByText('prism.shortURL'));
+
+  await waitFor(() =>
+    expect(mockedShortenUrl).toHaveBeenCalledWith({ longUrl: PREVIEW_URL }),
+  );
+  await waitFor(() =>
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith(SHORT_URL),
+  );
+});
+
+test('reports progress on the button while the URL is being shortened', async () => {
+  let resolveShortening: (value: string) => void = (value) => {
+    throw new Error(`shortening resolved before it started: ${value}`);
+  };
+  mockedShortenUrl.mockReturnValue(
+    new Promise<string>((resolve) => {
+      resolveShortening = resolve;
+    }),
+  );
+  render(<PrismPlayerPreview {...DEFAULT_PROPS} />);
+
+  openCopyUrlMenu();
+  fireEvent.click(screen.getByText('prism.shortURL'));
+
+  await waitFor(() => expect(screen.getByText('prism.copying')));
+
+  resolveShortening(SHORT_URL);
+
+  await waitFor(() => expect(screen.getByText('prism.copied')));
+  expect(toaster.success).not.toHaveBeenCalled();
+});
+
+test('surfaces an error toast when the shortening service fails', async () => {
+  mockedShortenUrl.mockRejectedValue(new Error('invalid URL'));
+  render(<PrismPlayerPreview {...DEFAULT_PROPS} />);
+
+  openCopyUrlMenu();
+  fireEvent.click(screen.getByText('prism.shortURL'));
+
+  await waitFor(() =>
+    expect(toaster.error).toHaveBeenCalledWith({
+      message: 'toasterGetURLError',
+    }),
+  );
+  expect(navigator.clipboard.writeText).not.toHaveBeenCalled();
+  expect(toaster.success).not.toHaveBeenCalled();
+});
+
+test('ignores a shortening result that lands after the preview URL changed', async () => {
+  let resolveShortening: (value: string) => void = (value) => {
+    throw new Error(`shortening resolved before it started: ${value}`);
+  };
+  mockedShortenUrl.mockReturnValue(
+    new Promise<string>((resolve) => {
+      resolveShortening = resolve;
+    }),
+  );
+  const { rerender } = render(<PrismPlayerPreview {...DEFAULT_PROPS} />);
+
+  openCopyUrlMenu();
+  fireEvent.click(screen.getByText('prism.shortURL'));
+  await waitFor(() => expect(screen.getByText('prism.copying')));
+
+  rerender(
+    <PrismPlayerPreview
+      {...DEFAULT_PROPS}
+      previewUrl={`${PREVIEW_URL}&playerId=other`}
+    />,
+  );
+  resolveShortening(SHORT_URL);
+
+  await waitFor(() => expect(screen.getByText('prism.copyURL')));
+  expect(screen.queryByText('prism.copied')).not.toBeInTheDocument();
+});
+
+test('drops the copied state as soon as the preview URL changes', async () => {
+  const { rerender } = render(<PrismPlayerPreview {...DEFAULT_PROPS} />);
+
+  openCopyUrlMenu();
+  fireEvent.click(screen.getByText('prism.fullURL'));
+  await waitFor(() => expect(screen.getByText('prism.copied')));
+
+  rerender(
+    <PrismPlayerPreview
+      {...DEFAULT_PROPS}
+      previewUrl={`${PREVIEW_URL}&playerId=other`}
+    />,
+  );
+
+  expect(screen.getByText('prism.copyURL')).toBeInTheDocument();
+  expect(
+    screen.getByRole('button', { name: /prism.copyURL/ }),
+  ).not.toBeDisabled();
+});
+
+test('disables the copy URL button while no player is selected', () => {
+  render(<PrismPlayerPreview {...DEFAULT_PROPS} previewUrl='' />);
+
+  expect(screen.getByRole('button', { name: /prism.copyURL/ })).toBeDisabled();
+});

package/__tests__/TabsHeader.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { act, fireEvent, render } from '@testing-library/react';
+import { TabsHeader } from '../src/js/components';
+
+const DEFAULT_MODAL_COMP = {
+  currentTab: 'iframe',
+  handleTabChange: jest.fn(),
+  iframeLabel: 'iframe',
+  jsLabel: 'js',
+};
+
+test('renders TabsHeader clickeable tabs', async () => {
+  const { getByRole } = render(<TabsHeader {...DEFAULT_MODAL_COMP} />);
+  const jsBtn = getByRole('tab', { name: DEFAULT_MODAL_COMP.jsLabel });
+  act(() => {
+    fireEvent.click(jsBtn);
+  });
+  expect(DEFAULT_MODAL_COMP.handleTabChange).toBeCalled();
+});

package/__tests__/TabsSection.test.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { act, fireEvent, render } from '@testing-library/react';
+import { TabsSection } from 'js/components';
+
+const DEFAULT_MODAL_COMP = {
+  playerId: 'default',
+  videoId: '1234',
+  accountId: 'default',
+  isBcMapTracking: false,
+};
+
+test('renders TabsSection clickeable tabs', async () => {
+  const { getByRole, getByText } = render(
+    <TabsSection {...DEFAULT_MODAL_COMP} isCampaign isViewerIdSource={false} />,
+  );
+  const jsBtn = getByRole('tab', { name: /javascript/i });
+  act(() => {
+    fireEvent.click(jsBtn);
+  });
+  expect(getByText(/data-video-id/i)).toBeInTheDocument();
+});
+
+test('renders helper text for campaign players', async () => {
+  const { getByText } = render(
+    <TabsSection {...DEFAULT_MODAL_COMP} isCampaign isViewerIdSource={false} />,
+  );
+  expect(getByText('tabs.helperTextWarning')).toBeInTheDocument();
+});
+
+test('renders helper text for viewer id source players', async () => {
+  const { getByText } = render(
+    <TabsSection {...DEFAULT_MODAL_COMP} isCampaign={false} isViewerIdSource />,
+  );
+  expect(getByText('tabs.viewerIdTextWarning')).toBeInTheDocument();
+});
+
+test('renders iframe content if it is not campaign or viewer id', async () => {
+  const { getByText } = render(
+    <TabsSection
+      {...DEFAULT_MODAL_COMP}
+      isCampaign={false}
+      isViewerIdSource={false}
+    />,
+  );
+  expect(getByText(/allowfullscreen/i)).toBeInTheDocument();
+});

package/__tests__/TitleWithTooltip.test.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { TitleWithTooltip } from '../src/js/components';
+import { truncateVideoTitle } from '../src/js/utils/util';
+
+const DEFAULT_VIDEO_COMP = {
+  videoId: '123',
+  videoName:
+    'The cat is a domestic species of small carnivorous mammal. It is the only domesticated species in the family Felidae and is often referred to as the domestic cat to distinguish it from the wild members of the family. ',
+  accountId: '456',
+  duration: 10,
+};
+
+const DEFAULT_PROJECT_COMP = {
+  videoId: '456',
+  interactivityProjectId: '987',
+  interactivityProjectName:
+    "The dog is a domesticated descendant of the wolf. Also called the domestic dog, it is derived from the extinct Pleistocene wolf, and the modern wolf is the dog's nearest living relative. ",
+  accountId: '456',
+  duration: 10,
+};
+
+test('renders TitleWithTooltip for Video with truncated title if its too long', () => {
+  const truncatedTitle = truncateVideoTitle(DEFAULT_VIDEO_COMP.videoName);
+  render(
+    <TitleWithTooltip
+      name={DEFAULT_VIDEO_COMP.videoName}
+      id={DEFAULT_VIDEO_COMP.videoId}
+    />,
+  );
+  expect(screen.getByText(truncatedTitle)).toBeInTheDocument();
+});
+
+test('renders TitleWithTooltip for Project with truncated title if its too long', () => {
+  const truncatedTitle = truncateVideoTitle(
+    DEFAULT_PROJECT_COMP.interactivityProjectName,
+  );
+  render(
+    <TitleWithTooltip
+      name={DEFAULT_PROJECT_COMP.interactivityProjectName}
+      id={DEFAULT_PROJECT_COMP.videoId}
+    />,
+  );
+  expect(screen.getByText(truncatedTitle)).toBeInTheDocument();
+});

package/__tests__/VideoPlayer.test.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { QueryClientProvider, QueryClient } from 'react-query';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { VideoPlayer } from '../src/js/components/VideoPlayer';
+import { EmbedCodeModalTypes } from '../src/js/types/EmbedCodeModalProps';
+import { PLAYER_LIST_FOR_SELECTION, PLAYERS } from '../src/js/constants/player';
+
+jest.mock('../src/js/utils/featureSwitches');
+
+const wrappedComponent = (children: React.ReactElement) => (
+  <QueryClientProvider client={new QueryClient()}>
+    {children}
+  </QueryClientProvider>
+);
+
+const DEFAULT_MODAL_COMP = {
+  videoId: '123',
+  videoName: 'test video',
+  accountId: '456',
+  duration: 10,
+};
+
+const LIVE_MODAL_COMP = {
+  videoId: '789',
+  accountId: '456',
+  livePlaybackToken: 'token123',
+  adConfigId: '',
+};
+
+test('renders EmbedCodeModal component with right information', () => {
+  render(
+    wrappedComponent(
+      <VideoPlayer
+        video={DEFAULT_MODAL_COMP}
+        embedCodeModalType={EmbedCodeModalTypes.VIDEO}
+        playerListForSelection={PLAYER_LIST_FOR_SELECTION}
+        players={PLAYERS}
+      />,
+    ),
+  );
+  expect(screen.getByText(DEFAULT_MODAL_COMP.videoId)).toBeInTheDocument();
+  expect(screen.getByText(DEFAULT_MODAL_COMP.videoName)).toBeInTheDocument();
+  expect(screen.getByRole('tab', { name: /javascript/i })).toBeInTheDocument();
+  expect(screen.getByRole('tab', { name: /IFrame/i })).toBeInTheDocument();
+});
+
+describe('DVR and Low Latency checkboxes are independent', () => {
+  const renderLivePlayer = (extraProps = {}) =>
+    render(
+      wrappedComponent(
+        <VideoPlayer
+          video={LIVE_MODAL_COMP}
+          embedCodeModalType={EmbedCodeModalTypes.LIVE}
+          playerListForSelection={PLAYER_LIST_FOR_SELECTION}
+          players={PLAYERS}
+          showDVR
+          showLowLatency
+          {...extraProps}
+        />,
+      ),
+    );
+
+  const getDVRCheckbox = () =>
+    screen.getByRole('checkbox', { name: /dvr\.allowDVR/i });
+  const getLowLatencyCheckbox = () =>
+    screen.getByRole('checkbox', { name: /lowLatency/i });
+
+  test('both checkboxes are enabled when asset supports DVR and Low Latency', () => {
+    renderLivePlayer();
+    expect(getDVRCheckbox()).not.toBeDisabled();
+    expect(getLowLatencyCheckbox()).not.toBeDisabled();
+  });
+
+  test('DVR checkbox starts unchecked when Low Latency is also present', () => {
+    renderLivePlayer();
+    expect(getDVRCheckbox()).not.toBeChecked();
+    expect(getLowLatencyCheckbox()).toBeChecked();
+  });
+
+  test('Low Latency checkbox stays enabled when DVR is checked', () => {
+    renderLivePlayer();
+    fireEvent.click(getDVRCheckbox());
+    expect(getLowLatencyCheckbox()).not.toBeDisabled();
+  });
+
+  test('DVR checkbox stays enabled when Low Latency is checked', () => {
+    renderLivePlayer();
+    fireEvent.click(getLowLatencyCheckbox());
+    expect(getDVRCheckbox()).not.toBeDisabled();
+  });
+
+  test('each callback fires independently without affecting the other', () => {
+    const onDVRClick = jest.fn();
+    const onLowLatencyClick = jest.fn();
+    renderLivePlayer({ onDVRClick, onLowLatencyClick });
+
+    fireEvent.click(getDVRCheckbox());
+    expect(onDVRClick).toHaveBeenCalledTimes(1);
+    expect(onLowLatencyClick).not.toHaveBeenCalled();
+
+    fireEvent.click(getLowLatencyCheckbox());
+    expect(onLowLatencyClick).toHaveBeenCalledTimes(1);
+    expect(onDVRClick).toHaveBeenCalledTimes(1);
+  });
+});