fix(#7055): Expand on image with double click (#7308)

* Add double click event to expand image view

* Add performance tests for large view and close
button

* Add example imagery in flexible layout to test double-click functionality

* Remove click event listener in ImageryView.vue

* Move test to 'Example Imagery in Flexible layout'

* Refactor exampleImagery.e2e.spec.js

* Remove unnecessary code for opening and closing
large view in imagery.contract.per.spec.js

* Replace pageSelector with getByRole on double-click image test

* Add role and aria-label to focused image

* Remove unnecessary code and role attribute from ImageryView.vue

---------

Co-authored-by: Jesse Mazzella <ozyx@users.noreply.github.com>
This commit is contained in:
Marcelo Arias
2024-01-14 18:55:11 -05:00
committed by GitHub
parent 6ce340cebd
commit 11f3ce9470
2 changed files with 38 additions and 1 deletions

View File

@ -485,6 +485,33 @@ test.describe('Example Imagery in Display Layout', () => {
test.describe('Example Imagery in Flexible layout', () => {
let flexibleLayout;
test.beforeEach(async ({ page }) => {
await page.goto('./', { waitUntil: 'domcontentloaded' });
flexibleLayout = await createDomainObjectWithDefaults(page, { type: 'Flexible Layout' });
// Create Example Imagery inside the Flexible Layout
await createDomainObjectWithDefaults(page, {
type: 'Example Imagery',
parent: flexibleLayout.uuid
});
// Navigate back to Flexible Layout
await page.goto(flexibleLayout.url);
});
test('Can double-click on the image to view large image', async ({ page }) => {
// Double-click on the image to open large view
const imageElement = await page.getByRole('button', { name: 'Image Wrapper' });
await imageElement.dblclick();
// Check if the large view is visible
await page.getByRole('button', { name: 'Background Image', state: 'visible' });
// Close the large view
await page.getByLabel('Close').click();
});
test.beforeEach(async ({ page }) => {
await page.goto('./', { waitUntil: 'domcontentloaded' });
@ -580,6 +607,7 @@ test.describe('Example Imagery in Time Strip', () => {
// Navigate to timestrip
await page.goto(timeStripObject.url);
});
test('Clicking a thumbnail loads the image in large view', async ({ page, browserName }) => {
test.info().annotations.push({
type: 'issue',