mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 06:20:11 +00:00
57783fffcf
## Summary Adds a button to view image in lightbox in app mode ## Changes - **What**: - Add generic image lightbox component - Add zoom button to dropzone - Move buttons to outside image layer to top right of drop zone ## Screenshots (if applicable) <img width="1164" height="838" alt="image" src="https://github.com/user-attachments/assets/c92f2227-9dc0-49bd-bb27-5211e22060be" /> <img width="290" height="199" alt="image" src="https://github.com/user-attachments/assets/90424b8e-c502-4d65-ad21-545d5add6d0b" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9888-feat-App-mode-add-lightbox-to-view-image-in-drop-zone-3226d73d365081c387a6c2dd24dc4100) by [Unito](https://www.unito.io)
62 lines
1.8 KiB
TypeScript
62 lines
1.8 KiB
TypeScript
import { DOMWrapper, flushPromises, mount } from '@vue/test-utils'
|
|
import type { VueWrapper } from '@vue/test-utils'
|
|
import { afterEach, describe, expect, it } from 'vitest'
|
|
import { createI18n } from 'vue-i18n'
|
|
|
|
import ImageLightbox from './ImageLightbox.vue'
|
|
|
|
const i18n = createI18n({
|
|
legacy: false,
|
|
locale: 'en',
|
|
messages: { en: {} },
|
|
missingWarn: false,
|
|
fallbackWarn: false
|
|
})
|
|
|
|
function findCloseButton() {
|
|
const el = document.body.querySelector('[aria-label="g.close"]')
|
|
return el ? new DOMWrapper(el) : null
|
|
}
|
|
|
|
describe(ImageLightbox, () => {
|
|
let wrapper: VueWrapper
|
|
|
|
afterEach(() => {
|
|
wrapper.unmount()
|
|
})
|
|
|
|
function mountComponent(props: { src: string; alt?: string }, open = true) {
|
|
wrapper = mount(ImageLightbox, {
|
|
global: { plugins: [i18n] },
|
|
props: { ...props, modelValue: open },
|
|
attachTo: document.body
|
|
})
|
|
return wrapper
|
|
}
|
|
|
|
it('renders the image with correct src and alt when open', async () => {
|
|
mountComponent({ src: '/test.png', alt: 'Test image' })
|
|
await flushPromises()
|
|
const img = document.body.querySelector('img')
|
|
expect(img).toBeTruthy()
|
|
expect(img?.getAttribute('src')).toBe('/test.png')
|
|
expect(img?.getAttribute('alt')).toBe('Test image')
|
|
})
|
|
|
|
it('does not render dialog content when closed', async () => {
|
|
mountComponent({ src: '/test.png' }, false)
|
|
await flushPromises()
|
|
expect(document.body.querySelector('img')).toBeNull()
|
|
})
|
|
|
|
it('emits update:modelValue false when close button is clicked', async () => {
|
|
mountComponent({ src: '/test.png' })
|
|
await flushPromises()
|
|
const closeButton = findCloseButton()
|
|
expect(closeButton).toBeTruthy()
|
|
await closeButton!.trigger('click')
|
|
await flushPromises()
|
|
expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
|
|
})
|
|
})
|