Commit 9bbcb642 authored by Vitaly Slobodin's avatar Vitaly Slobodin

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
parents 71190031 e5dc4e5b
<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>
<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"
......
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));
});
});
});
......@@ -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));
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment