fix: don't display warning messages when in production (closes #5598) (#5763)

jacobmllr95 · web-flow · commit 4b5d9162b8a6 · 2020-09-11T13:25:58.000+02:00
* fix: don't display BootstrapVue warning messages when in production

* Update bv-tooltip.js

* Update README.md

* Update bv-tooltip.js

* Update bv-tooltip.js

* Update pagination.js

* Update tooltip.spec.js
diff --git a/docs/markdown/reference/settings/README.md b/docs/markdown/reference/settings/README.md
@@ -168,12 +168,13 @@ the config object to the Nuxt.js plugin module.
 
 ## Disabling BootstrapVue console warnings
 
-BootstrapVue will warn (via `console.warn`) when you try and use a deprecated prop, or pass an
+BootstrapVue will warn (via `console.warn()`) when you try and use a deprecated prop, or pass an
 invalid value to certain props. These warnings are provided to help you ensure that your application
 is using the correct props and values.
 
-In some cases, you may want to disable these warnings (not recommended). You can do so by setting
-the following process environment variable:
+BootstrapVue automatically disables warnings in production mode (`NODE_ENV=production`). If you want
+to disable the warnings in other scenarios (not recommended), you can do so by setting the following
+process environment variable:
 
 <!-- eslint-disable no-unused-vars -->
 
diff --git a/src/components/pagination/pagination.js b/src/components/pagination/pagination.js
@@ -119,8 +119,6 @@ export const BPagination = /*#__PURE__*/ Vue.extend({
         return
       }
 
-      console.log(evt, pageNumber)
-
       // Update the `v-model`
       this.currentPage = pageNumber
       // Emit event triggered by user interaction
diff --git a/src/components/tooltip/helpers/bv-tooltip.js b/src/components/tooltip/helpers/bv-tooltip.js
@@ -248,7 +248,12 @@ export const BVTooltip = /*#__PURE__*/ Vue.extend({
         this.listen()
       } else {
         /* istanbul ignore next */
-        warn('Unable to find target element in document.', this.templateType)
+        warn(
+          isString(this.target)
+            ? `Unable to find target element by ID "#${this.target}" in document.`
+            : 'The provided target is no valid HTML element.',
+          this.templateType
+        )
       }
     })
   },
