1 files changed, 49 insertions, 0 deletions
diff --git a/spec/frontend/security_configuration/components/section_layout_spec.js b/spec/frontend/security_configuration/components/section_layout_spec.js
new file mode 100644
index 00000000000..75da380bbb8
--- /dev/null
+++ b/spec/frontend/security_configuration/components/section_layout_spec.js
@@ -0,0 +1,49 @@
+import { mount } from '@vue/test-utils';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import SectionLayout from '~/security_configuration/components/section_layout.vue';
+
+describe('Section Layout component', () => {
+  let wrapper;
+
+  const createComponent = (propsData) => {
+    wrapper = extendedWrapper(
+      mount(SectionLayout, {
+        propsData,
+        scopedSlots: {
+          description: '<span>foo</span>',
+          features: '<span>bar</span>',
+        },
+      }),
+    );
+  };
+
+  const findHeading = () => wrapper.find('h2');
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('basic structure', () => {
+    beforeEach(() => {
+      createComponent({ heading: 'testheading' });
+    });
+
+    const slots = {
+      description: 'foo',
+      features: 'bar',
+    };
+
+    it('should render heading when passed in as props', () => {
+      expect(findHeading().exists()).toBe(true);
+      expect(findHeading().text()).toBe('testheading');
+    });
+
+    Object.keys(slots).forEach((slot) => {
+      it('renders the slots', () => {
+        const slotContent = slots[slot];
+        createComponent({ heading: '' });
+        expect(wrapper.text()).toContain(slotContent);
+      });
+    });
+  });
+});