add unit tests to ensure our plugins works in jquery

2 files changed, 72 insertions, 1 deletions

diff --git a/js/tests/karma.conf.js b/js/tests/karma.conf.js
index be5982e264..1ab0629a4e 100644
--- a/js/tests/karma.conf.js
+++ b/js/tests/karma.conf.js
@@ -14,6 +14,7 @@ const babelHelpers = require('../../build/babel-helpers.js')
 const { env } = process
 const browserStack = env.BROWSER === 'true'
 const debug = env.DEBUG === 'true'
+const jQueryTest = env.JQUERY === 'true'
 const frameworks = [
   'jasmine'
 ]
@@ -59,7 +60,7 @@ const conf = {
   },
   files: [
     'node_modules/hammer-simulator/index.js',
-    { pattern: 'js/tests/unit/**/*.spec.js', watched: !browserStack }
+    { pattern: 'js/tests/unit/**/!(jquery).spec.js', watched: !browserStack }
   ],
   preprocessors: {
     'js/tests/unit/**/*.spec.js': ['rollup']
@@ -101,6 +102,19 @@ if (browserStack) {
   conf.customLaunchers = browsers
   conf.browsers = browsersKeys
   reporters.push('BrowserStack', 'kjhtml')
+} else if (jQueryTest) {
+  frameworks.push('detectBrowsers')
+  plugins.push(
+    'karma-chrome-launcher',
+    'karma-firefox-launcher',
+    'karma-detect-browsers'
+  )
+  conf.customLaunchers = customLaunchers
+  conf.detectBrowsers = detectBrowsers
+  conf.files = [
+    'node_modules/jquery/dist/jquery.slim.min.js',
+    { pattern: 'js/tests/unit/jquery.spec.js', watched: false }
+  ]
 } else {
   frameworks.push('detectBrowsers')
   plugins.push(
diff --git a/js/tests/unit/jquery.spec.js b/js/tests/unit/jquery.spec.js
new file mode 100644
index 0000000000..ba41d49efb
--- /dev/null
+++ b/js/tests/unit/jquery.spec.js
@@ -0,0 +1,57 @@
+/* eslint-env jquery */
+import Alert from '../../src/alert'
+import Button from '../../src/button'
+import Carousel from '../../src/carousel'
+import Collapse from '../../src/collapse'
+import Dropdown from '../../src/dropdown'
+import Modal from '../../src/modal'
+import Popover from '../../src/popover'
+import ScrollSpy from '../../src/scrollspy'
+import Tab from '../../src/tab'
+import Toast from '../../src/toast'
+import Tooltip from '../../src/tooltip'
+
+/** Test helpers */
+import { getFixture, clearFixture } from '../helpers/fixture'
+
+describe('jQuery', () => {
+  let fixtureEl
+
+  beforeAll(() => {
+    fixtureEl = getFixture()
+  })
+
+  afterEach(() => {
+    clearFixture()
+  })
+
+  it('should add all plugins in jQuery', () => {
+    expect(Alert.jQueryInterface).toEqual(jQuery.fn.alert)
+    expect(Button.jQueryInterface).toEqual(jQuery.fn.button)
+    expect(Carousel.jQueryInterface).toEqual(jQuery.fn.carousel)
+    expect(Collapse.jQueryInterface).toEqual(jQuery.fn.collapse)
+    expect(Dropdown.jQueryInterface).toEqual(jQuery.fn.dropdown)
+    expect(Modal.jQueryInterface).toEqual(jQuery.fn.modal)
+    expect(Popover.jQueryInterface).toEqual(jQuery.fn.popover)
+    expect(ScrollSpy.jQueryInterface).toEqual(jQuery.fn.scrollspy)
+    expect(Tab.jQueryInterface).toEqual(jQuery.fn.tab)
+    expect(Toast.jQueryInterface).toEqual(jQuery.fn.toast)
+    expect(Tooltip.jQueryInterface).toEqual(jQuery.fn.tooltip)
+  })
+
+  it('should use jQuery event system', done => {
+    fixtureEl.innerHTML = [
+      '<div class="alert">',
+      '  <button type="button" data-dismiss="alert">x</button>',
+      '</div>'
+    ].join('')
+
+    $(fixtureEl).find('.alert')
+      .one('closed.bs.alert', () => {
+        expect($(fixtureEl).find('.alert').length).toEqual(0)
+        done()
+      })
+
+    $(fixtureEl).find('button').click()
+  })
+})