diff options
Diffstat (limited to 'spec/frontend/projects')
4 files changed, 167 insertions, 0 deletions
diff --git a/spec/frontend/projects/experiment_new_project_creation/components/app_spec.js b/spec/frontend/projects/experiment_new_project_creation/components/app_spec.js new file mode 100644 index 00000000000..a1e1e4554e2 --- /dev/null +++ b/spec/frontend/projects/experiment_new_project_creation/components/app_spec.js @@ -0,0 +1,70 @@ +import { shallowMount } from '@vue/test-utils'; +import { GlBreadcrumb } from '@gitlab/ui'; +import App from '~/projects/experiment_new_project_creation/components/app.vue'; +import WelcomePage from '~/projects/experiment_new_project_creation/components/welcome.vue'; +import LegacyContainer from '~/projects/experiment_new_project_creation/components/legacy_container.vue'; + +describe('Experimental new project creation app', () => { + let wrapper; + + const createComponent = propsData => { + wrapper = shallowMount(App, { propsData }); + }; + + afterEach(() => { + wrapper.destroy(); + window.location.hash = ''; + wrapper = null; + }); + + describe('with empty hash', () => { + beforeEach(() => { + createComponent(); + }); + + it('renders welcome page', () => { + expect(wrapper.find(WelcomePage).exists()).toBe(true); + }); + + it('does not render breadcrumbs', () => { + expect(wrapper.find(GlBreadcrumb).exists()).toBe(false); + }); + }); + + it('renders blank project container if there are errors', () => { + createComponent({ hasErrors: true }); + expect(wrapper.find(WelcomePage).exists()).toBe(false); + expect(wrapper.find(LegacyContainer).exists()).toBe(true); + }); + + describe('when hash is not empty on load', () => { + beforeEach(() => { + window.location.hash = '#blank_project'; + createComponent(); + }); + + it('renders relevant container', () => { + expect(wrapper.find(WelcomePage).exists()).toBe(false); + expect(wrapper.find(LegacyContainer).exists()).toBe(true); + }); + + it('renders breadcrumbs', () => { + expect(wrapper.find(GlBreadcrumb).exists()).toBe(true); + }); + }); + + it('renders relevant container when hash changes', () => { + createComponent(); + expect(wrapper.find(WelcomePage).exists()).toBe(true); + + window.location.hash = '#blank_project'; + const ev = document.createEvent('HTMLEvents'); + ev.initEvent('hashchange', false, false); + window.dispatchEvent(ev); + + return wrapper.vm.$nextTick().then(() => { + expect(wrapper.find(WelcomePage).exists()).toBe(false); + expect(wrapper.find(LegacyContainer).exists()).toBe(true); + }); + }); +}); diff --git a/spec/frontend/projects/experiment_new_project_creation/components/legacy_container_spec.js b/spec/frontend/projects/experiment_new_project_creation/components/legacy_container_spec.js new file mode 100644 index 00000000000..cd8b39f0426 --- /dev/null +++ b/spec/frontend/projects/experiment_new_project_creation/components/legacy_container_spec.js @@ -0,0 +1,63 @@ +import { shallowMount } from '@vue/test-utils'; +import LegacyContainer from '~/projects/experiment_new_project_creation/components/legacy_container.vue'; +import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; + +describe('Legacy container component', () => { + let wrapper; + let dummy; + + const createComponent = propsData => { + wrapper = shallowMount(LegacyContainer, { propsData }); + }; + + afterEach(() => { + wrapper.destroy(); + resetHTMLFixture(); + wrapper = null; + }); + + describe('when selector targets real node', () => { + beforeEach(() => { + setHTMLFixture('<div class="dummy-target"></div>'); + dummy = document.querySelector('.dummy-target'); + createComponent({ selector: '.dummy-target' }); + }); + + describe('when mounted', () => { + it('moves node inside component', () => { + expect(dummy.parentNode).toBe(wrapper.element); + }); + + it('sets active class', () => { + expect(dummy.classList.contains('active')).toBe(true); + }); + }); + + describe('when unmounted', () => { + beforeEach(() => { + wrapper.destroy(); + }); + + it('moves node back', () => { + expect(dummy.parentNode).toBe(document.body); + }); + + it('removes active class', () => { + expect(dummy.classList.contains('active')).toBe(false); + }); + }); + }); + + describe('when selector targets template node', () => { + beforeEach(() => { + setHTMLFixture('<template class="dummy-target">content</template>'); + dummy = document.querySelector('.dummy-target'); + createComponent({ selector: '.dummy-target' }); + }); + + it('copies node content when mounted', () => { + expect(dummy.innerHTML).toEqual(wrapper.element.innerHTML); + expect(dummy.parentNode).toBe(document.body); + }); + }); +}); diff --git a/spec/frontend/projects/experiment_new_project_creation/components/welcome_spec.js b/spec/frontend/projects/experiment_new_project_creation/components/welcome_spec.js new file mode 100644 index 00000000000..acd142fa5ba --- /dev/null +++ b/spec/frontend/projects/experiment_new_project_creation/components/welcome_spec.js @@ -0,0 +1,31 @@ +import { shallowMount } from '@vue/test-utils'; +import WelcomePage from '~/projects/experiment_new_project_creation/components/welcome.vue'; +import { mockTracking } from 'helpers/tracking_helper'; + +describe('Welcome page', () => { + let wrapper; + let trackingSpy; + + const createComponent = propsData => { + wrapper = shallowMount(WelcomePage, { propsData }); + }; + + beforeEach(() => { + trackingSpy = mockTracking('_category_', document, jest.spyOn); + trackingSpy.mockImplementation(() => {}); + }); + + afterEach(() => { + wrapper.destroy(); + window.location.hash = ''; + wrapper = null; + }); + + it('tracks link clicks', () => { + createComponent({ panels: [{ name: 'test', href: '#' }] }); + wrapper.find('a').trigger('click'); + return wrapper.vm.$nextTick().then(() => { + expect(trackingSpy).toHaveBeenCalledWith(undefined, 'click_tab', { label: 'test' }); + }); + }); +}); diff --git a/spec/frontend/projects/pipelines/charts/components/__snapshots__/pipelines_area_chart_spec.js.snap b/spec/frontend/projects/pipelines/charts/components/__snapshots__/pipelines_area_chart_spec.js.snap index 3222b92d23f..f280ecaa0bc 100644 --- a/spec/frontend/projects/pipelines/charts/components/__snapshots__/pipelines_area_chart_spec.js.snap +++ b/spec/frontend/projects/pipelines/charts/components/__snapshots__/pipelines_area_chart_spec.js.snap @@ -14,7 +14,10 @@ exports[`PipelinesAreaChart matches the snapshot 1`] = ` data="[object Object],[object Object]" height="300" legendaveragetext="Avg" + legendcurrenttext="Current" + legendlayout="inline" legendmaxtext="Max" + legendmintext="Min" option="[object Object]" thresholds="" width="0" |