From c4b1d791eb03d42a24345b1621e2b7ba775bc998 Mon Sep 17 00:00:00 2001
From: Dheeraj Joshi <djoshi@gitlab.com>
Date: Tue, 8 Sep 2020 03:33:54 +0000
Subject: [PATCH] Fix missing setter function for tabIndex
---
.../dast_profiles/components/dast_profiles.vue | 16 ++++++++--------
.../components/dast_profiles_spec.js | 17 ++++++++---------
2 files changed, 16 insertions(+), 17 deletions(-)
diff --git a/ee/app/assets/javascripts/dast_profiles/components/dast_profiles.vue b/ee/app/assets/javascripts/dast_profiles/components/dast_profiles.vue
index 5f00666b2204a..d79f3422e35a9 100644
--- a/ee/app/assets/javascripts/dast_profiles/components/dast_profiles.vue
+++ b/ee/app/assets/javascripts/dast_profiles/components/dast_profiles.vue
@@ -56,15 +56,19 @@ export default {
return Math.max(0, activeTabIndex);
},
+ set(newTabIndex) {
+ const profileTypeName = Object.keys(this.profileSettings)[newTabIndex];
+
+ if (profileTypeName) {
+ window.location.hash = kebabCase(profileTypeName);
+ }
+ },
},
},
created() {
this.addSmartQueriesForEnabledProfileTypes();
},
methods: {
- setLocationHash(profileType) {
- window.location.hash = kebabCase(profileType);
- },
addSmartQueriesForEnabledProfileTypes() {
Object.values(this.profileSettings).forEach(({ profileType, graphQL: { query } }) => {
this.makeProfileTypeReactive(profileType);
@@ -242,11 +246,7 @@ export default {
</header>
<gl-tabs v-model="tabIndex">
- <gl-tab
- v-for="(settings, profileType) in profileSettings"
- :key="profileType"
- @click="setLocationHash(profileType)"
- >
+ <gl-tab v-for="(settings, profileType) in profileSettings" :key="profileType">
<template #title>
<span>{{ settings.i18n.tabName }}</span>
</template>
diff --git a/ee/spec/frontend/dast_profiles/components/dast_profiles_spec.js b/ee/spec/frontend/dast_profiles/components/dast_profiles_spec.js
index 6707027d0f309..f8f4a17393c26 100644
--- a/ee/spec/frontend/dast_profiles/components/dast_profiles_spec.js
+++ b/ee/spec/frontend/dast_profiles/components/dast_profiles_spec.js
@@ -1,7 +1,7 @@
-import { mount, shallowMount, createWrapper } from '@vue/test-utils';
+import { mount, shallowMount } from '@vue/test-utils';
import { within } from '@testing-library/dom';
import { merge } from 'lodash';
-import { GlDropdown } from '@gitlab/ui';
+import { GlDropdown, GlTabs } from '@gitlab/ui';
import setWindowLocation from 'helpers/set_window_location_helper';
import DastProfiles from 'ee/dast_profiles/components/dast_profiles.vue';
@@ -82,6 +82,7 @@ describe('EE - DastProfiles', () => {
const getDropdownComponent = () => wrapper.find(GlDropdown);
const getSiteProfilesDropdownItem = text =>
within(getDropdownComponent().element).queryByText(text);
+ const getTabsComponent = () => wrapper.find(GlTabs);
const getTab = ({ tabName, selected }) =>
withinComponent().getByRole('tab', {
name: tabName,
@@ -161,10 +162,10 @@ describe('EE - DastProfiles', () => {
});
describe.each`
- tabName | givenLocationHash
- ${'Site Profiles'} | ${'site-profiles'}
- ${'Scanner Profiles'} | ${'scanner-profiles'}
- `('with location hash set to "$givenLocationHash"', ({ tabName, givenLocationHash }) => {
+ tabName | index | givenLocationHash
+ ${'Site Profiles'} | ${0} | ${'site-profiles'}
+ ${'Scanner Profiles'} | ${1} | ${'scanner-profiles'}
+ `('with location hash set to "$givenLocationHash"', ({ tabName, index, givenLocationHash }) => {
beforeEach(() => {
setWindowLocation(`http://foo.com/index#${givenLocationHash}`);
createFullComponent();
@@ -186,9 +187,7 @@ describe('EE - DastProfiles', () => {
it('updates the browsers URL to contain the selected tab', () => {
window.location.hash = '';
- const tab = getTab({ tabName });
-
- createWrapper(tab).trigger('click');
+ getTabsComponent().vm.$emit('input', index);
expect(window.location.hash).toBe(givenLocationHash);
});
--
GitLab