Add latest changes from gitlab-org/gitlab@master

4 files changed, 131 insertions, 178 deletions

diff --git a/spec/frontend/fixtures/static/project_select_combo_button.html b/spec/frontend/fixtures/static/project_select_combo_button.html
deleted file mode 100644
index 3776610ed4c..00000000000
--- a/spec/frontend/fixtures/static/project_select_combo_button.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<div class="project-item-select-holder">
-  <input class="project-item-select" data-group-id="12345" data-relative-path="issues/new" />
-  <a class="js-new-project-item-link" data-label="issue" data-type="issues" href="">
-    <span class="gl-spinner"></span>
-  </a>
-  <a class="new-project-item-select-button">
-    <svg data-testid="chevron-down-icon" class="gl-icon s16">
-      <use
-        href="/assets/icons-795a2ef2fd636a0538bbef3b8d2787dd90927b42d7617fdda8620930016b333d.svg#chevron-down"
-      ></use>
-    </svg>
-  </a>
-</div>
diff --git a/spec/frontend/ml/experiment_tracking/routes/experiments/index/components/ml_experiments_index_spec.js b/spec/frontend/ml/experiment_tracking/routes/experiments/index/components/ml_experiments_index_spec.js
new file mode 100644
index 00000000000..017db647ac6
--- /dev/null
+++ b/spec/frontend/ml/experiment_tracking/routes/experiments/index/components/ml_experiments_index_spec.js
@@ -0,0 +1,110 @@
+import { GlEmptyState, GlLink, GlTableLite } from '@gitlab/ui';
+import MlExperimentsIndexApp from '~/ml/experiment_tracking/routes/experiments/index';
+import IncubationAlert from '~/vue_shared/components/incubation/incubation_alert.vue';
+import Pagination from '~/vue_shared/components/incubation/pagination.vue';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import {
+  startCursor,
+  firstExperiment,
+  secondExperiment,
+  experiments,
+  defaultPageInfo,
+} from './mock_data';
+
+let wrapper;
+const createWrapper = (defaultExperiments = [], pageInfo = defaultPageInfo) => {
+  wrapper = mountExtended(MlExperimentsIndexApp, {
+    propsData: { experiments: defaultExperiments, pageInfo },
+  });
+};
+
+const findAlert = () => wrapper.findComponent(IncubationAlert);
+const findPagination = () => wrapper.findComponent(Pagination);
+const findEmptyState = () => wrapper.findComponent(GlEmptyState);
+const findTable = () => wrapper.findComponent(GlTableLite);
+const findTableHeaders = () => findTable().findAll('th');
+const findTableRows = () => findTable().findAll('tbody > tr');
+const findNthTableRow = (idx) => findTableRows().at(idx);
+const findColumnInRow = (row, col) => findNthTableRow(row).findAll('td').at(col);
+const hrefInRowAndColumn = (row, col) =>
+  findColumnInRow(row, col).findComponent(GlLink).attributes().href;
+
+describe('MlExperimentsIndex', () => {
+  describe('empty state', () => {
+    beforeEach(() => createWrapper());
+
+    it('displays empty state when no experiment', () => {
+      expect(findEmptyState().exists()).toBe(true);
+    });
+
+    it('does not show table', () => {
+      expect(findTable().exists()).toBe(false);
+    });
+
+    it('does not show pagination', () => {
+      expect(findPagination().exists()).toBe(false);
+    });
+  });
+
+  it('displays IncubationAlert', () => {
+    createWrapper(experiments);
+
+    expect(findAlert().exists()).toBe(true);
+  });
+
+  describe('experiments table', () => {
+    const firstRow = 0;
+    const secondRow = 1;
+    const nameColumn = 0;
+    const candidateCountColumn = 1;
+
+    beforeEach(() => createWrapper(experiments));
+
+    it('displays the table', () => {
+      expect(findTable().exists()).toBe(true);
+    });
+
+    it('sets headers correctly', () => {
+      const expectedColumnNames = ['Experiment', 'Logged candidates for experiment'];
+
+      expect(findTableHeaders().wrappers.map((h) => h.text())).toEqual(expectedColumnNames);
+    });
+
+    describe('experiment name column', () => {
+      it('displays the experiment name', () => {
+        expect(findColumnInRow(firstRow, nameColumn).text()).toBe(firstExperiment.name);
+        expect(findColumnInRow(secondRow, nameColumn).text()).toBe(secondExperiment.name);
+      });
+
+      it('is a link to the experiment', () => {
+        expect(hrefInRowAndColumn(firstRow, nameColumn)).toBe(firstExperiment.path);
+        expect(hrefInRowAndColumn(secondRow, nameColumn)).toBe(secondExperiment.path);
+      });
+    });
+
+    describe('candidate count column', () => {
+      it('shows the candidate count', () => {
+        expect(findColumnInRow(firstRow, candidateCountColumn).text()).toBe(
+          `${firstExperiment.candidate_count}`,
+        );
+        expect(findColumnInRow(secondRow, candidateCountColumn).text()).toBe(
+          `${secondExperiment.candidate_count}`,
+        );
+      });
+    });
+  });
+
+  describe('pagination', () => {
+    describe('Pagination behaviour', () => {
+      beforeEach(() => createWrapper(experiments));
+
+      it('should show', () => {
+        expect(findPagination().exists()).toBe(true);
+      });
+
+      it('Passes pagination to pagination component', () => {
+        expect(findPagination().props('startCursor')).toBe(startCursor);
+      });
+    });
+  });
+});
diff --git a/spec/frontend/ml/experiment_tracking/routes/experiments/index/components/mock_data.js b/spec/frontend/ml/experiment_tracking/routes/experiments/index/components/mock_data.js
new file mode 100644
index 00000000000..ea02584a7cc
--- /dev/null
+++ b/spec/frontend/ml/experiment_tracking/routes/experiments/index/components/mock_data.js
@@ -0,0 +1,21 @@
+export const startCursor = 'eyJpZCI6IjE2In0';
+export const defaultPageInfo = Object.freeze({
+  startCursor,
+  endCursor: 'eyJpZCI6IjIifQ',
+  hasNextPage: true,
+  hasPreviousPage: true,
+});
+
+export const firstExperiment = Object.freeze({
+  name: 'Experiment 1',
+  path: 'path/to/experiment/1',
+  candidate_count: 2,
+});
+
+export const secondExperiment = Object.freeze({
+  name: 'Experiment 2',
+  path: 'path/to/experiment/2',
+  candidate_count: 3,
+});
+
+export const experiments = [firstExperiment, secondExperiment];
diff --git a/spec/frontend/project_select_combo_button_spec.js b/spec/frontend/project_select_combo_button_spec.js
deleted file mode 100644
index b8d5a1a61f3..00000000000
--- a/spec/frontend/project_select_combo_button_spec.js
+++ /dev/null
@@ -1,165 +0,0 @@
-import $ from 'jquery';
-import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
-import ProjectSelectComboButton from '~/project_select_combo_button';
-
-const fixturePath = 'static/project_select_combo_button.html';
-
-describe('Project Select Combo Button', () => {
-  let testContext;
-
-  beforeEach(() => {
-    testContext = {};
-  });
-
-  beforeEach(() => {
-    testContext.defaults = {
-      label: 'Select project to create issue',
-      groupId: 12345,
-      projectMeta: {
-        name: 'My Cool Project',
-        url: 'http://mycoolproject.com',
-      },
-      newProjectMeta: {
-        name: 'My Other Cool Project',
-        url: 'http://myothercoolproject.com',
-      },
-      vulnerableProject: {
-        name: 'Self XSS',
-        // eslint-disable-next-line no-script-url
-        url: 'javascript:alert(1)',
-      },
-      localStorageKey: 'group-12345-new-issue-recent-project',
-      relativePath: 'issues/new',
-    };
-
-    loadHTMLFixture(fixturePath);
-
-    testContext.newItemBtn = document.querySelector('.js-new-project-item-link');
-    testContext.projectSelectInput = document.querySelector('.project-item-select');
-  });
-
-  afterEach(() => {
-    resetHTMLFixture();
-  });
-
-  describe('on page load when localStorage is empty', () => {
-    beforeEach(() => {
-      testContext.comboButton = new ProjectSelectComboButton(testContext.projectSelectInput);
-    });
-
-    it('newItemBtn href is null', () => {
-      expect(testContext.newItemBtn.getAttribute('href')).toBe('');
-    });
-
-    it('newItemBtn text is the plain default label', () => {
-      expect(testContext.newItemBtn.textContent).toBe(testContext.defaults.label);
-    });
-  });
-
-  describe('on page load when localStorage is filled', () => {
-    beforeEach(() => {
-      window.localStorage.setItem(
-        testContext.defaults.localStorageKey,
-        JSON.stringify(testContext.defaults.projectMeta),
-      );
-      testContext.comboButton = new ProjectSelectComboButton(testContext.projectSelectInput);
-    });
-
-    it('newItemBtn href is correctly set', () => {
-      expect(testContext.newItemBtn.getAttribute('href')).toBe(
-        testContext.defaults.projectMeta.url,
-      );
-    });
-
-    it('newItemBtn text is the cached label', () => {
-      expect(testContext.newItemBtn.textContent).toBe(
-        `New issue in ${testContext.defaults.projectMeta.name}`,
-      );
-    });
-
-    afterEach(() => {
-      window.localStorage.clear();
-    });
-  });
-
-  describe('after selecting a new project', () => {
-    beforeEach(() => {
-      testContext.comboButton = new ProjectSelectComboButton(testContext.projectSelectInput);
-
-      // mock the effect of selecting an item from the projects dropdown (select2)
-      $('.project-item-select')
-        .val(JSON.stringify(testContext.defaults.newProjectMeta))
-        .trigger('change');
-    });
-
-    it('newItemBtn href is correctly set', () => {
-      expect(testContext.newItemBtn.getAttribute('href')).toBe(
-        'http://myothercoolproject.com/issues/new',
-      );
-    });
-
-    it('newItemBtn text is the selected project label', () => {
-      expect(testContext.newItemBtn.textContent).toBe(
-        `New issue in ${testContext.defaults.newProjectMeta.name}`,
-      );
-    });
-
-    afterEach(() => {
-      window.localStorage.clear();
-    });
-  });
-
-  describe('after selecting a vulnerable project', () => {
-    beforeEach(() => {
-      testContext.comboButton = new ProjectSelectComboButton(testContext.projectSelectInput);
-
-      // mock the effect of selecting an item from the projects dropdown (select2)
-      $('.project-item-select')
-        .val(JSON.stringify(testContext.defaults.vulnerableProject))
-        .trigger('change');
-    });
-
-    it('newItemBtn href is correctly sanitized', () => {
-      expect(testContext.newItemBtn.getAttribute('href')).toBe('about:blank');
-    });
-
-    afterEach(() => {
-      window.localStorage.clear();
-    });
-  });
-
-  describe('deriveTextVariants', () => {
-    beforeEach(() => {
-      testContext.mockExecutionContext = {
-        resourceType: '',
-        resourceLabel: '',
-      };
-
-      testContext.comboButton = new ProjectSelectComboButton(testContext.projectSelectInput);
-
-      testContext.method = testContext.comboButton.deriveTextVariants.bind(
-        testContext.mockExecutionContext,
-      );
-    });
-
-    it('correctly derives test variants for merge requests', () => {
-      testContext.mockExecutionContext.resourceType = 'merge_requests';
-      testContext.mockExecutionContext.resourceLabel = 'New merge request';
-
-      const returnedVariants = testContext.method();
-
-      expect(returnedVariants.localStorageItemType).toBe('new-merge-request');
-      expect(returnedVariants.presetTextSuffix).toBe('merge request');
-    });
-
-    it('correctly derives text variants for issues', () => {
-      testContext.mockExecutionContext.resourceType = 'issues';
-      testContext.mockExecutionContext.resourceLabel = 'New issue';
-
-      const returnedVariants = testContext.method();
-
-      expect(returnedVariants.localStorageItemType).toBe('new-issue');
-      expect(returnedVariants.presetTextSuffix).toBe('issue');
-    });
-  });
-});