1 files changed, 108 insertions, 0 deletions
diff --git a/spec/frontend/deploy_tokens/components/revoke_button_spec.js b/spec/frontend/deploy_tokens/components/revoke_button_spec.js
new file mode 100644
index 00000000000..e70dfe4d2e6
--- /dev/null
+++ b/spec/frontend/deploy_tokens/components/revoke_button_spec.js
@@ -0,0 +1,108 @@
+import { GlModal } from '@gitlab/ui';
+import { mount } from '@vue/test-utils';
+import { stubComponent } from 'helpers/stub_component';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import RevokeButton from '~/deploy_tokens/components/revoke_button.vue';
+
+const mockToken = {
+  created_at: '2021-03-18T19:13:03.011Z',
+  deploy_token_type: 'project_type',
+  expires_at: null,
+  id: 1,
+  name: 'testtoken',
+  read_package_registry: true,
+  read_registry: false,
+  read_repository: true,
+  revoked: false,
+  token: 'xUVsGDfK4y_Xj5UhqvaH',
+  token_encrypted: 'JYeg+WK4obIlrhyAYWvBvaY7CNB/U3FPX3cdLrivAly5qToy',
+  username: 'gitlab+deploy-token-1',
+  write_package_registry: true,
+  write_registry: false,
+};
+const mockRevokePath = '';
+
+describe('RevokeButton', () => {
+  let wrapper;
+  let glModalDirective;
+
+  function createComponent(injectedProperties = {}) {
+    glModalDirective = jest.fn();
+    return extendedWrapper(
+      mount(RevokeButton, {
+        provide: {
+          token: mockToken,
+          revokePath: mockRevokePath,
+          ...injectedProperties,
+        },
+        directives: {
+          glModal: {
+            bind(_, { value }) {
+              glModalDirective(value);
+            },
+          },
+        },
+        stubs: {
+          GlModal: stubComponent(GlModal, {
+            template:
+              '<div><slot name="modal-title"></slot><slot></slot><slot name="modal-footer"></slot></div>',
+          }),
+        },
+      }),
+    );
+  }
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const findRevokeButton = () => wrapper.findByTestId('revoke-button');
+  const findModal = () => wrapper.findComponent(GlModal);
+  const findPrimaryModalButton = () => wrapper.findByTestId('primary-revoke-btn');
+
+  describe('template', () => {
+    beforeEach(() => {
+      wrapper = createComponent();
+    });
+
+    describe('revoke button', () => {
+      it('displays the revoke button', () => {
+        expect(findRevokeButton().exists()).toBe(true);
+      });
+
+      it('passes the buttonClass to the button', () => {
+        wrapper = createComponent({ buttonClass: 'my-revoke-button' });
+        expect(findRevokeButton().classes()).toContain('my-revoke-button');
+      });
+
+      it('opens the modal', () => {
+        findRevokeButton().trigger('click');
+        expect(glModalDirective).toHaveBeenCalledWith(wrapper.vm.modalId);
+      });
+    });
+
+    describe('modal', () => {
+      beforeEach(() => {
+        wrapper = createComponent();
+      });
+
+      it('renders the revoke modal', () => {
+        expect(findModal().exists()).toBe(true);
+      });
+
+      it('displays the token name in the modal title', () => {
+        expect(findModal().text()).toContain('Revoke testtoken');
+      });
+
+      it('displays the token name in the primary action button"', () => {
+        expect(findPrimaryModalButton().text()).toBe('Revoke testtoken');
+      });
+
+      it('passes the revokePath to the button', () => {
+        const revokePath = 'gitlab-org/gitlab-test/-/deploy-tokens/1/revoke';
+        wrapper = createComponent({ revokePath });
+        expect(findPrimaryModalButton().attributes('href')).toBe(revokePath);
+      });
+    });
+  });
+});