text: import { shallowMount, mount } from '@vue/test-utils';
  import ApplicationRow from '~/clusters/components/application_row.vue';
  import Applications from '~/clusters/components/applications.vue';
  import CrossplaneProviderStack from '~/clusters/components/crossplane_provider_stack.vue';
  import FluentdOutputSettings from '~/clusters/components/fluentd_output_settings.vue';
  import KnativeDomainEditor from '~/clusters/components/knative_domain_editor.vue';
  import { CLUSTER_TYPE, PROVIDER_TYPE } from '~/clusters/constants';
  import eventHub from '~/clusters/event_hub';
  import { APPLICATIONS_MOCK_STATE } from '../services/mock_data';
  
  describe('Applications', () => {
    let wrapper;
  
    beforeEach(() => {
      gon.features = gon.features || {};
    });
  
    const createComponent = ({ applications, type, propsData } = {}, isShallow) => {
      const mountMethod = isShallow ? shallowMount : mount;
  
      wrapper = mountMethod(Applications, {
        stubs: { ApplicationRow },
        propsData: {
          type,
          applications: { ...APPLICATIONS_MOCK_STATE, ...applications },
          ...propsData,
        },
      });
    };
  
    const createShallowComponent = (options) => createComponent(options, true);
    const findByTestId = (id) => wrapper.find(`[data-testid="${id}"]`);
    afterEach(() => {
      wrapper.destroy();
    });
  
    describe('Project cluster applications', () => {
      beforeEach(() => {
        createComponent({ type: CLUSTER_TYPE.PROJECT });
      });
  
      it('renders a row for Ingress', () => {
        expect(wrapper.find('.js-cluster-application-row-ingress').exists()).toBe(true);
      });
  
      it('renders a row for Cert-Manager', () => {
        expect(wrapper.find('.js-cluster-application-row-cert_manager').exists()).toBe(true);
      });
  
      it('renders a row for Crossplane', () => {
        expect(wrapper.find('.js-cluster-application-row-crossplane').exists()).toBe(true);
      });
  
      it('renders a row for Prometheus', () => {
        expect(wrapper.find('.js-cluster-application-row-prometheus').exists()).toBe(true);
      });
  
      it('renders a row for GitLab Runner', () => {
        expect(wrapper.find('.js-cluster-application-row-runner').exists()).toBe(true);
      });
  
      it('renders a row for Jupyter', () => {
        expect(wrapper.find('.js-cluster-application-row-jupyter').exists()).toBe(true);
      });
  
      it('renders a row for Knative', () => {
        expect(wrapper.find('.js-cluster-application-row-knative').exists()).toBe(true);
      });
  
      it('renders a row for Elastic Stack', () => {
        expect(wrapper.find('.js-cluster-application-row-elastic_stack').exists()).toBe(true);
      });
  
      it('renders a row for Fluentd', () => {
        expect(wrapper.find('.js-cluster-application-row-fluentd').exists()).toBe(true);
      });
      it('renders a row for Cilium', () => {
        expect(wrapper.find('.js-cluster-application-row-cilium').exists()).toBe(true);
      });
    });
  
    describe('Group cluster applications', () => {
      beforeEach(() => {
        createComponent({ type: CLUSTER_TYPE.GROUP });
      });
  
      it('renders a row for Ingress', () => {
        expect(wrapper.find('.js-cluster-application-row-ingress').exists()).toBe(true);
      });
  
      it('renders a row for Cert-Manager', () => {
        expect(wrapper.find('.js-cluster-application-row-cert_manager').exists()).toBe(true);
      });
  
      it('renders a row for Crossplane', () => {
        expect(wrapper.find('.js-cluster-application-row-crossplane').exists()).toBe(true);
      });
  
      it('renders a row for Prometheus', () => {
        expect(wrapper.find('.js-cluster-application-row-prometheus').exists()).toBe(true);
      });
  
      it('renders a row for GitLab Runner', () => {
        expect(wrapper.find('.js-cluster-application-row-runner').exists()).toBe(true);
      });
  
      it('renders a row for Jupyter', () => {
        expect(wrapper.find('.js-cluster-application-row-jupyter').exists()).toBe(true);
      });
  
      it('renders a row for Knative', () => {
        expect(wrapper.find('.js-cluster-application-row-knative').exists()).toBe(true);
      });
  
      it('renders a row for Elastic Stack', () => {
        expect(wrapper.find('.js-cluster-application-row-elastic_stack').exists()).toBe(true);
      });
  
      it('renders a row for Fluentd', () => {
        expect(wrapper.find('.js-cluster-application-row-fluentd').exists()).toBe(true);
      });
  
      it('renders a row for Cilium', () => {
        expect(wrapper.find('.js-cluster-application-row-cilium').exists()).toBe(true);
      });
    });
  
    describe('Instance cluster applications', () => {
      beforeEach(() => {
        createComponent({ type: CLUSTER_TYPE.INSTANCE });
      });
  
      it('renders a row for Ingress', () => {
        expect(wrapper.find('.js-cluster-application-row-ingress').exists()).toBe(true);
      });
  
      it('renders a row for Cert-Manager', () => {
        expect(wrapper.find('.js-cluster-application-row-cert_manager').exists()).toBe(true);
      });
  
      it('renders a row for Crossplane', () => {
        expect(wrapper.find('.js-cluster-application-row-crossplane').exists()).toBe(true);
      });
  
      it('renders a row for Prometheus', () => {
        expect(wrapper.find('.js-cluster-application-row-prometheus').exists()).toBe(true);
      });
  
      it('renders a row for GitLab Runner', () => {
        expect(wrapper.find('.js-cluster-application-row-runner').exists()).toBe(true);
      });
  
      it('renders a row for Jupyter', () => {
        expect(wrapper.find('.js-cluster-application-row-jupyter').exists()).toBe(true);
      });
  
      it('renders a row for Knative', () => {
        expect(wrapper.find('.js-cluster-application-row-knative').exists()).toBe(true);
      });
  
      it('renders a row for Elastic Stack', () => {
        expect(wrapper.find('.js-cluster-application-row-elastic_stack').exists()).toBe(true);
      });
  
      it('renders a row for Fluentd', () => {
        expect(wrapper.find('.js-cluster-application-row-fluentd').exists()).toBe(true);
      });
  
      it('renders a row for Cilium', () => {
        expect(wrapper.find('.js-cluster-application-row-cilium').exists()).toBe(true);
      });
    });
  
    describe('Helm application', () => {
      it('does not render a row for Helm Tiller', () => {
        createComponent();
        expect(wrapper.find('.js-cluster-application-row-helm').exists()).toBe(false);
      });
    });
  
    describe('Ingress application', () => {
      it('shows the correct warning message', () => {
        createComponent();
        expect(findByTestId('ingressCostWarning').element).toMatchSnapshot();
      });
  
      describe('when installed', () => {
        describe('with ip address', () => {
          it('renders ip address with a clipboard button', () => {
            createComponent({
              applications: {
                ingress: {
                  title: 'Ingress',
                  status: 'installed',
                  externalIp: '0.0.0.0',
                },
              },
            });
  
            expect(wrapper.find('.js-endpoint').element.value).toEqual('0.0.0.0');
            expect(wrapper.find('.js-clipboard-btn').attributes('data-clipboard-text')).toEqual(
              '0.0.0.0',
            );
          });
        });
  
        describe('with hostname', () => {
          it('renders hostname with a clipboard button', () => {
            createComponent({
              applications: {
                ingress: {
                  title: 'Ingress',
                  status: 'installed',
                  externalHostname: 'localhost.localdomain',
                },
                cert_manager: { title: 'Cert-Manager' },
                crossplane: { title: 'Crossplane', stack: '' },
                runner: { title: 'GitLab Runner' },
                prometheus: { title: 'Prometheus' },
                jupyter: { title: 'JupyterHub', hostname: '' },
                knative: { title: 'Knative', hostname: '' },
                elastic_stack: { title: 'Elastic Stack' },
                fluentd: { title: 'Fluentd' },
                cilium: { title: 'GitLab Container Network Policies' },
              },
            });
  
            expect(wrapper.find('.js-endpoint').element.value).toEqual('localhost.localdomain');
  
            expect(wrapper.find('.js-clipboard-btn').attributes('data-clipboard-text')).toEqual(
              'localhost.localdomain',
            );
          });
        });
  
        describe('without ip address', () => {
          it('renders an input text with a loading icon and an alert text', () => {
            createComponent({
              applications: {
                ingress: {
                  title: 'Ingress',
                  status: 'installed',
                },
              },
            });
  
            expect(wrapper.find('.js-ingress-ip-loading-icon').exists()).toBe(true);
            expect(wrapper.find('.js-no-endpoint-message').exists()).toBe(true);
          });
        });
      });
  
      describe('before installing', () => {
        it('does not render the IP address', () => {
          createComponent();
  
          expect(wrapper.text()).not.toContain('Ingress IP Address');
          expect(wrapper.find('.js-endpoint').exists()).toBe(false);
        });
      });
    });
  
    describe('Cert-Manager application', () => {
      it('shows the correct description', () => {
        createComponent();
        expect(findByTestId('certManagerDescription').element).toMatchSnapshot();
      });
  
      describe('when not installed', () => {
        it('renders email & allows editing', () => {
          createComponent({
            applications: {
              cert_manager: {
                title: 'Cert-Manager',
                email: 'before@example.com',
                status: 'installable',
              },
            },
          });
  
          expect(wrapper.find('.js-email').element.value).toEqual('before@example.com');
          expect(wrapper.find('.js-email').attributes('readonly')).toBe(undefined);
        });
      });
  
      describe('when installed', () => {
        it('renders email in readonly', () => {
          createComponent({
            applications: {
              cert_manager: {
                title: 'Cert-Manager',
                email: 'after@example.com',
                status: 'installed',
              },
            },
          });
  
          expect(wrapper.find('.js-email').element.value).toEqual('after@example.com');
          expect(wrapper.find('.js-email').attributes('readonly')).toEqual('readonly');
        });
      });
    });
  
    describe('Jupyter application', () => {
      describe('with ingress installed with ip & jupyter installable', () => {
        it('renders hostname active input', () => {
          createComponent({
            applications: {
              ingress: {
                title: 'Ingress',
                status: 'installed',
                externalIp: '1.1.1.1',
              },
            },
          });
  
          expect(
            wrapper.find('.js-cluster-application-row-jupyter .js-hostname').attributes('readonly'),
          ).toEqual(undefined);
        });
      });
  
      describe('with ingress installed without external ip', () => {
        it('does not render hostname input', () => {
          createComponent({
            applications: {
              ingress: { title: 'Ingress', status: 'installed' },
            },
          });
  
          expect(wrapper.find('.js-cluster-application-row-jupyter .js-hostname').exists()).toBe(
            false,
          );
        });
      });
  
      describe('with ingress & jupyter installed', () => {
        it('renders readonly input', () => {
          createComponent({
            applications: {
              ingress: {
                title: 'Ingress',
                status: 'installed',
                externalIp: '1.1.1.1',
              },
              jupyter: { title: 'JupyterHub', status: 'installed', hostname: '' },
            },
          });
  
          expect(
            wrapper.find('.js-cluster-application-row-jupyter .js-hostname').attributes('readonly'),
          ).toEqual('readonly');
        });
      });
  
      describe('without ingress installed', () => {
        beforeEach(() => {
          createComponent();
        });
  
        it('does not render input', () => {
          expect(wrapper.find('.js-cluster-application-row-jupyter .js-hostname').exists()).toBe(
            false,
          );
        });
      });
    });
  
    describe('Prometheus application', () => {
      it('shows the correct description', () => {
        createComponent();
        expect(findByTestId('prometheusDescription').element).toMatchSnapshot();
      });
    });
  
    describe('Knative application', () => {
      const availableDomain = {
        id: 4,
        domain: 'newhostname.com',
      };
      const propsData = {
        applications: {
          knative: {
            title: 'Knative',
            hostname: 'example.com',
            status: 'installed',
            externalIp: '1.1.1.1',
            installed: true,
            availableDomains: [availableDomain],
            pagesDomain: null,
          },
        },
      };
      let knativeDomainEditor;
  
      beforeEach(() => {
        createShallowComponent(propsData);
        jest.spyOn(eventHub, '$emit');
  
        knativeDomainEditor = wrapper.find(KnativeDomainEditor);
      });
  
      it('shows the correct description', async () => {
        createComponent();
        wrapper.setProps({
          providerType: PROVIDER_TYPE.GCP,
          preInstalledKnative: true,
        });
  
        await wrapper.vm.$nextTick();
  
        expect(findByTestId('installed-via').element).toMatchSnapshot();
      });
  
      it('emits saveKnativeDomain event when knative domain editor emits save event', () => {
        propsData.applications.knative.hostname = availableDomain.domain;
        propsData.applications.knative.pagesDomain = availableDomain;
        knativeDomainEditor.vm.$emit('save');
  
        expect(eventHub.$emit).toHaveBeenCalledWith('saveKnativeDomain', {
          id: 'knative',
          params: {
            hostname: availableDomain.domain,
            pages_domain_id: availableDomain.id,
          },
        });
      });
  
      it('emits saveKnativeDomain event when knative domain editor emits save event with custom domain', () => {
        const newHostName = 'someothernewhostname.com';
        propsData.applications.knative.hostname = newHostName;
        propsData.applications.knative.pagesDomain = null;
        knativeDomainEditor.vm.$emit('save');
  
        expect(eventHub.$emit).toHaveBeenCalledWith('saveKnativeDomain', {
          id: 'knative',
          params: {
            hostname: newHostName,
            pages_domain_id: undefined,
          },
        });
      });
  
      it('emits setKnativeHostname event when knative domain editor emits change event', () => {
        wrapper.find(KnativeDomainEditor).vm.$emit('set', {
          domain: availableDomain.domain,
          domainId: availableDomain.id,
        });
  
        expect(eventHub.$emit).toHaveBeenCalledWith('setKnativeDomain', {
          id: 'knative',
          domain: availableDomain.domain,
          domainId: availableDomain.id,
        });
      });
    });
  
    describe('Crossplane application', () => {
      const propsData = {
        applications: {
          crossplane: {
            title: 'Crossplane',
            stack: {
              code: '',
            },
          },
        },
      };
  
      beforeEach(() => createShallowComponent(propsData));
  
      it('renders the correct Component', () => {
        const crossplane = wrapper.find(CrossplaneProviderStack);
        expect(crossplane.exists()).toBe(true);
      });
  
      it('shows the correct description', () => {
        createComponent();
        expect(findByTestId('crossplaneDescription').element).toMatchSnapshot();
      });
    });
  
    describe('Elastic Stack application', () => {
      describe('with elastic stack installable', () => {
        it('renders the install button enabled', () => {
          createComponent();
  
          expect(
            wrapper
              .find(
                '.js-cluster-application-row-elastic_stack .js-cluster-application-install-button',
              )
              .attributes('disabled'),
          ).toBeUndefined();
        });
      });
  
      describe('elastic stack installed', () => {
        it('renders uninstall button', () => {
          createComponent({
            applications: {
              elastic_stack: { title: 'Elastic Stack', status: 'installed' },
            },
          });
  
          expect(
            wrapper
              .find(
                '.js-cluster-application-row-elastic_stack .js-cluster-application-install-button',
              )
              .attributes('disabled'),
          ).toEqual('disabled');
        });
      });
    });
  
    describe('Fluentd application', () => {
      beforeEach(() => createShallowComponent());
  
      it('renders the correct Component', () => {
        expect(wrapper.find(FluentdOutputSettings).exists()).toBe(true);
      });
    });
  
    describe('Cilium application', () => {
      it('shows the correct description', () => {
        createComponent({ propsData: { ciliumHelpPath: 'cilium-help-path' } });
        expect(findByTestId('ciliumDescription').element).toMatchSnapshot();
      });
    });
  });
  