1 files changed, 117 insertions, 0 deletions
diff --git a/spec/frontend/vue_shared/components/runner_instructions/instructions/runner_aws_instructions_spec.js b/spec/frontend/vue_shared/components/runner_instructions/instructions/runner_aws_instructions_spec.js
new file mode 100644
index 00000000000..4d566dbec0c
--- /dev/null
+++ b/spec/frontend/vue_shared/components/runner_instructions/instructions/runner_aws_instructions_spec.js
@@ -0,0 +1,117 @@
+import {
+  GlAccordion,
+  GlAccordionItem,
+  GlButton,
+  GlFormRadio,
+  GlFormRadioGroup,
+  GlLink,
+  GlSprintf,
+} from '@gitlab/ui';
+import { getBaseURL, visitUrl } from '~/lib/utils/url_utility';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { mockTracking } from 'helpers/tracking_helper';
+import {
+  AWS_README_URL,
+  AWS_CF_BASE_URL,
+  AWS_TEMPLATES_BASE_URL,
+  AWS_EASY_BUTTONS,
+} from '~/vue_shared/components/runner_instructions/constants';
+import RunnerAwsInstructions from '~/vue_shared/components/runner_instructions/instructions/runner_aws_instructions.vue';
+import { __ } from '~/locale';
+
+jest.mock('~/lib/utils/url_utility', () => ({
+  ...jest.requireActual('~/lib/utils/url_utility'),
+  visitUrl: jest.fn(),
+}));
+
+describe('RunnerAwsInstructions', () => {
+  let wrapper;
+
+  const findEasyButtonsRadioGroup = () => wrapper.findComponent(GlFormRadioGroup);
+  const findEasyButtons = () => wrapper.findAllComponents(GlFormRadio);
+  const findEasyButtonAt = (i) => findEasyButtons().at(i);
+  const findLink = () => wrapper.findComponent(GlLink);
+  const findOkButton = () =>
+    wrapper
+      .findAllComponents(GlButton)
+      .filter((w) => w.props('variant') === 'confirm')
+      .at(0);
+  const findCloseButton = () => wrapper.findByText(__('Close'));
+
+  const createComponent = () => {
+    wrapper = shallowMountExtended(RunnerAwsInstructions, {
+      stubs: {
+        GlSprintf,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  it('should contain every button', () => {
+    expect(findEasyButtons()).toHaveLength(AWS_EASY_BUTTONS.length);
+  });
+
+  const AWS_EASY_BUTTONS_PARAMS = AWS_EASY_BUTTONS.map((val, idx) => ({ ...val, idx }));
+
+  describe.each(AWS_EASY_BUTTONS_PARAMS)(
+    'easy button %#',
+    ({ idx, description, moreDetails1, moreDetails2, templateName, stackName }) => {
+      it('should contain button description', () => {
+        const text = findEasyButtonAt(idx).text();
+
+        expect(text).toContain(description);
+        expect(text).toContain(moreDetails1);
+        expect(text).toContain(moreDetails2);
+      });
+
+      it('should show more details', () => {
+        const accordion = findEasyButtonAt(idx).findComponent(GlAccordion);
+        const accordionItem = accordion.findComponent(GlAccordionItem);
+
+        expect(accordion.props('headerLevel')).toBe(3);
+        expect(accordionItem.props('title')).toBe(__('More Details'));
+        expect(accordionItem.props('titleVisible')).toBe(__('Less Details'));
+      });
+
+      describe('when clicked', () => {
+        let trackingSpy;
+
+        beforeEach(() => {
+          trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
+
+          findEasyButtonsRadioGroup().vm.$emit('input', idx);
+          findOkButton().vm.$emit('click');
+        });
+
+        it('should contain the correct link', () => {
+          const templateUrl = encodeURIComponent(AWS_TEMPLATES_BASE_URL + templateName);
+          const instanceUrl = encodeURIComponent(getBaseURL());
+          const url = `${AWS_CF_BASE_URL}templateURL=${templateUrl}&stackName=${stackName}&param_3GITLABRunnerInstanceURL=${instanceUrl}`;
+
+          expect(visitUrl).toHaveBeenCalledTimes(1);
+          expect(visitUrl).toHaveBeenCalledWith(url, true);
+        });
+
+        it('should track an event when clicked', () => {
+          expect(trackingSpy).toHaveBeenCalledTimes(1);
+          expect(trackingSpy).toHaveBeenCalledWith(undefined, 'template_clicked', {
+            label: stackName,
+          });
+        });
+      });
+    },
+  );
+
+  it('displays link with more information', () => {
+    expect(findLink().attributes('href')).toBe(AWS_README_URL);
+  });
+
+  it('triggers the modal to close', () => {
+    findCloseButton().vm.$emit('click');
+
+    expect(wrapper.emitted('close')).toHaveLength(1);
+  });
+});