From 554586d2e819c055838e92dbae696337081301e8 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Sat, 21 Nov 2020 23:09:29 +0200 Subject: [PATCH 1/8] Add eslint-plugin-qunit --- js/tests/unit/.eslintrc.json | 3 ++- package-lock.json | 27 +++++++++++++++++++++++++++ package.json | 1 + 3 files changed, 30 insertions(+), 1 deletion(-) diff --git a/js/tests/unit/.eslintrc.json b/js/tests/unit/.eslintrc.json index 06fad565eda8..3153849cf0b8 100644 --- a/js/tests/unit/.eslintrc.json +++ b/js/tests/unit/.eslintrc.json @@ -1,6 +1,7 @@ { "extends": [ - "../../../.eslintrc.json" + "../../../.eslintrc.json", + "plugin:qunit/recommended" ], "parserOptions": { "ecmaVersion": 5, diff --git a/package-lock.json b/package-lock.json index 835c324c3b3c..f8abf26ec634 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4171,6 +4171,27 @@ } } }, + "eslint-plugin-qunit": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-qunit/-/eslint-plugin-qunit-6.2.0.tgz", + "integrity": "sha512-KvPmkIC2MHpfRxs/r8WUeeGkG6y+3qwSi2AZIBtjcM/YG6Z3k0GxW5Hbu3l7X0TDhljVCeBb9Q5puUkHzl83Mw==", + "dev": true, + "requires": { + "eslint-utils": "^3.0.0", + "requireindex": "^1.2.0" + }, + "dependencies": { + "eslint-utils": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz", + "integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==", + "dev": true, + "requires": { + "eslint-visitor-keys": "^2.0.0" + } + } + } + }, "eslint-plugin-unicorn": { "version": "36.0.0", "resolved": "https://registry.npmjs.org/eslint-plugin-unicorn/-/eslint-plugin-unicorn-36.0.0.tgz", @@ -9584,6 +9605,12 @@ "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==", "dev": true }, + "requireindex": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/requireindex/-/requireindex-1.2.0.tgz", + "integrity": "sha512-L9jEkOi3ASd9PYit2cwRfyppc9NoABujTP8/5gFcbERmo5jUoAKovIC3fsF17pkTnGsrByysqX+Kxd2OTNI1ww==", + "dev": true + }, "requires-port": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", diff --git a/package.json b/package.json index cd30403b37cf..92927996a154 100644 --- a/package.json +++ b/package.json @@ -108,6 +108,7 @@ "eslint": "^7.32.0", "eslint-config-xo": "^0.38.0", "eslint-plugin-import": "^2.24.2", + "eslint-plugin-qunit": "^6.2.0", "eslint-plugin-unicorn": "^36.0.0", "find-unused-sass-variables": "^3.1.0", "glob": "^7.1.7", From dacda9069fa54eea1f1f8fd4d1088438123914cf Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Mon, 23 Nov 2020 18:26:21 +0200 Subject: [PATCH 2/8] tests: comply to the new rules Use `assert.strictEqual`/`assert.true`/`assert.false` --- js/tests/unit/alert.js | 10 +-- js/tests/unit/button.js | 126 +++++++++++++-------------- js/tests/unit/carousel.js | 90 +++++++++---------- js/tests/unit/collapse.js | 136 +++++++++++++++-------------- js/tests/unit/dropdown.js | 174 ++++++++++++++++++------------------- js/tests/unit/modal.js | 96 ++++++++++---------- js/tests/unit/popover.js | 30 ++++--- js/tests/unit/scrollspy.js | 56 ++++++------ js/tests/unit/tab.js | 32 +++---- js/tests/unit/toast.js | 36 ++++---- js/tests/unit/tooltip.js | 127 +++++++++++++-------------- js/tests/unit/util.js | 14 +-- 12 files changed, 468 insertions(+), 459 deletions(-) diff --git a/js/tests/unit/alert.js b/js/tests/unit/alert.js index 0d89d5f53d5b..5fbb7e5988d3 100644 --- a/js/tests/unit/alert.js +++ b/js/tests/unit/alert.js @@ -29,7 +29,7 @@ $(function () { assert.expect(2) var $el = $('
') var $alert = $el.bootstrapAlert() - assert.ok($alert instanceof $, 'returns jquery collection') + assert.true($alert instanceof $, 'returns jquery collection') assert.strictEqual($alert[0], $el[0], 'collection contains element') }) @@ -44,7 +44,7 @@ $(function () { $alert.find('.close').trigger('click') - assert.strictEqual($alert.hasClass('show'), false, 'remove .show class on .close click') + assert.false($alert.hasClass('show'), 'remove .show class on .close click') }) QUnit.test('should remove element when clicking .close', function (assert) { @@ -104,18 +104,18 @@ $(function () { var $el = $('
') var $alert = $el.bootstrapAlert() - assert.ok(typeof $alert.data('bs.alert') !== 'undefined') + assert.notStrictEqual(typeof $alert.data('bs.alert'), 'undefined') $alert.data('bs.alert').dispose() - assert.ok(typeof $alert.data('bs.button') === 'undefined') + assert.strictEqual(typeof $alert.data('bs.button'), 'undefined') }) QUnit.test('should return alert version', function (assert) { assert.expect(1) if (typeof Alert !== 'undefined') { - assert.ok(typeof Alert.VERSION === 'string') + assert.strictEqual(typeof Alert.VERSION, 'string') } else { assert.notOk() } diff --git a/js/tests/unit/button.js b/js/tests/unit/button.js index 1bd62b6b8b60..8dd0cfb3f7ba 100644 --- a/js/tests/unit/button.js +++ b/js/tests/unit/button.js @@ -29,16 +29,16 @@ $(function () { assert.expect(2) var $el = $('
') var $button = $el.bootstrapButton() - assert.ok($button instanceof $, 'returns jquery collection') + assert.true($button instanceof $, 'returns jquery collection') assert.strictEqual($button[0], $el[0], 'collection contains element') }) QUnit.test('should toggle active', function (assert) { assert.expect(2) var $btn = $('') - assert.ok(!$btn.hasClass('active'), 'btn does not have active class') + assert.false($btn.hasClass('active'), 'btn does not have active class') $btn.bootstrapButton('toggle') - assert.ok($btn.hasClass('active'), 'btn has class active') + assert.true($btn.hasClass('active'), 'btn has class active') }) QUnit.test('should toggle active when btn children are clicked', function (assert) { @@ -48,9 +48,9 @@ $(function () { $btn .append($inner) .appendTo('#qunit-fixture') - assert.ok(!$btn.hasClass('active'), 'btn does not have active class') + assert.false($btn.hasClass('active'), 'btn does not have active class') $inner.trigger('click') - assert.ok($btn.hasClass('active'), 'btn has class active') + assert.true($btn.hasClass('active'), 'btn has class active') }) QUnit.test('should toggle aria-pressed', function (assert) { @@ -107,7 +107,7 @@ $(function () { $btn.appendTo('#qunit-fixture') $(window).trigger($.Event('load')) setTimeout(function () { - assert.ok($btn.hasClass('active'), 'button with aria-pressed="true" has been given class active') + assert.true($btn.hasClass('active'), 'button with aria-pressed="true" has been given class active') done() }, 5) }) @@ -125,7 +125,7 @@ $(function () { $(window).trigger($.Event('load')) setTimeout(function () { - assert.ok($btn.hasClass('active'), 'checked checkbox button has been given class active') + assert.true($btn.hasClass('active'), 'checked checkbox button has been given class active') done() }, 5) }) @@ -137,7 +137,7 @@ $(function () { $btn.appendTo('#qunit-fixture') $(window).trigger($.Event('load')) setTimeout(function () { - assert.ok(!$btn.hasClass('active'), 'button without aria-pressed="true" has had active class removed') + assert.false($btn.hasClass('active'), 'button without aria-pressed="true" has had active class removed') done() }, 5) }) @@ -155,7 +155,7 @@ $(function () { $(window).trigger($.Event('load')) setTimeout(function () { - assert.ok(!$btn.hasClass('active'), 'unchecked checkbox button has had active class removed') + assert.false($btn.hasClass('active'), 'unchecked checkbox button has had active class removed') done() }, 5) }) @@ -199,7 +199,7 @@ $(function () { }) setTimeout(function () { - assert.ok(countChangeEvent === 1, 'onchange event fired only once') + assert.strictEqual(countChangeEvent, 1, 'onchange event fired only once') done() }, 5) @@ -224,28 +224,28 @@ $(function () { var $btn1 = $group.children().eq(0) var $btn2 = $group.children().eq(1) - assert.ok($btn1.hasClass('active'), 'btn1 has active class') - assert.ok($btn1.find('input').prop('checked'), 'btn1 is checked') - assert.ok(!$btn2.hasClass('active'), 'btn2 does not have active class') - assert.ok(!$btn2.find('input').prop('checked'), 'btn2 is not checked') + assert.true($btn1.hasClass('active'), 'btn1 has active class') + assert.true($btn1.find('input').prop('checked'), 'btn1 is checked') + assert.false($btn2.hasClass('active'), 'btn2 does not have active class') + assert.false($btn2.find('input').prop('checked'), 'btn2 is not checked') $btn2.find('input').trigger('click') - assert.ok(!$btn1.hasClass('active'), 'btn1 does not have active class') - assert.ok(!$btn1.find('input').prop('checked'), 'btn1 is not checked') - assert.ok($btn2.hasClass('active'), 'btn2 has active class') - assert.ok($btn2.find('input').prop('checked'), 'btn2 is checked') + assert.false($btn1.hasClass('active'), 'btn1 does not have active class') + assert.false($btn1.find('input').prop('checked'), 'btn1 is not checked') + assert.true($btn2.hasClass('active'), 'btn2 has active class') + assert.true($btn2.find('input').prop('checked'), 'btn2 is checked') $btn2.find('input').trigger('click') // Clicking an already checked radio should not un-check it - assert.ok(!$btn1.hasClass('active'), 'btn1 does not have active class') - assert.ok(!$btn1.find('input').prop('checked'), 'btn1 is not checked') - assert.ok($btn2.hasClass('active'), 'btn2 has active class') - assert.ok($btn2.find('input').prop('checked'), 'btn2 is checked') + assert.false($btn1.hasClass('active'), 'btn1 does not have active class') + assert.false($btn1.find('input').prop('checked'), 'btn1 is not checked') + assert.true($btn2.hasClass('active'), 'btn2 has active class') + assert.true($btn2.find('input').prop('checked'), 'btn2 is checked') $btn1.bootstrapButton('toggle') - assert.ok($btn1.hasClass('active'), 'btn1 has active class') - assert.ok($btn1.find('input').prop('checked'), 'btn1 prop is checked') - assert.ok($btn1.find('input')[0].checked, 'btn1 is checked with jquery') - assert.ok(!$btn2.hasClass('active'), 'btn2 does not have active class') - assert.ok(!$btn2.find('input').prop('checked'), 'btn2 is not checked') - assert.ok(!$btn2.find('input')[0].checked, 'btn2 is not checked') + assert.true($btn1.hasClass('active'), 'btn1 has active class') + assert.true($btn1.find('input').prop('checked'), 'btn1 prop is checked') + assert.true($btn1.find('input')[0].checked, 'btn1 is checked with jquery') + assert.false($btn2.hasClass('active'), 'btn2 does not have active class') + assert.false($btn2.find('input').prop('checked'), 'btn2 is not checked') + assert.false($btn2.find('input')[0].checked, 'btn2 is not checked') }) QUnit.test('should fire click event on input', function (assert) { @@ -300,10 +300,10 @@ $(function () { var $btn2 = $group.children().eq(1) $btn1.find('input').trigger('click') - assert.ok($btn1.is(':not([aria-pressed])'), 'label for nested checkbox input has not been given an aria-pressed attribute') + assert.true($btn1.is(':not([aria-pressed])'), 'label for nested checkbox input has not been given an aria-pressed attribute') $btn2.find('input').trigger('click') - assert.ok($btn2.is(':not([aria-pressed])'), 'label for nested radio input has not been given an aria-pressed attribute') + assert.true($btn2.is(':not([aria-pressed])'), 'label for nested radio input has not been given an aria-pressed attribute') }) QUnit.test('should handle disabled attribute on non-button elements', function (assert) { @@ -318,11 +318,11 @@ $(function () { var $btn = $group.children().eq(0) var $input = $btn.children().eq(0) - assert.ok($btn.is(':not(.active)'), 'button is initially not active') - assert.ok(!$input.prop('checked'), 'checkbox is initially not checked') + assert.true($btn.is(':not(.active)'), 'button is initially not active') + assert.false($input.prop('checked'), 'checkbox is initially not checked') $btn[0].click() // fire a real click on the DOM node itself, not a click() on the jQuery object that just aliases to trigger('click') - assert.ok($btn.is(':not(.active)'), 'button did not become active') - assert.ok(!$input.prop('checked'), 'checkbox did not get checked') + assert.true($btn.is(':not(.active)'), 'button did not become active') + assert.false($input.prop('checked'), 'checkbox did not get checked') }) QUnit.test('should not set active class if inner hidden checkbox is disabled but author forgot to set disabled class on outer button', function (assert) { @@ -337,11 +337,11 @@ $(function () { var $btn = $group.children().eq(0) var $input = $btn.children().eq(0) - assert.ok($btn.is(':not(.active)'), 'button is initially not active') - assert.ok(!$input.prop('checked'), 'checkbox is initially not checked') + assert.true($btn.is(':not(.active)'), 'button is initially not active') + assert.false($input.prop('checked'), 'checkbox is initially not checked') $btn[0].click() // fire a real click on the DOM node itself, not a click() on the jQuery object that just aliases to trigger('click') - assert.ok($btn.is(':not(.active)'), 'button did not become active') - assert.ok(!$input.prop('checked'), 'checkbox did not get checked') + assert.true($btn.is(':not(.active)'), 'button did not become active') + assert.false($input.prop('checked'), 'checkbox did not get checked') }) QUnit.test('should correctly set checked state on input and active class on label when using structure', function (assert) { @@ -356,11 +356,11 @@ $(function () { var $label = $group.children().eq(0) var $input = $label.children().eq(0) - assert.ok($label.is(':not(.active)'), 'label is initially not active') - assert.ok(!$input.prop('checked'), 'checkbox is initially not checked') + assert.true($label.is(':not(.active)'), 'label is initially not active') + assert.false($input.prop('checked'), 'checkbox is initially not checked') $label[0].click() // fire a real click on the DOM node itself, not a click() on the jQuery object that just aliases to trigger('click') - assert.ok($label.is('.active'), 'label is active after click') - assert.ok($input.prop('checked'), 'checkbox is checked after click') + assert.true($label.is('.active'), 'label is active after click') + assert.true($input.prop('checked'), 'checkbox is checked after click') }) QUnit.test('should correctly set checked state on input and active class on the faked button when using
structure', function (assert) { @@ -375,11 +375,11 @@ $(function () { var $btn = $group.children().eq(0) var $input = $btn.children().eq(0) - assert.ok($btn.is(':not(.active)'), '
is initially not active') - assert.ok(!$input.prop('checked'), 'checkbox is initially not checked') + assert.true($btn.is(':not(.active)'), '
is initially not active') + assert.false($input.prop('checked'), 'checkbox is initially not checked') $btn[0].click() // fire a real click on the DOM node itself, not a click() on the jQuery object that just aliases to trigger('click') - assert.ok($btn.is('.active'), '
is active after click') - assert.ok($input.prop('checked'), 'checkbox is checked after click') + assert.true($btn.is('.active'), '
is active after click') + assert.true($input.prop('checked'), 'checkbox is checked after click') }) QUnit.test('should correctly set checked state on input and active class on the label when using button toggle', function (assert) { @@ -394,13 +394,13 @@ $(function () { var $btn = $group.children().eq(0) var $input = $btn.children().eq(0) - assert.ok($btn.is(':not(.active)'), '