import { shallowMount } from '@vue/test-utils';
import { GlBadge, GlToggle } from '@gitlab/ui';
import VueApollo from 'vue-apollo';
import Vue from 'vue';
import ProjectSetContinuousVulnerabilityScanning from '~/security_configuration/graphql/project_set_continuous_vulnerability_scanning.graphql';
import ContinuousVulnerabilityScan from '~/security_configuration/components/continuous_vulnerability_scan.vue';
import createMockApollo from 'helpers/mock_apollo_helper';

Vue.use(VueApollo);

const setCVSMockResponse = {
  data: {
    projectSetContinuousVulnerabilityScanning: {
      continuousVulnerabilityScanningEnabled: true,
      errors: [],
    },
  },
};

const defaultProvide = {
  continuousVulnerabilityScansEnabled: true,
  projectFullPath: 'project/full/path',
};

describe('ContinuousVulnerabilityScan', () => {
  let wrapper;
  let apolloProvider;
  let requestHandlers;

  const createComponent = (options) => {
    requestHandlers = {
      setCVSMutationHandler: jest.fn().mockResolvedValue(setCVSMockResponse),
    };

    apolloProvider = createMockApollo([
      [ProjectSetContinuousVulnerabilityScanning, requestHandlers.setCVSMutationHandler],
    ]);

    wrapper = shallowMount(ContinuousVulnerabilityScan, {
      propsData: {
        feature: {
          available: true,
          configured: true,
        },
      },
      provide: {
        glFeatures: {
          dependencyScanningOnAdvisoryIngestion: true,
        },
        ...defaultProvide,
      },
      apolloProvider,
      ...options,
    });
  };

  beforeEach(() => {
    createComponent();
  });

  afterEach(() => {
    apolloProvider = null;
  });

  const findBadge = () => wrapper.findComponent(GlBadge);
  const findToggle = () => wrapper.findComponent(GlToggle);

  it('renders the component', () => {
    expect(wrapper.exists()).toBe(true);
  });

  it('renders the correct title', () => {
    expect(wrapper.text()).toContain('Continuous Vulnerability Scan');
  });

  it('renders the badge and toggle component with correct values', () => {
    expect(findBadge().exists()).toBe(true);
    expect(findBadge().text()).toBe('Experiment');

    expect(findToggle().exists()).toBe(true);
    expect(findToggle().props('value')).toBe(defaultProvide.continuousVulnerabilityScansEnabled);
  });

  it('should disable toggle when feature is not configured', () => {
    createComponent({
      propsData: {
        feature: {
          available: true,
          configured: false,
        },
      },
    });
    expect(findToggle().props('disabled')).toBe(true);
  });

  it('calls mutation on toggle change with correct payload', () => {
    findToggle().vm.$emit('change', true);

    expect(requestHandlers.setCVSMutationHandler).toHaveBeenCalledWith({
      input: {
        projectPath: 'project/full/path',
        enable: true,
      },
    });
  });

  describe('when feature flag is disabled', () => {
    beforeEach(() => {
      createComponent({
        provide: {
          glFeatures: {
            dependencyScanningOnAdvisoryIngestion: false,
          },
          ...defaultProvide,
        },
      });
    });

    it('should not render toggle and badge', () => {
      expect(findToggle().exists()).toBe(false);
      expect(findBadge().exists()).toBe(false);
    });
  });
});