Skip to content

Commit

Permalink
WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
@cristinecula
cristinecula committed Dec 6, 2023
1 parent 6f4c3cd commit 8d7686a
Show file tree
Hide file tree
Showing 2 changed files with 214 additions and 149 deletions.
4 changes: 2 additions & 2 deletions cosmoz-image-viewer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,8 +70,8 @@ const renderCosmozImageViewer = ({
${when(
shouldShow(host.showNav, total, 2),
() => html`
<button class="nav" @click=${previousImage}>${leftArrow}</button>
<button class="nav" @click=${nextImage}>${rightArrow}</button>
<button class="nav" name="prev" @click=${previousImage}>${leftArrow}</button>
<button class="nav" name="next" @click=${nextImage}>${rightArrow}</button>
`,
)}
<div class="flex"></div>
Expand Down
359 changes: 212 additions & 147 deletions test/basic.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,169 +1,234 @@
import {
assert, fixture, html, aTimeout, nextFrame
} from '@open-wc/testing';
import { assert, fixture, html, aTimeout, nextFrame } from '@open-wc/testing';
import { perform } from '@neovici/cfg/web/perform.js';

import '../cosmoz-image-viewer.js';

import sinon from 'sinon';

const cosmozImageViewerFixture = html`<cosmoz-image-viewer show-zoom></cosmoz-image-viewer>`;

sinon.assert.expose(assert, { prefix: '' });
const ignoreResizeLoopError = () => {
const e = window.onerror;
window.onerror = function (err) {
if (
err === 'ResizeObserver loop limit exceeded' ||
err === 'ResizeObserver loop completed with undelivered notifications.'
) {
// eslint-disable-next-line no-console
console.warn('Ignored: ' + err);
return false;
}
return e(...arguments);
};
};

const absolute = (a) => window.location.origin + a;

// eslint-disable-next-line max-lines-per-function
suite('cosmoz-image-viewer', () => {
let imageViewer;

suiteSetup(ignoreResizeLoopError);
setup(async () => {
imageViewer = await fixture(cosmozImageViewerFixture);
imageViewer.images = [
'/stories/images/stockholm.jpg',
'/stories/images/strasbourg.jpg',
'/stories/images/cosmos1.jpg'
];
await nextFrame();
});

test('nextImage updates selected', async () => {
assert.equal(imageViewer.selectedImageNumber, 1);
imageViewer.nextImage();
await nextFrame();
assert.equal(imageViewer.selectedImageNumber, 2);
await fixture(
html`<cosmoz-image-viewer
show-zoom
show-nav
show-fullscreen
show-page-number
show-detach
.images=${[
'/stories/images/stockholm.jpg',
'/stories/images/strasbourg.jpg',
'/stories/images/cosmos1.jpg',
].map(absolute)}
></cosmoz-image-viewer>`,
);
});

test('previousImage updates selected', async () => {
imageViewer.nextImage();

await nextFrame();
assert.equal(imageViewer.selectedImageNumber, 2);

imageViewer.nextImage();

await nextFrame();
assert.equal(imageViewer.selectedImageNumber, 3);

imageViewer.previousImage();
await nextFrame();

assert.equal(imageViewer.selectedImageNumber, 2);
test('can move through images', async () => {
await perform(async ({ page, expect }) => {
await expect(
page.locator('img[src$="/stories/images/stockholm.jpg"]'),
).toBeVisible();

await page.locator('cosmoz-image-viewer').hover();
await page.locator('button[name="next"]').click();
await expect(
page.locator('img[src$="/stories/images/strasbourg.jpg"]'),
).toBeVisible();

await page.locator('button[name="next"]').click();
await expect(
page.locator('img[src$="/stories/images/cosmos1.jpg"]'),
).toBeVisible();

// wait for the slider to finish the animation
await expect(page.locator('img')).toHaveCount(1);

await page.locator('button[name="prev"]').click();
await expect(
page.locator('img[src$="/stories/images/strasbourg.jpg"]'),
).toBeVisible();

await page.locator('button[name="prev"]').click();
await expect(
page.locator('img[src$="/stories/images/stockholm.jpg"]'),
).toBeVisible();
});
});

test('openFullScreen creates dialog', () => {
imageViewer.openFullscreen();
const dialog = imageViewer.imageOverlay;
assert.isDefined(dialog, 'Expected openFullscreen to create dialog if it was undefined');
assert.equal(dialog.tagName, 'COSMOZ-IMAGE-VIEWER-OVERLAY');
assert.isFunction(dialog.open, 'Expected openFullscreen to create dialog and dilog.open to be a function');
assert.isTrue(dialog.opened);
assert.equal(dialog.id, 'cosmoz-image-viewer-overlay');
assert.equal(dialog.images.length, 3);
assert.equal(dialog.images, imageViewer.images);
});
test('can open and close fullscreen', async () => {
await perform(async ({ page, expect }) => {
await page.locator('cosmoz-image-viewer').hover();
await page.locator('button[title="Fullscreen image"]').click();

test('pdf creation works', async () => {
const blob = await imageViewer.downloadPdf(imageViewer.images);
assert.isAbove(blob.size, 10000);
});
await expect(page.locator('cosmoz-image-viewer')).toHaveCount(2);
await expect(
page
.locator('body > cosmoz-image-viewer')
.locator('img[src$="/stories/images/stockholm.jpg"]'),
).toBeVisible();

test('_close fires event close-tapped', () => {
let called = false;
imageViewer.addEventListener('close-tapped', () => {
called = true;
await page.locator('button[title="Close fullscreen"]').click();
await expect(page.locator('cosmoz-image-viewer')).toHaveCount(1);
});
imageViewer._close();
assert.isTrue(called);
});
});

suite('cosmoz-image-viewer-no-images', () => {
let imageViewer;

setup(async () => {
imageViewer = await fixture(cosmozImageViewerFixture);
Object.assign(imageViewer, {
images: [],
showZoom: true,
showNav: true,
showFullscreen: true,
showDetach: true
test('can create pdf', async () => {
const filename = await perform(async ({ page }) => {
const downloadPromise = page.waitForEvent('download');
await page.locator('button[title="Download images"]').click();
const download = await downloadPromise;
return download.suggestedFilename();
});
});

test('action items are hidden', () => {
assert.equal(imageViewer._showNav, false);
assert.equal(imageViewer._showZoom, false);
assert.equal(imageViewer._showFullscreen, false);
assert.equal(imageViewer._showDetach, false);
});

test('no image info is shown', () => {
assert.equal(imageViewer._hideNoImageInfo, false);
});
});

suite('cosmoz-image-viewer-loading-error', () => {
let imageViewer;
const errorDiv = () => imageViewer.$.slider.querySelector('.error'),
displayNone = element => element.offsetParent === null || element.getAttribute('hidden') === 'true';

setup(async () => {
imageViewer = await fixture(cosmozImageViewerFixture);
imageViewer.images = [
'xyz.jpg',
'/stories/images/stockholm.jpg',
'/stories/images/strasbourg.jpg'
];
await nextFrame();
});

test('error is shown', async () => {
const errEl = errorDiv();
await aTimeout(500);
assert.equal(displayNone(errEl), false);
});

test('error is hidden if next image loaded successfully', async () => {
imageViewer.nextImage();
await nextFrame();
await aTimeout(500);
const errEl = errorDiv();
assert.equal(displayNone(errEl), true);
assert.equal(filename, 'archive.pdf');
});
});

suite('cosmoz-image-viewer-overlay', () => {
let overlay;

setup(async () => {
overlay = await fixture(html`<cosmoz-image-viewer-overlay></cosmoz-image-viewer-overlay>`);
overlay.images = [
'/stories/images/stockholm.jpg',
'/stories/images/strasbourg.jpg',
'/stories/images/cosmos1.jpg'
];
});

test('_trackHandler does not call close if detail state is not end', () => {
const event = new CustomEvent('testEvent', {
detail: {
dy: 1000
}
}),
spyClose = sinon.spy(overlay, 'close');
overlay._trackHandler(event);
assert.notCalled(spyClose);
});
test('_trackHandler does call close', () => {
const event = new CustomEvent('testEvent', {
detail: {
state: 'end',
dy: 1000
}
}),
spyClose = sinon.spy(overlay, 'close');

overlay._trackHandler(event);
assert.calledOnce(spyClose);
test('can detach to separate window', async () => {
await perform(async ({ page, expect }) => {
// detach to popup
await page.locator('cosmoz-image-viewer').hover();
const popupPromise = page.waitForEvent('popup');
await page
.locator('button[title="Detach image to separate window"]')
.click();
const popup = await popupPromise;

// the viewer is visible only in the popup
await expect(popup.locator('cosmoz-image-viewer')).toBeVisible();
await expect(
popup.locator('img[src$="/stories/images/stockholm.jpg"]'),
).toBeVisible();
await expect(
page.locator('img[src$="/stories/images/stockholm.jpg"]'),
).not.toBeVisible();

// you can navigate the images in the popup
await popup.locator('cosmoz-image-viewer').hover();
await popup.locator('button[name="next"]').click();
await expect(
popup.locator('img[src$="/stories/images/strasbourg.jpg"]'),
).toBeVisible();

// you can close the popp
await popup.locator('cosmoz-image-viewer').hover();
await popup.close({ runBeforeUnload: true });

// the main instance is synchronized to the popup
await expect(
page.locator('img[src$="/stories/images/strasbourg.jpg"]'),
).toBeVisible();
});
});

});
// suite('cosmoz-image-viewer-no-images', () => {
// let imageViewer;

// setup(async () => {
// imageViewer = await fixture(cosmozImageViewerFixture);
// Object.assign(imageViewer, {
// images: [],
// showZoom: true,
// showNav: true,
// showFullscreen: true,
// showDetach: true,
// });
// });

// test('action items are hidden', () => {
// assert.equal(imageViewer._showNav, false);
// assert.equal(imageViewer._showZoom, false);
// assert.equal(imageViewer._showFullscreen, false);
// assert.equal(imageViewer._showDetach, false);
// });

// test('no image info is shown', () => {
// assert.equal(imageViewer._hideNoImageInfo, false);
// });
// });

// suite('cosmoz-image-viewer-loading-error', () => {
// let imageViewer;
// const errorDiv = () => imageViewer.$.slider.querySelector('.error'),
// displayNone = (element) =>
// element.offsetParent === null ||
// element.getAttribute('hidden') === 'true';

// setup(async () => {
// imageViewer = await fixture(cosmozImageViewerFixture);
// imageViewer.images = [
// 'xyz.jpg',
// '/stories/images/stockholm.jpg',
// '/stories/images/strasbourg.jpg',
// ];
// await nextFrame();
// });

// test('error is shown', async () => {
// const errEl = errorDiv();
// await aTimeout(500);
// assert.equal(displayNone(errEl), false);
// });

// test('error is hidden if next image loaded successfully', async () => {
// imageViewer.nextImage();
// await nextFrame();
// await aTimeout(500);
// const errEl = errorDiv();
// assert.equal(displayNone(errEl), true);
// });
// });

// suite('cosmoz-image-viewer-overlay', () => {
// let overlay;

// setup(async () => {
// overlay = await fixture(
// html`<cosmoz-image-viewer-overlay></cosmoz-image-viewer-overlay>`,
// );
// overlay.images = [
// '/stories/images/stockholm.jpg',
// '/stories/images/strasbourg.jpg',
// '/stories/images/cosmos1.jpg',
// ];
// });

// test('_trackHandler does not call close if detail state is not end', () => {
// const event = new CustomEvent('testEvent', {
// detail: {
// dy: 1000,
// },
// }),
// spyClose = sinon.spy(overlay, 'close');
// overlay._trackHandler(event);
// assert.notCalled(spyClose);
// });
// test('_trackHandler does call close', () => {
// const event = new CustomEvent('testEvent', {
// detail: {
// state: 'end',
// dy: 1000,
// },
// }),
// spyClose = sinon.spy(overlay, 'close');

// overlay._trackHandler(event);
// assert.calledOnce(spyClose);
// });
// });

0 comments on commit 8d7686a

Please sign in to comment.