Commit e44e8556 authored by Olena Horal-Koretska's avatar Olena Horal-Koretska

Surface time passed in Incident list

parent b28974de
<script>
import { GlLoadingIcon, GlTable, GlAlert } from '@gitlab/ui';
import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
import { s__ } from '~/locale';
import getIncidents from '../graphql/queries/get_incidents.query.graphql';
import { I18N } from '../constants';
......@@ -36,6 +37,7 @@ export default {
GlLoadingIcon,
GlTable,
GlAlert,
TimeAgoTooltip,
},
inject: ['projectPath'],
apollo: {
......@@ -108,7 +110,7 @@ export default {
</template>
<template #cell(createdAt)="{ item }">
{{ item.createdAt }}
<time-ago-tooltip :time="item.createdAt" />
</template>
<template #cell(assignees)="{ item }">
......
---
title: Surface timeafo for created date in Incidents List
merge_request: 37567
author:
type: added
import { mount } from '@vue/test-utils';
import { GlAlert, GlLoadingIcon, GlTable } from '@gitlab/ui';
import IncidentsList from '~/incidents/components/incidents_list.vue';
import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
import { I18N } from '~/incidents/constants';
import mockIncidents from '../mocks/incidents.json';
describe('Incidents List', () => {
let wrapper;
......@@ -10,6 +12,7 @@ describe('Incidents List', () => {
const findTableRows = () => wrapper.findAll('table tbody tr');
const findAlert = () => wrapper.find(GlAlert);
const findLoader = () => wrapper.find(GlLoadingIcon);
const findTimeAgo = () => wrapper.findAll(TimeAgoTooltip);
function mountComponent({ data = { incidents: [] }, loading = false }) {
wrapper = mount(IncidentsList, {
......@@ -40,7 +43,6 @@ describe('Incidents List', () => {
it('shows the loading state', () => {
mountComponent({
props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
loading: true,
});
expect(findLoader().exists()).toBe(true);
......@@ -63,16 +65,20 @@ describe('Incidents List', () => {
expect(findAlert().exists()).toBe(true);
});
it('displays basic list', () => {
const incidents = [
{ title: 1, assignees: [] },
{ title: 2, assignees: [] },
{ title: 3, assignees: [] },
];
mountComponent({
data: { incidents },
loading: false,
describe('Incident Management list', () => {
beforeEach(() => {
mountComponent({
data: { incidents: mockIncidents },
loading: false,
});
});
it('renders rows based on provided data', () => {
expect(findTableRows().length).toBe(mockIncidents.length);
});
it('renders a createdAt with timeAgo component per row', () => {
expect(findTimeAgo().length).toBe(mockIncidents.length);
});
expect(findTableRows().length).toBe(incidents.length);
});
});
[
{
"iid": "15",
"title": "New: Incident",
"createdAt": "2020-06-03T15:46:08Z",
"assignees": {}
},
{
"iid": "14",
"title": "Create issue4",
"createdAt": "2020-05-19T09:26:07Z",
"assignees": {}
},
{
"iid": "13",
"title": "Create issue3",
"createdAt": "2020-05-19T08:53:55Z",
"assignees": {}
},
{
"iid": "12",
"title": "Create issue2",
"createdAt": "2020-05-18T17:13:35Z",
"assignees": {}
}
]
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment