test: improve alert

babel.config.js

@@ -1,3 +1,14 @@
-module.exports = {
-  presets: ['@babel/preset-env', '@babel/preset-typescript']
+const testingConfig = require('./babel.test.config')
+
+module.exports = api => {
+  const isTest = api.env('test');
+
+  if(isTest) return testingConfig;
+
+  return {
+    presets: [
+      '@babel/preset-env',
+      '@babel/preset-typescript'
+    ]
+  };
 };

babel.test.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        "targets": {
+          "node": "current"
+        }
+      }
+    ],
+    '@babel/preset-typescript'
+  ]
+}

jest.config.js

@@ -6,5 +6,6 @@ module.exports = {
   transformIgnorePatterns: ['<rootDir>/node_modules/(?!(@popperjs)/)'],
   moduleFileExtensions: ['js', 'svelte'],
   bail: false,
-  verbose: false
+  verbose: false,
+  setupFilesAfterEnv: ["@testing-library/jest-dom/extend-expect"]
 };

src/__test__/Alert.spec.js

@@ -1,31 +1,119 @@
 import Alert from '../Alert.svelte';
-import { render, cleanup } from '@testing-library/svelte';
+import { render, cleanup, fireEvent, waitForElementToBeRemoved } from '@testing-library/svelte';
 
 beforeEach(cleanup);
 
 describe('Alert', () => {
-  test('should render text and default color', () => {
-    const { container } = render(Alert, {
+  test('should render with default color and text', () => {
+    const { queryByRole } = render(Alert, {
       props: { children: 'Hello world!' }
     });
-    const alert = container.querySelector('.alert');
+
+    const alert = queryByRole('alert');
     expect(alert.innerHTML.trim()).toBe('Hello world!');
     expect(alert.className).toBe('alert alert-success');
   });
 
   test('should render specified color', () => {
-    const { container } = render(Alert, {
+    const { queryByRole } = render(Alert, {
       props: { color: 'primary', children: 'Hello world!' }
     });
-    const alert = container.querySelector('.alert');
+    const alert = queryByRole('alert');
     expect(alert.className).toBe('alert alert-primary');
   });
 
   test('should render custom class', () => {
-    const { container } = render(Alert, {
+    const { queryByRole } = render(Alert, {
       props: { color: 'danger', children: 'Hello world!', class: 'boogie' }
     });
-    const alert = container.querySelector('.alert');
+    const alert = queryByRole('alert');
     expect(alert.className).toBe('boogie alert alert-danger');
   });
+
+  test('should render dismissible alert', async () => {
+    const { queryByRole, queryByLabelText } = render(Alert, {
+      props: { color: "info", children: 'I can be dismissed!', dismissible: true }
+    });
+
+    const alert = queryByRole('alert');
+    const closeBtn = queryByLabelText("Close");
+
+    expect(alert).toBeInTheDocument();
+    expect(alert.className).toBe('alert alert-info alert-dismissible');
+    expect(closeBtn).toBeInTheDocument();
+
+    fireEvent.click(closeBtn);
+
+    await waitForElementToBeRemoved(alert);
+
+    expect(alert).not.toBeInTheDocument();
+    expect(closeBtn).not.toBeInTheDocument();
+  });
+
+  test('should render dismissible alert', async () => {
+    const { queryByRole, queryByLabelText } = render(Alert, {
+      props: { color: "info", children: 'I can be dismissed!', dismissible: true }
+    });
+
+    const alert = queryByRole('alert');
+    const closeBtn = queryByLabelText("Close");
+
+    expect(alert).toBeInTheDocument();
+    expect(alert.className).toBe('alert alert-info alert-dismissible');
+    expect(closeBtn).toBeInTheDocument();
+
+    await fireEvent.click(closeBtn);
+
+    await waitForElementToBeRemoved(alert, { timeout: 500 });
+
+    expect(alert).not.toBeInTheDocument();
+    expect(closeBtn).not.toBeInTheDocument();
+  });
+
+  test('should render a controlled  alert', async () => {
+    let isOpen = true;
+    const toggle = jest.fn(() => {
+      isOpen = false
+    });
+
+    const { rerender, queryByRole, queryByLabelText } = render(Alert, {
+      props: { color: "info", children: 'I can be dismissed!', isOpen, toggle }
+    });
+
+    const alert = queryByRole('alert');
+    const closeBtn = queryByLabelText("Close");
+
+    expect(alert).toBeInTheDocument();
+    expect(alert.className).toBe('alert alert-info alert-dismissible');
+    expect(closeBtn).toBeInTheDocument();
+
+    await fireEvent.click(closeBtn);
+
+    expect(isOpen).toBe(false);
+    expect(toggle).toHaveBeenCalledTimes(1);
+
+    await rerender({ isOpen, toggle });
+
+    expect(alert).not.toBeInTheDocument();    
+  });
+
+  test('should render alert without fade', async () => {
+    const { queryByRole, queryByLabelText } = render(Alert, {
+      props: { color: "info", children: 'I can be dismissed!', dismissible: true, fade: false }
+    });
+
+    const alert = queryByRole('alert');
+    const closeBtn = queryByLabelText("Close");
+
+    expect(alert).toBeInTheDocument();
+    expect(alert.className).toBe('alert alert-info alert-dismissible');
+    expect(closeBtn).toBeInTheDocument();
+
+    await fireEvent.click(closeBtn);
+
+    await waitForElementToBeRemoved(alert, { timeout: 100 });
+
+    expect(alert).not.toBeInTheDocument();
+    expect(closeBtn).not.toBeInTheDocument();
+  });
 });