Merge branch '61511-add-expand-collapse-to-project-operation-setttings-2' into 'master'
Add expand/collapse button to operation settings Closes #61511 See merge request gitlab-org/gitlab-ce!28620
This commit is contained in:
commit
daa72ac868
2 changed files with 21 additions and 1 deletions
|
@ -1,5 +1,6 @@
|
|||
<script>
|
||||
import { GlButton, GlFormGroup, GlFormInput, GlLink } from '@gitlab/ui';
|
||||
import initSettingsPanels from '~/settings_panels';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
@ -19,15 +20,19 @@ export default {
|
|||
required: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
initSettingsPanels();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="settings expanded">
|
||||
<section class="settings no-animate">
|
||||
<div class="settings-header">
|
||||
<h4 class="js-section-header">
|
||||
{{ s__('ExternalMetrics|External Dashboard') }}
|
||||
</h4>
|
||||
<gl-button class="js-settings-toggle">{{ __('Expand') }}</gl-button>
|
||||
<p class="js-section-sub-header">
|
||||
{{
|
||||
s__(
|
||||
|
|
|
@ -2,6 +2,9 @@ import { shallowMount } from '@vue/test-utils';
|
|||
import { GlButton, GlLink, GlFormGroup, GlFormInput } from '@gitlab/ui';
|
||||
import ExternalDashboard from '~/operation_settings/components/external_dashboard.vue';
|
||||
import { TEST_HOST } from 'helpers/test_constants';
|
||||
import initSettingsPanels from '~/settings_panels';
|
||||
|
||||
jest.mock('~/settings_panels');
|
||||
|
||||
describe('operation settings external dashboard component', () => {
|
||||
let wrapper;
|
||||
|
@ -21,6 +24,18 @@ describe('operation settings external dashboard component', () => {
|
|||
expect(wrapper.find('.js-section-header').text()).toBe('External Dashboard');
|
||||
});
|
||||
|
||||
describe('expand/collapse button', () => {
|
||||
it('is properly instantiated as a settings panel', () => {
|
||||
expect(initSettingsPanels).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('defaults to collapsed state', () => {
|
||||
const button = wrapper.find(GlButton);
|
||||
|
||||
expect(button.text()).toBe('Expand');
|
||||
});
|
||||
});
|
||||
|
||||
describe('sub-header', () => {
|
||||
let subHeader;
|
||||
|
||||
|
|
Loading…
Reference in a new issue