test: move toast tests to RTL (#6172)

* test: move toast tests to RTL

* cr changes

test/ToastBodySpec.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import Toast from '../src/Toast';
+
+describe('Toast.Body', () => {
+  it('will pass all props to the created div and renders its children', () => {
+    const content = <strong>Content</strong>;
+    const { container } = render(
+      <Toast.Body className="custom-class">{content}</Toast.Body>,
+    );
+    container.firstElementChild!.classList.contains('custom-class').should.be
+      .true;
+    container.firstElementChild!.classList.contains('toast-body').should.be
+      .true;
+  });
+});

test/ToastContainerSpec.tsx

@@ -0,0 +1,53 @@
+import { render } from '@testing-library/react';
+import ToastContainer, { ToastPosition } from '../src/ToastContainer';
+
+const expectedClasses: Record<ToastPosition, Array<string>> = {
+  'top-start': ['position-absolute', 'top-0', 'start-0'],
+  'top-center': [
+    'position-absolute',
+    'top-0',
+    'start-50',
+    'translate-middle-x',
+  ],
+  'top-end': ['position-absolute', 'top-0', 'end-0'],
+  'middle-start': [
+    'position-absolute',
+    'top-50',
+    'start-0',
+    'translate-middle-y',
+  ],
+  'middle-center': [
+    'position-absolute',
+    'top-50',
+    'start-50',
+    'translate-middle',
+  ],
+  'middle-end': ['position-absolute', 'top-50', 'end-0', 'translate-middle-y'],
+  'bottom-start': ['position-absolute', 'bottom-0', 'start-0'],
+  'bottom-center': [
+    'position-absolute',
+    'bottom-0',
+    'start-50',
+    'translate-middle-x',
+  ],
+  'bottom-end': ['position-absolute', 'bottom-0', 'end-0'],
+};
+
+describe('ToastContainer', () => {
+  it('should render a basic toast container', () => {
+    const { container } = render(<ToastContainer />);
+    container.firstElementChild!.classList.contains('toast-container').should.be
+      .true;
+  });
+
+  Object.keys(expectedClasses).forEach((position: ToastPosition) => {
+    it(`should render position=${position}`, () => {
+      const { container } = render(<ToastContainer position={position} />);
+      expectedClasses[position].map(
+        (className) =>
+          container.firstElementChild!.classList.contains(className).should.be
+            .true,
+      );
+    });
+  });
+});

test/ToastHeaderSpec.tsx

@@ -0,0 +1,28 @@
+import { render } from '@testing-library/react';
+
+import Toast from '../src/Toast';
+
+describe('Toast.Header', () => {
+  it('will pass all props to the created div and renders its children', () => {
+    const { container } = render(
+      <Toast.Header>
+        <strong>content</strong>
+      </Toast.Header>,
+    );
+    container.firstElementChild!.tagName === 'div';
+    container.firstElementChild!.firstElementChild!.tagName === 'strong';
+    container.firstElementChild!.classList.contains('toast-header').should.be
+      .true;
+  });
+
+  it('should render close button variant', () => {
+    const { container } = render(
+      <Toast.Header closeButton closeVariant="white">
+        <strong>content</strong>
+      </Toast.Header>,
+    );
+    container
+      .firstElementChild!.getElementsByTagName('button')[0]
+      .classList.contains('btn-close-white').should.be.true;
+  });
+});