Merge branch 'add-validator-for-segmented-control-btn-group-prop' into 'master'

Add validator for SegmentedControlButtonGroup options prop

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/133160



Merged-by: Paul Slaughter <pslaughter@gitlab.com>
Approved-by: Paul Slaughter <pslaughter@gitlab.com>
Reviewed-by: Paul Slaughter <pslaughter@gitlab.com>
Co-authored-by: Rene Padillo <developer@renesansz.me>

app/assets/javascripts/vue_shared/components/segmented_control_button_group.vue

 <script>
 import { GlButtonGroup, GlButton } from '@gitlab/ui';
 
+const validateOptionsProp = (options) => {
+  const requiredOptionPropType = {
+    value: ['string', 'number', 'boolean'],
+    disabled: ['boolean', 'undefined'],
+  };
+  const optionProps = Object.keys(requiredOptionPropType);
+
+  return options.every((option) => {
+    if (!option) {
+      return false;
+    }
+    return optionProps.every((name) => requiredOptionPropType[name].includes(typeof option[name]));
+  });
+};
+
 // TODO: We're planning to move this component to GitLab UI
 //       https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1787
 export default {
@@ -12,6 +27,7 @@ export default {
     options: {
       type: Array,
       required: true,
+      validator: validateOptionsProp,
     },
     value: {
       type: [String, Number, Boolean],

spec/frontend/vue_shared/components/segmented_control_button_group_spec.js

@@ -10,6 +10,7 @@ const DEFAULT_OPTIONS = [
 ];
 
 describe('~/vue_shared/components/segmented_control_button_group.vue', () => {
+  let consoleSpy;
   let wrapper;
 
   const createComponent = (props = {}, scopedSlots = {}) => {
@@ -97,4 +98,34 @@ describe('~/vue_shared/components/segmented_control_button_group.vue', () => {
       );
     });
   });
+
+  describe('options prop validation', () => {
+    beforeEach(() => {
+      consoleSpy = jest.spyOn(console, 'error').mockImplementation();
+    });
+
+    it.each([
+      [[{ disabled: true }]],
+      [[{ value: '1', disabled: 'false' }]],
+      [[{ value: null, disabled: 'true' }]],
+      [[[{ value: true }, null]]],
+    ])('with options=%j, fails validation', (options) => {
+      createComponent({ options });
+
+      expect(consoleSpy).toHaveBeenCalledTimes(1);
+      expect(consoleSpy).toHaveBeenCalledWith(
+        expect.stringContaining('Invalid prop: custom validator check failed for prop "options"'),
+      );
+    });
+
+    it.each([
+      [[{ value: '1' }]],
+      [[{ value: 1, disabled: true }]],
+      [[{ value: true, disabled: false }]],
+    ])('with options=%j, passes validation', (options) => {
+      createComponent({ options });
+
+      expect(consoleSpy).not.toHaveBeenCalled();
+    });
+  });
 });