Commit 1cc51c95 authored by Enrique Alcántara's avatar Enrique Alcántara

Merge branch '230728-nav-tabs-migration' into 'master'

Convert tabs in navigation_tabs.vue to gl-tabs

See merge request gitlab-org/gitlab!47841
parents 0d75b670 1ed01697
......@@ -279,7 +279,7 @@ export default {
<div class="pipelines-container">
<div
v-if="shouldRenderTabs || shouldRenderButtons"
class="top-area scrolling-tabs-container inner-page-scroll-tabs"
class="top-area scrolling-tabs-container inner-page-scroll-tabs gl-border-none"
>
<div class="fade-left"><gl-icon name="chevron-lg-left" :size="12" /></div>
<div class="fade-right"><gl-icon name="chevron-lg-right" :size="12" /></div>
......
<script>
import $ from 'jquery';
import { GlBadge, GlTabs, GlTab } from '@gitlab/ui';
/**
* Given an array of tabs, renders non linked bootstrap tabs.
......@@ -23,6 +24,11 @@ import $ from 'jquery';
*/
export default {
name: 'NavigationTabs',
components: {
GlBadge,
GlTabs,
GlTab,
},
props: {
tabs: {
type: Array,
......@@ -50,24 +56,21 @@ export default {
};
</script>
<template>
<ul class="nav-links scrolling-tabs separator">
<li
<gl-tabs class="gl-display-flex gl-w-full" nav-class="gl-border-0!">
<gl-tab
v-for="(tab, i) in tabs"
:key="i"
:class="{
active: tab.isActive,
}"
:title-link-class="`js-${scope}-tab-${tab.scope} gl-display-inline-flex`"
:title-link-attributes="{ 'data-testid': `${scope}-tab-${tab.scope}` }"
:active="tab.isActive"
@click="onTabClick(tab)"
>
<a
:class="`js-${scope}-tab-${tab.scope}`"
:data-testid="`${scope}-tab-${tab.scope}`"
role="button"
@click="onTabClick(tab)"
>
{{ tab.name }}
<span v-if="shouldRenderBadge(tab.count)" class="badge badge-pill"> {{ tab.count }} </span>
</a>
</li>
</ul>
<template #title>
<span class="gl-mr-2"> {{ tab.name }} </span>
<gl-badge v-if="shouldRenderBadge(tab.count)" size="sm" class="gl-tab-counter-badge">{{
tab.count
}}</gl-badge>
</template>
</gl-tab>
</gl-tabs>
</template>
---
title: Convert navigation_tabs.vue to gl-tabs
merge_request: 47841
author:
type: other
......@@ -35,7 +35,7 @@ describe('Deploy keys app component', () => {
});
const findLoadingIcon = () => wrapper.find('.gl-spinner');
const findKeyPanels = () => wrapper.findAll('.deploy-keys .nav-links li');
const findKeyPanels = () => wrapper.findAll('.deploy-keys .gl-tabs-nav li');
it('renders loading icon while waiting for request', () => {
mock.onGet(TEST_ENDPOINT).reply(() => new Promise());
......@@ -54,17 +54,14 @@ describe('Deploy keys app component', () => {
});
it.each`
selector | label | count
${'.js-deployKeys-tab-enabled_keys'} | ${'Enabled deploy keys'} | ${1}
${'.js-deployKeys-tab-available_project_keys'} | ${'Privately accessible deploy keys'} | ${0}
${'.js-deployKeys-tab-public_keys'} | ${'Publicly accessible deploy keys'} | ${1}
`('$selector title is $label with keys count equal to $count', ({ selector, label, count }) => {
selector
${'.js-deployKeys-tab-enabled_keys'}
${'.js-deployKeys-tab-available_project_keys'}
${'.js-deployKeys-tab-public_keys'}
`('$selector title exists', ({ selector }) => {
return mountComponent().then(() => {
const element = wrapper.find(selector);
expect(element.exists()).toBe(true);
expect(element.text().trim()).toContain(label);
expect(element.find('.badge').text().trim()).toBe(count.toString());
});
});
......
import Vue from 'vue';
import mountComponent from 'helpers/vue_mount_component_helper';
import navigationTabs from '~/vue_shared/components/navigation_tabs.vue';
import { mount } from '@vue/test-utils';
import { GlTab } from '@gitlab/ui';
import NavigationTabs from '~/vue_shared/components/navigation_tabs.vue';
describe('navigation tabs component', () => {
let vm;
let Component;
let data;
let wrapper;
beforeEach(() => {
data = [
{
name: 'All',
scope: 'all',
count: 1,
isActive: true,
},
{
name: 'Pending',
scope: 'pending',
count: 0,
isActive: false,
},
{
name: 'Running',
scope: 'running',
isActive: false,
const data = [
{
name: 'All',
scope: 'all',
count: 1,
isActive: true,
},
{
name: 'Pending',
scope: 'pending',
count: 0,
isActive: false,
},
{
name: 'Running',
scope: 'running',
isActive: false,
},
];
const createComponent = () => {
wrapper = mount(NavigationTabs, {
propsData: {
tabs: data,
scope: 'pipelines',
},
];
});
};
Component = Vue.extend(navigationTabs);
vm = mountComponent(Component, { tabs: data, scope: 'pipelines' });
beforeEach(() => {
createComponent();
});
afterEach(() => {
vm.$destroy();
wrapper.destroy();
wrapper = null;
});
it('should render tabs', () => {
expect(vm.$el.querySelectorAll('li').length).toEqual(data.length);
expect(wrapper.findAll(GlTab)).toHaveLength(data.length);
});
it('should render active tab', () => {
expect(vm.$el.querySelector('.active .js-pipelines-tab-all')).toBeDefined();
expect(wrapper.find('.js-pipelines-tab-all').classes('active')).toBe(true);
});
it('should render badge', () => {
expect(vm.$el.querySelector('.js-pipelines-tab-all .badge').textContent.trim()).toEqual('1');
expect(vm.$el.querySelector('.js-pipelines-tab-pending .badge').textContent.trim()).toEqual(
'0',
);
expect(wrapper.find('.js-pipelines-tab-all').text()).toContain('1');
expect(wrapper.find('.js-pipelines-tab-pending').text()).toContain('0');
});
it('should not render badge', () => {
expect(vm.$el.querySelector('.js-pipelines-tab-running .badge')).toEqual(null);
expect(wrapper.find('.js-pipelines-tab-running .badge').exists()).toBe(false);
});
it('should trigger onTabClick', () => {
jest.spyOn(vm, '$emit').mockImplementation(() => {});
vm.$el.querySelector('.js-pipelines-tab-pending').click();
it('should trigger onTabClick', async () => {
await wrapper.find('.js-pipelines-tab-pending').trigger('click');
expect(vm.$emit).toHaveBeenCalledWith('onChangeTab', 'pending');
expect(wrapper.emitted('onChangeTab')).toEqual([['pending']]);
});
});
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