Commit 108e99cc authored by Marvin Karegyeya's avatar Marvin Karegyeya Committed by Nathan Friend

Replace GlDeprecatedDropdown with GlDropdown in code_coverage.vue

parent f090988f
<script>
import {
GlAlert,
GlDeprecatedDropdown,
GlDeprecatedDropdownItem,
GlIcon,
GlSprintf,
} from '@gitlab/ui';
import { GlAlert, GlDropdown, GlDropdownItem, GlSprintf } from '@gitlab/ui';
import { GlAreaChart } from '@gitlab/ui/dist/charts';
import dateFormat from 'dateformat';
import { get } from 'lodash';
......@@ -17,9 +11,8 @@ export default {
components: {
GlAlert,
GlAreaChart,
GlDeprecatedDropdown,
GlDeprecatedDropdownItem,
GlIcon,
GlDropdown,
GlDropdownItem,
GlSprintf,
},
props: {
......@@ -140,25 +133,18 @@ export default {
{{ __('It seems that there is currently no available data for code coverage') }}
</span>
</gl-alert>
<gl-deprecated-dropdown v-if="canShowData" :text="selectedDailyCoverageName">
<gl-deprecated-dropdown-item
<gl-dropdown v-if="canShowData" :text="selectedDailyCoverageName">
<gl-dropdown-item
v-for="({ group_name }, index) in dailyCoverageData"
:key="index"
:value="group_name"
:is-check-item="true"
:is-checked="index === selectedCoverageIndex"
@click="setSelectedCoverage(index)"
>
<div class="gl-display-flex">
<gl-icon
v-if="index === selectedCoverageIndex"
name="mobile-issue-close"
class="gl-absolute"
/>
<span class="gl-display-flex align-items-center ml-4">
{{ group_name }}
</span>
</div>
</gl-deprecated-dropdown-item>
</gl-deprecated-dropdown>
{{ group_name }}
</gl-dropdown-item>
</gl-dropdown>
</div>
<gl-area-chart
v-if="!isLoading"
......
---
title: Replace-GlDeprecatedDropdown-with-GlDropdown-in-app/assets/javascripts/pages/projects/graphs/components/code_coverage.vue
merge_request: 41423
author: nuwe1
type: other
......@@ -9,65 +9,54 @@ exports[`Code Coverage when fetching data is successful matches the snapshot 1`]
<!---->
<gl-deprecated-dropdown-stub
<gl-dropdown-stub
category="tertiary"
headertext=""
size="medium"
text="rspec"
variant="default"
>
<gl-deprecated-dropdown-item-stub
<gl-dropdown-item-stub
avatarurl=""
iconcolor=""
iconname=""
iconrightname=""
ischecked="true"
ischeckitem="true"
secondarytext=""
value="rspec"
>
<div
class="gl-display-flex"
>
<gl-icon-stub
class="gl-absolute"
name="mobile-issue-close"
size="16"
/>
<span
class="gl-display-flex align-items-center ml-4"
>
rspec
</span>
</div>
</gl-deprecated-dropdown-item-stub>
<gl-deprecated-dropdown-item-stub
rspec
</gl-dropdown-item-stub>
<gl-dropdown-item-stub
avatarurl=""
iconcolor=""
iconname=""
iconrightname=""
ischeckitem="true"
secondarytext=""
value="cypress"
>
<div
class="gl-display-flex"
>
<!---->
<span
class="gl-display-flex align-items-center ml-4"
>
cypress
</span>
</div>
</gl-deprecated-dropdown-item-stub>
<gl-deprecated-dropdown-item-stub
cypress
</gl-dropdown-item-stub>
<gl-dropdown-item-stub
avatarurl=""
iconcolor=""
iconname=""
iconrightname=""
ischeckitem="true"
secondarytext=""
value="karma"
>
<div
class="gl-display-flex"
>
<!---->
<span
class="gl-display-flex align-items-center ml-4"
>
karma
</span>
</div>
</gl-deprecated-dropdown-item-stub>
</gl-deprecated-dropdown-stub>
karma
</gl-dropdown-item-stub>
</gl-dropdown-stub>
</div>
<gl-area-chart-stub
......
import MockAdapter from 'axios-mock-adapter';
import { shallowMount } from '@vue/test-utils';
import { GlAlert, GlIcon, GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
import { GlAlert, GlDropdown, GlDropdownItem } from '@gitlab/ui';
import { GlAreaChart } from '@gitlab/ui/dist/charts';
import waitForPromises from 'helpers/wait_for_promises';
......@@ -17,7 +17,7 @@ describe('Code Coverage', () => {
const findAlert = () => wrapper.find(GlAlert);
const findAreaChart = () => wrapper.find(GlAreaChart);
const findAllDropdownItems = () => wrapper.findAll(GlDeprecatedDropdownItem);
const findAllDropdownItems = () => wrapper.findAll(GlDropdownItem);
const findFirstDropdownItem = () => findAllDropdownItems().at(0);
const findSecondDropdownItem = () => findAllDropdownItems().at(1);
......@@ -124,7 +124,7 @@ describe('Code Coverage', () => {
});
it('renders the dropdown with all custom names as options', () => {
expect(wrapper.find(GlDeprecatedDropdown).exists()).toBeDefined();
expect(wrapper.find(GlDropdown).exists()).toBeDefined();
expect(findAllDropdownItems()).toHaveLength(codeCoverageMockData.length);
expect(findFirstDropdownItem().text()).toBe(codeCoverageMockData[0].group_name);
});
......@@ -145,16 +145,8 @@ describe('Code Coverage', () => {
await wrapper.vm.$nextTick();
expect(
findFirstDropdownItem()
.find(GlIcon)
.exists(),
).toBe(false);
expect(
findSecondDropdownItem()
.find(GlIcon)
.exists(),
).toBe(true);
expect(findFirstDropdownItem().attributes('ischecked')).toBeFalsy();
expect(findSecondDropdownItem().attributes('ischecked')).toBeTruthy();
});
it('updates the graph data when selecting a different option in dropdown', async () => {
......
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