1 files changed, 50 insertions, 0 deletions
diff --git a/spec/frontend/feature_flags/components/strategies/parameter_form_group_spec.js b/spec/frontend/feature_flags/components/strategies/parameter_form_group_spec.js
new file mode 100644
index 00000000000..a0ffdb1fca0
--- /dev/null
+++ b/spec/frontend/feature_flags/components/strategies/parameter_form_group_spec.js
@@ -0,0 +1,50 @@
+import { mount } from '@vue/test-utils';
+import { GlFormGroup, GlFormInput } from '@gitlab/ui';
+import ParameterFormGroup from '~/feature_flags/components/strategies/parameter_form_group.vue';
+
+describe('~/feature_flags/strategies/parameter_form_group.vue', () => {
+  let wrapper;
+  let formGroup;
+  let slot;
+
+  beforeEach(() => {
+    wrapper = mount(ParameterFormGroup, {
+      propsData: { inputId: 'test-id', label: 'test' },
+      attrs: { description: 'test description' },
+      scopedSlots: {
+        default(props) {
+          return this.$createElement(GlFormInput, {
+            attrs: { id: props.inputId, 'data-testid': 'slot' },
+          });
+        },
+      },
+    });
+
+    formGroup = wrapper.find(GlFormGroup);
+    slot = wrapper.find('[data-testid="slot"]');
+  });
+
+  afterEach(() => {
+    if (wrapper?.destroy) {
+      wrapper.destroy();
+    }
+
+    wrapper = null;
+  });
+
+  it('should display the default slot', () => {
+    expect(slot.exists()).toBe(true);
+  });
+
+  it('should bind the input id to the slot', () => {
+    expect(slot.attributes('id')).toBe('test-id');
+  });
+
+  it('should bind the label-for to the input id', () => {
+    expect(formGroup.find('[for="test-id"]').exists()).toBe(true);
+  });
+
+  it('should bind extra attributes to the form group', () => {
+    expect(formGroup.attributes('description')).toBe('test description');
+  });
+});