ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-19 21:27:52 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 38 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
e2e/tests/functional/plugins/imagery/exampleImagery.e2e.spec.js
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',

11
src/plugins/imagery/components/ImageryView.vue
View File

@ -46,18 +46,26 @@
@start-pan="startPan"
@toggle-layer-visibility="toggleLayerVisibility"
/>
<div ref="imageBG" class="c-imagery__main-image__bg" @click="expand">
<div
ref="imageBG"
class="c-imagery__main-image__bg"
aria-label="Background Image"
role="button"
>
<div v-if="zoomFactor > 1" class="c-imagery__hints">
{{ formatImageAltText }}
</div>
<div
role="button"
ref="focusedImageWrapper"
class="image-wrapper"
aria-label="Image Wrapper"
:style="{
width: `${sizedImageWidth}px`,
height: `${sizedImageHeight}px`
}"
@mousedown="handlePanZoomClick"
@dblclick="expand"
>
<div
v-for="(layer, index) in visibleLayers"
@ -66,6 +74,7 @@
:style="getVisibleLayerStyles(layer)"
></div>
<img
aria-label="Focused Image"
ref="focusedImage"
class="c-imagery__main-image__image js-imageryView-image"
:src="imageUrl"