| import './index'; |
| import { $, $$ } from 'common-sk/modules/dom'; |
| import { eventPromise, setUpElementUnderTest } from '../../../infra-sk/modules/test_util'; |
| |
| const aDigest = '6246b773851984c726cb2e1cb13510c2'; |
| const bDigest = '99c58c7002073346ff55f446d47d6311'; |
| |
| describe('image-compare-sk', () => { |
| const newInstance = setUpElementUnderTest('image-compare-sk'); |
| |
| let imageCompareSk; |
| beforeEach(() => imageCompareSk = newInstance()); |
| |
| describe('layout with right and left', () => { |
| beforeEach(() => { |
| imageCompareSk.left = { |
| digest: aDigest, |
| title: 'a digest title', |
| detail: 'example.com#aDigest', |
| }; |
| imageCompareSk.right = { |
| digest: bDigest, |
| title: 'the other image', |
| detail: 'example.com#bDigest', |
| }; |
| }); |
| |
| it('has three images (left, diff, right) with a zoom button', () => { |
| const images = $('img', imageCompareSk); |
| expect(images.length).to.equal(3); |
| const zBtn = $$('button.zoom_btn'); |
| expect(zBtn.hidden).to.be.false; |
| }); |
| |
| it('captions the images with the respective links', () => { |
| const captions = $('figcaption a', imageCompareSk); |
| expect(captions.length).to.equal(2); |
| const captionsText = captions.map((c) => c.textContent); |
| const captionsHref = captions.map((c) => c.href.substring(c.href.lastIndexOf('/'))); |
| |
| expect(captionsText).to.contain('a digest title'); |
| expect(captionsText).to.contain('the other image'); |
| |
| expect(captionsHref).to.contain('/example.com#aDigest'); |
| expect(captionsHref).to.contain('/example.com#bDigest'); |
| }); |
| |
| it('fires events when the zoom dialog is opened and closed', async () => { |
| expect($$('multi-zoom-sk', imageCompareSk)).to.be.null; // not rendered at first |
| const openPromise = eventPromise('zoom-dialog-opened'); |
| $$('button.zoom_btn', imageCompareSk).click(); |
| await openPromise; |
| expect($$('multi-zoom-sk', imageCompareSk)).to.not.be.null; // element should be there now. |
| |
| const closePromise = eventPromise('zoom-dialog-closed'); |
| $$('button.close_btn', imageCompareSk).click(); |
| await closePromise; |
| expect($$('multi-zoom-sk', imageCompareSk)).to.be.null; // it should be removed from the DOM. |
| }); |
| }); |
| |
| describe('layout with just left', () => { |
| beforeEach(() => { |
| imageCompareSk.left = { |
| src: aDigest, |
| title: 'a digest title', |
| detail: 'example.com#aDigest', |
| }; |
| }); |
| |
| it('has one image and no zoom button', () => { |
| const images = $('img', imageCompareSk); |
| expect(images.length).to.equal(1); |
| const zBtn = $$('button.zoom_btn', imageCompareSk); |
| expect(zBtn.hidden).to.be.true; |
| }); |
| }); |
| }); |