raucao/marco
1
0
Fork 0
Code Issues 17 Pull Requests Actions Releases 13 Activity

Use data attribute to determine current gallery photo in test

Browse Source
This commit is contained in:
Râu Cao
2026-06-05 18:33:08 +04:00
parent 200100686d
commit d266bb92bd
2 changed files with 13 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/components/photo-gallery.gjs
View File

@@ -21,7 +21,10 @@ const GalleryContent = <template>
{{@bindKeyboard @handleKeydown}} {{@bindKeyboard @handleKeydown}}
> >
{{! template-lint-disable no-invalid-interactive }} {{! template-lint-disable no-invalid-interactive }}
<div class="photo-gallery-content"> <div
class="photo-gallery-content"
data-current-event-id={{@currentPhoto.eventId}}
>
<div class="actions-btn-container"> <div class="actions-btn-container">
<DropdownMenu <DropdownMenu
@iconSize={{24}} @iconSize={{24}}

23
tests/integration/components/photo-gallery-test.gjs
View File

@@ -287,35 +287,30 @@ module('Integration | Component | photo-gallery', function (hooks) {
</template> </template>
); );
// Let carousel settle assert
await new Promise((resolve) => setTimeout(resolve, 150)); .dom('.photo-gallery-content')
.hasAttribute('data-current-event-id', 'event1');
// Right Arrow // Right Arrow
await triggerKeyEvent(document, 'keydown', 'ArrowRight'); await triggerKeyEvent(document, 'keydown', 'ArrowRight');
await new Promise((resolve) => setTimeout(resolve, 150));
// Let's just assert that currentPhoto was updated internally, which trickles down.
// The actual DOM update for the main image might be tricky if the carousel relies on scroll events.
// We can at least check if the thumbnail selection changed, as that is directly driven by currentPhoto
assert assert
.dom('.thumbnail-strip-container .carousel-slide.active img') .dom('.photo-gallery-content')
.hasAttribute('data-src', 'photo2.jpg'); .hasAttribute('data-current-event-id', 'event2');
// Right Arrow again // Right Arrow again
await triggerKeyEvent(document, 'keydown', 'ArrowRight'); await triggerKeyEvent(document, 'keydown', 'ArrowRight');
await new Promise((resolve) => setTimeout(resolve, 150));
assert assert
.dom('.thumbnail-strip-container .carousel-slide.active img') .dom('.photo-gallery-content')
.hasAttribute('data-src', 'photo3.jpg'); .hasAttribute('data-current-event-id', 'event3');
// Left Arrow // Left Arrow
await triggerKeyEvent(document, 'keydown', 'ArrowLeft'); await triggerKeyEvent(document, 'keydown', 'ArrowLeft');
await new Promise((resolve) => setTimeout(resolve, 150));
assert assert
.dom('.thumbnail-strip-container .carousel-slide.active img') .dom('.photo-gallery-content')
.hasAttribute('data-src', 'photo2.jpg'); .hasAttribute('data-current-event-id', 'event2');
}); });
test('escape key closes gallery', async function (assert) { test('escape key closes gallery', async function (assert) {