rsuite/src/MultiCascader/test/MultiCascaderStylesSpec.js

A suite of react components

import React from 'react';
import ReactDOM from 'react-dom';
import MultiCascader from '../index';
import { createTestContainer, getDOMNode, getStyle, inChrome } from '@test/testUtils';

import '../styles/index';

const data = [
  {
    value: 'abcde',
    label: 'abcde',
    children: [
      {
        value: 'vv-abc',
        label: 'vv-abc'
      },
      {
        value: 'vv-abcd',
        label: 'vv-abcd'
      }
    ]
  }
];

describe('MultiCascader styles', () => {
  it('Should render the correct caret', () => {
    const instanceRef = React.createRef();
    ReactDOM.render(
      <MultiCascader ref={instanceRef} data={data} menuClassName="rs-multi-cascader-styles-test" />,
      createTestContainer()
    );
    const toggleDom = getDOMNode(instanceRef.current).querySelector('.rs-picker-toggle');
    toggleDom.click();

    const menuItemDom = document.body.querySelector(
      '.rs-multi-cascader-styles-test .rs-picker-cascader-menu-has-children'
    );
    inChrome &&
      assert.equal(
        getStyle(menuItemDom.querySelector('.rs-checkbox-checker label'), 'padding'),
        '8px 26px 8px 38px'
      );
    assert.equal(
      window.getComputedStyle(
        menuItemDom.querySelector('.rs-picker-cascader-menu-caret'),
        '::before'
      ).content,
      `"${String.fromCharCode(0xea0c)}"`
    );
  });
});