import { mount } from '@vue/test-utils'; import { trimText } from 'helpers/text_helper'; import CompareDropdownLayout from '~/diffs/components/compare_dropdown_layout.vue'; import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue'; const TEST_COMMIT_TEXT = '1 commit'; const TEST_CREATED_AT = '2018-10-23T11:49:16.611Z'; describe('CompareDropdownLayout', () => { let wrapper; const createVersion = ({ id, isHead, isBase, selected, commitsText, createdAt }) => ({ id, href: `version/${id}`, versionName: `version ${id}`, isHead, isBase, short_commit_sha: `abcdef${id}`, commitsText, created_at: createdAt, selected, }); const createComponent = (propsData = {}) => { wrapper = mount(CompareDropdownLayout, { propsData: { ...propsData, }, }); }; const findListItems = () => wrapper.findAll('li'); const findListItemsData = () => findListItems().wrappers.map((listItem) => ({ href: listItem.find('a').attributes('href'), text: trimText(listItem.text()), createdAt: listItem.findAllComponents(TimeAgo).wrappers[0]?.props('time'), isActive: listItem.classes().includes('is-active'), })); afterEach(() => { wrapper.destroy(); wrapper = null; }); describe('with versions', () => { beforeEach(() => { const versions = [ createVersion({ id: 1, isHead: false, isBase: true, selected: true, commitsText: TEST_COMMIT_TEXT, createdAt: TEST_CREATED_AT, }), createVersion({ id: 2, isHead: true, isBase: false, selected: false }), createVersion({ id: 3, isHead: false, isBase: false, selected: false }), ]; createComponent({ versions }); }); it('renders the selected version name', () => { expect(wrapper.text()).toContain('version 1'); }); it('renders versions in order', () => { expect(findListItemsData()).toEqual([ { href: 'version/1', text: 'version 1 (base) abcdef1 1 commit 1 year ago', createdAt: TEST_CREATED_AT, isActive: true, }, { href: 'version/2', text: 'version 2 (HEAD) abcdef2', createdAt: undefined, isActive: false, }, { href: 'version/3', text: 'version 3 abcdef3', createdAt: undefined, isActive: false, }, ]); }); }); });