116 lines
3.3 KiB
JavaScript
116 lines
3.3 KiB
JavaScript
|
import { GlAlert, GlPagination, GlTableLite } from '@gitlab/ui';
|
||
|
|
import { mountExtended } from 'helpers/vue_test_utils_helper';
|
||
|
|
import { TEST_HOST } from 'helpers/test_constants';
|
||
|
|
import AirflowDags from '~/airflow/dags/components/dags.vue';
|
||
|
|
import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
|
||
|
|
import { mockDags } from './mock_data';
|
||
|
|
|
||
|
|
describe('AirflowDags', () => {
|
||
|
|
let wrapper;
|
||
|
|
|
||
|
|
const createWrapper = (
|
||
|
|
dags = [],
|
||
|
|
pagination = { page: 1, isLastPage: false, per_page: 2, totalItems: 0 },
|
||
|
|
) => {
|
||
|
|
wrapper = mountExtended(AirflowDags, {
|
||
|
|
propsData: {
|
||
|
|
dags,
|
||
|
|
pagination,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
const findAlert = () => wrapper.findComponent(GlAlert);
|
||
|
|
const findEmptyState = () => wrapper.findByText('There are no DAGs to show');
|
||
|
|
const findPagination = () => wrapper.findComponent(GlPagination);
|
||
|
|
|
||
|
|
describe('default (no dags)', () => {
|
||
|
|
beforeEach(() => {
|
||
|
|
createWrapper();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('shows incubation warning', () => {
|
||
|
|
expect(findAlert().exists()).toBe(true);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('shows empty state', () => {
|
||
|
|
expect(findEmptyState().exists()).toBe(true);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('does not show pagination', () => {
|
||
|
|
expect(findPagination().exists()).toBe(false);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
describe('with dags', () => {
|
||
|
|
const createWrapperWithDags = (pagination = {}) => {
|
||
|
|
createWrapper(mockDags, {
|
||
|
|
page: 1,
|
||
|
|
isLastPage: false,
|
||
|
|
per_page: 2,
|
||
|
|
totalItems: 5,
|
||
|
|
...pagination,
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
const findDagsData = () => {
|
||
|
|
return wrapper
|
||
|
|
.findComponent(GlTableLite)
|
||
|
|
.findAll('tbody tr')
|
||
|
|
.wrappers.map((tr) => {
|
||
|
|
return tr.findAll('td').wrappers.map((td) => {
|
||
|
|
const timeAgo = td.findComponent(TimeAgo);
|
||
|
|
|
||
|
|
if (timeAgo.exists()) {
|
||
|
|
return {
|
||
|
|
type: 'time',
|
||
|
|
value: timeAgo.props('time'),
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
type: 'text',
|
||
|
|
value: td.text(),
|
||
|
|
};
|
||
|
|
});
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
it('renders the table of Dags with data', () => {
|
||
|
|
createWrapperWithDags();
|
||
|
|
|
||
|
|
expect(findDagsData()).toEqual(
|
||
|
|
mockDags.map((x) => [
|
||
|
|
{ type: 'text', value: x.dag_name },
|
||
|
|
{ type: 'text', value: x.schedule },
|
||
|
|
{ type: 'time', value: x.next_run },
|
||
|
|
{ type: 'text', value: String(x.is_active) },
|
||
|
|
{ type: 'text', value: String(x.is_paused) },
|
||
|
|
{ type: 'text', value: x.fileloc },
|
||
|
|
]),
|
||
|
|
);
|
||
|
|
});
|
||
|
|
|
||
|
|
describe('Pagination behaviour', () => {
|
||
|
|
it.each`
|
||
|
|
pagination | expected
|
||
|
|
${{}} | ${{ value: 1, prevPage: null, nextPage: 2 }}
|
||
|
|
${{ page: 2 }} | ${{ value: 2, prevPage: 1, nextPage: 3 }}
|
||
|
|
${{ isLastPage: true, page: 2 }} | ${{ value: 2, prevPage: 1, nextPage: null }}
|
||
|
|
`('with $pagination, sets pagination props', ({ pagination, expected }) => {
|
||
|
|
createWrapperWithDags({ ...pagination });
|
||
|
|
|
||
|
|
expect(findPagination().props()).toMatchObject(expected);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('generates link for each page', () => {
|
||
|
|
createWrapperWithDags();
|
||
|
|
|
||
|
|
const generateLink = findPagination().props('linkGen');
|
||
|
|
|
||
|
|
expect(generateLink(3)).toBe(`${TEST_HOST}/?page=3`);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|