woocommerce/plugins/woocommerce-blocks/packages/components/chip/test/index.js

/**
 * External dependencies
 */
import TestRenderer from 'react-test-renderer';

/**
 * Internal dependencies
 */
import { Chip, RemovableChip } from '..';

describe( 'Chip', () => {
	test( 'should render text', () => {
		const component = TestRenderer.create( <Chip text="Test" /> );

		expect( component.toJSON() ).toMatchSnapshot();
	} );

	test( 'should render nodes as the text', () => {
		const component = TestRenderer.create(
			<Chip text={ <h1>Test</h1> } />
		);

		expect( component.toJSON() ).toMatchSnapshot();
	} );

	test( 'should render defined radius', () => {
		const component = TestRenderer.create(
			<Chip text="Test" radius="large" />
		);

		expect( component.toJSON() ).toMatchSnapshot();
	} );

	test( 'should render screen reader text', () => {
		const component = TestRenderer.create(
			<Chip text="Test" screenReaderText="Test 2" />
		);

		expect( component.toJSON() ).toMatchSnapshot();
	} );

	test( 'should render children nodes', () => {
		const component = TestRenderer.create(
			<Chip text="Test">Lorem Ipsum</Chip>
		);

		expect( component.toJSON() ).toMatchSnapshot();
	} );

	describe( 'with custom wrapper', () => {
		test( 'should render a chip made up of a div instead of a li', () => {
			const component = TestRenderer.create(
				<Chip text="Test" element="div" />
			);

			expect( component.toJSON() ).toMatchSnapshot();
		} );
	} );
} );

describe( 'RemovableChip', () => {
	test( 'should render text and the remove button', () => {
		const component = TestRenderer.create( <RemovableChip text="Test" /> );

		expect( component.toJSON() ).toMatchSnapshot();
	} );

	test( 'should render with disabled remove button', () => {
		const component = TestRenderer.create(
			<RemovableChip text="Test" disabled={ true } />
		);

		expect( component.toJSON() ).toMatchSnapshot();
	} );

	test( 'should render custom aria label', () => {
		const component = TestRenderer.create(
			<RemovableChip text={ <h1>Test</h1> } ariaLabel="Aria test" />
		);

		expect( component.toJSON() ).toMatchSnapshot();
	} );

	test( 'should render default aria label if text is a node', () => {
		const component = TestRenderer.create(
			<RemovableChip text={ <h1>Test</h1> } screenReaderText="Test 2" />
		);

		expect( component.toJSON() ).toMatchSnapshot();
	} );

	test( 'should render screen reader text aria label', () => {
		const component = TestRenderer.create(
			<RemovableChip text="Test" screenReaderText="Test 2" />
		);

		expect( component.toJSON() ).toMatchSnapshot();
	} );

	describe( 'with removeOnAnyClick', () => {
		test( 'should be a button when removeOnAnyClick is set to true', () => {
			const component = TestRenderer.create(
				<RemovableChip text="Test" removeOnAnyClick={ true } />
			);

			expect( component.toJSON() ).toMatchSnapshot();
		} );
	} );
} );