Feat: enable JH to override country list in trial

Extract country and region form group to allow JH to override
Replace the country and region selected part with the extracted
component

ee/app/assets/javascripts/trials/components/country_or_region_selector.vue

+<script>
+import { GlFormGroup, GlFormSelect } from '@gitlab/ui';
+import countriesQuery from 'ee/subscriptions/graphql/queries/countries.query.graphql';
+import { LEADS_COUNTRY_LABEL, LEADS_COUNTRY_PROMPT } from 'ee/vue_shared/leads/constants';
+
+export default {
+  name: 'CountryOrRegionList',
+  components: {
+    GlFormGroup,
+    GlFormSelect,
+  },
+  inject: ['user'],
+  data() {
+    return { ...this.user, countries: [] };
+  },
+  i18n: {
+    countryLabel: LEADS_COUNTRY_LABEL,
+    countrySelectPrompt: LEADS_COUNTRY_PROMPT,
+  },
+  computed: {
+    countryOptionsWithDefault() {
+      return [
+        {
+          name: this.$options.i18n.countrySelectPrompt,
+          id: null,
+        },
+        ...this.countries,
+      ];
+    },
+  },
+  apollo: {
+    countries: {
+      query: countriesQuery,
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-form-group
+    v-if="!$apollo.loading.countries"
+    :label="$options.i18n.countryLabel"
+    label-size="sm"
+    label-for="country"
+  >
+    <gl-form-select
+      id="country"
+      :value="country"
+      name="country"
+      :options="countryOptionsWithDefault"
+      value-field="id"
+      text-field="name"
+      data-qa-selector="country"
+      data-testid="country"
+      required
+    />
+  </gl-form-group>
+</template>

ee/app/assets/javascripts/trials/components/trial_create_lead_form.vue

 <script>
 import { GlForm, GlButton, GlFormGroup, GlFormInput, GlFormSelect } from '@gitlab/ui';
+import CountryOrRegionSelector from 'jh_else_ee/trials/components/country_or_region_selector.vue';
 import csrf from '~/lib/utils/csrf';
-import countriesQuery from 'ee/subscriptions/graphql/queries/countries.query.graphql';
 import autofocusonshow from '~/vue_shared/directives/autofocusonshow';
 import { trackSaasTrialSubmit } from '~/google_tag_manager';
 import {
   LEADS_COMPANY_NAME_LABEL,
   LEADS_COMPANY_SIZE_LABEL,
-  LEADS_COUNTRY_LABEL,
-  LEADS_COUNTRY_PROMPT,
   LEADS_FIRST_NAME_LABEL,
   LEADS_LAST_NAME_LABEL,
   LEADS_PHONE_NUMBER_LABEL,
@@ -29,21 +27,14 @@ export default {
     GlFormGroup,
     GlFormInput,
     GlFormSelect,
+    CountryOrRegionSelector,
   },
   directives: {
     autofocusonshow,
   },
   inject: ['user', 'submitPath'],
   data() {
-    return {
-      ...this.user,
-      countries: [],
-    };
-  },
-  apollo: {
-    countries: {
-      query: countriesQuery,
-    },
+    return this.user;
   },
   computed: {
     companySizeOptionsWithDefault() {
@@ -55,15 +46,6 @@ export default {
         ...companySizes,
       ];
     },
-    countryOptionsWithDefault() {
-      return [
-        {
-          name: this.$options.i18n.countrySelectPrompt,
-          id: null,
-        },
-        ...this.countries,
-      ];
-    },
   },
   methods: {
     onSubmit() {
@@ -76,8 +58,6 @@ export default {
     companyNameLabel: LEADS_COMPANY_NAME_LABEL,
     companySizeLabel: LEADS_COMPANY_SIZE_LABEL,
     phoneNumberLabel: LEADS_PHONE_NUMBER_LABEL,
-    countryLabel: LEADS_COUNTRY_LABEL,
-    countrySelectPrompt: LEADS_COUNTRY_PROMPT,
     formSubmitText: TRIAL_FORM_SUBMIT_TEXT,
     companySizeSelectPrompt: TRIAL_COMPANY_SIZE_PROMPT,
     phoneNumberDescription: TRIAL_PHONE_DESCRIPTION,
@@ -143,24 +123,7 @@ export default {
         required
       />
     </gl-form-group>
-    <gl-form-group
-      v-if="!$apollo.loading.countries"
-      :label="$options.i18n.countryLabel"
-      label-size="sm"
-      label-for="country"
-    >
-      <gl-form-select
-        id="country"
-        :value="country"
-        name="country"
-        :options="countryOptionsWithDefault"
-        value-field="id"
-        text-field="name"
-        data-qa-selector="country"
-        data-testid="country"
-        required
-      />
-    </gl-form-group>
+    <country-or-region-selector />
     <gl-form-group
       :label="$options.i18n.phoneNumberLabel"
       label-size="sm"

ee/spec/frontend/trials/components/country_or_region_selector_spec.js

+import VueApollo from 'vue-apollo';
+import { createLocalVue } from '@vue/test-utils';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import CountryOrRegionList from 'ee/trials/components/country_or_region_selector.vue';
+import { formData } from './mock_data';
+
+const localVue = createLocalVue();
+localVue.use(VueApollo);
+
+describe('CountryOrRegionList', () => {
+  let wrapper;
+
+  const createComponent = ({ mountFunction = shallowMountExtended } = {}) => {
+    const mockResolvers = {
+      Query: {
+        countries() {
+          return [{ id: 'US', name: 'United States' }];
+        },
+      },
+    };
+
+    return mountFunction(CountryOrRegionList, {
+      localVue,
+      apolloProvider: createMockApollo([], mockResolvers),
+      provide: {
+        user: formData,
+      },
+    });
+  };
+
+  const findFormInput = (testId) => wrapper.findByTestId(testId);
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('rendering', () => {
+    beforeEach(() => {
+      wrapper = createComponent();
+    });
+
+    it.each`
+      testid       | value
+      ${'country'} | ${'US'}
+    `('has the default injected value for $testid', ({ testid, value }) => {
+      expect(findFormInput(testid).attributes('value')).toBe(value);
+    });
+
+    it('has the correct form input in the form content', () => {
+      const visibleFields = ['country'];
+
+      visibleFields.forEach((f) => expect(wrapper.findByTestId(f).exists()).toBe(true));
+    });
+  });
+});

ee/spec/frontend/trials/components/trial_create_lead_form_spec.js

@@ -2,7 +2,6 @@ import { GlButton, GlForm } from '@gitlab/ui';
 import { createLocalVue } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import createMockApollo from 'helpers/mock_apollo_helper';
 import TrialCreateLeadForm from 'ee/trials/components/trial_create_lead_form.vue';
 import { TRIAL_FORM_SUBMIT_TEXT } from 'ee/trials/constants';
 import { trackSaasTrialSubmit } from '~/google_tag_manager';
@@ -19,17 +18,8 @@ describe('TrialCreateLeadForm', () => {
   let wrapper;
 
   const createComponent = ({ mountFunction = shallowMountExtended } = {}) => {
-    const mockResolvers = {
-      Query: {
-        countries() {
-          return [{ id: 'US', name: 'United States' }];
-        },
-      },
-    };
-
     return mountFunction(TrialCreateLeadForm, {
       localVue,
-      apolloProvider: createMockApollo([], mockResolvers),
       provide: {
         submitPath,
         user: formData,
@@ -61,7 +51,6 @@ describe('TrialCreateLeadForm', () => {
       ${'company_name'} | ${'ACME'}
       ${'phone_number'} | ${'192919'}
       ${'company_size'} | ${'1-99'}
-      ${'country'}      | ${'US'}
     `('has the default injected value for $testid', ({ testid, value }) => {
       expect(findFormInput(testid).attributes('value')).toBe(value);
     });
@@ -73,7 +62,6 @@ describe('TrialCreateLeadForm', () => {
         'company_name',
         'company_size',
         'phone_number',
-        'country',
       ];
 
       visibleFields.forEach((f) => expect(wrapper.findByTestId(f).exists()).toBe(true));