spec/frontend/ml/model_registry/routes/models/index/components/ml_models_index_spec.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

import { GlLink } from '@gitlab/ui';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import MlModelsIndexApp from '~/ml/model_registry/routes/models/index';
import { TITLE_LABEL } from '~/ml/model_registry/routes/models/index/translations';
import { mockModels } from './mock_data';

let wrapper;
const createWrapper = (models = mockModels) => {
  wrapper = shallowMountExtended(MlModelsIndexApp, {
    propsData: { models },
  });
};

const findModelLink = (index) => wrapper.findAllComponents(GlLink).at(index);
const modelLinkText = (index) => findModelLink(index).text();
const modelLinkHref = (index) => findModelLink(index).attributes('href');
const findTitle = () => wrapper.findByText(TITLE_LABEL);

describe('MlModelsIndex', () => {
  beforeEach(() => {
    createWrapper();
  });

  describe('header', () => {
    it('displays the title', () => {
      expect(findTitle().exists()).toBe(true);
    });
  });

  describe('model list', () => {
    it('displays the models', () => {
      expect(modelLinkHref(0)).toBe(mockModels[0].path);
      expect(modelLinkText(0)).toBe(`${mockModels[0].name} / ${mockModels[0].version}`);

      expect(modelLinkHref(1)).toBe(mockModels[1].path);
      expect(modelLinkText(1)).toBe(`${mockModels[1].name} / ${mockModels[1].version}`);
    });
  });
});