1 files changed, 102 insertions, 0 deletions
diff --git a/spec/frontend/ci_settings_pipeline_triggers/components/triggers_list_spec.js b/spec/frontend/ci_settings_pipeline_triggers/components/triggers_list_spec.js
new file mode 100644
index 00000000000..e07afb5d736
--- /dev/null
+++ b/spec/frontend/ci_settings_pipeline_triggers/components/triggers_list_spec.js
@@ -0,0 +1,102 @@
+import { mount } from '@vue/test-utils';
+import { GlTable, GlBadge } from '@gitlab/ui';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+
+import TriggersList from '~/ci_settings_pipeline_triggers/components/triggers_list.vue';
+import { triggers } from '../mock_data';
+
+describe('TriggersList', () => {
+  let wrapper;
+
+  const createComponent = (props = {}) => {
+    wrapper = mount(TriggersList, {
+      propsData: { triggers, ...props },
+    });
+  };
+
+  const findTable = () => wrapper.find(GlTable);
+  const findHeaderAt = i => wrapper.findAll('thead th').at(i);
+  const findRows = () => wrapper.findAll('tbody tr');
+  const findRowAt = i => findRows().at(i);
+  const findCell = (i, col) =>
+    findRowAt(i)
+      .findAll('td')
+      .at(col);
+  const findClipboardBtn = i => findCell(i, 0).find(ClipboardButton);
+  const findInvalidBadge = i => findCell(i, 0).find(GlBadge);
+  const findEditBtn = i => findRowAt(i).find('[data-testid="edit-btn"]');
+  const findRevokeBtn = i => findRowAt(i).find('[data-testid="trigger_revoke_button"]');
+
+  beforeEach(() => {
+    createComponent();
+
+    return wrapper.vm.$nextTick();
+  });
+
+  it('displays a table with expected headers', () => {
+    const headers = ['Token', 'Description', 'Owner', 'Last Used', ''];
+    headers.forEach((header, i) => {
+      expect(findHeaderAt(i).text()).toBe(header);
+    });
+  });
+
+  it('displays a table with rows', () => {
+    expect(findRows()).toHaveLength(triggers.length);
+
+    const [trigger] = triggers;
+
+    expect(findCell(0, 0).text()).toBe(trigger.token);
+    expect(findCell(0, 1).text()).toBe(trigger.description);
+    expect(findCell(0, 2).text()).toContain(trigger.owner.name);
+  });
+
+  it('displays a "copy to cliboard" button for exposed tokens', () => {
+    expect(findClipboardBtn(0).exists()).toBe(true);
+    expect(findClipboardBtn(0).props('text')).toBe(triggers[0].token);
+
+    expect(findClipboardBtn(1).exists()).toBe(false);
+  });
+
+  it('displays an "invalid" label for tokens without access', () => {
+    expect(findInvalidBadge(0).exists()).toBe(false);
+
+    expect(findInvalidBadge(1).exists()).toBe(true);
+  });
+
+  it('displays a time ago label when last used', () => {
+    expect(findCell(0, 3).text()).toBe('Never');
+
+    expect(
+      findCell(1, 3)
+        .find(TimeAgoTooltip)
+        .props('time'),
+    ).toBe(triggers[1].lastUsed);
+  });
+
+  it('displays actions in a rows', () => {
+    const [data] = triggers;
+
+    expect(findEditBtn(0).attributes('href')).toBe(data.editProjectTriggerPath);
+
+    expect(findRevokeBtn(0).attributes('href')).toBe(data.projectTriggerPath);
+    expect(findRevokeBtn(0).attributes('data-method')).toBe('delete');
+    expect(findRevokeBtn(0).attributes('data-confirm')).toBeTruthy();
+  });
+
+  describe('when there are no triggers set', () => {
+    beforeEach(() => {
+      createComponent({ triggers: [] });
+    });
+
+    it('does not display a table', () => {
+      expect(findTable().exists()).toBe(false);
+    });
+
+    it('displays a message', () => {
+      expect(wrapper.text()).toBe(
+        'No triggers have been created yet. Add one using the form above.',
+      );
+    });
+  });
+});