Merge pull request #375 from DaniAcu/daniui/add-alert-test

test: improve alert

babel.config.js

@@ -1,3 +1,21 @@
 module.exports = {
-  presets: ['@babel/preset-env', '@babel/preset-typescript']
+  presets: [
+    '@babel/preset-env',
+    '@babel/preset-typescript'
+  ],
+  env: {
+    test: {
+      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();
+  });
 });