test: refactor card, container, col, and row component tests to types…

…cript and eliminate enzyme (#6166)

* Refactor Card component test to eliminate enzyme

Signed-off-by: Jay Clark <jay@jayeclark.dev>

* Fix CardSpec issues

Signed-off-by: Jay Clark <jay@jayeclark.dev>

* Migrate Container, Col, and Row tests

Signed-off-by: Jay Clark <jay@jayeclark.dev>

test/CardSpec.tsx

@@ -0,0 +1,58 @@
+import { render } from '@testing-library/react';
+
+import Card from '../src/Card';
+
+describe('<Card>', () => {
+  it('should output a div', () => {
+    const { getByText } = render(<Card>Card</Card>);
+    getByText('Card').tagName.toLowerCase().should.equal('div');
+    getByText('Card').classList.contains('card').should.be.true;
+  });
+
+  it('should have additional classes', () => {
+    const { getByText } = render(<Card className="custom-class">Card</Card>);
+    getByText('Card').classList.contains('custom-class').should.be.true;
+  });
+
+  it('accepts a bg prop', () => {
+    const { getByText } = render(<Card bg="primary">Card</Card>);
+    getByText('Card').classList.contains('bg-primary').should.be.true;
+  });
+
+  it('accepts a text prop', () => {
+    const { getByText } = render(<Card text="success">Card</Card>);
+    getByText('Card').classList.contains('text-success').should.be.true;
+  });
+
+  it('accepts a border prop', () => {
+    const { getByText } = render(<Card border="danger">Card</Card>);
+    getByText('Card').classList.contains('border-danger').should.be.true;
+  });
+
+  it('should render children', () => {
+    const { getByTestId } = render(
+      <Card data-testid="test-card">
+        <p>hello</p>
+      </Card>,
+    );
+    getByTestId('test-card').children.length.should.equal(1);
+    getByTestId('test-card')
+      .children[0].tagName.toLowerCase()
+      .should.equal('p');
+  });
+
+  it('accepts as prop', () => {
+    const { getByText } = render(<Card as="section">body</Card>);
+    getByText('body').tagName.toLowerCase().should.equal('section');
+  });
+
+  it('allows for the body shorthand', () => {
+    const { getByText } = render(<Card body>test</Card>);
+    getByText('test').classList.contains('card-body').should.be.true;
+  });
+
+  it('Should have div as default component', () => {
+    const { getByTestId } = render(<Card data-testid="default-test" />);
+    getByTestId('default-test').tagName.toLowerCase().should.equal('div');
+  });
+});

test/ColSpec.tsx

@@ -0,0 +1,86 @@
+import { render } from '@testing-library/react';
+
+import Col from '../src/Col';
+
+describe('Col', () => {
+  it('Should include "col" when there are no sizes', () => {
+    const { getByText } = render(<Col>Column</Col>);
+    getByText('Column').classList.contains('col').should.be.true;
+  });
+
+  it('Should include "col" when xs is true', () => {
+    const { getByText } = render(<Col xs>Column</Col>);
+    getByText('Column').classList.contains('col').should.be.true;
+
+    render(<Col xs={{ span: true }}>Column2</Col>);
+    getByText('Column2').classList.contains('col').should.be.true;
+  });
+
+  it('Should include sizes', () => {
+    const { getByText } = render(
+      <Col xs={4} md={8} lg={{ span: 12 }}>
+        Column
+      </Col>,
+    );
+    getByText('Column').classList.length.should.equal(3);
+    getByText('Column').classList.contains('col-4').should.be.true;
+    getByText('Column').classList.contains('col-md-8').should.be.true;
+    getByText('Column').classList.contains('col-lg-12').should.be.true;
+  });
+
+  it('Should include offsets', () => {
+    const { getByText } = render(
+      <Col
+        xs={{ span: 4, offset: 1 }}
+        md={{ span: 8, order: 1 }}
+        lg={{ order: 'last' }}
+      >
+        Column
+      </Col>,
+    );
+    getByText('Column').classList.length.should.equal(5);
+    getByText('Column').classList.contains('col-md-8').should.be.true;
+    getByText('Column').classList.contains('order-md-1').should.be.true;
+    getByText('Column').classList.contains('col-4').should.be.true;
+    getByText('Column').classList.contains('offset-1').should.be.true;
+    getByText('Column').classList.contains('order-lg-last').should.be.true;
+  });
+
+  it('Should allow span to be null', () => {
+    const { getByText } = render(
+      // @ts-ignore
+      <Col xs="6" md={{ span: null, order: 1 }}>
+        Column
+      </Col>,
+    );
+    getByText('Column').classList.contains('col-6').should.be.true;
+    getByText('Column').classList.contains('order-md-1').should.be.true;
+    getByText('Column').classList.contains('col-md').should.equal(false);
+  });
+
+  it('Should allow span to be false', () => {
+    const { getByText } = render(
+      <Col xs="6" md={{ span: false, order: 1 }}>
+        Column
+      </Col>,
+    );
+    getByText('Column').classList.contains('col-6').should.be.true;
+    getByText('Column').classList.contains('order-md-1').should.be.true;
+    getByText('Column').classList.contains('col-md').should.equal(false);
+  });
+
+  it('Should allow span to be auto', () => {
+    const { getByText } = render(
+      <Col md="auto" lg={{ span: 'auto' }}>
+        Column
+      </Col>,
+    );
+    getByText('Column').classList.contains('col-md-auto').should.be.true;
+    getByText('Column').classList.contains('col-lg-auto').should.be.true;
+  });
+
+  it('Should have div as default component', () => {
+    const { getByText } = render(<Col>Column</Col>);
+    getByText('Column').tagName.toLowerCase().should.equal('div');
+  });
+});

test/ContainerSpec.tsx

@@ -0,0 +1,33 @@
+import { render } from '@testing-library/react';
+
+import Container from '../src/Container';
+
+describe('<Container>', () => {
+  it('should render props correctly', () => {
+    const { getByText } = render(
+      <Container className="whatever">Container</Container>,
+    );
+    getByText('Container').classList.contains('whatever').should.be.true;
+  });
+
+  it('turns grid into "full-width" layout via "fluid" property set', () => {
+    const { getByText } = render(<Container fluid>Container</Container>);
+    getByText('Container').classList.contains('container-fluid').should.be.true;
+  });
+
+  it('Should include size breakpoint class when fluid is set to sm, md, lg or xl', () => {
+    const { getByText } = render(<Container fluid="sm">Container</Container>);
+    getByText('Container').classList.contains('container-sm').should.be.true;
+  });
+
+  it('allows custom elements instead of "div"', () => {
+    const { getByText } = render(<Container as="section">Container</Container>);
+    getByText('Container').classList.contains('container').should.be.true;
+    getByText('Container').tagName.toLowerCase().should.equal('section');
+  });
+
+  it('Should have div as default component', () => {
+    const { getByText } = render(<Container>Container</Container>);
+    getByText('Container').tagName.toLowerCase().should.equal('div');
+  });
+});