Skip to content

G
gitlab-ce
Commit 9fafab8b authored by Coung Ngo's avatar Coung Ngo Committed by Brandon Labuschagne
Browse files
Options

Simplify issuable_list markup

parent 7f9d4c2a
Hide whitespace changes
Inline Side-by-side
Showing with 238 additions and 257 deletions
app/assets/javascripts/issuable_list/components/issuable_item.vue
View file @ 9fafab8b
<script> <script>
import { GlLink, GlIcon, GlLabel, GlFormCheckbox, GlTooltipDirective } from '@gitlab/ui'; import { GlLink, GlIcon, GlLabel, GlFormCheckbox, GlSprintf, GlTooltipDirective } from '@gitlab/ui';
import { getIdFromGraphQLId } from '~/graphql_shared/utils'; import { getIdFromGraphQLId } from '~/graphql_shared/utils';
import { isScopedLabel } from '~/lib/utils/common_utils'; import { isScopedLabel } from '~/lib/utils/common_utils';
...@@ -15,6 +15,7 @@ export default { ...@@ -15,6 +15,7 @@ export default {
GlIcon, GlIcon,
GlLabel, GlLabel,
GlFormCheckbox, GlFormCheckbox,
GlSprintf,
IssuableAssignees, IssuableAssignees,
}, },
directives: { directives: {
...@@ -82,9 +83,7 @@ export default { ...@@ -82,9 +83,7 @@ export default {
return this.issuable.assignees?.nodes || this.issuable.assignees || []; return this.issuable.assignees?.nodes || this.issuable.assignees || [];
}, },
createdAt() { createdAt() {
return sprintf(__('created %{timeAgo}'), { return getTimeago().format(this.issuable.createdAt);
timeAgo: getTimeago().format(this.issuable.createdAt),
});
}, },
updatedAt() { updatedAt() {
return sprintf(__('updated %{timeAgo}'), { return sprintf(__('updated %{timeAgo}'), {
...@@ -164,132 +163,132 @@ export default { ...@@ -164,132 +163,132 @@ export default {
<template> <template>
<li <li
:id="`issuable_${issuableId}`" :id="`issuable_${issuableId}`"
class="issue gl-px-5!" class="issue gl-display-flex! gl-px-5!"
:class="{ closed: issuable.closedAt, today: createdInPastDay }" :class="{ closed: issuable.closedAt, today: createdInPastDay }"
:data-labels="labelIdsString" :data-labels="labelIdsString"
> >
<div class="issuable-info-container"> <gl-form-checkbox
<div v-if="showCheckbox" class="issue-check"> v-if="showCheckbox"
<gl-form-checkbox class="issue-check gl-mr-0"
class="gl-mr-0" :checked="checked"
:checked="checked" :data-id="issuableId"
:data-id="issuableId" @input="$emit('checked-input', $event)"
@input="$emit('checked-input', $event)" >
<span class="gl-sr-only">{{ issuable.title }}</span>
</gl-form-checkbox>
<div class="issuable-main-info">
<div data-testid="issuable-title" class="issue-title title">
<gl-icon
v-if="issuable.confidential"
v-gl-tooltip
name="eye-slash"
:title="__('Confidential')"
:aria-label="__('Confidential')"
/>
<gl-link class="issue-title-text" dir="auto" :href="webUrl" v-bind="issuableTitleProps">
{{ issuable.title }}
<gl-icon v-if="isIssuableUrlExternal" name="external-link" class="gl-ml-2" />
</gl-link>
<span
v-if="taskStatus"
class="task-status gl-display-none gl-sm-display-inline-block! gl-ml-3"
data-testid="task-status"
> >
<span class="gl-sr-only">{{ issuable.title }}</span> {{ taskStatus }}
</gl-form-checkbox> </span>
</div> </div>
<div class="issuable-main-info"> <div class="issuable-info">
<div data-testid="issuable-title" class="issue-title title"> <slot v-if="hasSlotContents('reference')" name="reference"></slot>
<span class="issue-title-text" dir="auto"> <span v-else data-testid="issuable-reference" class="issuable-reference">
<gl-icon {{ reference }}
v-if="issuable.confidential" </span>
v-gl-tooltip <span class="gl-display-none gl-sm-display-inline-block">
name="eye-slash" <span aria-hidden="true">&middot;</span>
:title="__('Confidential')" <span class="issuable-authored gl-mr-3">
:aria-label="__('Confidential')" <gl-sprintf :message="__('created %{timeAgo} by %{author}')">
/> <template #timeAgo>
<gl-link :href="webUrl" v-bind="issuableTitleProps"> <span
{{ issuable.title v-gl-tooltip.bottom
}}<gl-icon v-if="isIssuableUrlExternal" name="external-link" class="gl-ml-2" :title="tooltipTitle(issuable.createdAt)"
/></gl-link> data-testid="issuable-created-at"
</span> >
<span {{ createdAt }}
v-if="taskStatus" </span>
class="task-status gl-display-none gl-sm-display-inline-block! gl-ml-3" </template>
data-testid="task-status" <template #author>
> <slot v-if="hasSlotContents('author')" name="author"></slot>
{{ taskStatus }} <gl-link
</span> v-else
</div> :data-user-id="authorId"
<div class="issuable-info"> :data-username="author.username"
<slot v-if="hasSlotContents('reference')" name="reference"></slot> :data-name="author.name"
<span v-else data-testid="issuable-reference" class="issuable-reference"> :data-avatar-url="author.avatarUrl"
{{ reference }} :href="author.webUrl"
</span> data-testid="issuable-author"
<span class="issuable-authored gl-display-none gl-sm-display-inline-block! gl-mr-3"> class="author-link js-user-link"
<span aria-hidden="true">&middot;</span> >
<span <span class="author">{{ author.name }}</span>
v-gl-tooltip:tooltipcontainer.bottom </gl-link>
data-testid="issuable-created-at" </template>
:title="tooltipTitle(issuable.createdAt)" </gl-sprintf>
>{{ createdAt }}</span
>
{{ __('by') }}
<slot v-if="hasSlotContents('author')" name="author"></slot>
<gl-link
v-else
:data-user-id="authorId"
:data-username="author.username"
:data-name="author.name"
:data-avatar-url="author.avatarUrl"
:href="author.webUrl"
data-testid="issuable-author"
class="author-link js-user-link"
>
<span class="author">{{ author.name }}</span>
</gl-link>
</span> </span>
<slot name="timeframe"></slot> <slot name="timeframe"></slot>
&nbsp; </span>
<span v-if="labels.length" role="group" :aria-label="__('Labels')"> &nbsp;
<gl-label <span v-if="labels.length" role="group" :aria-label="__('Labels')">
v-for="(label, index) in labels" <gl-label
:key="index" v-for="(label, index) in labels"
:background-color="label.color" :key="index"
:title="labelTitle(label)" :background-color="label.color"
:description="label.description" :title="labelTitle(label)"
:scoped="scopedLabel(label)" :description="label.description"
:target="labelTarget(label)" :scoped="scopedLabel(label)"
:class="{ 'gl-ml-2': index }" :target="labelTarget(label)"
size="sm" :class="{ 'gl-ml-2': index }"
/> size="sm"
</span> />
</div> </span>
</div> </div>
<div class="issuable-meta"> </div>
<ul v-if="showIssuableMeta" class="controls"> <div class="issuable-meta">
<li v-if="hasSlotContents('status')" class="issuable-status"> <ul v-if="showIssuableMeta" class="controls">
<slot name="status"></slot> <li v-if="hasSlotContents('status')" class="issuable-status">
</li> <slot name="status"></slot>
<li v-if="assignees.length" class="gl-display-flex"> </li>
<issuable-assignees <li v-if="assignees.length">
:assignees="assignees" <issuable-assignees
:icon-size="16" :assignees="assignees"
:max-visible="4" :icon-size="16"
img-css-classes="gl-mr-2!" :max-visible="4"
class="gl-align-items-center gl-display-flex gl-ml-3" img-css-classes="gl-mr-2!"
/> class="gl-align-items-center gl-display-flex gl-ml-3"
</li> />
<slot name="statistics"></slot> </li>
<li <slot name="statistics"></slot>
v-if="showDiscussions" <li
data-testid="issuable-discussions" v-if="showDiscussions"
class="issuable-comments gl-display-none gl-sm-display-block" data-testid="issuable-discussions"
> class="issuable-comments gl-display-none gl-sm-display-block"
<gl-link
v-gl-tooltip:tooltipcontainer.top
:title="__('Comments')"
:href="issuableNotesLink"
:class="{ 'no-comments': !notesCount }"
class="gl-reset-color!"
>
<gl-icon name="comments" />
{{ notesCount }}
</gl-link>
</li>
</ul>
<div
data-testid="issuable-updated-at"
class="float-right issuable-updated-at gl-display-none gl-sm-display-inline-block"
> >
<span <gl-link
v-gl-tooltip:tooltipcontainer.bottom v-gl-tooltip.top
:title="tooltipTitle(issuable.updatedAt)" :title="__('Comments')"
class="issuable-updated-at" :href="issuableNotesLink"
>{{ updatedAt }}</span :class="{ 'no-comments': !notesCount }"
class="gl-reset-color!"
> >
</div> <gl-icon name="comments" />
{{ notesCount }}
</gl-link>
</li>
</ul>
<div
v-gl-tooltip.bottom
class="gl-text-gray-500 gl-display-none gl-sm-display-inline-block"
:title="tooltipTitle(issuable.updatedAt)"
data-testid="issuable-updated-at"
>
{{ updatedAt }}
</div> </div>
</div> </div>
</li> </li>
......
app/assets/javascripts/issuable_list/components/issuable_list_root.vue
View file @ 9fafab8b
...@@ -284,72 +284,70 @@ export default { ...@@ -284,72 +284,70 @@ export default {
<slot name="sidebar-items" :checked-issuables="bulkEditIssuables"></slot> <slot name="sidebar-items" :checked-issuables="bulkEditIssuables"></slot>
</template> </template>
</issuable-bulk-edit-sidebar> </issuable-bulk-edit-sidebar>
<div class="issuables-holder"> <ul v-if="issuablesLoading" class="content-list">
<ul v-if="issuablesLoading" class="content-list"> <li v-for="n in skeletonItemCount" :key="n" class="issue gl-px-5! gl-py-5!">
<li v-for="n in skeletonItemCount" :key="n" class="issue gl-px-5! gl-py-5!"> <gl-skeleton-loading />
<gl-skeleton-loading /> </li>
</li> </ul>
</ul> <template v-else>
<template v-else> <component
<component :is="issuablesWrapper"
:is="issuablesWrapper" v-if="issuables.length > 0"
v-if="issuables.length > 0" class="content-list issuable-list issues-list"
class="content-list issuable-list issues-list" :class="{ 'manual-ordering': isManualOrdering }"
:class="{ 'manual-ordering': isManualOrdering }" v-bind="$options.vueDraggableAttributes"
v-bind="$options.vueDraggableAttributes" @update="handleVueDraggableUpdate"
@update="handleVueDraggableUpdate" >
<issuable-item
v-for="issuable in issuables"
:key="issuableId(issuable)"
:class="{ 'gl-cursor-grab': isManualOrdering }"
:issuable-symbol="issuableSymbol"
:issuable="issuable"
:enable-label-permalinks="enableLabelPermalinks"
:label-filter-param="labelFilterParam"
:show-checkbox="showBulkEditSidebar"
:checked="issuableChecked(issuable)"
@checked-input="handleIssuableCheckedInput(issuable, $event)"
> >
<issuable-item <template #reference>
v-for="issuable in issuables" <slot name="reference" :issuable="issuable"></slot>
:key="issuableId(issuable)" </template>
:class="{ 'gl-cursor-grab': isManualOrdering }" <template #author>
:issuable-symbol="issuableSymbol" <slot name="author" :author="issuable.author"></slot>
:issuable="issuable" </template>
:enable-label-permalinks="enableLabelPermalinks" <template #timeframe>
:label-filter-param="labelFilterParam" <slot name="timeframe" :issuable="issuable"></slot>
:show-checkbox="showBulkEditSidebar" </template>
:checked="issuableChecked(issuable)" <template #status>
@checked-input="handleIssuableCheckedInput(issuable, $event)" <slot name="status" :issuable="issuable"></slot>
> </template>
<template #reference> <template #statistics>
<slot name="reference" :issuable="issuable"></slot> <slot name="statistics" :issuable="issuable"></slot>
</template> </template>
<template #author> </issuable-item>
<slot name="author" :author="issuable.author"></slot> </component>
</template> <slot v-else name="empty-state"></slot>
<template #timeframe> </template>
<slot name="timeframe" :issuable="issuable"></slot>
</template>
<template #status>
<slot name="status" :issuable="issuable"></slot>
</template>
<template #statistics>
<slot name="statistics" :issuable="issuable"></slot>
</template>
</issuable-item>
</component>
<slot v-else name="empty-state"></slot>
</template>
<div v-if="showPaginationControls && useKeysetPagination" class="gl-text-center gl-mt-3"> <div v-if="showPaginationControls && useKeysetPagination" class="gl-text-center gl-mt-3">
<gl-keyset-pagination <gl-keyset-pagination
:has-next-page="hasNextPage" :has-next-page="hasNextPage"
:has-previous-page="hasPreviousPage" :has-previous-page="hasPreviousPage"
@next="$emit('next-page')" @next="$emit('next-page')"
@prev="$emit('previous-page')" @prev="$emit('previous-page')"
/>
</div>
<gl-pagination
v-else-if="showPaginationControls"
:per-page="defaultPageSize"
:total-items="totalItems"
:value="currentPage"
:prev-page="previousPage"
:next-page="nextPage"
align="center"
class="gl-pagination gl-mt-3"
@input="$emit('page-change', $event)"
/> />
</div> </div>
<gl-pagination
v-else-if="showPaginationControls"
:per-page="defaultPageSize"
:total-items="totalItems"
:value="currentPage"
:prev-page="previousPage"
:next-page="nextPage"
align="center"
class="gl-pagination gl-mt-3"
@input="$emit('page-change', $event)"
/>
</div> </div>
</template> </template>
app/assets/javascripts/issues_list/components/issue_card_time_info.vue
View file @ 9fafab8b
...@@ -85,7 +85,7 @@ export default { ...@@ -85,7 +85,7 @@ export default {
<span> <span>
<span <span
v-if="issue.milestone" v-if="issue.milestone"
class="issuable-milestone gl-display-none gl-sm-display-inline-block! gl-mr-3" class="issuable-milestone gl-mr-3"
data-testid="issuable-milestone" data-testid="issuable-milestone"
> >
<gl-link v-gl-tooltip :href="milestoneLink" :title="milestoneDate"> <gl-link v-gl-tooltip :href="milestoneLink" :title="milestoneDate">
...@@ -96,7 +96,7 @@ export default { ...@@ -96,7 +96,7 @@ export default {
<span <span
v-if="issue.dueDate" v-if="issue.dueDate"
v-gl-tooltip v-gl-tooltip
class="issuable-due-date gl-display-none gl-sm-display-inline-block! gl-mr-3" class="issuable-due-date gl-mr-3"
:class="{ 'gl-text-red-500': showDueDateInRed }" :class="{ 'gl-text-red-500': showDueDateInRed }"
:title="__('Due date')" :title="__('Due date')"
data-testid="issuable-due-date" data-testid="issuable-due-date"
...@@ -107,21 +107,14 @@ export default { ...@@ -107,21 +107,14 @@ export default {
<span <span
v-if="timeEstimate" v-if="timeEstimate"
v-gl-tooltip v-gl-tooltip
class="gl-display-none gl-sm-display-inline-block! gl-mr-3" class="gl-mr-3"
:title="__('Estimate')" :title="__('Estimate')"
data-testid="time-estimate" data-testid="time-estimate"
> >
<gl-icon name="timer" /> <gl-icon name="timer" />
{{ timeEstimate }} {{ timeEstimate }}
</span> </span>
<weight-count <weight-count class="issuable-weight gl-mr-3" :weight="issue.weight" />
class="issuable-weight gl-display-none gl-sm-display-inline-block gl-mr-3" <issue-health-status v-if="showHealthStatus" :health-status="healthStatus" />
:weight="issue.weight"
/>
<issue-health-status
v-if="showHealthStatus"
class="gl-display-none gl-sm-display-inline-block"
:health-status="healthStatus"
/>
</span> </span>
</template> </template>
app/assets/javascripts/vue_shared/components/issue/issue_assignees.vue
View file @ 9fafab8b
...@@ -77,7 +77,7 @@ export default { ...@@ -77,7 +77,7 @@ export default {
}; };
</script> </script>
<template> <template>
<div class="issue-assignees"> <div>
<user-avatar-link <user-avatar-link
v-for="assignee in assigneesToShow" v-for="assignee in assigneesToShow"
:key="assignee.id" :key="assignee.id"
...@@ -97,10 +97,9 @@ export default { ...@@ -97,10 +97,9 @@ export default {
</user-avatar-link> </user-avatar-link>
<span <span
v-if="numHiddenAssignees > 0" v-if="numHiddenAssignees > 0"
v-gl-tooltip v-gl-tooltip.bottom
:title="assigneesCounterTooltip" :title="assigneesCounterTooltip"
class="avatar-counter" class="avatar-counter"
data-placement="bottom"
data-qa-selector="avatar_counter_content" data-qa-selector="avatar_counter_content"
>{{ assigneeCounterLabel }}</span >{{ assigneeCounterLabel }}</span
> >
......
app/assets/stylesheets/pages/issuable.scss
View file @ 9fafab8b
...@@ -673,40 +673,40 @@ ...@@ -673,40 +673,40 @@
.issuable-info-container { .issuable-info-container {
flex: 1; flex: 1;
display: flex; display: flex;
}
.issuable-main-info { .issuable-main-info {
flex: 1 auto; flex: 1 auto;
margin-right: 10px; margin-right: 10px;
min-width: 0; min-width: 0;
.issue-weight-icon, .issue-weight-icon,
.issue-estimate-icon { .issue-estimate-icon {
vertical-align: sub; vertical-align: sub;
}
} }
}
.issuable-meta { .issuable-meta {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-end; align-items: flex-end;
flex: 1 0 auto; flex: 1 0 auto;
.controls {
margin-bottom: 2px;
line-height: 20px;
padding: 0;
}
.issue-updated-at { .controls {
line-height: 20px; margin-bottom: 2px;
} line-height: 20px;
padding: 0;
} }
@include media-breakpoint-down(xs) { .issue-updated-at {
.issuable-meta { line-height: 20px;
.controls li { }
margin-right: 0; }
}
@include media-breakpoint-down(xs) {
.issuable-meta {
.controls li {
margin-right: 0;
} }
} }
} }
......
ee/app/assets/javascripts/related_items_tree/components/issue_health_status.vue
View file @ 9fafab8b
...@@ -24,11 +24,11 @@ export default { ...@@ -24,11 +24,11 @@ export default {
</script> </script>
<template> <template>
<div class="health-status"> <span class="health-status">
<span class="gl-label gl-label-sm" :class="statusClass"> <span class="gl-label gl-label-sm" :class="statusClass">
<span v-gl-tooltip class="gl-label-text" :title="__('Health status')"> <span v-gl-tooltip class="gl-label-text" :title="__('Health status')">
{{ statusText }} {{ statusText }}
</span> </span>
</span> </span>
</div> </span>
</template> </template>
ee/spec/features/epics/epics_list_spec.rb
View file @ 9fafab8b
...@@ -240,20 +240,19 @@ RSpec.describe 'epics list', :js do ...@@ -240,20 +240,19 @@ RSpec.describe 'epics list', :js do
end end
it 'renders epics item with metadata', :aggregate_failures do it 'renders epics item with metadata', :aggregate_failures do
page.within('.issuable-list-container .issuable-list') do page.within('.issuable-list .issue:first-of-type') do
expect(page.all('.issuable-info-container')[0].find('.issue-title')).to have_content(epic2.title) expect(page).to have_link(epic2.title)
expect(page.all('.issuable-info-container')[0].find('.issuable-reference')).to have_content("&#{epic2.iid}") expect(page).to have_text("&#{epic2.iid}")
expect(page.all('.issuable-info-container')[0].find('.issuable-authored')).to have_content('created') expect(page).to have_text("created just now by #{epic2.author.name}")
expect(page.all('.issuable-info-container')[0].find('.issuable-authored')).to have_content("by #{epic2.author.name}")
end end
end end
it 'renders epic item timeframe', :aggregate_failures do it 'renders epic item timeframe', :aggregate_failures do
page.within('.issuable-list-container .issuable-list') do issues = page.all('.issue')
expect(page.all('.issuable-info-container')[0].find('.issuable-info')).to have_content('Dec 15, 2020 – No due date')
expect(page.all('.issuable-info-container')[1].find('.issuable-info')).to have_content('Dec 15, 2020 – Jan 15, 2021') expect(issues[0]).to have_text('Dec 15, 2020 – No due date')
expect(page.all('.issuable-info-container')[2].find('.issuable-info')).to have_content('No start date – Jan 15, 2021') expect(issues[1]).to have_text('Dec 15, 2020 – Jan 15, 2021')
end expect(issues[2]).to have_text('No start date – Jan 15, 2021')
end end
end end
......
ee/spec/features/projects/quality/test_case_list_spec.rb
View file @ 9fafab8b
...@@ -74,12 +74,11 @@ RSpec.describe 'Test Cases', :js do ...@@ -74,12 +74,11 @@ RSpec.describe 'Test Cases', :js do
it 'shows test cases title and metadata' do it 'shows test cases title and metadata' do
page.within('.issuable-list-container .issuable-list li.issue', match: :first) do page.within('.issuable-list-container .issuable-list li.issue', match: :first) do
expect(page.find('.issue-title')).to have_content(test_case1.title) expect(page).to have_link(test_case1.title)
expect(page.find('.issuable-reference')).to have_content("##{test_case1.iid}") expect(page).to have_text("##{test_case1.iid}")
expect(page.find('.issuable-info')).to have_link(label.title, href: "?label_name[]=#{label.title}") expect(page).to have_link(label.title, href: "?label_name[]=#{label.title}")
expect(page.find('.issuable-authored')).to have_content('created 5 days ago by') expect(page).to have_text("created 5 days ago by #{user.name}")
expect(page.find('.author')).to have_content(user.name) expect(page).to have_text('updated 2 days ago')
expect(page.find('div.issuable-updated-at')).to have_content('updated 2 days ago')
end end
end end
end end
......
locale/gitlab.pot
View file @ 9fafab8b
...@@ -39900,6 +39900,9 @@ msgstr "" ...@@ -39900,6 +39900,9 @@ msgstr ""
msgid "created %{timeAgo}" msgid "created %{timeAgo}"
msgstr "" msgstr ""
msgid "created %{timeAgo} by %{author}"
msgstr ""
msgid "created by" msgid "created by"
msgstr "" msgstr ""
......
spec/frontend/issuable_list/components/issuable_item_spec.js
View file @ 9fafab8b
import { GlLink, GlLabel, GlIcon, GlFormCheckbox } from '@gitlab/ui'; import { GlLink, GlLabel, GlIcon, GlFormCheckbox, GlSprintf } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { useFakeDate } from 'helpers/fake_date'; import { useFakeDate } from 'helpers/fake_date';
import IssuableItem from '~/issuable_list/components/issuable_item.vue'; import IssuableItem from '~/issuable_list/components/issuable_item.vue';
...@@ -16,6 +16,9 @@ const createComponent = ({ issuableSymbol = '#', issuable = mockIssuable, slots ...@@ -16,6 +16,9 @@ const createComponent = ({ issuableSymbol = '#', issuable = mockIssuable, slots
showCheckbox: false, showCheckbox: false,
}, },
slots, slots,
stubs: {
GlSprintf,
},
}); });
const MOCK_GITLAB_URL = 'http://0.0.0.0:3000'; const MOCK_GITLAB_URL = 'http://0.0.0.0:3000';
...@@ -135,13 +138,6 @@ describe('IssuableItem', () => { ...@@ -135,13 +138,6 @@ describe('IssuableItem', () => {
}); });
}); });
describe('createdAt', () => {
it('returns string containing timeago string based on `issuable.createdAt`', () => {
expect(wrapper.vm.createdAt).toContain('created');
expect(wrapper.vm.createdAt).toContain('ago');
});
});
describe('updatedAt', () => { describe('updatedAt', () => {
it('returns string containing timeago string based on `issuable.updatedAt`', () => { it('returns string containing timeago string based on `issuable.updatedAt`', () => {
expect(wrapper.vm.updatedAt).toContain('updated'); expect(wrapper.vm.updatedAt).toContain('updated');
...@@ -449,8 +445,7 @@ describe('IssuableItem', () => { ...@@ -449,8 +445,7 @@ describe('IssuableItem', () => {
it('renders issuable updatedAt info', () => { it('renders issuable updatedAt info', () => {
const updatedAtEl = wrapper.find('[data-testid="issuable-updated-at"]'); const updatedAtEl = wrapper.find('[data-testid="issuable-updated-at"]');
expect(updatedAtEl.exists()).toBe(true); expect(updatedAtEl.attributes('title')).toBe('Sep 10, 2020 11:41am UTC');
expect(updatedAtEl.find('span').attributes('title')).toBe('Sep 10, 2020 11:41am UTC');
expect(updatedAtEl.text()).toBe(wrapper.vm.updatedAt); expect(updatedAtEl.text()).toBe(wrapper.vm.updatedAt);
}); });
......
spec/frontend/vue_shared/components/issue/issue_assignees_spec.js
View file @ 9fafab8b
...@@ -94,10 +94,6 @@ describe('IssueAssigneesComponent', () => { ...@@ -94,10 +94,6 @@ describe('IssueAssigneesComponent', () => {
expect(vm.avatarUrlTitle(mockAssigneesList[0])).toBe('Assigned to Terrell Graham'); expect(vm.avatarUrlTitle(mockAssigneesList[0])).toBe('Assigned to Terrell Graham');
}); });
it('renders component root element with class `issue-assignees`', () => {
expect(wrapper.element.classList.contains('issue-assignees')).toBe(true);
});
it('renders assignee', () => { it('renders assignee', () => {
const data = findAvatars().wrappers.map((x) => ({ const data = findAvatars().wrappers.map((x) => ({
...x.props(), ...x.props(),
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7