diff --git a/packages/synapse-bridge/src/elements/DialogBox/DialogBox.vue b/packages/synapse-bridge/src/elements/DialogBox/DialogBox.vue index decc5545e..f0adb0e37 100644 --- a/packages/synapse-bridge/src/elements/DialogBox/DialogBox.vue +++ b/packages/synapse-bridge/src/elements/DialogBox/DialogBox.vue @@ -56,6 +56,7 @@ export default defineComponent({ closeIcon: mdiClose, locales, dialog: this.modelValue, + titleId: `title-${Math.random().toString(36).substring(7)}` } }, @@ -137,11 +138,11 @@ export default defineComponent({ v-bind="options.card" ref="dialogContent" id="dialogContent" - :aria-labelledby="title ? title : 'dialogContent'" + :aria-labelledby="titleId ? titleId : 'dialogContent'" > -

+

{{ title }}

diff --git a/packages/synapse-bridge/src/elements/DialogBox/tests/DialogBox.spec.ts b/packages/synapse-bridge/src/elements/DialogBox/tests/DialogBox.spec.ts index 8d14b3fc5..3e26a5431 100644 --- a/packages/synapse-bridge/src/elements/DialogBox/tests/DialogBox.spec.ts +++ b/packages/synapse-bridge/src/elements/DialogBox/tests/DialogBox.spec.ts @@ -3,7 +3,7 @@ import { mount, shallowMount } from '@vue/test-utils' import { vuetify } from '@tests/unit/setup' import DialogBox from '../' -import { VCard } from 'vuetify/components' +import { VDialog, VCard } from 'vuetify/components' const defaultProps = { modelValue: true, @@ -17,7 +17,7 @@ const defaultProps = { describe('DialogBox', () => { describe('rendering and props', () => { - it('renders correctly with props', () => { + it('renders correctly with props', async () => { const wrapper = mount(DialogBox, { props: defaultProps, global: { @@ -30,7 +30,13 @@ describe('DialogBox', () => { }, }) - expect(wrapper.html()).toMatchSnapshot() + await wrapper.vm.$nextTick() + + const dialog = wrapper.findComponent(VDialog); + const title = wrapper.findComponent(VCard).find('h2').text(); + + expect(dialog.exists()).toBe(true); + expect(title).toBe('Test title'); }) it('is closed when model value is false', async () => { @@ -44,7 +50,11 @@ describe('DialogBox', () => { }, }) - expect(wrapper).toMatchInlineSnapshot('') + await wrapper.vm.$nextTick() + + const card = wrapper.findComponent(VCard); + + expect(card.exists()).toBe(false); }) it('becomes visible when the model value is updated', async () => { diff --git a/packages/synapse-bridge/src/elements/DialogBox/tests/__snapshots__/DialogBox.spec.ts.snap b/packages/synapse-bridge/src/elements/DialogBox/tests/__snapshots__/DialogBox.spec.ts.snap deleted file mode 100644 index 1ecf43e12..000000000 --- a/packages/synapse-bridge/src/elements/DialogBox/tests/__snapshots__/DialogBox.spec.ts.snap +++ /dev/null @@ -1,45 +0,0 @@ -// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html - -exports[`DialogBox > rendering and props > renders correctly with props 1`] = ` -
-
- -
- -
- - -
-

Test title

-
-
-
-
-
- - -
-
-`;