Prevent errors when focusing platform button

This change prevents changes in the apollo cache from causing errors
in the runner instructions modal.

Previously, it was assumed that an element was always focusable, this
change adds a check to ensure the element is not focused when its' not
available.

Changelog: fixed

app/assets/javascripts/vue_shared/components/runner_instructions/runner_instructions_modal.vue

@@ -155,7 +155,9 @@ export default {
       // get focused when setting a `defaultPlatformName`.
       // This method refocuses the expected button.
       // See more about this auto-focus: https://bootstrap-vue.org/docs/components/modal#auto-focus-on-open
-      this.$refs[this.selectedPlatform?.name]?.[0].$el.focus();
+      this.$nextTick(() => {
+        this.$refs[this.selectedPlatform?.name]?.[0]?.$el.focus();
+      });
     },
     selectPlatform(platform) {
       this.selectedPlatform = platform;

spec/frontend/vue_shared/components/runner_instructions/runner_instructions_modal_spec.js

 import { GlAlert, GlModal, GlButton, GlSkeletonLoader } from '@gitlab/ui';
 import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
-import { shallowMount, ErrorWrapper } from '@vue/test-utils';
+import { ErrorWrapper } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import getRunnerPlatformsQuery from '~/vue_shared/components/runner_instructions/graphql/get_runner_platforms.query.graphql';
 import RunnerInstructionsModal from '~/vue_shared/components/runner_instructions/runner_instructions_modal.vue';
@@ -15,6 +15,8 @@ import RunnerAwsInstructions from '~/vue_shared/components/runner_instructions/i
 
 import { mockRunnerPlatforms } from './mock_data';
 
+const mockPlatformList = mockRunnerPlatforms.data.runnerPlatforms.nodes;
+
 Vue.use(VueApollo);
 
 let resizeCallback;
@@ -52,22 +54,25 @@ describe('RunnerInstructionsModal component', () => {
   const findPlatformButtons = () => findPlatformButtonGroup().findAllComponents(GlButton);
   const findRunnerCliInstructions = () => wrapper.findComponent(RunnerCliInstructions);
 
-  const createComponent = ({ props, shown = true, ...options } = {}) => {
+  const createComponent = ({
+    props,
+    shown = true,
+    mountFn = shallowMountExtended,
+    ...options
+  } = {}) => {
     const requestHandlers = [[getRunnerPlatformsQuery, runnerPlatformsHandler]];
 
     fakeApollo = createMockApollo(requestHandlers);
 
-    wrapper = extendedWrapper(
-      shallowMount(RunnerInstructionsModal, {
-        propsData: {
-          modalId: 'runner-instructions-modal',
-          registrationToken: 'MY_TOKEN',
-          ...props,
-        },
-        apolloProvider: fakeApollo,
-        ...options,
-      }),
-    );
+    wrapper = mountFn(RunnerInstructionsModal, {
+      propsData: {
+        modalId: 'runner-instructions-modal',
+        registrationToken: 'MY_TOKEN',
+        ...props,
+      },
+      apolloProvider: fakeApollo,
+      ...options,
+    });
 
     // trigger open modal
     if (shown) {
@@ -98,15 +103,13 @@ describe('RunnerInstructionsModal component', () => {
 
       const buttons = findPlatformButtons();
 
-      expect(buttons).toHaveLength(mockRunnerPlatforms.data.runnerPlatforms.nodes.length);
+      expect(buttons).toHaveLength(mockPlatformList.length);
     });
 
     it('should display architecture options', () => {
       const { architectures } = findRunnerCliInstructions().props('platform');
 
-      expect(architectures).toEqual(
-        mockRunnerPlatforms.data.runnerPlatforms.nodes[0].architectures.nodes,
-      );
+      expect(architectures).toEqual(mockPlatformList[0].architectures.nodes);
     });
 
     describe.each`
@@ -139,6 +142,14 @@ describe('RunnerInstructionsModal component', () => {
         expect(findPlatformButtonGroup().props('vertical')).toBeUndefined();
       });
     });
+
+    it('should focus platform button', async () => {
+      createComponent({ shown: true, mountFn: mountExtended, attachTo: document.body });
+      wrapper.vm.show();
+      await waitForPromises();
+
+      expect(document.activeElement.textContent.trim()).toBe(mockPlatformList[0].humanReadableName);
+    });
   });
 
   describe.each([null, 'DEFINED'])('when registration token is %p', (token) => {