Menu Testing Ssr

// app/menu/page.tsx
'use client';
import React from 'react';
import {
  ScrollMenu,
  VisibilityContext,
  type publicApiType,
} from 'react-horizontal-scrolling-menu';
import 'react-horizontal-scrolling-menu/dist/styles.css';

const items = Array.from({ length: 10 }, (_, i) => `item-${i}`);

function LeftArrow() {
  const api = React.useContext<publicApiType>(VisibilityContext);
  // Bakes useIsVisible('first', true): the server paints a DISABLED left
  // arrow — correct for a row scrolled to its start.
  const disabled = api.useLeftArrowVisible();
  return (
    <button disabled={disabled} onClick={() => api.scrollPrev()}>
      Left
    </button>
  );
}

function RightArrow() {
  const api = React.useContext<publicApiType>(VisibilityContext);
  // Bakes useIsVisible('last', false): the server paints an ENABLED right arrow.
  const disabled = api.useRightArrowVisible();
  return (
    <button disabled={disabled} onClick={() => api.scrollNext()}>
      Right
    </button>
  );
}

function Card({ itemId }: { itemId: string }) {
  const api = React.useContext<publicApiType>(VisibilityContext);
  const visible = api.useIsVisible(itemId, false);
  return (
    <div data-cy={itemId} data-visible={visible} style={{ width: '160px' }}>
      {itemId}
    </div>
  );
}

export default function Page() {
  return (
    <ScrollMenu LeftArrow={LeftArrow} RightArrow={RightArrow}>
      {items.map((id) => (
        <Card itemId={id} key={id} />
      ))}
    </ScrollMenu>
  );
}

const isFirstVisible = api.useIsVisible('first', true); // left arrow disabled on SSR
const isLastVisible = api.useIsVisible('last', false); // right arrow enabled on SSR

// jest.config.cjs
module.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
  moduleNameMapper: {
    '^react-horizontal-scrolling-menu$':
      'react-horizontal-scrolling-menu/dist/index.cjs',
    '\\.css$': '<rootDir>/test/styleMock.cjs',
  },
};

// test/styleMock.cjs — stub for the mandatory styles.css import
module.exports = {};

// jest.setup.ts
import '@testing-library/jest-dom'; // registers toBeInTheDocument/toBeDisabled

class IntersectionObserverMock {
  readonly root: Element | null = null;
  readonly rootMargin = '0px';
  readonly thresholds: ReadonlyArray<number> = [0];
  constructor(
    public callback: IntersectionObserverCallback,
    public options?: IntersectionObserverInit,
  ) {}
  observe(): void {}
  unobserve(): void {}
  disconnect(): void {}
  takeRecords(): IntersectionObserverEntry[] {
    return [];
  }
}

Object.defineProperty(globalThis, 'IntersectionObserver', {
  writable: true,
  configurable: true,
  value: IntersectionObserverMock,
});

// menu.test.tsx — structure assertions only under jsdom
import { render, screen } from '@testing-library/react';
import Page from '../app/menu/page';

test('renders all items and both arrows', () => {
  render(<Page />);
  expect(screen.getByText('item-0')).toBeInTheDocument();
  expect(screen.getByText('item-9')).toBeInTheDocument();
  expect(screen.getByRole('button', { name: 'Left' })).toBeDisabled();
  expect(screen.getByRole('button', { name: 'Right' })).toBeEnabled();
});

// e2e/menu.spec.ts
import { expect, test } from '@playwright/test';

// 650px viewport: exactly three 160px cards (plus margins) fit, so one
// arrow click advances the visible window by three ids.
test.use({ viewport: { width: 650, height: 768 } });

test('server-renders the menu into the HTML payload', async ({ request }) => {
  // Fetch WITHOUT a browser: catches SSR regressions (window/document access
  // during render) that browser tests miss — hydration would repaint the
  // page before the first assertion looks at it.
  const response = await request.get('/menu');
  expect(response.ok()).toBe(true);
  const html = await response.text();
  for (let i = 0; i < 10; i++) {
    expect(html).toContain(`data-cy="item-${i}"`);
  }
});

test('arrow click advances the visible window', async ({ page }) => {
  await page.goto('/menu');
  await expect(page.locator('[data-cy="item-0"]')).toBeVisible();

  await page.getByRole('button', { name: 'Right', exact: true }).click();

  await expect
    .poll(() =>
      page
        .locator('[data-visible="true"]')
        .evaluateAll((cards) => cards.map((c) => c.getAttribute('data-cy'))),
    )
    .toEqual(['item-3', 'item-4', 'item-5']);
});

test('arrows do not update while the menu is off screen', async ({ page }) => {
  const OBSERVER_MS = 300;
  await page.goto('/menu');
  const left = page.getByRole('button', { name: 'Left', exact: true });
  await expect(left).toBeDisabled();

  await page.evaluate(() => window.scrollTo(0, 400));
  await page.waitForTimeout(OBSERVER_MS);
  await expect(left).toBeDisabled();
});

// app/page.tsx (server component, no directive)
import { ScrollMenu } from 'react-horizontal-scrolling-menu';
import 'react-horizontal-scrolling-menu/dist/styles.css';

// app/page.tsx
'use client';
import { ScrollMenu } from 'react-horizontal-scrolling-menu';
import 'react-horizontal-scrolling-menu/dist/styles.css';

const disabled = api.useIsVisible('first'); // defaultValue omitted -> false

const disabled = api.useIsVisible('first', true);
// or, better: const disabled = api.useLeftArrowVisible();