diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-03-16 21:18:33 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-03-16 21:18:33 +0300 |
commit | f64a639bcfa1fc2bc89ca7db268f594306edfd7c (patch) | |
tree | a2c3c2ebcc3b45e596949db485d6ed18ffaacfa1 /spec/frontend/emoji | |
parent | bfbc3e0d6583ea1a91f627528bedc3d65ba4b10f (diff) |
Add latest changes from gitlab-org/gitlab@13-10-stable-eev13.10.0-rc40
Diffstat (limited to 'spec/frontend/emoji')
-rw-r--r-- | spec/frontend/emoji/components/category_spec.js | 49 | ||||
-rw-r--r-- | spec/frontend/emoji/components/emoji_group_spec.js | 56 | ||||
-rw-r--r-- | spec/frontend/emoji/components/emoji_list_spec.js | 73 |
3 files changed, 178 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']); + }); +}); diff --git a/spec/frontend/emoji/components/emoji_group_spec.js b/spec/frontend/emoji/components/emoji_group_spec.js new file mode 100644 index 00000000000..1aca2fbb8fc --- /dev/null +++ b/spec/frontend/emoji/components/emoji_group_spec.js @@ -0,0 +1,56 @@ +import { shallowMount } from '@vue/test-utils'; +import Vue from 'vue'; +import { extendedWrapper } from 'helpers/vue_test_utils_helper'; +import EmojiGroup from '~/emoji/components/emoji_group.vue'; + +Vue.config.ignoredElements = ['gl-emoji']; + +let wrapper; +function factory(propsData = {}) { + wrapper = extendedWrapper( + shallowMount(EmojiGroup, { + propsData, + }), + ); +} + +describe('Emoji group component', () => { + afterEach(() => { + wrapper.destroy(); + }); + + it('does not render any buttons', () => { + factory({ + emojis: [], + renderGroup: false, + clickEmoji: jest.fn(), + }); + + expect(wrapper.findByTestId('emoji-button').exists()).toBe(false); + }); + + it('renders emojis', () => { + factory({ + emojis: ['thumbsup', 'thumbsdown'], + renderGroup: true, + clickEmoji: jest.fn(), + }); + + expect(wrapper.findAllByTestId('emoji-button').exists()).toBe(true); + expect(wrapper.findAllByTestId('emoji-button').length).toBe(2); + }); + + it('calls clickEmoji', () => { + const clickEmoji = jest.fn(); + + factory({ + emojis: ['thumbsup', 'thumbsdown'], + renderGroup: true, + clickEmoji, + }); + + wrapper.findByTestId('emoji-button').trigger('click'); + + expect(clickEmoji).toHaveBeenCalledWith('thumbsup'); + }); +}); diff --git a/spec/frontend/emoji/components/emoji_list_spec.js b/spec/frontend/emoji/components/emoji_list_spec.js new file mode 100644 index 00000000000..9dc73ef191e --- /dev/null +++ b/spec/frontend/emoji/components/emoji_list_spec.js @@ -0,0 +1,73 @@ +import { shallowMount } from '@vue/test-utils'; +import { nextTick } from 'vue'; +import { extendedWrapper } from 'helpers/vue_test_utils_helper'; +import EmojiList from '~/emoji/components/emoji_list.vue'; + +jest.mock('~/emoji', () => ({ + initEmojiMap: jest.fn(() => Promise.resolve()), + searchEmoji: jest.fn((search) => [{ emoji: { name: search } }]), + getEmojiCategoryMap: jest.fn(() => + Promise.resolve({ + activity: ['thumbsup', 'thumbsdown'], + }), + ), +})); + +let wrapper; +async function factory(render, propsData = { searchValue: '' }) { + wrapper = extendedWrapper( + shallowMount(EmojiList, { + propsData, + scopedSlots: { + default: '<div data-testid="default-slot">{{props.filteredCategories}}</div>', + }, + }), + ); + + // Wait for categories to be set + await nextTick(); + + if (render) { + wrapper.setData({ render: true }); + + // Wait for component to render + await nextTick(); + } +} + +const findDefaultSlot = () => wrapper.findByTestId('default-slot'); + +describe('Emoji list component', () => { + afterEach(() => { + wrapper.destroy(); + }); + + it('does not render until render is set', async () => { + await factory(false); + + expect(findDefaultSlot().exists()).toBe(false); + }); + + it('renders with none filtered list', async () => { + await factory(true); + + expect(JSON.parse(findDefaultSlot().text())).toEqual({ + activity: { + emojis: [['thumbsup', 'thumbsdown']], + height: expect.any(Number), + top: expect.any(Number), + }, + }); + }); + + it('renders filtered list of emojis', async () => { + await factory(true, { searchValue: 'smile' }); + + expect(JSON.parse(findDefaultSlot().text())).toEqual({ + search: { + emojis: [['smile']], + height: expect.any(Number), + }, + }); + }); +}); |