Page.test.tsx

import * as React from 'react'

import { render, screen } from '~/test-utils/testing-library'

import { PageLayout } from '@grandvision/layout'

import { defaultContextValue } from '../../__test-data__'
import { RuntimeContext } from '../runtime-context'
import CmsPageLayout, { Layout, Props } from './Page'

jest.mock('@grandvision/layout', () => {
  const actual = jest.requireActual('@grandvision/layout')
  return {
    ...actual,
    __esModule: true,
    PageLayout: jest.fn(({ children }) => <div data-t="PageLayout">{children}</div>),
  }
})
const MockPageLayout = PageLayout as jest.MockedFunction<typeof PageLayout>

let MockCmsHeader: jest.Mock
let MockCmsFooter: jest.Mock
let MockCmsCookieNotification: jest.Mock
let MockCmsComponentSlot: jest.Mock
jest.mock('../containers', () => {
  const actual = jest.requireActual('../containers')
  return {
    ...actual,
    __esModule: true,
    CmsHeader: MockCmsHeader = jest.fn(() => <div>CmsHeader</div>),
    CmsFooter: MockCmsFooter = jest.fn(() => <div>CmsFooter</div>),
    CmsCookieNotification: MockCmsCookieNotification = jest.fn(() => (
      <div>CmsCookieNotification</div>
    )),
    CmsComponentSlot: MockCmsComponentSlot = jest.fn(({ children, path }) => (
      <div data-t="CmsComponentSlot" data-path={path}>
        {children}
      </div>
    )),
  }
})

let useMockBloomreach: jest.Mock
jest.mock('../context', () => {
  const actual = jest.requireActual('../context')
  return {
    __esModule: true,
    ...actual,
    useBloomreach: useMockBloomreach = jest.fn(() => defaultContextValue),
  }
})

const defaultLayout: Layout = {
  header: true,
  footer: true,
  navigation: true,
}

const defaultProps: Props = {
  isSolaris: false,
  layoutSettings: defaultLayout,
  renderCartButton: jest.fn(),
  getProductImageUrl: jest.fn(),
  featureToggles: {
    isMultilingualEnabled: jest.fn(() => true),
    isMyAccountEnabled: jest.fn(() => true),
    isSearchEnabled: jest.fn(() => true),
  },
}

const create = (props: Partial<Props> = {}) =>
  render(
    <CmsPageLayout {...defaultProps} {...props}>
      <div>Child</div>
      <div>Child</div>
    </CmsPageLayout>,
    {
      wrapper: ({ children }) => (
        <RuntimeContext.Provider
          value={{ site: { name: 'Test site' } } as any}
          children={children}
        />
      ),
    }
  )

beforeEach(jest.clearAllMocks)

describe('CmsPageLayout', () => {
  it.only('should render components correctly for default layout settings', () => {
    const { debug } = create()

    expect(screen.getByTestId('PageLayout')).toBeInTheDocument()
    expect(screen.getAllByText('Child')).toHaveLength(2)

    expect(MockPageLayout).toHaveBeenCalledWith(
      expect.objectContaining({
        isSolaris: false,
        hasSiteNav: true,
        children: expect.any(Array),
        // Check if components are defined
        cookieBar: expect.any(Object),
        header: expect.any(Object),
        footer: expect.any(Object),
      }),
      {}
    )

    debug()

    // expect(MockCmsHeader).toHaveBeenCalledWith({
    //   renderCartButton: defaultProps.renderCartButton,
    //   getProductImageUrl: defaultProps.getProductImageUrl,
    //   renderSiteNav: true,
    //   isSolaris: false,
    //   ...defaultProps.featureToggles,
    // })
    // expect(MockCmsFooter).toHaveBeenCalled()
    // expect(MockCmsCookieNotification).toHaveBeenCalled()
    // expect(MockCmsComponentSlot).toHaveBeenCalledTimes(3)

    const { header, footer, cookieBar } = MockPageLayout.mock.calls[0][0]

    // TODO
    expect(header.props).toEqual({})
    expect(footer.props).toEqual({})
    expect(cookieBar.props).toEqual({})
  })

  it('should pass components and props according to passed layout settings', () => {
    create({
      layoutSettings: {
        header: false,
        footer: true,
        navigation: true,
      },
    })
    expect(MockPageLayout).toHaveBeenNthCalledWith(
      1,
      expect.objectContaining({
        header: null,
        footer: expect.any(Object),
        hasSiteNav: true,
      }),
      {}
    )

    create({
      layoutSettings: {
        header: true,
        footer: false,
        navigation: true,
      },
    })
    expect(MockPageLayout).toHaveBeenNthCalledWith(
      2,
      expect.objectContaining({
        header: expect.any(Object),
        footer: null,
        hasSiteNav: true,
      }),
      {}
    )

    create({
      layoutSettings: {
        header: true,
        footer: true,
        navigation: false,
      },
    })
    expect(MockPageLayout).toHaveBeenNthCalledWith(
      3,
      expect.objectContaining({
        header: expect.any(Object),
        footer: expect.any(Object),
        hasSiteNav: false,
      }),
      {}
    )

    create({
      layoutSettings: {
        header: false,
        footer: false,
        navigation: false,
      },
    })
    expect(MockPageLayout).toHaveBeenNthCalledWith(
      4,
      expect.objectContaining({
        header: null,
        footer: null,
        hasSiteNav: false,
      }),
      {}
    )
  })
})