1 files changed, 24 insertions, 51 deletions

diff --git a/spec/frontend/runner/components/registration/registration_token_spec.js b/spec/frontend/runner/components/registration/registration_token_spec.js
index 6b9708cc525..cb42c7c8493 100644
--- a/spec/frontend/runner/components/registration/registration_token_spec.js
+++ b/spec/frontend/runner/components/registration/registration_token_spec.js
@@ -1,20 +1,17 @@
-import { nextTick } from 'vue';
 import { GlToast } from '@gitlab/ui';
 import { createLocalVue } from '@vue/test-utils';
-import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { mountExtended, shallowMountExtended } 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';
+import InputCopyToggleVisibility from '~/vue_shared/components/form/input_copy_toggle_visibility.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 findInputCopyToggleVisibility = () => wrapper.findComponent(InputCopyToggleVisibility);
 
   const vueWithGlToast = () => {
     const localVue = createLocalVue();
@@ -22,10 +19,14 @@ describe('RegistrationToken', () => {
     return localVue;
   };
 
-  const createComponent = ({ props = {}, withGlToast = true } = {}) => {
+  const createComponent = ({
+    props = {},
+    withGlToast = true,
+    mountFn = shallowMountExtended,
+  } = {}) => {
     const localVue = withGlToast ? vueWithGlToast() : undefined;
 
-    wrapper = shallowMountExtended(RegistrationToken, {
+    wrapper = mountFn(RegistrationToken, {
       propsData: {
         value: mockToken,
         ...props,
@@ -36,61 +37,33 @@ describe('RegistrationToken', () => {
     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 value and copy button', () => {
+    createComponent();
 
-  it('Displays button to reveal token', () => {
-    expect(findToggleMaskButton().attributes('aria-label')).toBe('Click to reveal');
+    expect(findInputCopyToggleVisibility().props('value')).toBe(mockToken);
+    expect(findInputCopyToggleVisibility().props('copyButtonTitle')).toBe(
+      'Copy registration token',
+    );
   });
 
-  it('Can copy the original token value', () => {
-    expect(findCopyButton().props('text')).toBe(mockToken);
+  // Component integration test to ensure secure masking
+  it('Displays masked value by default', () => {
+    createComponent({ mountFn: mountExtended });
+
+    expect(wrapper.find('input').element.value).toBe(mockMasked);
   });
 
-  describe('When the reveal icon is clicked', () => {
+  describe('When the copy to clipboard button is clicked', () => {
     beforeEach(() => {
-      findToggleMaskButton().vm.$emit('click', { stopPropagation });
-    });
-
-    it('Click event is not propagated', async () => {
-      expect(stopPropagation).toHaveBeenCalledTimes(1);
+      createComponent();
     });
 
-    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');
+      findInputCopyToggleVisibility().vm.$emit('copy');
 
       expect(showToast).toHaveBeenCalledTimes(1);
       expect(showToast).toHaveBeenCalledWith('Registration token copied!');
@@ -98,7 +71,7 @@ describe('RegistrationToken', () => {
 
     it('does not fail when toast is not defined', () => {
       createComponent({ withGlToast: false });
-      findCopyButton().vm.$emit('success');
+      findInputCopyToggleVisibility().vm.$emit('copy');
 
       // This block also tests for unhandled errors
       expect(showToast).toBeNull();