ant-design/components/layout/__tests__/token.test.tsx

import React from 'react';

import Layout from '..';
import { render } from '../../../tests/utils';
import ConfigProvider from '../../config-provider';
import Menu from '../../menu';

const { Header } = Layout;

describe('Layout.Token', () => {
  it('legacy theme should work', () => {
    const { container } = render(
      <ConfigProvider
        theme={{
          components: {
            Layout: {
              colorBgHeader: '#FF0000',
            },
            Menu: {
              // keep this deprecated one
              colorItemBg: '#00FF00',
            },
          },
        }}
      >
        <Header>
          <Menu
            mode="horizontal"
            defaultSelectedKeys={['2']}
            items={new Array(15).fill(null).map((_, index) => {
              const key = index + 1;
              return {
                key,
                label: `nav ${key}`,
              };
            })}
          />
        </Header>
      </ConfigProvider>,
    );

    expect(container.querySelector('.ant-layout-header')).toHaveStyle({
      backgroundColor: '#FF0000',
    });
    expect(container.querySelector('.ant-menu')).toHaveStyle({
      backgroundColor: '#00FF00',
    });
  });
  it('theme should work', () => {
    const { container } = render(
      <ConfigProvider
        theme={{
          components: {
            Layout: {
              colorBgHeader: '#FF0000',
            },
            Menu: {
              itemBg: '#00FF00',
            },
          },
        }}
      >
        <Header>
          <Menu
            mode="horizontal"
            defaultSelectedKeys={['2']}
            items={new Array(15).fill(null).map((_, index) => {
              const key = index + 1;
              return {
                key,
                label: `nav ${key}`,
              };
            })}
          />
        </Header>
      </ConfigProvider>,
    );

    expect(container.querySelector('.ant-layout-header')).toHaveStyle({
      backgroundColor: '#FF0000',
    });
    expect(container.querySelector('.ant-menu')).toHaveStyle({
      backgroundColor: '#00FF00',
    });
  });
});