@exadel/esl
Version:
Exadel Smart Library (ESL) is the lightweight custom elements library that provide a set of super-flexible components
99 lines (98 loc) • 5.43 kB
JavaScript
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
import { ESLCarousel } from '../../core/esl-carousel';
import { ESLCarouselSlide } from '../../core/esl-carousel.slide';
import { ESLCarouselDummyRenderer } from '../common/esl-carousel.dummy.renderer';
describe('ESLCarousel: DOM manipulation', () => {
const twoTicks = () => Promise.resolve().then(() => Promise.resolve());
beforeAll(() => {
ESLCarousel.register();
ESLCarouselDummyRenderer.register();
});
describe('ESLCarouselSlide ensure connection to the carousel inside the slide area', () => {
const $carousel = ESLCarousel.create();
beforeEach(() => __awaiter(void 0, void 0, void 0, function* () {
document.body.appendChild($carousel);
yield ESLCarousel.registered;
}));
afterAll(() => document.body.innerHTML = '');
test('DOM element marked as slide outside carousel does not move itself', () => __awaiter(void 0, void 0, void 0, function* () {
const $slide = document.createElement('div');
$slide.setAttribute('esl-carousel-slide', '');
document.body.appendChild($slide);
yield Promise.resolve();
expect($slide.parentElement).toBe(document.body);
}));
test('DOM element marked as slide inside carousel moves itself to the carousel area', () => __awaiter(void 0, void 0, void 0, function* () {
jest.spyOn(console, 'debug').mockImplementationOnce(() => { });
const $slide = document.createElement('div');
$slide.setAttribute('esl-carousel-slide', '');
$carousel.appendChild($slide);
yield twoTicks();
expect($slide.parentElement).toBe($carousel.$slidesArea);
}));
test('DOM element marked as slide inside carousel area does not process twice', () => __awaiter(void 0, void 0, void 0, function* () {
const $slide = document.createElement('div');
$slide.setAttribute('esl-carousel-slide', '');
$carousel.$slidesArea.appendChild($slide);
const connectedCallbackSpy = jest.spyOn(ESLCarouselSlide.prototype, 'connectedCallback');
yield twoTicks();
expect($carousel.$slides).toContain($slide);
expect($slide.parentElement).toBe($carousel.$slidesArea);
expect(connectedCallbackSpy).toHaveBeenCalledTimes(1);
}));
test('Usage of the ESLCarousel.addSlide method creates proper slide', () => __awaiter(void 0, void 0, void 0, function* () {
const $slide = document.createElement('div');
$carousel.addSlide($slide);
yield twoTicks();
expect($carousel.$slides).toContain($slide);
expect($slide.parentElement).toBe($carousel.$slidesArea);
}));
test('Removal of the slide ensures carousel be aware of it', () => __awaiter(void 0, void 0, void 0, function* () {
const $slide = document.createElement('div');
$carousel.addSlide($slide);
yield twoTicks();
expect($carousel.$slides).toContain($slide);
expect($slide.parentElement).toBe($carousel.$slidesArea);
$slide.remove();
yield twoTicks();
expect($carousel.$slides).not.toContain($slide);
expect($slide.parentElement).toBe(null);
}));
});
describe('ESLCarousel manipulation does not affect slides', () => {
const $carousel = ESLCarousel.create();
const $slides = Array.from({ length: 2 }, () => {
const $slide = document.createElement('div');
$slide.setAttribute('esl-carousel-slide', '');
return $slide;
});
beforeEach(() => __awaiter(void 0, void 0, void 0, function* () {
document.body.appendChild($carousel);
yield ESLCarousel.registered;
$slides.forEach(($slide) => $carousel.addSlide($slide));
yield twoTicks();
}));
afterAll(() => document.body.innerHTML = '');
test('Carousel removal does not affect slides', () => __awaiter(void 0, void 0, void 0, function* () {
$carousel.remove();
yield twoTicks();
$slides.forEach(($slide) => expect($slide.parentElement).toBe($carousel.$slidesArea));
}));
test('Carousel movement does not affect slides', () => __awaiter(void 0, void 0, void 0, function* () {
const $someParent = document.createElement('div');
document.body.appendChild($someParent);
$someParent.appendChild($carousel);
yield twoTicks();
expect($carousel.parentElement).toBe($someParent);
expect($carousel.$slides).toEqual($slides);
}));
});
});