diff options
Diffstat (limited to 'spec/frontend/vue3migration')
8 files changed, 124 insertions, 0 deletions
diff --git a/spec/frontend/vue3migration/compiler_spec.js b/spec/frontend/vue3migration/compiler_spec.js new file mode 100644 index 00000000000..3623f69fe07 --- /dev/null +++ b/spec/frontend/vue3migration/compiler_spec.js @@ -0,0 +1,38 @@ +import { mount } from '@vue/test-utils'; + +import SlotsWithSameName from './components/slots_with_same_name.vue'; +import VOnceInsideVIf from './components/v_once_inside_v_if.vue'; +import KeyInsideTemplate from './components/key_inside_template.vue'; +import CommentsOnRootLevel from './components/comments_on_root_level.vue'; +import SlotWithComment from './components/slot_with_comment.vue'; +import DefaultSlotWithComment from './components/default_slot_with_comment.vue'; + +describe('Vue.js 3 compiler edge cases', () => { + it('workarounds issue #6063 when same slot is used with whitespace preserve', () => { + expect(() => mount(SlotsWithSameName)).not.toThrow(); + }); + + it('workarounds issue #7725 when v-once is used inside v-if', () => { + expect(() => mount(VOnceInsideVIf)).not.toThrow(); + }); + + it('renders vue.js 2 component when key is inside template', () => { + const wrapper = mount(KeyInsideTemplate); + expect(wrapper.text()).toBe('12345'); + }); + + it('passes attributes to component with trailing comments on root level', () => { + const wrapper = mount(CommentsOnRootLevel, { propsData: { 'data-testid': 'test' } }); + expect(wrapper.html()).toBe('<div data-testid="test"></div>'); + }); + + it('treats empty slots with comments as empty', () => { + const wrapper = mount(SlotWithComment); + expect(wrapper.html()).toBe('<div>Simple</div>'); + }); + + it('treats empty default slot with comments as empty', () => { + const wrapper = mount(DefaultSlotWithComment); + expect(wrapper.html()).toBe('<div>Simple</div>'); + }); +}); diff --git a/spec/frontend/vue3migration/components/comments_on_root_level.vue b/spec/frontend/vue3migration/components/comments_on_root_level.vue new file mode 100644 index 00000000000..78222c059d5 --- /dev/null +++ b/spec/frontend/vue3migration/components/comments_on_root_level.vue @@ -0,0 +1,5 @@ +<template> + <!-- root level comment --> + <div><slot></slot></div> + <!-- root level comment --> +</template> diff --git a/spec/frontend/vue3migration/components/default_slot_with_comment.vue b/spec/frontend/vue3migration/components/default_slot_with_comment.vue new file mode 100644 index 00000000000..d2589104a5d --- /dev/null +++ b/spec/frontend/vue3migration/components/default_slot_with_comment.vue @@ -0,0 +1,18 @@ +<script> +import Simple from './simple.vue'; + +export default { + components: { + Simple, + }, +}; +</script> +<template> + <simple> + <!-- slot comment typical for gitlab-ui, for example --> + <!-- slot comment typical for gitlab-ui, for example --> + <slot></slot> + <!-- slot comment typical for gitlab-ui, for example --> + <!-- slot comment typical for gitlab-ui, for example --> + </simple> +</template> diff --git a/spec/frontend/vue3migration/components/key_inside_template.vue b/spec/frontend/vue3migration/components/key_inside_template.vue new file mode 100644 index 00000000000..af1f46c44e6 --- /dev/null +++ b/spec/frontend/vue3migration/components/key_inside_template.vue @@ -0,0 +1,7 @@ +<template> + <div> + <template v-for="count in 5" + ><span :key="count">{{ count }}</span></template + > + </div> +</template> diff --git a/spec/frontend/vue3migration/components/simple.vue b/spec/frontend/vue3migration/components/simple.vue new file mode 100644 index 00000000000..1d9854b5b4d --- /dev/null +++ b/spec/frontend/vue3migration/components/simple.vue @@ -0,0 +1,10 @@ +<script> +export default { + name: 'Simple', +}; +</script> +<template> + <div> + <slot>{{ $options.name }}</slot> + </div> +</template> diff --git a/spec/frontend/vue3migration/components/slot_with_comment.vue b/spec/frontend/vue3migration/components/slot_with_comment.vue new file mode 100644 index 00000000000..56bb41e432f --- /dev/null +++ b/spec/frontend/vue3migration/components/slot_with_comment.vue @@ -0,0 +1,20 @@ +<script> +import Simple from './simple.vue'; + +export default { + components: { + Simple, + }, +}; +</script> +<template> + <simple> + <template #default> + <!-- slot comment typical for gitlab-ui, for example --> + <!-- slot comment typical for gitlab-ui, for example --> + <slot></slot> + <!-- slot comment typical for gitlab-ui, for example --> + <!-- slot comment typical for gitlab-ui, for example --> + </template> + </simple> +</template> diff --git a/spec/frontend/vue3migration/components/slots_with_same_name.vue b/spec/frontend/vue3migration/components/slots_with_same_name.vue new file mode 100644 index 00000000000..37604cd9f6e --- /dev/null +++ b/spec/frontend/vue3migration/components/slots_with_same_name.vue @@ -0,0 +1,14 @@ +<script> +import Simple from './simple.vue'; + +export default { + name: 'SlotsWithSameName', + components: { Simple }, +}; +</script> +<template> + <simple> + <template v-if="true" #default>{{ $options.name }}</template> + <template v-else #default>{{ $options.name }}</template> + </simple> +</template> diff --git a/spec/frontend/vue3migration/components/v_once_inside_v_if.vue b/spec/frontend/vue3migration/components/v_once_inside_v_if.vue new file mode 100644 index 00000000000..708aa7a96c2 --- /dev/null +++ b/spec/frontend/vue3migration/components/v_once_inside_v_if.vue @@ -0,0 +1,12 @@ +<script> +export default { + name: 'VOnceInsideVIf', +}; +</script> +<template> + <div> + <template v-if="true"> + <div v-once>{{ $options.name }}</div> + </template> + </div> +</template> |