1 files changed, 109 insertions, 0 deletions
diff --git a/spec/frontend/runner/components/registration/registration_token_spec.js b/spec/frontend/runner/components/registration/registration_token_spec.js
new file mode 100644
index 00000000000..f53ae165344
--- /dev/null
+++ b/spec/frontend/runner/components/registration/registration_token_spec.js
@@ -0,0 +1,109 @@
+import { nextTick } from 'vue';
+import { GlToast } from '@gitlab/ui';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import RegistrationToken from '~/runner/components/registration/registration_token.vue';
+import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
+
+const mockToken = '01234567890';
+const mockMasked = '***********';
+
+describe('RegistrationToken', () => {
+  let wrapper;
+  let stopPropagation;
+  let showToast;
+
+  const findToggleMaskButton = () => wrapper.findByTestId('toggle-masked');
+  const findCopyButton = () => wrapper.findComponent(ModalCopyButton);
+
+  const vueWithGlToast = () => {
+    const localVue = createLocalVue();
+    localVue.use(GlToast);
+    return localVue;
+  };
+
+  const createComponent = ({ props = {}, withGlToast = true } = {}) => {
+    const localVue = withGlToast ? vueWithGlToast() : undefined;
+
+    wrapper = extendedWrapper(
+      shallowMount(RegistrationToken, {
+        propsData: {
+          value: mockToken,
+          ...props,
+        },
+        localVue,
+      }),
+    );
+
+    showToast = wrapper.vm.$toast ? jest.spyOn(wrapper.vm.$toast, 'show') : null;
+  };
+
+  beforeEach(() => {
+    stopPropagation = jest.fn();
+
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('Displays masked value by default', () => {
+    expect(wrapper.text()).toBe(mockMasked);
+  });
+
+  it('Displays button to reveal token', () => {
+    expect(findToggleMaskButton().attributes('aria-label')).toBe('Click to reveal');
+  });
+
+  it('Can copy the original token value', () => {
+    expect(findCopyButton().props('text')).toBe(mockToken);
+  });
+
+  describe('When the reveal icon is clicked', () => {
+    beforeEach(() => {
+      findToggleMaskButton().vm.$emit('click', { stopPropagation });
+    });
+
+    it('Click event is not propagated', async () => {
+      expect(stopPropagation).toHaveBeenCalledTimes(1);
+    });
+
+    it('Displays the actual value', () => {
+      expect(wrapper.text()).toBe(mockToken);
+    });
+
+    it('Can copy the original token value', () => {
+      expect(findCopyButton().props('text')).toBe(mockToken);
+    });
+
+    it('Displays button to mask token', () => {
+      expect(findToggleMaskButton().attributes('aria-label')).toBe('Click to hide');
+    });
+
+    it('When user clicks again, displays masked value', async () => {
+      findToggleMaskButton().vm.$emit('click', { stopPropagation });
+      await nextTick();
+
+      expect(wrapper.text()).toBe(mockMasked);
+      expect(findToggleMaskButton().attributes('aria-label')).toBe('Click to reveal');
+    });
+  });
+
+  describe('When the copy to clipboard button is clicked', () => {
+    it('shows a copied message', () => {
+      findCopyButton().vm.$emit('success');
+
+      expect(showToast).toHaveBeenCalledTimes(1);
+      expect(showToast).toHaveBeenCalledWith('Registration token copied!');
+    });
+
+    it('does not fail when toast is not defined', () => {
+      createComponent({ withGlToast: false });
+      findCopyButton().vm.$emit('success');
+
+      // This block also tests for unhandled errors
+      expect(showToast).toBeNull();
+    });
+  });
+});