9e5491fdbf
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.
54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
import 'mocha';
|
|
import { expect } from 'chai';
|
|
import { NonCollapsing, hasDirective } from '@/presentation/components/Scripts/View/Cards/NonCollapsingDirective';
|
|
|
|
const expectedAttributeName = 'data-interaction-does-not-collapse';
|
|
|
|
describe('NonCollapsingDirective', () => {
|
|
describe('NonCollapsing', () => {
|
|
it('adds expected attribute to the element when inserted', () => {
|
|
// arrange
|
|
const element = createElementMock();
|
|
// act
|
|
NonCollapsing.inserted(element, undefined, undefined, undefined);
|
|
// assert
|
|
expect(element.hasAttribute(expectedAttributeName));
|
|
});
|
|
});
|
|
|
|
describe('hasDirective', () => {
|
|
it('returns true if the element has expected attribute', () => {
|
|
// arrange
|
|
const element = createElementMock();
|
|
element.setAttribute(expectedAttributeName, undefined);
|
|
// act
|
|
const actual = hasDirective(element);
|
|
// assert
|
|
expect(actual).to.equal(true);
|
|
});
|
|
it('returns true if the element has a parent with expected attribute', () => {
|
|
// arrange
|
|
const parent = createElementMock();
|
|
const element = createElementMock();
|
|
parent.appendChild(element);
|
|
element.setAttribute(expectedAttributeName, undefined);
|
|
// act
|
|
const actual = hasDirective(element);
|
|
// assert
|
|
expect(actual).to.equal(true);
|
|
});
|
|
it('returns false if nor the element or its parent has expected attribute', () => {
|
|
// arrange
|
|
const element = createElementMock();
|
|
// act
|
|
const actual = hasDirective(element);
|
|
// assert
|
|
expect(actual).to.equal(false);
|
|
});
|
|
});
|
|
|
|
function createElementMock(): HTMLElement {
|
|
return document.createElement('div');
|
|
}
|
|
});
|