Tests: Improve the Code Coverage initiative using Jest

.github/workflows/tests.yml

@@ -0,0 +1,14 @@
+name: Tests
+
+on: [push, pull_request]
+
+jobs:
+ test:
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v2
+ - uses: actions/setup-node@v1
+ with:
+ node-version: 16.x
+ - run: npm ci
+ - run: npm test

__tests__/modal.test.js

@@ -0,0 +1,86 @@
+const Modal = require('../src/components/modal').default;
+
+test('Modal constructor throws an error without a target element', () => {
+ expect(() => new Modal()).toThrow('TargetEl is required for the use of Modal component.');
+});
+
+describe('Modal class', () => {
+ let modal;
+
+ beforeEach(() => {
+ const targetEl = document.createElement('div');
+ document.body.appendChild(targetEl);
+ modal = new Modal(targetEl, { _isHidden: false });
+ });
+
+ afterEach(() => {
+ modal._targetEl.parentNode.removeChild(modal._targetEl);
+ });
+
+ test('constructor initializes', () => {
+ expect(modal._targetEl).toBeDefined();
+ expect(modal._isHidden).toBe(true);
+ });
+
+ test('show method shows the modal', () => {
+ modal.show();
+ expect(modal._isHidden).toBe(false);
+ expect(modal.isVisible()).toBe(true);
+ });
+
+ test('hide method hides the modal', () => {
+ modal.hide();
+ expect(modal._isHidden).toBe(true);
+ expect(modal.isHidden()).toBe(true);
+ });
+
+ test('should be closed if escape key is pressed', () => {
+ const event = new Event('keydown', { keyCode: 27 });
+ document.dispatchEvent(event);
+ expect(modal._isHidden).toBe(true);
+ });
+
+ test('if closable is false, escape key should not close it', () => {
+ modal._options.closable = false;
+ modal.show();
+ const event = new Event('keydown', { keyCode: 27 });
+ document.dispatchEvent(event);
+ expect(modal._isHidden).toBe(false);
+ });
+
+ test('if backdrop is dynamic, escape key should not close it', () => {
+ modal._options.backdrop = 'dynamic';
+ modal.show();
+ const event = new Event('keydown', { keyCode: 27 });
+ document.dispatchEvent(event);
+ expect(modal._isHidden).toBe(false);
+ });
+
+ test('if modal is open, clicking outside of it should close it', () => {
+ const event = new Event('click');
+ document.dispatchEvent(event);
+ expect(modal._isHidden).toBe(true);
+ });
+
+ test('if closable is false, clicking outside of it should not close it', () => {
+ modal._options.closable = false;
+ modal.show();
+ const event = new Event('click');
+ document.dispatchEvent(event);
+ expect(modal._isHidden).toBe(false);
+ });
+
+ test('if backdrop is dynamic, clicking outside of it should not close it', () => {
+ modal._options.backdrop = 'dynamic';
+ modal.show();
+ const event = new Event('click');
+ document.dispatchEvent(event);
+ expect(modal._isHidden).toBe(false);
+ });
+
+ test('should create backdrop element when shown', () => {
+ expect(modal._backdropEl).toBeNull();
+ modal.show();
+ expect(modal._backdropEl).not.toBeNull();
+ });
+});

jest.config.js

@@ -0,0 +1,5 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+ preset: 'ts-jest',
+ testEnvironment: 'jest-environment-jsdom',
+};