import Vue from 'vue'; import mountComponent from 'helpers/vue_mount_component_helper'; import toggleRepliesWidget from '~/notes/components/toggle_replies_widget.vue'; import { note } from '../mock_data'; const deepCloneObject = obj => JSON.parse(JSON.stringify(obj)); describe('toggle replies widget for notes', () => { let vm; let ToggleRepliesWidget; const noteFromOtherUser = deepCloneObject(note); noteFromOtherUser.author.username = 'fatihacet'; const noteFromAnotherUser = deepCloneObject(note); noteFromAnotherUser.author.username = 'mgreiling'; noteFromAnotherUser.author.name = 'Mike Greiling'; const replies = [note, note, note, noteFromOtherUser, noteFromAnotherUser]; beforeEach(() => { ToggleRepliesWidget = Vue.extend(toggleRepliesWidget); }); afterEach(() => { vm.$destroy(); }); describe('collapsed state', () => { beforeEach(() => { vm = mountComponent(ToggleRepliesWidget, { replies, collapsed: true, }); }); it('should render the collapsed', () => { const vmTextContent = vm.$el.textContent.replace(/\s\s+/g, ' '); expect(vm.$el.classList.contains('collapsed')).toEqual(true); expect(vm.$el.querySelectorAll('.user-avatar-link').length).toEqual(3); expect(vm.$el.querySelector('time')).not.toBeNull(); expect(vmTextContent).toContain('5 replies'); expect(vmTextContent).toContain(`Last reply by ${noteFromAnotherUser.author.name}`); }); it('should emit toggle event when the replies text clicked', () => { const spy = jest.spyOn(vm, '$emit'); vm.$el.querySelector('.js-replies-text').click(); expect(spy).toHaveBeenCalledWith('toggle'); }); }); describe('expanded state', () => { beforeEach(() => { vm = mountComponent(ToggleRepliesWidget, { replies, collapsed: false, }); }); it('should render expanded state', () => { const vmTextContent = vm.$el.textContent.replace(/\s\s+/g, ' '); expect(vm.$el.querySelector('.collapse-replies-btn')).not.toBeNull(); expect(vmTextContent).toContain('Collapse replies'); }); it('should emit toggle event when the collapse replies text called', () => { const spy = jest.spyOn(vm, '$emit'); vm.$el.querySelector('.js-collapse-replies').click(); expect(spy).toHaveBeenCalledWith('toggle'); }); }); });