gitlab-org--gitlab-foss/spec/frontend/clusters_list/components/agent_table_spec.js

import { GlLink, GlIcon } from '@gitlab/ui';
import { sprintf } from '~/locale';
import AgentTable from '~/clusters_list/components/agent_table.vue';
import DeleteAgentButton from '~/clusters_list/components/delete_agent_button.vue';
import { I18N_AGENT_TABLE } from '~/clusters_list/constants';
import { mountExtended } from 'helpers/vue_test_utils_helper';
import { stubComponent } from 'helpers/stub_component';
import timeagoMixin from '~/vue_shared/mixins/timeago';
import { clusterAgents, connectedTimeNow, connectedTimeInactive } from './mock_data';

const defaultConfigHelpUrl =
  '/help/user/clusters/agent/install/index#create-an-agent-configuration-file';

const provideData = {
  gitlabVersion: '14.8',
  kasVersion: '14.8',
};
const propsData = {
  agents: clusterAgents,
};

const DeleteAgentButtonStub = stubComponent(DeleteAgentButton, {
  template: `<div></div>`,
});

const outdatedTitle = I18N_AGENT_TABLE.versionOutdatedTitle;
const mismatchTitle = I18N_AGENT_TABLE.versionMismatchTitle;
const mismatchOutdatedTitle = I18N_AGENT_TABLE.versionMismatchOutdatedTitle;
const outdatedText = sprintf(I18N_AGENT_TABLE.versionOutdatedText, {
  version: provideData.kasVersion,
});
const mismatchText = I18N_AGENT_TABLE.versionMismatchText;

describe('AgentTable', () => {
  let wrapper;

  const findAgentLink = (at) => wrapper.findAllByTestId('cluster-agent-name-link').at(at);
  const findStatusText = (at) => wrapper.findAllByTestId('cluster-agent-connection-status').at(at);
  const findStatusIcon = (at) => findStatusText(at).find(GlIcon);
  const findLastContactText = (at) => wrapper.findAllByTestId('cluster-agent-last-contact').at(at);
  const findVersionText = (at) => wrapper.findAllByTestId('cluster-agent-version').at(at);
  const findConfiguration = (at) =>
    wrapper.findAllByTestId('cluster-agent-configuration-link').at(at);
  const findDeleteAgentButton = () => wrapper.findAllComponents(DeleteAgentButton);

  beforeEach(() => {
    wrapper = mountExtended(AgentTable, {
      propsData,
      provide: provideData,
      stubs: {
        DeleteAgentButton: DeleteAgentButtonStub,
      },
    });
  });

  afterEach(() => {
    if (wrapper) {
      wrapper.destroy();
    }
  });

  describe('agent table', () => {
    it.each`
      agentName    | link          | lineNumber
      ${'agent-1'} | ${'/agent-1'} | ${0}
      ${'agent-2'} | ${'/agent-2'} | ${1}
    `('displays agent link for $agentName', ({ 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 as "$status" at line $lineNumber',
      ({ 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 as "$lastContact" at line $lineNumber',
      ({ lastContact, lineNumber }) => {
        expect(findLastContactText(lineNumber).text()).toBe(lastContact);
      },
    );

    describe.each`
      agent        | version   | podsNumber | versionMismatch | versionOutdated | title                    | texts                           | lineNumber
      ${'agent-1'} | ${''}     | ${1}       | ${false}        | ${false}        | ${''}                    | ${''}                           | ${0}
      ${'agent-2'} | ${'14.8'} | ${2}       | ${false}        | ${false}        | ${''}                    | ${''}                           | ${1}
      ${'agent-3'} | ${'14.5'} | ${1}       | ${false}        | ${true}         | ${outdatedTitle}         | ${[outdatedText]}               | ${2}
      ${'agent-4'} | ${'14.7'} | ${2}       | ${true}         | ${false}        | ${mismatchTitle}         | ${[mismatchText]}               | ${3}
      ${'agent-5'} | ${'14.3'} | ${2}       | ${true}         | ${true}         | ${mismatchOutdatedTitle} | ${[mismatchText, outdatedText]} | ${4}
    `(
      'agent version column at line $lineNumber',
      ({
        agent,
        version,
        podsNumber,
        versionMismatch,
        versionOutdated,
        title,
        texts,
        lineNumber,
      }) => {
        const findIcon = () => findVersionText(lineNumber).find(GlIcon);
        const findPopover = () => wrapper.findByTestId(`popover-${agent}`);
        const versionWarning = versionMismatch || versionOutdated;

        it('shows the correct agent version', () => {
          expect(findVersionText(lineNumber).text()).toBe(version);
        });

        if (versionWarning) {
          it(`shows a warning icon when agent versions mismatch is ${versionMismatch} and outdated is ${versionOutdated} and the number of pods is ${podsNumber}`, () => {
            expect(findIcon().props('name')).toBe('warning');
          });

          it(`renders correct title for the popover when agent versions mismatch is ${versionMismatch} and outdated is ${versionOutdated}`, () => {
            expect(findPopover().props('title')).toBe(title);
          });

          it(`renders correct text for the popover when agent versions mismatch is ${versionMismatch} and outdated is ${versionOutdated}`, () => {
            texts.forEach((text) => {
              expect(findPopover().text()).toContain(text);
            });
          });
        } else {
          it(`doesn't show a warning icon with a popover when agent versions mismatch is ${versionMismatch} and outdated is ${versionOutdated} and the number of pods is ${podsNumber}`, () => {
            expect(findIcon().exists()).toBe(false);
            expect(findPopover().exists()).toBe(false);
          });
        }
      },
    );

    it.each`
      agentConfig                 | link                    | lineNumber
      ${'.gitlab/agents/agent-1'} | ${'/agent/full/path'}   | ${0}
      ${'Default configuration'}  | ${defaultConfigHelpUrl} | ${1}
    `(
      'displays config file path as "$agentPath" at line $lineNumber',
      ({ agentConfig, link, lineNumber }) => {
        const findLink = findConfiguration(lineNumber).find(GlLink);

        expect(findLink.attributes('href')).toBe(link);
        expect(findConfiguration(lineNumber).text()).toBe(agentConfig);
      },
    );

    it('displays actions menu for each agent', () => {
      expect(findDeleteAgentButton()).toHaveLength(5);
    });
  });
});