diff --git a/ee/app/assets/javascripts/compliance_dashboard/components/frameworks_report/edit_framework/components/basic_information_section.vue b/ee/app/assets/javascripts/compliance_dashboard/components/frameworks_report/edit_framework/components/basic_information_section.vue index f75e4befd04900802d19454d21d26f969e54f7ec..3e149fb39810402722bfc1d4fbc87d52279d106c 100644 --- a/ee/app/assets/javascripts/compliance_dashboard/components/frameworks_report/edit_framework/components/basic_information_section.vue +++ b/ee/app/assets/javascripts/compliance_dashboard/components/frameworks_report/edit_framework/components/basic_information_section.vue @@ -144,6 +144,7 @@ export default { :title="$options.i18n.basicInformation" :description="$options.i18n.basicInformationDetails" :expandable="expandable" + :initially-expanded="expandable" > <gl-form-group :label="$options.i18n.titleInputLabel" diff --git a/ee/app/assets/javascripts/compliance_dashboard/components/frameworks_report/edit_framework/components/edit_section.vue b/ee/app/assets/javascripts/compliance_dashboard/components/frameworks_report/edit_framework/components/edit_section.vue index 7eac536af5e8a8a9b28236fe4bf60f2a4f36d0b3..c8991ec3b219ad35a40d4cc4e2b890b3dbbad715 100644 --- a/ee/app/assets/javascripts/compliance_dashboard/components/frameworks_report/edit_framework/components/edit_section.vue +++ b/ee/app/assets/javascripts/compliance_dashboard/components/frameworks_report/edit_framework/components/edit_section.vue @@ -20,11 +20,16 @@ export default { required: false, default: false, }, + initiallyExpanded: { + type: Boolean, + required: false, + default: false, + }, }, - data() { + data(props) { return { - isExpanded: false, + isExpanded: props.initiallyExpanded, }; }, diff --git a/ee/spec/frontend/compliance_dashboard/components/frameworks_report/edit_framework/components/basic_information_section_spec.js b/ee/spec/frontend/compliance_dashboard/components/frameworks_report/edit_framework/components/basic_information_section_spec.js index 901f0a6fc974415b346e34f983da4362fb658e0f..64c584997a828628fd7ef9a49762843eb44bd36e 100644 --- a/ee/spec/frontend/compliance_dashboard/components/frameworks_report/edit_framework/components/basic_information_section_spec.js +++ b/ee/spec/frontend/compliance_dashboard/components/frameworks_report/edit_framework/components/basic_information_section_spec.js @@ -1,5 +1,6 @@ import * as Utils from 'ee/groups/settings/compliance_frameworks/utils'; import BasicInformationSection from 'ee/compliance_dashboard/components/frameworks_report/edit_framework/components/basic_information_section.vue'; +import EditSection from 'ee/compliance_dashboard/components/frameworks_report/edit_framework/components/edit_section.vue'; import { mountExtended } from 'helpers/vue_test_utils_helper'; import waitForPromises from 'helpers/wait_for_promises'; @@ -21,11 +22,12 @@ describe('Basic information section', () => { const invalidFeedback = (input) => input.closest('[role=group].is-invalid').querySelector('.invalid-feedback').textContent; - function createComponent() { + function createComponent(props) { return mountExtended(BasicInformationSection, { provide: provideData, propsData: { value: fakeFramework, + ...props, }, stubs: { ColorPicker: true, @@ -65,4 +67,10 @@ describe('Basic information section', () => { expect(invalidFeedback(pipelineInput.element)).toBe(message); }, ); + + it('renders section as initially expanded if expandable', () => { + wrapper = createComponent({ expandable: true }); + + expect(wrapper.findComponent(EditSection).props('initiallyExpanded')).toBe(true); + }); }); diff --git a/ee/spec/frontend/compliance_dashboard/components/frameworks_report/edit_framework/components/edit_section_spec.js b/ee/spec/frontend/compliance_dashboard/components/frameworks_report/edit_framework/components/edit_section_spec.js index 10723de7afb94c51a51e1e5912fb89c3266ffc1f..dffdf2dda3e3caccb5b835d3d80350475f65696b 100644 --- a/ee/spec/frontend/compliance_dashboard/components/frameworks_report/edit_framework/components/edit_section_spec.js +++ b/ee/spec/frontend/compliance_dashboard/components/frameworks_report/edit_framework/components/edit_section_spec.js @@ -30,22 +30,32 @@ describe('Section', () => { it('does not render expand/collapse button', () => { expect(findButton('Expand').exists()).toBe(false); }); + + it('ignores initiallyExpanded prop', () => { + wrapper = createComponent({ expandable: false, initiallyExpanded: false }); + + expect(findCollapse().props('visible')).toBe(true); + }); }); describe('if expandable', () => { - beforeEach(() => { + it('renders collapse hidden by default', () => { wrapper = createComponent({ expandable: true }); + expect(findCollapse().props('visible')).toBe(false); }); - it('renders collapse hidden by default', () => { - expect(findCollapse().props('visible')).toBe(false); + it('renders collapse expanded if initiallyExpanded is provided', () => { + wrapper = createComponent({ expandable: true, initiallyExpanded: true }); + expect(findCollapse().props('visible')).toBe(true); }); it('renders expand button', () => { + wrapper = createComponent({ expandable: true }); expect(findButton('Expand').exists()).toBe(true); }); it('expands collapse on clicking button', async () => { + wrapper = createComponent({ expandable: true }); await findButton('Expand').trigger('click'); expect(findCollapse().props('visible')).toBe(true); expect(findButton('Expand').exists()).toBe(false); diff --git a/ee/spec/frontend/compliance_dashboard/components/frameworks_report/edit_framework/edit_framework_spec.js b/ee/spec/frontend/compliance_dashboard/components/frameworks_report/edit_framework/edit_framework_spec.js index 3fb54dcf2b26e9fb8c901936a07f3c0dd53044e2..2a36374989a8a2c89e2a77410409539ae6f30097 100644 --- a/ee/spec/frontend/compliance_dashboard/components/frameworks_report/edit_framework/edit_framework_spec.js +++ b/ee/spec/frontend/compliance_dashboard/components/frameworks_report/edit_framework/edit_framework_spec.js @@ -4,6 +4,7 @@ import { GlAlert, GlLoadingIcon } from '@gitlab/ui'; import getComplianceFrameworkQuery from 'ee/compliance_dashboard/components/frameworks_report/edit_framework/graphql/get_compliance_framework.query.graphql'; import * as Utils from 'ee/groups/settings/compliance_frameworks/utils'; import EditFramework from 'ee/compliance_dashboard/components/frameworks_report/edit_framework/edit_framework.vue'; +import BasicInformationSection from 'ee/compliance_dashboard/components/frameworks_report/edit_framework/components/basic_information_section.vue'; import PoliciesSection from 'ee/compliance_dashboard/components/frameworks_report/edit_framework/components/policies_section.vue'; import DeleteModal from 'ee/compliance_dashboard/components/frameworks_report/edit_framework/components/delete_modal.vue'; import createComplianceFrameworkMutation from 'ee/compliance_dashboard/graphql/mutations/create_compliance_framework.mutation.graphql'; @@ -253,6 +254,20 @@ describe('Edit Framework Form', () => { }); }); + describe('Basic information section', () => { + it('renders basic information section as non-collapsible if creating new framework', async () => { + wrapper = createComponent(shallowMountExtended, { routeParams: {} }); + await waitForPromises(); + expect(wrapper.findComponent(BasicInformationSection).props('expandable')).toBe(false); + }); + + it('renders basic information section as expandable if editing framework', async () => { + wrapper = createComponent(shallowMountExtended); + await waitForPromises(); + expect(wrapper.findComponent(BasicInformationSection).props('expandable')).toBe(true); + }); + }); + describe('Policies section', () => { it('does not render policies section if creating new framework', async () => { wrapper = createComponent(shallowMountExtended, { routeParams: {} }); @@ -260,12 +275,10 @@ describe('Edit Framework Form', () => { expect(wrapper.findComponent(PoliciesSection).exists()).toBe(false); }); - describe('when editing framework', () => { - it('render policies section', async () => { - wrapper = createComponent(shallowMountExtended); - await waitForPromises(); - expect(wrapper.findComponent(PoliciesSection).exists()).toBe(true); - }); + it('render policies section if editing framework', async () => { + wrapper = createComponent(shallowMountExtended); + await waitForPromises(); + expect(wrapper.findComponent(PoliciesSection).exists()).toBe(true); }); }); });