Add latest changes from gitlab-org/gitlab@13-12-stable-eev13.12.0-rc42

3 files changed, 255 insertions, 0 deletions

diff --git a/spec/frontend/vue_shared/new_namespace/components/legacy_container_spec.js b/spec/frontend/vue_shared/new_namespace/components/legacy_container_spec.js
new file mode 100644
index 00000000000..52f36aa0e77
--- /dev/null
+++ b/spec/frontend/vue_shared/new_namespace/components/legacy_container_spec.js
@@ -0,0 +1,63 @@
+import { shallowMount } from '@vue/test-utils';
+import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
+import LegacyContainer from '~/vue_shared/new_namespace/components/legacy_container.vue';
+
+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/vue_shared/new_namespace/components/welcome_spec.js b/spec/frontend/vue_shared/new_namespace/components/welcome_spec.js
new file mode 100644
index 00000000000..602213fca83
--- /dev/null
+++ b/spec/frontend/vue_shared/new_namespace/components/welcome_spec.js
@@ -0,0 +1,78 @@
+import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import { mockTracking } from 'helpers/tracking_helper';
+import { TRACKING_CONTEXT_SCHEMA } from '~/experimentation/constants';
+import { getExperimentData } from '~/experimentation/utils';
+import WelcomePage from '~/vue_shared/new_namespace/components/welcome.vue';
+
+jest.mock('~/experimentation/utils', () => ({ getExperimentData: jest.fn() }));
+
+describe('Welcome page', () => {
+  let wrapper;
+  let trackingSpy;
+
+  const DEFAULT_PROPS = {
+    title: 'Create new something',
+  };
+
+  const createComponent = ({ propsData, slots }) => {
+    wrapper = shallowMount(WelcomePage, {
+      slots,
+      propsData: {
+        ...DEFAULT_PROPS,
+        ...propsData,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    trackingSpy = mockTracking('_category_', document, jest.spyOn);
+    trackingSpy.mockImplementation(() => {});
+    getExperimentData.mockReturnValue(undefined);
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    window.location.hash = '';
+    wrapper = null;
+  });
+
+  it('tracks link clicks', async () => {
+    createComponent({ propsData: { experiment: 'foo', panels: [{ name: 'test', href: '#' }] } });
+    const link = wrapper.find('a');
+    link.trigger('click');
+    await nextTick();
+    return wrapper.vm.$nextTick().then(() => {
+      expect(trackingSpy).toHaveBeenCalledWith(undefined, 'click_tab', { label: 'test' });
+    });
+  });
+
+  it('adds experiment data if in experiment', async () => {
+    const mockExperimentData = 'data';
+    getExperimentData.mockReturnValue(mockExperimentData);
+
+    createComponent({ propsData: { experiment: 'foo', panels: [{ name: 'test', href: '#' }] } });
+    const link = wrapper.find('a');
+    link.trigger('click');
+    await nextTick();
+    return wrapper.vm.$nextTick().then(() => {
+      expect(trackingSpy).toHaveBeenCalledWith(undefined, 'click_tab', {
+        label: 'test',
+        context: {
+          data: mockExperimentData,
+          schema: TRACKING_CONTEXT_SCHEMA,
+        },
+      });
+    });
+  });
+
+  it('renders footer slot if provided', () => {
+    const DUMMY = 'Test message';
+    createComponent({
+      slots: { footer: DUMMY },
+      propsData: { panels: [{ name: 'test', href: '#' }] },
+    });
+
+    expect(wrapper.text()).toContain(DUMMY);
+  });
+});
diff --git a/spec/frontend/vue_shared/new_namespace/new_namespace_page_spec.js b/spec/frontend/vue_shared/new_namespace/new_namespace_page_spec.js
new file mode 100644
index 00000000000..30937921900
--- /dev/null
+++ b/spec/frontend/vue_shared/new_namespace/new_namespace_page_spec.js
@@ -0,0 +1,114 @@
+import { GlBreadcrumb } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import LegacyContainer from '~/vue_shared/new_namespace/components/legacy_container.vue';
+import WelcomePage from '~/vue_shared/new_namespace/components/welcome.vue';
+import NewNamespacePage from '~/vue_shared/new_namespace/new_namespace_page.vue';
+
+describe('Experimental new project creation app', () => {
+  let wrapper;
+
+  const findWelcomePage = () => wrapper.findComponent(WelcomePage);
+  const findLegacyContainer = () => wrapper.findComponent(LegacyContainer);
+  const findBreadcrumb = () => wrapper.findComponent(GlBreadcrumb);
+
+  const DEFAULT_PROPS = {
+    title: 'Create something',
+    initialBreadcrumb: 'Something',
+    panels: [
+      { name: 'panel1', selector: '#some-selector1' },
+      { name: 'panel2', selector: '#some-selector2' },
+    ],
+    persistenceKey: 'DEMO-PERSISTENCE-KEY',
+  };
+
+  const createComponent = ({ slots, propsData } = {}) => {
+    wrapper = shallowMount(NewNamespacePage, {
+      slots,
+      propsData: {
+        ...DEFAULT_PROPS,
+        ...propsData,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    window.location.hash = '';
+  });
+
+  it('passes experiment to welcome component if provided', () => {
+    const EXPERIMENT = 'foo';
+    createComponent({ propsData: { experiment: EXPERIMENT } });
+
+    expect(findWelcomePage().props().experiment).toBe(EXPERIMENT);
+  });
+
+  describe('with empty hash', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders welcome page', () => {
+      expect(findWelcomePage().exists()).toBe(true);
+    });
+
+    it('does not render breadcrumbs', () => {
+      expect(findBreadcrumb().exists()).toBe(false);
+    });
+  });
+
+  it('renders first container if jumpToLastPersistedPanel passed', () => {
+    createComponent({ propsData: { jumpToLastPersistedPanel: true } });
+    expect(findWelcomePage().exists()).toBe(false);
+    expect(findLegacyContainer().exists()).toBe(true);
+  });
+
+  describe('when hash is not empty on load', () => {
+    beforeEach(() => {
+      window.location.hash = `#${DEFAULT_PROPS.panels[1].name}`;
+      createComponent();
+    });
+
+    it('renders relevant container', () => {
+      expect(findWelcomePage().exists()).toBe(false);
+
+      const container = findLegacyContainer();
+
+      expect(container.exists()).toBe(true);
+      expect(container.props().selector).toBe(DEFAULT_PROPS.panels[1].selector);
+    });
+
+    it('renders breadcrumbs', () => {
+      const breadcrumb = findBreadcrumb();
+      expect(breadcrumb.exists()).toBe(true);
+      expect(breadcrumb.props().items[0].text).toBe(DEFAULT_PROPS.initialBreadcrumb);
+    });
+  });
+
+  it('renders extra description if provided', () => {
+    window.location.hash = `#${DEFAULT_PROPS.panels[1].name}`;
+    const EXTRA_DESCRIPTION = 'Some extra description';
+    createComponent({
+      slots: {
+        'extra-description': EXTRA_DESCRIPTION,
+      },
+    });
+
+    expect(wrapper.text()).toContain(EXTRA_DESCRIPTION);
+  });
+
+  it('renders relevant container when hash changes', async () => {
+    createComponent();
+    expect(findWelcomePage().exists()).toBe(true);
+
+    window.location.hash = `#${DEFAULT_PROPS.panels[0].name}`;
+    const ev = document.createEvent('HTMLEvents');
+    ev.initEvent('hashchange', false, false);
+    window.dispatchEvent(ev);
+
+    await nextTick();
+    expect(findWelcomePage().exists()).toBe(false);
+    expect(findLegacyContainer().exists()).toBe(true);
+  });
+});