add unit tests to ensure our plugins works in jquery

4 files changed, 81 insertions, 2 deletions

diff --git a/js/tests/karma.conf.js b/js/tests/karma.conf.js
index be5982e26..1ab0629a4 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 000000000..ba41d49ef
--- /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()
+  })
+})
diff --git a/package-lock.json b/package-lock.json
index b53c8e796..1fd9754d8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6883,6 +6883,12 @@
       "integrity": "sha512-nCeAiw37MIMA9w9IXso7bRaLl+c/ef3wnxsoSAlYrzS+Ot0zTG6nU8G/cIfGkqpkjX2wNaIW9RFG0TwIFnG6bA==",
       "dev": true
     },
+    "jquery": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz",
+      "integrity": "sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg==",
+      "dev": true
+    },
     "js-base64": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.2.tgz",
diff --git a/package.json b/package.json
index 5ec1ea3f4..c763076c8 100644
--- a/package.json
+++ b/package.json
@@ -40,11 +40,12 @@
     "js-minify-standalone": "terser --compress --mangle --comments \"/^!/\" --source-map \"content=dist/js/bootstrap.js.map,includeSources,url=bootstrap.min.js.map\" --output dist/js/bootstrap.min.js dist/js/bootstrap.js",
     "js-minify-standalone-esm": "terser --compress --mangle --comments \"/^!/\" --source-map \"content=dist/js/bootstrap.esm.js.map,includeSources,url=bootstrap.esm.min.js.map\" --output dist/js/bootstrap.esm.min.js dist/js/bootstrap.esm.js",
     "js-minify-bundle": "terser --compress --mangle --comments \"/^!/\" --source-map \"content=dist/js/bootstrap.bundle.js.map,includeSources,url=bootstrap.bundle.min.js.map\" --output dist/js/bootstrap.bundle.min.js dist/js/bootstrap.bundle.js",
-    "js-test": "npm-run-all --parallel js-test-karma js-test-integration",
+    "js-test": "npm-run-all --parallel js-test-karma js-test-jquery js-test-integration",
     "js-debug": "cross-env DEBUG=true karma start js/tests/karma.conf.js",
     "js-test-karma": "karma start js/tests/karma.conf.js",
     "js-test-integration": "rollup --config js/tests/integration/rollup.bundle.js && rollup --config js/tests/integration/rollup.bundle-modularity.js",
     "js-test-cloud": "cross-env BROWSER=true npm run js-test-karma",
+    "js-test-jquery": "cross-env JQUERY=true npm run js-test-karma",
     "lint": "npm-run-all --parallel js-lint css-lint lockfile-lint",
     "docs": "npm-run-all docs-build docs-lint",
     "docs-build": "hugo --cleanDestinationDir",
@@ -110,6 +111,7 @@
     "hammer-simulator": "0.0.1",
     "hugo-bin": "^0.57.2",
     "ip": "^1.1.5",
+    "jquery": "^3.5.1",
     "karma": "^5.0.4",
     "karma-browserstack-launcher": "1.4.0",
     "karma-chrome-launcher": "^3.1.0",