Merge branch 'vs-move-countries-states-to-gql' into 'master'

Add countries and states to local resolvers for the purchase flow

See merge request gitlab-org/gitlab!59012

ee/app/assets/javascripts/subscriptions/buy_minutes/graphql/resolvers.js

+import Api from 'ee/api';
 import * as SubscriptionsApi from 'ee/api/subscriptions_api';
+import { ERROR_FETCHING_COUNTRIES, ERROR_FETCHING_STATES } from 'ee/subscriptions/constants';
+import createFlash from '~/flash';
 
 // NOTE: These resolvers are temporary and will be removed in the future.
 // See https://gitlab.com/gitlab-org/gitlab/-/issues/321643
 export const resolvers = {
+  Query: {
+    countries: () => {
+      return Api.fetchCountries()
+        .then(({ data }) =>
+          data.map(([name, alpha2]) =>
+            // eslint-disable-next-line @gitlab/require-i18n-strings
+            ({ name, alpha2, __typename: 'Country' }),
+          ),
+        )
+        .catch(() => createFlash({ message: ERROR_FETCHING_COUNTRIES }));
+    },
+    states: (countryId) => {
+      return Api.fetchStates(countryId)
+        .then(({ data }) => {
+          // eslint-disable-next-line @gitlab/require-i18n-strings
+          return data.map((state) => Object.assign(state, { __typename: 'State' }));
+        })
+        .catch(() => createFlash({ message: ERROR_FETCHING_STATES }));
+    },
+  },
   Mutation: {
     purchaseMinutes: (_, { groupId, customer, subscription }) => {
       return SubscriptionsApi.createSubscription(groupId, customer, subscription);

ee/app/assets/javascripts/subscriptions/constants.js

+import { s__ } from '~/locale';
+
+export const ERROR_FETCHING_COUNTRIES = s__('Checkout|Failed to load countries. Please try again.');
+export const ERROR_FETCHING_STATES = s__('Checkout|Failed to load states. Please try again.');

ee/spec/frontend/subscriptions/graphql/resolvers_spec.js

+import Api from 'ee/api';
 import * as SubscriptionsApi from 'ee/api/subscriptions_api';
 import { resolvers } from 'ee/subscriptions/buy_minutes/graphql/resolvers';
+import { ERROR_FETCHING_COUNTRIES, ERROR_FETCHING_STATES } from 'ee/subscriptions/constants';
+import createFlash from '~/flash';
 
 jest.mock('ee/api/subscriptions_api', () => {
   return {
@@ -7,29 +10,104 @@ jest.mock('ee/api/subscriptions_api', () => {
   };
 });
 
-describe('~/subscriptions/buy_minutes/graphql/resolvers', () => {
-  const customer = {
-    country: 'NL',
-    address_1: 'Address line 1',
-    address_2: 'Address line 2',
-    city: 'City',
-    state: 'State',
-    zip_code: 'Zip code',
-    company: 'My organization',
+jest.mock('~/flash');
+
+jest.mock('ee/api', () => {
+  return {
+    fetchCountries: jest.fn(),
+    fetchStates: jest.fn(),
   };
+});
+
+const customer = {
+  country: 'NL',
+  address_1: 'Address line 1',
+  address_2: 'Address line 2',
+  city: 'City',
+  state: 'State',
+  zip_code: 'Zip code',
+  company: 'My organization',
+};
 
-  const subscription = {
-    plan_id: 'abc',
-    payment_method_id: 'payment_method_id',
-    products: {
-      main: {
-        quantity: 1,
-      },
+const subscription = {
+  plan_id: 'abc',
+  payment_method_id: 'payment_method_id',
+  products: {
+    main: {
+      quantity: 1,
     },
-    gl_namespace_id: 1,
-    gl_namespace_name: 'test',
-    preview: 'false',
-  };
+  },
+  gl_namespace_id: 1,
+  gl_namespace_name: 'test',
+  preview: 'false',
+};
+
+const countries = [
+  ['United States of America', 'US'],
+  ['Uruguay', 'UY'],
+];
+
+const states = [{ id: 1, name: 'state' }];
+
+describe('~/subscriptions/buy_minutes/graphql/resolvers', () => {
+  describe('Query', () => {
+    describe('countries', () => {
+      describe('on success', () => {
+        beforeEach(() => {
+          Api.fetchCountries.mockResolvedValue({ data: countries });
+        });
+
+        it('returns an array of countries with typename', async () => {
+          const result = await resolvers.Query.countries();
+
+          expect(createFlash).not.toHaveBeenCalled();
+          expect(result).toStrictEqual([
+            { name: 'United States of America', alpha2: 'US', __typename: 'Country' },
+            { name: 'Uruguay', alpha2: 'UY', __typename: 'Country' },
+          ]);
+        });
+      });
+
+      describe('on error', () => {
+        beforeEach(() => {
+          Api.fetchCountries.mockRejectedValue();
+        });
+
+        it('shows a flash message', async () => {
+          await resolvers.Query.countries();
+
+          expect(createFlash).toHaveBeenCalledWith({ message: ERROR_FETCHING_COUNTRIES });
+        });
+      });
+    });
+
+    describe('states', () => {
+      describe('on success', () => {
+        beforeEach(() => {
+          Api.fetchStates.mockResolvedValue({ data: states });
+        });
+
+        it('returns an array of states with typename', async () => {
+          const result = await resolvers.Query.states(1);
+
+          expect(createFlash).not.toHaveBeenCalled();
+          expect(result).toStrictEqual([{ id: 1, name: 'state', __typename: 'State' }]);
+        });
+      });
+
+      describe('on error', () => {
+        beforeEach(() => {
+          Api.fetchStates.mockRejectedValue();
+        });
+
+        it('shows a flash message', async () => {
+          await resolvers.Query.states();
+
+          expect(createFlash).toHaveBeenCalledWith({ message: ERROR_FETCHING_STATES });
+        });
+      });
+    });
+  });
 
   describe('Mutation', () => {
     it('calls the REST api', async () => {