Add tests and cleanup path

ee/app/assets/javascripts/registrations/company/components/registration_form.vue → ee/app/assets/javascripts/registrations/company/new/components/registration_form.vue

@@ -6,13 +6,13 @@ import {
   companySizes,
 } from 'ee/vue_shared/leads/constants';
 import csrf from '~/lib/utils/csrf';
-import CountryOrRegionSelector from '../../../trials/components/country_or_region_selector.vue';
+import CountryOrRegionSelector from '../../../../trials/components/country_or_region_selector.vue';
 import {
   TRIAL_COMPANY_SIZE_PROMPT,
   TRIAL_PHONE_DESCRIPTION,
   TRIAL_FORM_SUBMIT_TEXT,
-} from '../../../trials/constants';
-import RegistrationTrialToggle from '../../components/registration_trial_toggle.vue';
+} from '../../../../trials/constants';
+import RegistrationTrialToggle from '../../../components/registration_trial_toggle.vue';
 
 export default {
   csrf,
@@ -26,8 +26,9 @@ export default {
     CountryOrRegionSelector,
     RegistrationTrialToggle,
   },
+  inject: ['createLeadPath'],
   props: {
-    active: {
+    trial: {
       type: Boolean,
       required: false,
       default: false,
@@ -65,7 +66,7 @@ export default {
 </script>
 
 <template>
-  <gl-form :action="__('/-/trials/create_lead')" method="post">
+  <gl-form :action="createLeadPath" method="post" novalidate>
     <input :value="$options.csrf.token" type="hidden" name="authenticity_token" />
     <div class="gl-display-flex gl-flex-direction-column gl-sm-flex-direction-row gl-mt-5">
       <gl-form-group
@@ -74,7 +75,13 @@ export default {
         label-for="company_name"
         class="gl-mr-5 gl-w-half gl-xs-w-full"
       >
-        <gl-form-input id="company_name" :value="companyName" name="company_name" required />
+        <gl-form-input
+          id="company_name"
+          :value="companyName"
+          name="company_name"
+          data-testid="company_name"
+          required
+        />
       </gl-form-group>
       <gl-form-group
         :label="$options.i18n.companySizeLabel"
@@ -89,11 +96,12 @@ export default {
           :options="companySizeOptionsWithDefault"
           value-field="id"
           text-field="name"
+          data-testid="company_size"
           required
         />
       </gl-form-group>
     </div>
-    <country-or-region-selector :country="country" :state="state" required />
+    <country-or-region-selector :country="country" :state="state" data-testid="country" required />
     <gl-form-group
       label="Telephone Number (Optional)"
       label-size="sm"
@@ -105,17 +113,18 @@ export default {
         :value="phoneNumber"
         name="phone_number"
         type="tel"
+        data-testid="phone_number"
         pattern="^(\+)*[0-9-\s]+$"
       />
     </gl-form-group>
     <gl-form-group label="Website (Optional)" label-size="sm" label-for="website">
-      <gl-form-input id="website" :value="website" name="website" />
+      <gl-form-input id="website" :value="website" name="website" data-testid="website" />
     </gl-form-group>
-    <gl-form-group label="GitLab Ultimate trial (optional)" label-size="sm" label-for="website">
+    <gl-form-group label="GitLab Ultimate trial (optional)" label-size="sm">
       <gl-form-text class="gl-pb-3">{{
         __('Try all GitLab features for free for 30 days. No credit card required.')
       }}</gl-form-text>
-      <registration-trial-toggle :active="active" />
+      <registration-trial-toggle :active="trial" data-testid="trial" />
     </gl-form-group>
     <gl-button type="submit" variant="confirm" class="gl-w-20">
       {{ $options.i18n.formSubmitText }}

ee/app/assets/javascripts/registrations/company/new/index.js

 import Vue from 'vue';
 import apolloProvider from 'ee/subscriptions/buy_addons_shared/graphql';
-import RegistrationForm from '../components/registration_form.vue';
+import RegistrationForm from './components/registration_form.vue';
 
 export default () => {
   const el = document.querySelector('#js-company-registration-form');
 
-  const { active } = el.dataset;
+  const { trial, createLeadPath } = el.dataset;
 
   return new Vue({
     el,
     apolloProvider,
+    provide: { createLeadPath },
     render(createElement) {
       return createElement(RegistrationForm, {
-        props: { active },
+        props: { trial },
       });
     },
   });

ee/app/controllers/registrations/company_controller.rb

@@ -2,13 +2,9 @@
 
 module Registrations
   class CompanyController < ApplicationController
-    include Registrations::CreateGroup
-    include Registrations::ApplyTrial
-    include ::Gitlab::Utils::StrongMemoize
-    include OneTrustCSP
-
     layout 'minimal'
 
+    before_action :check_if_gl_com_or_dev
     feature_category :onboarding
 
     def new

ee/app/views/registrations/company/new.html.haml

 - page_title _('Start your Free Ultimate Trial')
-- content_for :page_specific_javascripts do
-  = render "layouts/google_tag_manager_head"
-  = render "layouts/one_trust"
-= render "layouts/google_tag_manager_body"
 
 .row
   .col-md-6.m-sm-6
     %h2.gl-pb-5.gl-my-0
       = _("About your company")
 
-      #js-company-registration-form{ data: { active: params[:trial] == 'true' } }
+      #js-company-registration-form{ data: { trial: params[:trial] == 'true', create_lead_path: create_lead_trials_path } }
 
   .col-md-4.gl-display-inline-flex.gl-vertical-align-middle
     = image_tag 'illustrations/saas-trial-illustration.svg', alt: '', class: 'gl-display-none d-md-inline gl-w-full'

ee/spec/controllers/registrations/company_controller_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe Registrations::CompanyController do
+  let_it_be(:user) { create(:user) }
+
+  describe 'GET #new' do
+    subject { get :new }
+
+    context 'with an unauthenticated user' do
+      it { is_expected.to have_gitlab_http_status(:redirect) }
+      it { is_expected.to redirect_to(new_user_session_path) }
+    end
+
+    context 'with an authenticated user' do
+      let(:com) { true }
+
+      before do
+        sign_in(user)
+        allow(::Gitlab).to receive(:com?).and_return(com)
+      end
+
+      context 'when on .com' do
+        it { is_expected.to have_gitlab_http_status(:ok) }
+        it { is_expected.to render_template 'layouts/minimal' }
+        it { is_expected.to render_template(:new) }
+      end
+
+      context 'when not on .com' do
+        let(:com) { false }
+
+        it { is_expected.to have_gitlab_http_status(:not_found) }
+      end
+    end
+  end
+end

ee/spec/frontend/registrations/company/new/components/registration_form_spec.js

+import { GlButton, GlForm } from '@gitlab/ui';
+import { createLocalVue } from '@vue/test-utils';
+import VueApollo from 'vue-apollo';
+import RegistrationForm from 'ee/registrations/company/new/components/registration_form.vue';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { TRIAL_FORM_SUBMIT_TEXT } from 'ee/trials/constants';
+
+const localVue = createLocalVue();
+localVue.use(VueApollo);
+
+const SUBMIT_PATH = '_submit_path_';
+
+describe('RegistrationForm', () => {
+  let wrapper;
+
+  const createComponent = ({ mountFunction = shallowMountExtended } = {}) => {
+    return mountFunction(RegistrationForm, {
+      localVue,
+      provide: {
+        createLeadPath: SUBMIT_PATH,
+      },
+      propsData: { trial: true },
+    });
+  };
+
+  const findButton = () => wrapper.findComponent(GlButton);
+  const findForm = () => wrapper.findComponent(GlForm);
+
+  beforeEach(() => {
+    wrapper = createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('rendering', () => {
+    it('has the "Continue" text on the submit button', () => {
+      expect(findButton().text()).toBe(TRIAL_FORM_SUBMIT_TEXT);
+    });
+
+    it('sets the trial value to be true', () => {
+      expect(wrapper.props().trial).toBe(true);
+    });
+
+    it('has the correct form input in the form content', () => {
+      const visibleFields = [
+        'company_name',
+        'company_size',
+        'country',
+        'phone_number',
+        'website',
+        'trial',
+      ];
+
+      visibleFields.forEach((f) => expect(wrapper.findByTestId(f).exists()).toBe(true));
+    });
+  });
+
+  describe('submitting', () => {
+    it('submits the form when button is clicked', () => {
+      expect(findButton().attributes('type')).toBe('submit');
+    });
+
+    it('displays form with correct action', () => {
+      expect(findForm().attributes('action')).toBe(SUBMIT_PATH);
+    });
+  });
+});