test: port PopoverSpec, PaginationSpec and PageItemSpec to rtl (#6182)

* port popoverspec to rtl

* migrate pagination to rtl

* port pageitemspec to rtl

* clean imports

* adjust tests for firefox

test/PageItemSpec.tsx

@@ -0,0 +1,54 @@
+import { render } from '@testing-library/react';
+
+import PageItem, { First } from '../src/PageItem';
+
+describe('<PageItem>', () => {
+  describe('<First>', () => {
+    it('should have expected default innerText', () => {
+      const { getByTestId } = render(<First data-testid="test" />);
+      const firstElem = getByTestId('test');
+
+      firstElem.classList.contains('page-link').should.be.true;
+
+      firstElem.firstElementChild!.tagName.toLowerCase().should.equal('span');
+      firstElem
+        .firstElementChild!.getAttribute('aria-hidden')!
+        .should.equal('true');
+      firstElem.firstElementChild!.textContent!.should.equal('«');
+    });
+    it('should have expected custom innerText', () => {
+      const innerHTML = 'custom';
+      const { getByTestId } = render(
+        <First data-testid="test">{innerHTML}</First>,
+      );
+      const firstElem = getByTestId('test');
+
+      firstElem.firstElementChild!.textContent!.should.equal(innerHTML);
+    });
+
+    it('should render a nested span if active is true', () => {
+      const { container } = render(<PageItem active />);
+      const pageItemElem = container.firstElementChild!;
+      const pageItemInnerElem = pageItemElem.firstElementChild!;
+
+      pageItemElem.classList.contains('active').should.be.true;
+      pageItemInnerElem.classList.contains('page-link').should.be.true;
+
+      // check if nested span is rendered
+      pageItemInnerElem
+        .firstElementChild!.tagName.toLowerCase()
+        .should.equal('span');
+    });
+
+    it('should render a span if disabled is true', () => {
+      const { container } = render(<PageItem disabled />);
+      const pageItemElem = container.firstElementChild!;
+      const pageItemInnerElem = pageItemElem.firstElementChild!;
+
+      pageItemElem.classList.contains('disabled').should.be.true;
+
+      pageItemInnerElem.classList.contains('page-link').should.be.true;
+      pageItemInnerElem.getAttribute('disabled')!.should.exist;
+    });
+  });
+});

test/PaginationSpec.tsx

@@ -0,0 +1,23 @@
+import { render } from '@testing-library/react';
+
+import Pagination from '../src/Pagination';
+
+describe('<Pagination>', () => {
+  it('should have class', () => {
+    const { getByTestId } = render(
+      <Pagination data-testid="test">Item content</Pagination>,
+    );
+    const paginationElem = getByTestId('test');
+    paginationElem.classList.contains('pagination').should.be.true;
+  });
+
+  it('should render correctly when size is set', () => {
+    const { getByTestId } = render(
+      <Pagination data-testid="test" size="sm">
+        Item content
+      </Pagination>,
+    );
+    const paginationElem = getByTestId('test');
+    paginationElem.classList.contains('pagination-sm').should.be.true;
+  });
+});

test/PopoverSpec.tsx

@@ -0,0 +1,29 @@
+import { render } from '@testing-library/react';
+
+import Popover from '../src/Popover';
+
+describe('Popover', () => {
+  it('Should output a popover title and content', () => {
+    const { getByTestId } = render(
+      <Popover data-testid="test" id="test-popover">
+        <Popover.Header>Popover title</Popover.Header>
+        <Popover.Body>
+          <strong>Popover Content</strong>
+        </Popover.Body>
+      </Popover>,
+    );
+    const popoverElem = getByTestId('test');
+    const popoverArrowElem = popoverElem.children[0]!;
+    const popoverHeaderElem = popoverElem.children[1]!;
+    const popoverBodyElem = popoverElem.children[2]!;
+
+    popoverElem.getAttribute('x-placement')!.should.equal('right');
+    popoverElem.getAttribute('role')!.should.equal('tooltip');
+    popoverElem.classList.contains('popover').should.be.true;
+    popoverElem.classList.contains('bs-popover-end').should.be.true;
+
+    popoverArrowElem.classList.contains('popover-arrow').should.be.true;
+    popoverHeaderElem.classList.contains('popover-header').should.be.true;
+    popoverBodyElem.classList.contains('popover-body').should.be.true;
+  });
+});