diff options
Diffstat (limited to 'spec/frontend/emoji/components/category_spec.js')
-rw-r--r-- | spec/frontend/emoji/components/category_spec.js | 49 |
1 files changed, 49 insertions, 0 deletions
diff --git a/spec/frontend/emoji/components/category_spec.js b/spec/frontend/emoji/components/category_spec.js new file mode 100644 index 00000000000..afd36a1eb88 --- /dev/null +++ b/spec/frontend/emoji/components/category_spec.js @@ -0,0 +1,49 @@ +import { GlIntersectionObserver } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; +import { nextTick } from 'vue'; +import Category from '~/emoji/components/category.vue'; +import EmojiGroup from '~/emoji/components/emoji_group.vue'; + +let wrapper; +function factory(propsData = {}) { + wrapper = shallowMount(Category, { propsData }); +} + +describe('Emoji category component', () => { + afterEach(() => { + wrapper.destroy(); + }); + + beforeEach(() => { + factory({ + category: 'Activity', + emojis: [['thumbsup'], ['thumbsdown']], + }); + }); + + it('renders emoji groups', () => { + expect(wrapper.findAll(EmojiGroup).length).toBe(2); + }); + + it('renders group', async () => { + await wrapper.setData({ renderGroup: true }); + + expect(wrapper.find(EmojiGroup).attributes('rendergroup')).toBe('true'); + }); + + it('renders group on appear', async () => { + wrapper.find(GlIntersectionObserver).vm.$emit('appear'); + + await nextTick(); + + expect(wrapper.find(EmojiGroup).attributes('rendergroup')).toBe('true'); + }); + + it('emits appear event on appear', async () => { + wrapper.find(GlIntersectionObserver).vm.$emit('appear'); + + await nextTick(); + + expect(wrapper.emitted().appear[0]).toEqual(['Activity']); + }); +}); |