Implement custom lightweight modal #230

Introduce a brand new lightweight and efficient modal component. It is
designed to be visually similar to the previous one to not introduce a
change in feel of the application in a patch release, but behind the
scenes it features:

- Enhanced application speed and reduced bundle size.
- New flexbox-driven layout, eliminating JS calculations.
- Composition API ready for Vue 3.0 #230.

Other changes:

- Adopt idiomatic Vue via `v-modal` binding.
- Add unit tests for both the modal and dialog.
- Remove `vue-js-modal` dependency in favor of the new implementation.
- Adjust modal shadow color to better match theme.
- Add `@vue/test-utils` for unit testing.

tests/unit/presentation/components/Shared/Modal/ModalOverlay.spec.ts

@@ -0,0 +1,106 @@
+import 'mocha';
+import { shallowMount } from '@vue/test-utils';
+import { expect } from 'chai';
+import ModalOverlay from '@/presentation/components/Shared/Modal/ModalOverlay.vue';
+
+const DOM_MODAL_OVERLAY_BACKGROUND_SELECTOR = '.modal-overlay-background';
+
+describe('ModalOverlay.vue', () => {
+  describe('show', () => {
+    it('renders when prop is true', () => {
+      // arrange
+      const wrapper = mountComponent({ showProperty: true });
+
+      // act
+      const modalOverlayBackground = wrapper.find(DOM_MODAL_OVERLAY_BACKGROUND_SELECTOR);
+
+      // assert
+      expect(modalOverlayBackground.exists()).to.equal(true);
+    });
+
+    it('does not render prop is false', () => {
+      // arrange
+      const wrapper = mountComponent({ showProperty: false });
+
+      // act
+      const modalOverlayBackground = wrapper.find(DOM_MODAL_OVERLAY_BACKGROUND_SELECTOR);
+
+      // assert
+      expect(modalOverlayBackground.exists()).to.equal(false);
+    });
+
+    it('sets aria-expanded to `true` prop is true', () => {
+      // arrange & act
+      const wrapper = mountComponent({ showProperty: true });
+
+      // assert
+      const modalOverlayBackground = wrapper.find(DOM_MODAL_OVERLAY_BACKGROUND_SELECTOR);
+      expect(modalOverlayBackground.attributes('aria-expanded')).to.equal('true');
+    });
+
+    describe('on modification', () => {
+      it('does not render when initially visible then turned invisible', async () => {
+        // arrange
+        const wrapper = mountComponent({ showProperty: true });
+        await wrapper.vm.$nextTick();
+
+        // act
+        wrapper.setProps({ show: false });
+        await wrapper.vm.$nextTick();
+
+        // assert
+        const modalOverlayBackground = wrapper.find(DOM_MODAL_OVERLAY_BACKGROUND_SELECTOR);
+        expect(modalOverlayBackground.exists()).to.equal(false);
+      });
+
+      it('renders when initially invisible then turned visible', async () => {
+        // arrange
+        const wrapper = mountComponent({ showProperty: false });
+        await wrapper.vm.$nextTick();
+
+        // act
+        wrapper.setProps({ show: true });
+        await wrapper.vm.$nextTick();
+
+        // assert
+        const modalOverlayBackground = wrapper.find(DOM_MODAL_OVERLAY_BACKGROUND_SELECTOR);
+        expect(modalOverlayBackground.exists()).to.equal(true);
+      });
+    });
+  });
+
+  describe('event emission', () => {
+    it('emits `click` event when clicked', async () => {
+      // arrange
+      const wrapper = mountComponent({ showProperty: true });
+
+      // act
+      const overlayBackground = wrapper.find(DOM_MODAL_OVERLAY_BACKGROUND_SELECTOR);
+      await overlayBackground.trigger('click.self.stop');
+
+      // assert
+      expect(wrapper.emitted().click).to.have.length(1);
+    });
+
+    it('emits `transitionedOut` event after leaving transition', async () => {
+      // arrange
+      const wrapper = mountComponent({ showProperty: true });
+      await wrapper.vm.$nextTick();
+
+      // act
+      wrapper.setProps({ show: false });
+      await wrapper.vm.$nextTick();
+      const transitionWrapper = wrapper.findComponent({ name: 'transition' });
+      transitionWrapper.vm.$emit('after-leave');
+
+      // assert
+      expect(wrapper.emitted().transitionedOut).to.have.length(1);
+    });
+  });
+});
+
+function mountComponent(options?: { readonly showProperty?: boolean }) {
+  return shallowMount(ModalOverlay as unknown, {
+    propsData: options?.showProperty !== undefined ? { show: options?.showProperty } : undefined,
+  });
+}