Address reviewer comments

- use parseBoolean
- use finders in tests

app/assets/javascripts/pages/projects/new/index.js

 import Vue from 'vue';
+import { parseBoolean } from '~/lib/utils/common_utils';
 import initProjectVisibilitySelector from '../../../project_visibility';
 import initProjectNew from '../../../projects/project_new';
 import NewProjectCreationApp from './components/app.vue';
@@ -6,18 +7,32 @@ import NewProjectCreationApp from './components/app.vue';
 initProjectVisibilitySelector();
 initProjectNew.bindEvents();
 
-function initNewProjectCreation(el, props) {
-  const { pushToCreateProjectCommand, workingWithProjectsHelpPath } = el.dataset;
+function initNewProjectCreation(el) {
+  const {
+    pushToCreateProjectCommand,
+    workingWithProjectsHelpPath,
+    newProjectGuidelines,
+    hasErrors,
+    isCiCdAvailable,
+  } = el.dataset;
+
+  const props = {
+    hasErrors: parseBoolean(hasErrors),
+    isCiCdAvailable: parseBoolean(isCiCdAvailable),
+    newProjectGuidelines,
+  };
+
+  const provide = {
+    workingWithProjectsHelpPath,
+    pushToCreateProjectCommand,
+  };
 
   return new Vue({
     el,
     components: {
       NewProjectCreationApp,
     },
-    provide: {
-      workingWithProjectsHelpPath,
-      pushToCreateProjectCommand,
-    },
+    provide,
     render(h) {
       return h(NewProjectCreationApp, { props });
     },
@@ -26,10 +41,4 @@ function initNewProjectCreation(el, props) {
 
 const el = document.querySelector('.js-new-project-creation');
 
-const config = {
-  hasErrors: 'hasErrors' in el.dataset,
-  isCiCdAvailable: 'isCiCdAvailable' in el.dataset,
-  newProjectGuidelines: el.dataset.newProjectGuidelines,
-};
-
-initNewProjectCreation(el, config);
+initNewProjectCreation(el);

app/views/projects/new.html.haml

@@ -8,7 +8,7 @@
   .project-edit-errors
     = render 'projects/errors'
 
-  .js-new-project-creation{ data: { is_ci_cd_available: (ci_cd_projects_available? if Gitlab.ee?), has_errors: @project.errors.any?, new_project_guidelines: brand_new_project_guidelines, push_to_create_project_command: push_to_create_project_command, working_with_projects_help_path: help_page_path("user/project/working_with_projects") } }
+  .js-new-project-creation{ data: { is_ci_cd_available: (ci_cd_projects_available? if Gitlab.ee?).to_s, has_errors: @project.errors.any?.to_s, new_project_guidelines: brand_new_project_guidelines, push_to_create_project_command: push_to_create_project_command, working_with_projects_help_path: help_page_path("user/project/working_with_projects") } }
 
   .row{ 'v-cloak': true }
     #blank-project-pane.tab-pane.active

spec/frontend/pages/projects/new/components/app_spec.js

@@ -6,15 +6,21 @@ import NewNamespacePage from '~/vue_shared/new_namespace/new_namespace_page.vue'
 describe('Experimental new project creation app', () => {
   let wrapper;
 
+  const findNewNamespacePage = () => wrapper.findComponent(NewNamespacePage);
+
   const createComponent = (propsData) => {
     wrapper = shallowMount(App, { propsData });
   };
 
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
   describe('new_repo experiment', () => {
     it('passes new_repo experiment', () => {
       createComponent();
 
-      expect(wrapper.findComponent(NewNamespacePage).props().experiment).toBe('new_repo');
+      expect(findNewNamespacePage().props().experiment).toBe('new_repo');
     });
 
     describe('when in the candidate variant', () => {
@@ -23,7 +29,7 @@ describe('Experimental new project creation app', () => {
       it('has "repository" in the panel title', () => {
         createComponent();
 
-        expect(wrapper.findComponent(NewNamespacePage).props().panels[0].title).toBe(
+        expect(findNewNamespacePage().props().panels[0].title).toBe(
           'Create blank project/repository',
         );
       });
@@ -35,9 +41,7 @@ describe('Experimental new project creation app', () => {
       it('has "project" in the panel title', () => {
         createComponent();
 
-        expect(wrapper.findComponent(NewNamespacePage).props().panels[0].title).toBe(
-          'Create blank project',
-        );
+        expect(findNewNamespacePage().props().panels[0].title).toBe('Create blank project');
       });
     });
   });

spec/frontend/vue_shared/new_namespace/new_namespace_page_spec.js

@@ -8,6 +8,10 @@ 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',
@@ -31,14 +35,13 @@ describe('Experimental new project creation app', () => {
   afterEach(() => {
     wrapper.destroy();
     window.location.hash = '';
-    wrapper = null;
   });
 
   it('passes experiment to welcome component if provided', () => {
     const EXPERIMENT = 'foo';
     createComponent({ propsData: { experiment: EXPERIMENT } });
 
-    expect(wrapper.findComponent(WelcomePage).props().experiment).toBe(EXPERIMENT);
+    expect(findWelcomePage().props().experiment).toBe(EXPERIMENT);
   });
 
   describe('with empty hash', () => {
@@ -47,18 +50,18 @@ describe('Experimental new project creation app', () => {
     });
 
     it('renders welcome page', () => {
-      expect(wrapper.findComponent(WelcomePage).exists()).toBe(true);
+      expect(findWelcomePage().exists()).toBe(true);
     });
 
     it('does not render breadcrumbs', () => {
-      expect(wrapper.findComponent(GlBreadcrumb).exists()).toBe(false);
+      expect(findBreadcrumb().exists()).toBe(false);
     });
   });
 
   it('renders first container if jumpToLastPersistedPanel passed', () => {
     createComponent({ propsData: { jumpToLastPersistedPanel: true } });
-    expect(wrapper.findComponent(WelcomePage).exists()).toBe(false);
-    expect(wrapper.findComponent(LegacyContainer).exists()).toBe(true);
+    expect(findWelcomePage().exists()).toBe(false);
+    expect(findLegacyContainer().exists()).toBe(true);
   });
 
   describe('when hash is not empty on load', () => {
@@ -68,16 +71,16 @@ describe('Experimental new project creation app', () => {
     });
 
     it('renders relevant container', () => {
-      expect(wrapper.findComponent(WelcomePage).exists()).toBe(false);
+      expect(findWelcomePage().exists()).toBe(false);
 
-      const container = wrapper.findComponent(LegacyContainer);
+      const container = findLegacyContainer();
 
       expect(container.exists()).toBe(true);
       expect(container.props().selector).toBe(DEFAULT_PROPS.panels[1].selector);
     });
 
     it('renders breadcrumbs', () => {
-      const breadcrumb = wrapper.findComponent(GlBreadcrumb);
+      const breadcrumb = findBreadcrumb();
       expect(breadcrumb.exists()).toBe(true);
       expect(breadcrumb.props().items[0].text).toBe(DEFAULT_PROPS.initialBreadcrumb);
     });
@@ -97,7 +100,7 @@ describe('Experimental new project creation app', () => {
 
   it('renders relevant container when hash changes', async () => {
     createComponent();
-    expect(wrapper.findComponent(WelcomePage).exists()).toBe(true);
+    expect(findWelcomePage().exists()).toBe(true);
 
     window.location.hash = `#${DEFAULT_PROPS.panels[0].name}`;
     const ev = document.createEvent('HTMLEvents');
@@ -105,7 +108,7 @@ describe('Experimental new project creation app', () => {
     window.dispatchEvent(ev);
 
     await nextTick();
-    expect(wrapper.findComponent(WelcomePage).exists()).toBe(false);
-    expect(wrapper.findComponent(LegacyContainer).exists()).toBe(true);
+    expect(findWelcomePage().exists()).toBe(false);
+    expect(findLegacyContainer().exists()).toBe(true);
   });
 });