genStyleUtils.test.tsx

import React from 'react';
import { render, renderHook } from '@testing-library/react';

import { genStyleUtils } from '../src';
import type { CSSVarRegisterProps, SubStyleComponentProps } from '@/util/genStyleUtils';
import { createCache, StyleProvider, useCSSVarRegister } from '@ant-design/cssinjs';

jest.mock('@ant-design/cssinjs', () => ({
  ...jest.requireActual('@ant-design/cssinjs'),
  useCSSVarRegister: jest.fn(),
}));

interface TestCompTokenMap {
  TestComponent: object;
}

describe('genStyleUtils', () => {
  const mockConfig = {
    usePrefix: jest.fn().mockReturnValue({
      rootPrefixCls: 'ant',
      iconPrefixCls: 'anticon',
    }),
    useToken: jest.fn().mockReturnValue({
      theme: {},
      realToken: {},
      hashId: 'hash',
      token: {},
      cssVar: {},
    }),
    useCSP: jest.fn().mockReturnValue({ nonce: 'nonce' }),
    getResetStyles: jest.fn().mockReturnValue([]),
    layer: {
      name: 'test',
      dependencies: ['parent'],
    },
  };

  const { genStyleHooks, genSubStyleComponent, genComponentStyleHook } = genStyleUtils<
    TestCompTokenMap,
    object,
    object
  >(mockConfig);

  beforeEach(() => {
    // Clear head style
    const head = document.head;
    head.innerHTML = '';
    jest.clearAllMocks();
  });

  describe('genStyleHooks', () => {
    it('should generate style hooks', () => {
      const component = 'TestComponent';
      const styleFn = jest.fn();
      const getDefaultToken = {
        mockCompToken: 'mock',
      };
      const hooks = genStyleHooks(component, styleFn, getDefaultToken);

      expect(hooks).toBeInstanceOf(Function);

      const {
        result: { current },
      } = renderHook(() => hooks('test-prefix'));
      expect(current).toBeInstanceOf(Array);
      expect(current).toHaveLength(2);
    });

    it('should inject CSS vars for extraCssVarPrefixCls', () => {
      const component = 'TestComponent';
      const styleFn = jest.fn();
      const getDefaultToken = jest.fn();
      const hooks = genStyleHooks(component, styleFn, getDefaultToken, {
        extraCssVarPrefixCls: ['custom-a', 'custom-b'],
      });

      renderHook(() => hooks('test-prefix'));

      // useCSSVarRegister should be called 3 times: test-prefix, custom-a, custom-b
      expect(useCSSVarRegister).toHaveBeenCalledTimes(3);
      expect(useCSSVarRegister).toHaveBeenNthCalledWith(
        1,
        expect.objectContaining({ scope: 'test-prefix' }),
        expect.any(Function),
      );
      expect(useCSSVarRegister).toHaveBeenNthCalledWith(
        2,
        expect.objectContaining({ scope: 'custom-a' }),
        expect.any(Function),
      );
      expect(useCSSVarRegister).toHaveBeenNthCalledWith(
        3,
        expect.objectContaining({ scope: 'custom-b' }),
        expect.any(Function),
      );
    });
  });

  describe('genSubStyleComponent', () => {
    it('should generate sub style component', () => {
      const component = 'TestComponent';
      const styleFn = jest.fn();
      const getDefaultToken = jest.fn();
      const StyledComponent = genSubStyleComponent(component, styleFn, getDefaultToken);

      const { container } = render(<StyledComponent prefixCls="test-prefix" rootCls="test-root" />);
      expect(container).toBeEmptyDOMElement();
    });
  });

  describe('genComponentStyleHook', () => {
    it('should generate component style hook', () => {
      const component = 'TestComponent';
      const styleFn = jest.fn();
      const getDefaultToken = jest.fn();
      const hook = genComponentStyleHook(component, styleFn, getDefaultToken);

      const TestComponent: React.FC<SubStyleComponentProps> = ({ prefixCls, rootCls }) => {
        hook(prefixCls, rootCls);
        return <div data-testid="test-component">Test</div>;
      };

      const { getByTestId } = render(<TestComponent prefixCls="test-prefix" rootCls="test-root" />);
      expect(getByTestId('test-component')).toHaveTextContent('Test');
    });
  });

  describe('genComponentStyleHook should run without getResetStyles', () => {
    it('should generate component style hook', () => {
      const component = 'TestComponent';
      const styleFn = jest.fn();
      const getDefaultToken = jest.fn();
      const { getResetStyles, ...restMockConfig } = mockConfig;
      const { genComponentStyleHook: genComponentStyleHookWithoutReset } = genStyleUtils<
        TestCompTokenMap,
        object,
        object
      >(restMockConfig);
      const hook = genComponentStyleHookWithoutReset(component, styleFn, getDefaultToken);
      const TestComponent: React.FC<SubStyleComponentProps> = ({ prefixCls, rootCls }) => {
        hook(prefixCls, rootCls);
        return <div data-testid="test-component">Test</div>;
      };
      const { container } = render(<TestComponent prefixCls="test-prefix" rootCls="test-root" />);
      expect(() => container).not.toThrow();
    });
  });

  describe('CSSVarRegister', () => {
    it('should render CSSVarRegister component', () => {
      const CSSVarRegister: React.FC<CSSVarRegisterProps> = ({ rootCls, cssVar = {} }) => {
        return <div data-testid={rootCls}>{cssVar.prefix}</div>;
      };

      const { getByTestId } = render(
        <CSSVarRegister rootCls="test-root" cssVar={{ prefix: 'test-prefix' }} component="test" />,
      );
      expect(getByTestId('test-root')).toHaveTextContent('test-prefix');
    });
  });

  it('layer', () => {
    const StyledComponent = genSubStyleComponent(
      'TestComponent',
      () => ({}),
      () => ({}),
    );

    render(
      <StyleProvider cache={createCache()} layer>
        <StyledComponent prefixCls="test" />
      </StyleProvider>,
    );

    expect(document.head.innerHTML).toContain('@layer parent,test;');
  });

  describe('disabledRuntimeStyle', () => {
    it('should work', () => {
      const usePrefix = jest.fn().mockReturnValue({
        rootPrefixCls: 'ant',
        iconPrefixCls: 'anticon',
      });

      const config = {
        ...mockConfig,
        useToken: jest.fn().mockReturnValue({
          theme: {},
          realToken: {},
          hashId: 'hash',
          token: {},
          cssVar: {},
          zeroRuntime: true,
        }),
        usePrefix,
      };
      const { genComponentStyleHook: gen } = genStyleUtils<TestCompTokenMap, object, object>(
        config,
      );

      const styleFn = jest.fn();
      const getDefaultToken = jest.fn();
      const useStyle = gen('TestComponent', styleFn, getDefaultToken);

      const TestComponent: React.FC<SubStyleComponentProps> = ({ prefixCls, rootCls }) => {
        useStyle(prefixCls, rootCls);
        return <div data-testid="test-component">Test</div>;
      };

      const { getByTestId } = render(<TestComponent prefixCls="test-prefix" rootCls="test-root" />);
      expect(getByTestId('test-component')).toHaveTextContent('Test');
      expect(usePrefix).not.toHaveBeenCalled();
    });
  });
});