Create integration tests for security init files

- first_class_init
- security_dashboard_init

https://gitlab.com/gitlab-org/gitlab/-/merge_requests/45452

ee/spec/frontend_integration/.eslintrc.yml

+---
+extends: ../../../spec/frontend_integration/.eslintrc.yml

ee/spec/frontend_integration/README.md

+## Frontend Integration Specs
+
+This directory contains Frontend integration specs. Go to `ee/spec/frontend` if you're looking for Frontend unit tests.
+
+Please see [the CE README for more info](../../../spec/frontend_integration/README.md).

ee/spec/frontend_integration/security_dashboard/__snapshots__/first_class_init_integration_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Vulnerability Report error states has unavailable pages 1`] = `
+<div>
+  <section
+    class="row empty-state text-center"
+  >
+    <div
+      class="col-12"
+    >
+      <div
+        class="svg-250 svg-content"
+      >
+        <img
+          alt="Oops, something doesn't seem right."
+          class="gl-max-w-full"
+          src="/test/empty_state.svg"
+        />
+      </div>
+    </div>
+    <div
+      class="col-12"
+    >
+      <div
+        class="text-content gl-mx-auto gl-my-0 gl-p-5"
+      >
+        <h1
+          class="h4"
+        >
+          Oops, something doesn't seem right.
+        </h1>
+        <p>
+          Either you don't have permission to view this dashboard or the dashboard has not been setup. Please check your permission settings with your administrator or check your dashboard configurations to proceed.
+        </p>
+        <div>
+          <a
+            class="btn btn-success btn-md gl-button"
+            href="/test/dashboard_page"
+          >
+            <span
+              class="gl-button-text"
+            >
+              Learn more about setting up your dashboard
+            </span>
+          </a>
+        </div>
+      </div>
+    </div>
+  </section>
+</div>
+`;

ee/spec/frontend_integration/security_dashboard/__snapshots__/security_charts_init_integration_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Security Charts default states sets up group-level 1`] = `
+<div>
+  <div
+    data-testid="security-charts-layout"
+  >
+    <h2>
+      Security Dashboard
+    </h2>
+    <div
+      class="gl-spinner-container gl-mt-6"
+    >
+      <span
+        aria-label="Loading"
+        class="align-text-bottom gl-spinner gl-spinner-dark gl-spinner-lg"
+      />
+    </div>
+    <div
+      class="security-charts gl-display-flex gl-flex-wrap"
+    />
+  </div>
+</div>
+`;
+
+exports[`Security Charts default states sets up instance-level 1`] = `
+<div>
+  <div
+    data-testid="security-charts-layout"
+  >
+    <h2>
+      Security Dashboard
+    </h2>
+    <div
+      class="gl-spinner-container gl-mt-6"
+    >
+      <span
+        aria-label="Loading"
+        class="align-text-bottom gl-spinner gl-spinner-dark gl-spinner-lg"
+      />
+    </div>
+    <div
+      class="security-charts gl-display-flex gl-flex-wrap"
+    />
+  </div>
+</div>
+`;
+
+exports[`Security Charts error states has unavailable pages 1`] = `
+<div>
+  <section
+    class="row empty-state text-center"
+  >
+    <div
+      class="col-12"
+    >
+      <div
+        class="svg-250 svg-content"
+      >
+        <img
+          alt="Oops, something doesn't seem right."
+          class="gl-max-w-full"
+          src="/test/empty_state.svg"
+        />
+      </div>
+    </div>
+    <div
+      class="col-12"
+    >
+      <div
+        class="text-content gl-mx-auto gl-my-0 gl-p-5"
+      >
+        <h1
+          class="h4"
+        >
+          Oops, something doesn't seem right.
+        </h1>
+        <p>
+          Either you don't have permission to view this dashboard or the dashboard has not been setup. Please check your permission settings with your administrator or check your dashboard configurations to proceed.
+        </p>
+        <div>
+          <a
+            class="btn btn-success btn-md gl-button"
+            href="/test/dashboard_page"
+          >
+            <span
+              class="gl-button-text"
+            >
+              Learn more about setting up your dashboard
+            </span>
+          </a>
+        </div>
+      </div>
+    </div>
+  </section>
+</div>
+`;

ee/spec/frontend_integration/security_dashboard/first_class_init_integration_spec.js

