@gitlab/ui 65.0.0 → 65.1.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [65.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v65.0.1...v65.1.0) (2023-08-09)
+
+
+### Features
+
+* **GlFormFields:** Add validator for emojis ([7f5b9aa](https://gitlab.com/gitlab-org/gitlab-ui/commit/7f5b9aa195b3a62a83b5b395aec2e49d08b87bcb))
+
+## [65.0.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v65.0.0...v65.0.1) (2023-08-05)
+
+
+### Bug Fixes
+
+* **button:** correctly detect empty slot for icon only ([bbbc03e](https://gitlab.com/gitlab-org/gitlab-ui/commit/bbbc03ef43139bf023573706894cd9ba60cfce0a))
+
 # [65.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v64.24.1...v65.0.0) (2023-08-01)
 
 

package/dist/components/base/button/button.js

@@ -1,6 +1,7 @@
 import { BButton } from 'bootstrap-vue/esm/index.js';
 import { buttonCategoryOptions, buttonVariantOptions, buttonSizeOptions } from '../../../utils/constants';
 import { logWarning } from '../../../utils/utils';
+import { isSlotEmpty } from '../../../utils/is_slot_empty';
 import { SafeLinkMixin } from '../../mixins/safe_link_mixin';
 import GlIcon from '../icon/icon';
 import GlLoadingIcon from '../loading_icon/loading_icon';
@@ -75,8 +76,7 @@ var script = {
       return this.icon !== '';
     },
     hasIconOnly() {
-      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
-      return Object.keys(this.$slots).length === 0 && this.hasIcon;
+      return isSlotEmpty(this, 'default') && this.hasIcon;
     },
     isButtonDisabled() {
       return this.disabled || this.loading;

package/dist/components/base/dropdown/dropdown.js

@@ -47,6 +47,7 @@ var script = {
     GlLoadingIcon
   },
   mixins: [ButtonMixin],
+  inheritAttrs: false,
   props: {
     headerText: {
       type: String,
@@ -155,6 +156,16 @@ var script = {
       type: Object,
       required: false,
       default: null
+    },
+    noFlip: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    splitHref: {
+      type: String,
+      required: false,
+      default: ''
     }
   },
   computed: {
@@ -218,7 +229,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-dropdown',_vm._g(_vm._b({ref:"dropdown",staticClass:"gl-dropdown",attrs:{"split":_vm.split,"variant":_vm.variant,"size":_vm.buttonSize,"toggle-class":[_vm.toggleButtonClasses],"split-class":_vm.splitButtonClasses,"block":_vm.block,"disabled":_vm.disabled || _vm.loading,"right":_vm.right,"popper-opts":_vm.popperOptions},scopedSlots:_vm._u([{key:"button-content",fn:function(){return [_vm._t("button-content",function(){return [(_vm.loading)?_c('gl-loading-icon',{class:{ 'gl-mr-2': !_vm.isIconOnly }}):_vm._e(),_vm._v(" "),(_vm.icon && !(_vm.isIconOnly && _vm.loading))?_c('gl-icon',{staticClass:"dropdown-icon",attrs:{"name":_vm.icon}}):_vm._e(),_vm._v(" "),_c('span',{staticClass:"gl-dropdown-button-text",class:{ 'gl-sr-only': _vm.textSrOnly }},[_vm._t("button-text",function(){return [_vm._v(_vm._s(_vm.buttonText))]})],2),_vm._v(" "),(_vm.renderCaret)?_c('gl-icon',{staticClass:"gl-button-icon dropdown-chevron",attrs:{"name":"chevron-down"}}):_vm._e()]})]},proxy:true}],null,true)},'b-dropdown',_vm.$attrs,false),_vm.$listeners),[_c('div',{staticClass:"gl-dropdown-inner"},[(_vm.hasSlotContents('header') || _vm.headerText)?_c('div',{staticClass:"gl-dropdown-header",class:{ 'gl-border-b-0!': _vm.hideHeaderBorder }},[(_vm.headerText)?_c('p',{staticClass:"gl-dropdown-header-top"},[_vm._v("\n        "+_vm._s(_vm.headerText)+"\n      ")]):_vm._e(),_vm._v(" "),_vm._t("header")],2):_vm._e(),_vm._v(" "),(_vm.hasHighlightedItemsOrClearAll)?_c('div',{staticClass:"gl-display-flex gl-flex-direction-row gl-justify-content-space-between gl-align-items-center"},[(_vm.hasHighlightedItemsContent && _vm.showHighlightedItemsTitle)?_c('div',{staticClass:"gl-display-flex gl-flex-grow-1 gl-justify-content-flex-start",class:_vm.highlightedItemsTitleClass},[_c('span',{staticClass:"gl-font-weight-bold",attrs:{"data-testid":"highlighted-items-title"}},[_vm._v(_vm._s(_vm.highlightedItemsTitle))])]):_vm._e(),_vm._v(" "),(_vm.showClearAll)?_c('div',{staticClass:"gl-display-flex gl-flex-grow-1 gl-justify-content-end",class:_vm.clearAllTextClass},[_c('gl-button',{attrs:{"size":"small","category":"tertiary","variant":"link","data-testid":"clear-all-button"},on:{"click":function($event){return _vm.$emit('clear-all', $event)}}},[_vm._v(_vm._s(_vm.clearAllText))])],1):_vm._e()]):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-dropdown-contents"},[(_vm.hasHighlightedItemsContent)?_c('div',{staticClass:"gl-overflow-visible",attrs:{"data-testid":"highlighted-items"}},[_vm._t("highlighted-items"),_vm._v(" "),_c('gl-dropdown-divider')],2):_vm._e(),_vm._v(" "),_vm._t("default")],2),_vm._v(" "),(_vm.hasSlotContents('footer'))?_c('div',{staticClass:"gl-dropdown-footer"},[_vm._t("footer")],2):_vm._e()])])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-dropdown',_vm._g(_vm._b({ref:"dropdown",staticClass:"gl-dropdown",attrs:{"split":_vm.split,"variant":_vm.variant,"size":_vm.buttonSize,"toggle-class":[_vm.toggleButtonClasses],"split-class":_vm.splitButtonClasses,"block":_vm.block,"disabled":_vm.disabled || _vm.loading,"right":_vm.right,"popper-opts":_vm.popperOptions,"no-flip":_vm.noFlip,"split-href":_vm.splitHref},scopedSlots:_vm._u([{key:"button-content",fn:function(){return [_vm._t("button-content",function(){return [(_vm.loading)?_c('gl-loading-icon',{class:{ 'gl-mr-2': !_vm.isIconOnly }}):_vm._e(),_vm._v(" "),(_vm.icon && !(_vm.isIconOnly && _vm.loading))?_c('gl-icon',{staticClass:"dropdown-icon",attrs:{"name":_vm.icon}}):_vm._e(),_vm._v(" "),_c('span',{staticClass:"gl-dropdown-button-text",class:{ 'gl-sr-only': _vm.textSrOnly }},[_vm._t("button-text",function(){return [_vm._v(_vm._s(_vm.buttonText))]})],2),_vm._v(" "),(_vm.renderCaret)?_c('gl-icon',{staticClass:"gl-button-icon dropdown-chevron",attrs:{"name":"chevron-down"}}):_vm._e()]})]},proxy:true}],null,true)},'b-dropdown',_vm.$attrs,false),_vm.$listeners),[_c('div',{staticClass:"gl-dropdown-inner"},[(_vm.hasSlotContents('header') || _vm.headerText)?_c('div',{staticClass:"gl-dropdown-header",class:{ 'gl-border-b-0!': _vm.hideHeaderBorder }},[(_vm.headerText)?_c('p',{staticClass:"gl-dropdown-header-top"},[_vm._v("\n        "+_vm._s(_vm.headerText)+"\n      ")]):_vm._e(),_vm._v(" "),_vm._t("header")],2):_vm._e(),_vm._v(" "),(_vm.hasHighlightedItemsOrClearAll)?_c('div',{staticClass:"gl-display-flex gl-flex-direction-row gl-justify-content-space-between gl-align-items-center"},[(_vm.hasHighlightedItemsContent && _vm.showHighlightedItemsTitle)?_c('div',{staticClass:"gl-display-flex gl-flex-grow-1 gl-justify-content-flex-start",class:_vm.highlightedItemsTitleClass},[_c('span',{staticClass:"gl-font-weight-bold",attrs:{"data-testid":"highlighted-items-title"}},[_vm._v(_vm._s(_vm.highlightedItemsTitle))])]):_vm._e(),_vm._v(" "),(_vm.showClearAll)?_c('div',{staticClass:"gl-display-flex gl-flex-grow-1 gl-justify-content-end",class:_vm.clearAllTextClass},[_c('gl-button',{attrs:{"size":"small","category":"tertiary","variant":"link","data-testid":"clear-all-button"},on:{"click":function($event){return _vm.$emit('clear-all', $event)}}},[_vm._v(_vm._s(_vm.clearAllText))])],1):_vm._e()]):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-dropdown-contents"},[(_vm.hasHighlightedItemsContent)?_c('div',{staticClass:"gl-overflow-visible",attrs:{"data-testid":"highlighted-items"}},[_vm._t("highlighted-items"),_vm._v(" "),_c('gl-dropdown-divider')],2):_vm._e(),_vm._v(" "),_vm._t("default")],2),_vm._v(" "),(_vm.hasSlotContents('footer'))?_c('div',{staticClass:"gl-dropdown-footer"},[_vm._t("footer")],2):_vm._e()])])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/form/form_fields/validators.js

@@ -1,3 +1,7 @@
+import emojiRegex from 'emoji-regex';
+
+const EMOJI_REGEX = emojiRegex();
+
 // This contains core validating behavior and **should not** contain
 // domain-specific validations.
 //
@@ -11,6 +15,34 @@
 // export const projectPathIsUnique = ...
 // ```
 const factory = (failMessage, isValid) => val => !isValid(val) ? failMessage : '';
+
+/**
+ * Validator function to check if a string is present and non-empty.
+ *
+ * Returns an empty string if the input contains a valid string.
+ *
+ * Returns `failMessage` if the input string is empty, null, or undefined.
+ * @param {string} failMessage - The error message to be returned when validation fails.
+ * @returns {Function} A validation function that returns either `failMessage` or empty string.
+ */
 const required = failMessage => factory(failMessage, val => val !== '' && val !== null && val !== undefined);
 
-export { factory, required };
+/**
+ * Validator function to check if a string contains any emojis.
+ *
+ * Returns an empty string if the input is empty, null, or undefined, or if no emoji is present.
+ *
+ * Returns `failMessage` if the input string contains at least one emoji.
+ * @param {string} failMessage - The error message to be returned when validation fails.
+ * @returns {Function} A validation function that returns either `failMessage` or empty string.
+ */
+const noEmojis = failMessage => factory(failMessage, val => {
+  var _val$match$length, _val$match;
+  if (!val || typeof val !== 'string') {
+    return true;
+  }
+  const resultsLength = (_val$match$length = (_val$match = val.match(EMOJI_REGEX)) === null || _val$match === void 0 ? void 0 : _val$match.length) !== null && _val$match$length !== void 0 ? _val$match$length : 0;
+  return resultsLength < 1;
+});
+
+export { factory, noEmojis, required };

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 01 Aug 2023 10:25:10 GMT
+ * Generated on Wed, 09 Aug 2023 06:12:06 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 01 Aug 2023 10:25:10 GMT
+ * Generated on Wed, 09 Aug 2023 06:12:06 GMT
  */
 
 :root {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 01 Aug 2023 10:25:10 GMT
+ * Generated on Wed, 09 Aug 2023 06:12:06 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 01 Aug 2023 10:25:10 GMT
+ * Generated on Wed, 09 Aug 2023 06:12:06 GMT
  */
 
 export const BLACK = "#000";

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 01 Aug 2023 10:25:10 GMT
+// Generated on Wed, 09 Aug 2023 06:12:06 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 01 Aug 2023 10:25:10 GMT
+// Generated on Wed, 09 Aug 2023 06:12:06 GMT
 
 $brand-gray-05: #2b2838 !default;
 $brand-gray-04: #45424d !default;

package/dist/utils/is_slot_empty.js

@@ -0,0 +1,34 @@
+import Vue from 'vue';
+
+// Fragment will be available only in Vue.js 3
+const {
+  Fragment,
+  Comment
+} = Vue;
+function callIfNeeded(fnOrResult, args) {
+  return fnOrResult instanceof Function ? fnOrResult(args) : fnOrResult;
+}
+function isEmpty(vnode) {
+  if (!vnode || Comment && vnode.type === Comment) {
+    return true;
+  }
+  if (Array.isArray(vnode)) {
+    return vnode.every(isEmpty);
+  }
+  if (Fragment && vnode.type === Fragment) {
+    // Vue.js 3 fragment, check children
+    return vnode.children.every(isEmpty);
+  }
+  return false;
+}
+function isSlotEmpty(vueInstance, slot, slotArgs) {
+  var _vueInstance$$scopedS, _vueInstance$$scopedS2;
+  const isVue3 = Boolean(Fragment);
+  const slotContent = isVue3 ?
+  // we need to check both $slots and $scopedSlots due to https://github.com/vuejs/core/issues/8869
+  // additionally, in @vue/compat $slot might be a function instead of array of vnodes (sigh)
+  callIfNeeded(vueInstance.$slots[slot] || vueInstance.$scopedSlots[slot], slotArgs) : (_vueInstance$$scopedS = (_vueInstance$$scopedS2 = vueInstance.$scopedSlots)[slot]) === null || _vueInstance$$scopedS === void 0 ? void 0 : _vueInstance$$scopedS.call(_vueInstance$$scopedS2, slotArgs);
+  return isEmpty(slotContent);
+}
+
+export { isSlotEmpty };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "65.0.0",
+  "version": "65.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -91,7 +91,7 @@
     "@gitlab/eslint-plugin": "19.0.0",
     "@gitlab/fonts": "^1.2.0",
     "@gitlab/stylelint-config": "4.1.0",
-    "@gitlab/svgs": "3.58.0",
+    "@gitlab/svgs": "3.59.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
@@ -118,10 +118,10 @@
     "babel-loader": "^8.0.5",
     "babel-plugin-require-context-hook": "^1.0.0",
     "bootstrap": "4.6.2",
-    "cypress": "12.17.2",
+    "cypress": "12.17.3",
     "dompurify": "^2.4.7",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.45.0",
+    "eslint": "8.46.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.13.3",
     "eslint-plugin-storybook": "0.6.12",

package/src/components/base/button/button.spec.js

@@ -211,4 +211,15 @@ describe('button component', () => {
       });
     });
   });
+
+  it('should correctly detect empty content for icon only mode', () => {
+    const DemoComponent = {
+      components: { GlButton },
+      template: `<gl-button icon="ellipsis_h"><slot><span v-if="false">not-rendered</span></slot></gl-button>`,
+    };
+
+    wrapper = mount(DemoComponent);
+
+    expect(wrapper.classes()).toContain('btn-icon');
+  });
 });

package/src/components/base/button/button.vue

@@ -7,6 +7,7 @@ import {
   buttonSizeOptions,
 } from '../../../utils/constants';
 import { logWarning } from '../../../utils/utils';
+import { isSlotEmpty } from '../../../utils/is_slot_empty';
 import { SafeLinkMixin } from '../../mixins/safe_link_mixin';
 import GlIcon from '../icon/icon.vue';
 import GlLoadingIcon from '../loading_icon/loading_icon.vue';
@@ -79,8 +80,7 @@ export default {
       return this.icon !== '';
     },
     hasIconOnly() {
-      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
-      return Object.keys(this.$slots).length === 0 && this.hasIcon;
+      return isSlotEmpty(this, 'default') && this.hasIcon;
     },
     isButtonDisabled() {
       return this.disabled || this.loading;

package/src/components/base/dropdown/dropdown.vue

@@ -54,6 +54,7 @@ export default {
     GlLoadingIcon,
   },
   mixins: [ButtonMixin],
+  inheritAttrs: false,
   props: {
     headerText: {
       type: String,
@@ -163,6 +164,16 @@ export default {
       required: false,
       default: null,
     },
+    noFlip: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    splitHref: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   computed: {
     renderCaret() {
@@ -247,6 +258,8 @@ export default {
     :disabled="disabled || loading"
     :right="right"
     :popper-opts="popperOptions"
+    :no-flip="noFlip"
+    :split-href="splitHref"
     v-on="$listeners"
   >
     <div class="gl-dropdown-inner">

package/src/components/base/form/form_fields/validators.js

@@ -1,3 +1,7 @@
+import emojiRegex from 'emoji-regex';
+
+const EMOJI_REGEX = emojiRegex();
+
 // This contains core validating behavior and **should not** contain
 // domain-specific validations.
 //
@@ -12,5 +16,34 @@
 // ```
 export const factory = (failMessage, isValid) => (val) => !isValid(val) ? failMessage : '';
 
+/**
+ * Validator function to check if a string is present and non-empty.
+ *
+ * Returns an empty string if the input contains a valid string.
+ *
+ * Returns `failMessage` if the input string is empty, null, or undefined.
+ * @param {string} failMessage - The error message to be returned when validation fails.
+ * @returns {Function} A validation function that returns either `failMessage` or empty string.
+ */
 export const required = (failMessage) =>
   factory(failMessage, (val) => val !== '' && val !== null && val !== undefined);
+
+/**
+ * Validator function to check if a string contains any emojis.
+ *
+ * Returns an empty string if the input is empty, null, or undefined, or if no emoji is present.
+ *
+ * Returns `failMessage` if the input string contains at least one emoji.
+ * @param {string} failMessage - The error message to be returned when validation fails.
+ * @returns {Function} A validation function that returns either `failMessage` or empty string.
+ */
+export const noEmojis = (failMessage) =>
+  factory(failMessage, (val) => {
+    if (!val || typeof val !== 'string') {
+      return true;
+    }
+
+    const resultsLength = val.match(EMOJI_REGEX)?.length ?? 0;
+
+    return resultsLength < 1;
+  });

package/src/components/base/form/form_fields/validators.spec.js

@@ -1,4 +1,4 @@
-import { required } from './validators';
+import { noEmojis, required } from './validators';
 
 const TEST_FAIL_MESSAGE = 'Yo test failed!';
 
@@ -26,4 +26,31 @@ describe('components/base/form/form_fields/validators', () => {
       expect(validator(input)).toBe(output);
     });
   });
+
+  describe('noEmojis', () => {
+    let validator;
+
+    beforeEach(() => {
+      validator = noEmojis(TEST_FAIL_MESSAGE);
+    });
+
+    it.each`
+      input        | output
+      ${'123🐱'}   | ${TEST_FAIL_MESSAGE}
+      ${'0 🍩'}    | ${TEST_FAIL_MESSAGE}
+      ${'🐟'}      | ${TEST_FAIL_MESSAGE}
+      ${''}        | ${''}
+      ${null}      | ${''}
+      ${undefined} | ${''}
+      ${'123'}     | ${''}
+      ${'0'}       | ${''}
+      ${{}}        | ${''}
+      ${0}         | ${''}
+      ${1}         | ${''}
+      ${true}      | ${''}
+      ${false}     | ${''}
+    `('with $input, returns $output', ({ input, output }) => {
+      expect(validator(input)).toBe(output);
+    });
+  });
 });

package/src/utils/is_slot_empty.js

@@ -0,0 +1,37 @@
+import Vue from 'vue';
+
+// Fragment will be available only in Vue.js 3
+const { Fragment, Comment } = Vue;
+
+function callIfNeeded(fnOrResult, args) {
+  return fnOrResult instanceof Function ? fnOrResult(args) : fnOrResult;
+}
+
+function isEmpty(vnode) {
+  if (!vnode || (Comment && vnode.type === Comment)) {
+    return true;
+  }
+
+  if (Array.isArray(vnode)) {
+    return vnode.every(isEmpty);
+  }
+
+  if (Fragment && vnode.type === Fragment) {
+    // Vue.js 3 fragment, check children
+    return vnode.children.every(isEmpty);
+  }
+
+  return false;
+}
+
+export function isSlotEmpty(vueInstance, slot, slotArgs) {
+  const isVue3 = Boolean(Fragment);
+
+  const slotContent = isVue3
+    ? // we need to check both $slots and $scopedSlots due to https://github.com/vuejs/core/issues/8869
+      // additionally, in @vue/compat $slot might be a function instead of array of vnodes (sigh)
+      callIfNeeded(vueInstance.$slots[slot] || vueInstance.$scopedSlots[slot], slotArgs)
+    : vueInstance.$scopedSlots[slot]?.(slotArgs);
+
+  return isEmpty(slotContent);
+}

package/src/utils/is_slot_empty.spec.js

@@ -0,0 +1,73 @@
+import { mount } from '@vue/test-utils';
+import { isSlotEmpty } from './is_slot_empty';
+
+describe('is slot empty', () => {
+  const TestComponent = {
+    template: `
+      <div>
+        <slot></slot>
+      </div>
+    `,
+  };
+
+  it('should return true for empty slot', () => {
+    const PassesNothing = {
+      components: { TestComponent },
+      template: '<test-component></test-component>',
+    };
+
+    const wrapper = mount(PassesNothing);
+
+    expect(isSlotEmpty(wrapper.findComponent(TestComponent).vm, 'default')).toBe(true);
+  });
+
+  it('should return true for slot with comment', () => {
+    const PassesComment = {
+      components: { TestComponent },
+      template: '<test-component><!-- comment --></test-component>',
+    };
+
+    const wrapper = mount(PassesComment);
+
+    expect(isSlotEmpty(wrapper.findComponent(TestComponent).vm, 'default')).toBe(true);
+  });
+
+  it('should return true for slot with multiple comments', () => {
+    const PassesComment = {
+      components: { TestComponent },
+      template: '<test-component><!-- comment --><!-- comment2 --></test-component>',
+    };
+
+    const wrapper = mount(PassesComment);
+
+    expect(isSlotEmpty(wrapper.findComponent(TestComponent).vm, 'default')).toBe(true);
+  });
+
+  it('should return false for non-empty slot', () => {
+    const PassesComment = {
+      components: { TestComponent },
+      template: '<test-component>non-empty</test-component>',
+    };
+
+    const wrapper = mount(PassesComment);
+
+    expect(isSlotEmpty(wrapper.findComponent(TestComponent).vm, 'default')).toBe(false);
+  });
+
+  it.each([true, false])(
+    'should return %s for conditional slot contents based on slot-scope',
+    (shouldRender) => {
+      const PassesComment = {
+        components: { TestComponent },
+        template:
+          '<test-component><template #default="{ shouldRender }"><span v-if="shouldRender">empty</span></template></test-component>',
+      };
+
+      const wrapper = mount(PassesComment);
+
+      expect(
+        isSlotEmpty(wrapper.findComponent(TestComponent).vm, 'default', { shouldRender })
+      ).toBe(!shouldRender);
+    }
+  );
+});