test: port TableSpec, TabContentSpec and SplitButtonSpec to rtl (react-bootstrap#6179)

* port Tablespec

* migrate tabcontentspec

* port splitbuttonspec

Author: golota60

test/SplitButtonSpec.js

@@ -0,0 +1,142 @@
+import { fireEvent, render } from '@testing-library/react';
+import sinon from 'sinon';
+import SplitButton from '../src/SplitButton';
+import DropdownItem from '../src/DropdownItem';
+
+describe('<SplitButton>', () => {
+  const simple = (
+    <SplitButton data-testid="test-wrapper" title="Title" id="test-id">
+      <DropdownItem>Item 1</DropdownItem>
+      <DropdownItem>Item 2</DropdownItem>
+      <DropdownItem>Item 3</DropdownItem>
+      <DropdownItem>Item 4</DropdownItem>
+    </SplitButton>
+  );
+
+  it('should open the menu when dropdown button is clicked', () => {
+    const { getByTestId } = render(simple);
+    const splitButtonElem = getByTestId('test-wrapper');
+
+    splitButtonElem.classList.contains('show').should.be.false;
+    fireEvent.click(splitButtonElem.children[1]);
+
+    splitButtonElem.classList.contains('show').should.be.true;
+  });
+
+  it('should not open the menu when other button is clicked', () => {
+    const { getByTestId } = render(simple);
+    const splitButtonElem = getByTestId('test-wrapper');
+
+    splitButtonElem.classList.contains('show').should.be.false;
+    fireEvent.click(splitButtonElem.children[0]);
+    splitButtonElem.classList.contains('show').should.be.false;
+  });
+
+  it('should invoke onClick when SplitButton.Button is clicked (prop)', (done) => {
+    const { getByTestId } = render(
+      <SplitButton
+        data-testid="test-wrapper"
+        title="Title"
+        id="test-id"
+        onClick={() => done()}
+      >
+        <DropdownItem>Item 1</DropdownItem>
+      </SplitButton>,
+    );
+    const splitButtonElem = getByTestId('test-wrapper');
+
+    fireEvent.click(splitButtonElem.firstElementChild!);
+  });
+
+  it('should not invoke onClick when SplitButton.Toggle is clicked (prop)', () => {
+    const onClickSpy = sinon.spy();
+
+    const { getByTestId } = render(
+      <SplitButton
+        data-testid="test-wrapper"
+        title="Title"
+        id="test-id"
+        onClick={onClickSpy}
+      >
+        <DropdownItem>Item 1</DropdownItem>
+      </SplitButton>,
+    );
+    const splitButtonElem = getByTestId('test-wrapper');
+    fireEvent.click(splitButtonElem.children[1]);
+
+    onClickSpy.should.not.have.been.called;
+  });
+
+  it('Should pass disabled to both buttons', () => {
+    const { getByTestId } = render(
+      <SplitButton
+        data-testid="test-wrapper"
+        title="Title"
+        id="test-id"
+        disabled
+      >
+        <DropdownItem>Item 1</DropdownItem>
+      </SplitButton>,
+    );
+    const splitButtonElem = getByTestId('test-wrapper');
+
+    splitButtonElem.getAttribute('disabled')!.should.exist;
+    splitButtonElem.children[0].getAttribute('disabled')!.should.exist;
+    splitButtonElem.children[1].getAttribute('disabled')!.should.exist;
+  });
+
+  it('Should set target attribute on anchor', () => {
+    const { getByTestId } = render(
+      <SplitButton
+        title="Title"
+        id="test-id"
+        data-testid="test-wrapper"
+        href="/some/unique-thing/"
+        target="_blank"
+      >
+        <DropdownItem eventKey="1">DropdownItem 1 content</DropdownItem>
+      </SplitButton>,
+    );
+    const splitButtonElem = getByTestId('test-wrapper');
+    splitButtonElem.firstElementChild!.tagName.toLowerCase().should.equal('a');
+    splitButtonElem
+      .firstElementChild!.getAttribute('href')!
+      .should.equal('/some/unique-thing/');
+    splitButtonElem
+      .firstElementChild!.getAttribute('target')!
+      .should.equal('_blank');
+  });
+
+  it('should set accessible label on toggle', () => {
+    const { getByText } = render(simple);
+    const toggleLabelElem = getByText('Toggle dropdown');
+    toggleLabelElem.classList.contains('visually-hidden').should.be.true;
+  });
+
+  it('should set aria-label on toggle from toggleLabel', () => {
+    const { getByText } = render(
+      <SplitButton title="Title" id="test-id" toggleLabel="Label">
+        <DropdownItem>Item 1</DropdownItem>
+      </SplitButton>,
+    );
+    const labelElem = getByText('Label');
+    labelElem.classList.contains('visually-hidden').should.be.true;
+  });
+
+  it('should set type attribute from type', () => {
+    const { getByTestId } = render(
+      <SplitButton
+        data-testid="test-wrapper"
+        title="Title"
+        id="test-id"
+        type="submit"
+      >
+        <DropdownItem>Item 1</DropdownItem>
+      </SplitButton>,
+    );
+    const splitButtonElem = getByTestId('test-wrapper');
+    splitButtonElem
+      .firstElementChild!.getAttribute('type')!
+      .should.equal('submit');
+  });
+});

test/SplitButtonSpec.tsx

@@ -0,0 +1,11 @@
+import { render } from '@testing-library/react';
+
+import TabContent from '../src/TabContent';
+
+describe('<TabContent>', () => {
+  it('Should have div as default component', () => {
+    const { container } = render(<TabContent />);
+
+    container.tagName.toLowerCase().should.equal('div');
+  });
+});

test/TabContentSpec.js

@@ -0,0 +1,69 @@
+import { render } from '@testing-library/react';
+
+import Table from '../src/Table';
+
+describe('Table', () => {
+  it('Should be a table', () => {
+    const { getByTestId } = render(<Table data-testid="test" />);
+    const tableElem = getByTestId('test');
+
+    tableElem.classList.contains('table').should.be.true;
+    tableElem.tagName.toLowerCase().should.equal('table');
+  });
+
+  it('Should have correct class when striped', () => {
+    const { getByTestId } = render(<Table data-testid="test" striped />);
+    const tableElem = getByTestId('test');
+
+    tableElem.classList.contains('table-striped').should.be.true;
+  });
+
+  it('Should have correct class when hover', () => {
+    const { getByTestId } = render(<Table data-testid="test" hover />);
+    const tableElem = getByTestId('test');
+
+    tableElem.classList.contains('table-hover').should.be.true;
+  });
+
+  it('Should have correct class when bordered', () => {
+    const { getByTestId } = render(<Table data-testid="test" bordered />);
+    const tableElem = getByTestId('test');
+
+    tableElem.classList.contains('table-bordered').should.be.true;
+  });
+
+  it('Should have correct class when borderless', () => {
+    const { getByTestId } = render(<Table data-testid="test" borderless />);
+    const tableElem = getByTestId('test');
+
+    tableElem.classList.contains('table-borderless').should.be.true;
+  });
+
+  it('Should have correct class when small', () => {
+    const { getByTestId } = render(<Table data-testid="test" size="sm" />);
+    const tableElem = getByTestId('test');
+
+    tableElem.classList.contains('table-sm').should.be.true;
+  });
+
+  it('Should have correct class when dark', () => {
+    const { getByTestId } = render(<Table data-testid="test" variant="dark" />);
+    const tableElem = getByTestId('test');
+
+    tableElem.classList.contains('table-dark').should.be.true;
+  });
+
+  it('Should have responsive wrapper', () => {
+    const { container } = render(<Table responsive />);
+    const tableElem = container.firstElementChild!;
+
+    tableElem!.classList.contains('table-responsive').should.be.true;
+  });
+
+  it('Should have responsive breakpoints', () => {
+    const { container } = render(<Table responsive="sm" />);
+    const tableElem = container.firstElementChild!;
+
+    tableElem!.classList.contains('table-responsive-sm').should.be.true;
+  });
+});