1 files changed, 117 insertions, 0 deletions
diff --git a/spec/frontend/clusters_list/components/agent_table_spec.js b/spec/frontend/clusters_list/components/agent_table_spec.js
new file mode 100644
index 00000000000..e3b90584f29
--- /dev/null
+++ b/spec/frontend/clusters_list/components/agent_table_spec.js
@@ -0,0 +1,117 @@
+import { GlButton, GlLink, GlIcon } from '@gitlab/ui';
+import AgentTable from '~/clusters_list/components/agent_table.vue';
+import { ACTIVE_CONNECTION_TIME } from '~/clusters_list/constants';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import timeagoMixin from '~/vue_shared/mixins/timeago';
+
+const connectedTimeNow = new Date();
+const connectedTimeInactive = new Date(connectedTimeNow.getTime() - ACTIVE_CONNECTION_TIME);
+
+const propsData = {
+  agents: [
+    {
+      name: 'agent-1',
+      configFolder: {
+        webPath: '/agent/full/path',
+      },
+      webPath: '/agent-1',
+      status: 'unused',
+      lastContact: null,
+      tokens: null,
+    },
+    {
+      name: 'agent-2',
+      webPath: '/agent-2',
+      status: 'active',
+      lastContact: connectedTimeNow.getTime(),
+      tokens: {
+        nodes: [
+          {
+            lastUsedAt: connectedTimeNow,
+          },
+        ],
+      },
+    },
+    {
+      name: 'agent-3',
+      webPath: '/agent-3',
+      status: 'inactive',
+      lastContact: connectedTimeInactive.getTime(),
+      tokens: {
+        nodes: [
+          {
+            lastUsedAt: connectedTimeInactive,
+          },
+        ],
+      },
+    },
+  ],
+};
+const provideData = { integrationDocsUrl: 'path/to/integrationDocs' };
+
+describe('AgentTable', () => {
+  let wrapper;
+
+  const findAgentLink = (at) => wrapper.findAllByTestId('cluster-agent-name-link').at(at);
+  const findStatusIcon = (at) => wrapper.findAllComponents(GlIcon).at(at);
+  const findStatusText = (at) => wrapper.findAllByTestId('cluster-agent-connection-status').at(at);
+  const findLastContactText = (at) => wrapper.findAllByTestId('cluster-agent-last-contact').at(at);
+  const findConfiguration = (at) =>
+    wrapper.findAllByTestId('cluster-agent-configuration-link').at(at);
+
+  beforeEach(() => {
+    wrapper = mountExtended(AgentTable, { propsData, provide: provideData });
+  });
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.destroy();
+      wrapper = null;
+    }
+  });
+
+  it('displays header button', () => {
+    expect(wrapper.find(GlButton).text()).toBe('Install a new GitLab Agent');
+  });
+
+  describe('agent table', () => {
+    it.each`
+      agentName    | link          | lineNumber
+      ${'agent-1'} | ${'/agent-1'} | ${0}
+      ${'agent-2'} | ${'/agent-2'} | ${1}
+    `('displays agent link', ({ agentName, link, lineNumber }) => {
+      expect(findAgentLink(lineNumber).text()).toBe(agentName);
+      expect(findAgentLink(lineNumber).attributes('href')).toBe(link);
+    });
+
+    it.each`
+      status               | iconName               | lineNumber
+      ${'Never connected'} | ${'status-neutral'}    | ${0}
+      ${'Connected'}       | ${'status-success'}    | ${1}
+      ${'Not connected'}   | ${'severity-critical'} | ${2}
+    `('displays agent connection status', ({ status, iconName, lineNumber }) => {
+      expect(findStatusText(lineNumber).text()).toBe(status);
+      expect(findStatusIcon(lineNumber).props('name')).toBe(iconName);
+    });
+
+    it.each`
+      lastContact                                                  | lineNumber
+      ${'Never'}                                                   | ${0}
+      ${timeagoMixin.methods.timeFormatted(connectedTimeNow)}      | ${1}
+      ${timeagoMixin.methods.timeFormatted(connectedTimeInactive)} | ${2}
+    `('displays agent last contact time', ({ lastContact, lineNumber }) => {
+      expect(findLastContactText(lineNumber).text()).toBe(lastContact);
+    });
+
+    it.each`
+      agentPath                   | hasLink  | lineNumber
+      ${'.gitlab/agents/agent-1'} | ${true}  | ${0}
+      ${'.gitlab/agents/agent-2'} | ${false} | ${1}
+    `('displays config file path', ({ agentPath, hasLink, lineNumber }) => {
+      const findLink = findConfiguration(lineNumber).find(GlLink);
+
+      expect(findLink.exists()).toBe(hasLink);
+      expect(findConfiguration(lineNumber).text()).toBe(agentPath);
+    });
+  });
+});