Fix States GQL local resolver

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

@@ -2,7 +2,10 @@ import { produce } from 'immer';
 import { merge } from 'lodash';
 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 {
+  ERROR_FETCHING_COUNTRIES,
+  ERROR_FETCHING_STATES,
+} from 'ee/subscriptions/constants';
 import STATE_QUERY from 'ee/subscriptions/graphql/queries/state.query.graphql';
 import createFlash from '~/flash';
 
@@ -20,11 +23,11 @@ export const resolvers = {
         )
         .catch(() => createFlash({ message: ERROR_FETCHING_COUNTRIES }));
     },
-    states: (countryId) => {
+    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' }));
+          return Object.entries(data).map(([key, value]) => ({ id: value, name: key, __typename: 'State' }));
         })
         .catch(() => createFlash({ message: ERROR_FETCHING_STATES }));
     },

ee/app/assets/javascripts/subscriptions/graphql/queries/states.query.graphql

+query State($countryId: ID!) {
+  states(countryId: $countryId) @client {
+    id
+    name
+  }
+}

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

@@ -47,7 +47,7 @@ const countries = [
   ['Uruguay', 'UY'],
 ];
 
-const states = [{ id: 1, name: 'state' }];
+const states = { 'California': 'CA' };
 
 describe('~/subscriptions/buy_minutes/graphql/resolvers', () => {
   describe('Query', () => {
@@ -88,10 +88,10 @@ describe('~/subscriptions/buy_minutes/graphql/resolvers', () => {
         });
 
         it('returns an array of states with typename', async () => {
-          const result = await resolvers.Query.states(1);
+          const result = await resolvers.Query.states(null, { countryId: 1 });
 
           expect(createFlash).not.toHaveBeenCalled();
-          expect(result).toStrictEqual([{ id: 1, name: 'state', __typename: 'State' }]);
+          expect(result).toStrictEqual([{ id: 'CA', name: 'California', __typename: 'State' }]);
         });
       });
 
@@ -101,7 +101,7 @@ describe('~/subscriptions/buy_minutes/graphql/resolvers', () => {
         });
 
         it('shows a flash message', async () => {
-          await resolvers.Query.states();
+          await resolvers.Query.states(null, { countryId: 1 });
 
           expect(createFlash).toHaveBeenCalledWith({ message: ERROR_FETCHING_STATES });
         });