Merge branch 'feat/enable-jh-to-override-country-list' into 'master'

Feat: enable JH to override country list in trial

See merge request gitlab-org/gitlab!78463

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));