@shopgate/engage/components/ChipLayout/spec.js

Shopgate's ENGAGE library.

import React from 'react';
import { mount } from 'enzyme';
import Chip from '@shopgate/pwa-ui-shared/Chip';
import ChipsLayout from "./index";

/**
 * Since the component uses the <Measure> component it needs an actual
 * browser to be tested as it needs a full browser that supports styling and
 * width/height calculation.
 */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
describe('<ChipsLayout />', () => {
  it('should render with one chip', () => {
    const Component = /*#__PURE__*/_jsx(ChipsLayout, {
      children: /*#__PURE__*/_jsx(Chip, {
        id: "some-id",
        children: "foo"
      })
    });
    const wrapper = mount(Component);
    expect(wrapper).toMatchSnapshot();
    expect(wrapper.find(Chip).length).toEqual(1);
    expect(wrapper.find(Chip).at(0).find('button').at(1).text()).toEqual('foo');
  });
  it('should render with two chips', () => {
    const Component = /*#__PURE__*/_jsxs(ChipsLayout, {
      children: [/*#__PURE__*/_jsx(Chip, {
        id: "some-id",
        children: "foo"
      }), /*#__PURE__*/_jsx(Chip, {
        id: "some-other-id",
        children: "bar"
      })]
    });
    const wrapper = mount(Component);
    expect(wrapper).toMatchSnapshot();
    expect(wrapper.find(Chip).length).toEqual(2);
    expect(wrapper.find(Chip).at(0).find('button').at(1).text()).toEqual('foo');
    expect(wrapper.find(Chip).at(1).find('button').at(1).text()).toEqual('bar');
  });
});