@@ -513,13 +518,14 @@ export const BVTooltip = /*#__PURE__*/ Vue.extend({
     },
     // --- Utility methods ---
     getTarget() {
-      // Handle case where target may be a component ref
-      let target = this.target ? this.target.$el || this.target : null
-      // If an ID
-      target = isString(target) ? getById(target.replace(/^#/, '')) : target
-      // If a function
-      target = isFunction(target) ? target() : target
-      // If an element ref
+      let { target } = this
+      if (isString(target)) {
+        target = getById(target.replace(/^#/, ''))
+      } else if (isFunction(target)) {
+        target = target()
+      } else if (target) {
+        target = target.$el || target
+      }
       return isElement(target) ? target : null
     },
     getPlacementTarget() {
diff --git a/src/components/tooltip/tooltip.spec.js b/src/components/tooltip/tooltip.spec.js
@@ -7,6 +7,7 @@ const MODAL_CLOSE_EVENT = 'bv::modal::hidden'
 // Our test application
 const App = {
   props: [
+    'target',
     'triggers',
     'show',
     'noninteractive',
@@ -22,7 +23,7 @@ const App = {
   ],
   render(h) {
     const tipProps = {
-      target: 'foo',
+      target: this.target || 'foo',
       triggers: this.triggers,
       show: this.show,
       noninteractive: this.noninteractive || false,
@@ -47,7 +48,8 @@ const App = {
             type: 'button',
             disabled: this.btnDisabled || null,
             title: this.titleAttr || null
-          }
+          },
+          ref: 'target'
         },
         'text'
       ),
@@ -283,6 +285,68 @@ describe('b-tooltip', () => {
     wrapper.destroy()
   })
 
+  it('providing the trigger element by function works', async () => {
+    jest.useFakeTimers()
+    const container = createContainer()
+    const wrapper = mount(App, {
+      attachTo: container,
+      propsData: {
+        target: () => wrapper.vm.$refs.target,
+        triggers: 'click',
+        show: false
+      },
+      slots: {
+        default: 'title'
+      }
+    })
+
+    expect(wrapper.vm).toBeDefined()
+    await waitNT(wrapper.vm)
+    await waitRAF()
+    await waitNT(wrapper.vm)
+    await waitRAF()
+    jest.runOnlyPendingTimers()
+
+    expect(wrapper.element.tagName).toBe('ARTICLE')
+    expect(wrapper.attributes('id')).toBeDefined()
+    expect(wrapper.attributes('id')).toEqual('wrapper')
+
+    // The trigger button
+    const $button = wrapper.find('button')
+    expect($button.exists()).toBe(true)
+    expect($button.attributes('id')).toBeDefined()
+    expect($button.attributes('id')).toEqual('foo')
+    expect($button.attributes('aria-describedby')).not.toBeDefined()
+
+    // <b-tooltip> wrapper
+    const $tipHolder = wrapper.findComponent(BTooltip)
+    expect($tipHolder.exists()).toBe(true)
+
+    // Activate tooltip by trigger
+    await $button.trigger('click')
+    await waitRAF()
+    await waitRAF()
+    jest.runOnlyPendingTimers()
+    await waitNT(wrapper.vm)
+    await waitRAF()
+
+    expect($button.attributes('id')).toBeDefined()
+    expect($button.attributes('id')).toEqual('foo')
+    expect($button.attributes('aria-describedby')).toBeDefined()
+    // ID of the tooltip that will be in the body
+    const adb = $button.attributes('aria-describedby')
+
+    // Find the tooltip element in the document
+    const tip = document.getElementById(adb)
+    expect(tip).not.toBe(null)
+    expect(tip).toBeInstanceOf(HTMLElement)
+    expect(tip.tagName).toEqual('DIV')
+    expect(tip.classList.contains('tooltip')).toBe(true)
+    expect(tip.classList.contains('b-tooltip')).toBe(true)
+
+    wrapper.destroy()
+  })
+
   it('activating trigger element (click) opens tooltip', async () => {
     jest.useFakeTimers()
     const wrapper = mount(App, {
diff --git a/src/utils/env.js b/src/utils/env.js
@@ -72,4 +72,5 @@ export const getEnv = (key, fallback = null) => {
   return env[key] || fallback
 }
 
-export const getNoWarn = () => getEnv('BOOTSTRAP_VUE_NO_WARN')
+export const getNoWarn = () =>
+  getEnv('BOOTSTRAP_VUE_NO_WARN') || getEnv('NODE_ENV') === 'production'

Original file line number	Diff line number	Diff line change
`@@ -119,8 +119,6 @@ export const BPagination = /#__PURE__/ Vue.extend({`
`119`	`119`	`return`
`120`	`120`	`}`
`121`	`121`
`122`		`- console.log(evt, pageNumber)`
`123`		`-`
`124`	`122`	// Update the `v-model`
`125`	`123`	`this.currentPage = pageNumber`
`126`	`124`	`// Emit event triggered by user interaction`
Original file line number	Diff line number	Diff line change
`@@ -72,4 +72,5 @@ export const getEnv = (key, fallback = null) => {`
`72`	`72`	`return env[key] \|\| fallback`
`73`	`73`	`}`
`74`	`74`
`75`		`-export const getNoWarn = () => getEnv('BOOTSTRAP_VUE_NO_WARN')`
	`75`	`+export const getNoWarn = () =>`
	`76`	`+ getEnv('BOOTSTRAP_VUE_NO_WARN') \|\| getEnv('NODE_ENV') === 'production'`