+import { TEST_HOST } from 'jest/helpers/test_constants';
+import { DASHBOARD_TYPES } from 'ee/security_dashboard/store/constants';
+import initVulnerabilityReport from 'ee/security_dashboard/first_class_init';
+
+const EMPTY_DIV = document.createElement('div');
+
+const TEST_DATASET = {
+  dashboardDocumentation: '/test/dashboard_page',
+  emptyStateSvgPath: '/test/empty_state.svg',
+  hasVulnerabilities: true,
+  link: '/test/link',
+  noPipelineRunScannersHelpPath: '/test/no_pipeline_run_page',
+  notEnabledScannersHelpPath: '/test/security_dashboard_not_enabled_page',
+  noVulnerabilitiesSvgPath: '/test/no_vulnerability_state.svg',
+  projectAddEndpoint: '/test/add-projects',
+  projectListEndpoint: '/test/list-projects',
+  securityDashboardHelpPath: '/test/security_dashboard_page',
+  svgPath: '/test/no_changes_state.svg',
+  vulnerabilitiesExportEndpoint: '/test/export-vulnerabilities',
+};
+
+describe('Vulnerability Report', () => {
+  let vm;
+  let root;
+
+  beforeEach(() => {
+    root = document.createElement('div');
+    document.body.appendChild(root);
+
+    global.jsdom.reconfigure({
+      url: `${TEST_HOST}/-/security/vulnerabilities`,
+    });
+  });
+
+  afterEach(() => {
+    if (vm) {
+      vm.$destroy();
+    }
+    vm = null;
+    root.remove();
+  });
+
+  const createComponent = ({ data, type }) => {
+    const el = document.createElement('div');
+    Object.assign(el.dataset, { ...TEST_DATASET, ...data });
+    root.appendChild(el);
+    vm = initVulnerabilityReport(el, type);
+  };
+
+  const createEmptyComponent = () => {
+    vm = initVulnerabilityReport(null, null);
+  };
+
+  describe('default states', () => {
+    it('sets up project-level', () => {
+      createComponent({
+        data: {
+          autoFixDocumentation: '/test/auto_fix_page',
+          pipelineSecurityBuildsFailedCount: 1,
+          pipelineSecurityBuildsFailedPath: '/test/faild_pipeline_02',
+          projectFullPath: '/test/project',
+        },
+        type: DASHBOARD_TYPES.PROJECT,
+      });
+
+      // These assertions will be expanded in issue #220290
+      expect(root).not.toStrictEqual(EMPTY_DIV);
+    });
+
+    it('sets up group-level', () => {
+      createComponent({ data: { groupFullPath: '/test/' }, type: DASHBOARD_TYPES.GROUP });
+
+      // These assertions will be expanded in issue #220290
+      expect(root).not.toStrictEqual(EMPTY_DIV);
+    });
+
+    it('sets up instance-level', () => {
+      createComponent({
+        data: { instanceDashboardSettingsPath: '/instance/settings_page' },
+        type: DASHBOARD_TYPES.INSTANCE,
+      });
+
+      // These assertions will be expanded in issue #220290
+      expect(root).not.toStrictEqual(EMPTY_DIV);
+    });
+  });
+
+  describe('error states', () => {
+    it('does not have an element', () => {
+      createEmptyComponent();
+
+      expect(root).toStrictEqual(EMPTY_DIV);
+    });
+
+    it('has unavailable pages', () => {
+      createComponent({ data: { isUnavailable: true } });
+
+      expect(root).toMatchSnapshot();
+    });
+  });
+});

ee/spec/frontend_integration/security_dashboard/security_charts_init_integration_spec.js

+import { TEST_HOST } from 'jest/helpers/test_constants';
+import { DASHBOARD_TYPES } from 'ee/security_dashboard/store/constants';
+import initSecurityCharts from 'ee/security_dashboard/security_charts_init';
+
+const EMPTY_DIV = document.createElement('div');
+
+const TEST_DATASET = {
+  link: '/test/link',
+  svgPath: '/test/no_changes_state.svg',
+  dashboardDocumentation: '/test/dashboard_page',
+  emptyStateSvgPath: '/test/empty_state.svg',
+};
+
+describe('Security Charts', () => {
+  let vm;
+  let root;
+
+  beforeEach(() => {
+    root = document.createElement('div');
+    document.body.appendChild(root);
+
+    global.jsdom.reconfigure({
+      url: `${TEST_HOST}/-/security/dashboard`,
+    });
+  });
+
+  afterEach(() => {
+    if (vm) {
+      vm.$destroy();
+    }
+    vm = null;
+    root.remove();
+  });
+
+  const createComponent = ({ data, type }) => {
+    const el = document.createElement('div');
+    Object.assign(el.dataset, { ...TEST_DATASET, ...data });
+    root.appendChild(el);
+    vm = initSecurityCharts(el, type);
+  };
+
+  const createEmptyComponent = () => {
+    vm = initSecurityCharts(null, null);
+  };
+
+  describe('default states', () => {
+    it('sets up group-level', () => {
+      createComponent({ data: { groupFullPath: '/test/' }, type: DASHBOARD_TYPES.GROUP });
+
+      expect(root).toMatchSnapshot();
+    });
+
+    it('sets up instance-level', () => {
+      createComponent({
+        data: { instanceDashboardSettingsPath: '/instance/settings_page' },
+        type: DASHBOARD_TYPES.INSTANCE,
+      });
+
+      expect(root).toMatchSnapshot();
+    });
+  });
+
+  describe('error states', () => {
+    it('does not have an element', () => {
+      createEmptyComponent();
+
+      expect(root).toStrictEqual(EMPTY_DIV);
+    });
+
+    it('has unavailable pages', () => {
+      createComponent({ data: { isUnavailable: true } });
+
+      expect(root).toMatchSnapshot();
+    });
+  });
+});

ee/spec/frontend_integration/test_setup.js

+import 'test_helpers/setup';