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/ModalContent.spec.ts

@@ -0,0 +1,104 @@
+import 'mocha';
+import { shallowMount } from '@vue/test-utils';
+import { expect } from 'chai';
+import ModalContent from '@/presentation/components/Shared/Modal/ModalContent.vue';
+
+const DOM_MODAL_CONTENT_SELECTOR = '.modal-content-content';
+const DOM_MODAL_CONTENT_WRAPPER_SELECTOR = '.modal-content-wrapper';
+
+describe('ModalContent.vue', () => {
+  describe('rendering based on `show` prop', () => {
+    it('renders modal content when `show` prop is true', () => {
+      // arrange
+      const wrapper = mountComponent({ showProperty: true });
+
+      // act
+      const modalContentWrapper = wrapper.find(DOM_MODAL_CONTENT_WRAPPER_SELECTOR);
+
+      // assert
+      expect(modalContentWrapper.exists()).to.equal(true);
+    });
+
+    it('does not render modal content when `show` prop is false', () => {
+      // arrange
+      const wrapper = mountComponent({ showProperty: false });
+
+      // act
+      const modalContentWrapper = wrapper.find(DOM_MODAL_CONTENT_WRAPPER_SELECTOR);
+
+      // assert
+      expect(modalContentWrapper.exists()).to.equal(false);
+    });
+
+    it('does not render modal content by default', () => {
+      // arrange & act
+      const wrapper = mountComponent();
+
+      // assert
+      const modalContentWrapper = wrapper.find(DOM_MODAL_CONTENT_WRAPPER_SELECTOR);
+      expect(modalContentWrapper.exists()).to.equal(false);
+    });
+  });
+
+  it('renders slot content when provided', () => {
+    // arrange
+    const expectedText = 'Slot content';
+    const slotContentClass = 'slot-content';
+
+    // act
+    const wrapper = mountComponent({
+      showProperty: true,
+      slotHtml: `<div class="${slotContentClass}">${expectedText}</div>`,
+    });
+
+    // assert
+    const slotWrapper = wrapper.find(`.${slotContentClass}`);
+    const slotText = slotWrapper.text();
+    expect(slotText).to.equal(expectedText);
+  });
+
+  describe('aria attributes', () => {
+    it('sets aria-expanded to `true` when visible', () => {
+      // arrange & act
+      const wrapper = mountComponent({ showProperty: true });
+
+      // assert
+      const modalContent = wrapper.find(DOM_MODAL_CONTENT_SELECTOR);
+      expect(modalContent.attributes('aria-expanded')).to.equal('true');
+    });
+
+    it('always sets aria-modal to true for the modal content', () => {
+      // arrange & act
+      const wrapper = mountComponent({ showProperty: true });
+
+      // assert
+      const modalContent = wrapper.find(DOM_MODAL_CONTENT_SELECTOR);
+      expect(modalContent.attributes('aria-modal')).to.equal('true');
+    });
+  });
+
+  it('emits `transitionedOut` event after the transition leave', async () => {
+    // arrange
+    const wrapper = mountComponent({ showProperty: true });
+
+    // act
+    await wrapper.vm.$nextTick(); // Ensure the component reflects initial prop
+    wrapper.setProps({ show: false }); // Trigger the transition
+    await wrapper.vm.$nextTick(); // Allow the component to update
+    const transitionWrapper = wrapper.findComponent({ name: 'transition' });
+    transitionWrapper.vm.$emit('after-leave'); // Simulate the after-leave lifecycle hook of the transition
+
+    // assert
+    expect(wrapper.emitted().transitionedOut).to.have.length(1);
+  });
+});
+
+function mountComponent(options?: {
+  readonly showProperty?: boolean,
+  readonly slotHtml?: string,
+}) {
+  return shallowMount(ModalContent as unknown, {
+    propsData: options?.showProperty !== undefined ? { show: options?.showProperty } : undefined,
+    slots: options?.slotHtml !== undefined ? { default: options?.slotHtml } : undefined,
+  });
+}