Core: renderer_base hasClass method needs rework(fixes 1330) (DevExpress#30473)

Author: dmalykh-devexpress

packages/devextreme/js/__internal/core/m_renderer_base.ts

@@ -1,7 +1,3 @@
-/* eslint-disable guard-for-in */
-/* eslint-disable no-restricted-syntax */
-/* eslint-disable prefer-arrow-callback */
-/* eslint-disable object-shorthand */
 import domAdapter from '@js/core/dom_adapter';
 import { cleanDataRecursive, data as elementData, removeData } from '@js/core/element_data';
 import { isTablePart, parseHTML } from '@js/core/utils/html_parser';
@@ -146,18 +142,17 @@ initRender.prototype.removeClass = function (className) {
   return this.toggleClass(className, false);
 };
 
-initRender.prototype.hasClass = function (className) {
-  if (!this[0] || this[0].className === undefined) return false;
-
+initRender.prototype.hasClass = function (className: string) {
   const classNames = className.split(' ');
-  for (let i = 0; i < classNames.length; i++) {
-    if (this[0].classList) {
-      if (this[0].classList.contains(classNames[i])) return true;
-    } else { // IE9
-      const className = isString(this[0].className) ? this[0].className : domAdapter.getAttribute(this[0], 'class');
-      if ((className || '').split(' ').indexOf(classNames[i]) >= 0) return true;
+
+  for (let i = 0; i < this.length; i++) {
+    if (!this[i] || !this[i].className) continue;
+
+    for (let j = 0; j < classNames.length; j++) {
+      if (this[i].classList.contains(classNames[j])) return true;
     }
   }
+
   return false;
 };
 

packages/devextreme/testing/tests/DevExpress.core/renderer.tests.js

@@ -202,6 +202,58 @@ QUnit.test('class should be removed from SVG', function(assert) {
     assert.notOk(element.hasClass('someClass'));
 });
 
+QUnit.module('hasClass method');
+
+QUnit.test('should return true if element has class', function(assert) {
+    const element = renderer('<div>');
+    element.addClass('someClass');
+
+    assert.ok(element.hasClass('someClass'));
+});
+
+QUnit.test('should return false if element has not class', function(assert) {
+    const element = renderer('<div>');
+
+    assert.notOk(element.hasClass('someClass'));
+});
+
+QUnit.test('should return true if element has multiple classes', function(assert) {
+    const element = renderer('<div>');
+    element.addClass('someClass someClass2');
+
+    assert.ok(element.hasClass('someClass'));
+    assert.ok(element.hasClass('someClass2'));
+    assert.notOk(element.hasClass('someClass3'));
+});
+
+QUnit.test('should return true if one of element has class', function(assert) {
+    const fixture = document.getElementById('qunit-fixture');
+
+    const $wrapper = renderer('<div>').html('<div class="one two">1</div><div class="two three">2</div>');
+
+    const $allInnerElements = $wrapper.find('div');
+
+    fixture.appendChild($allInnerElements.get(0));
+
+    assert.ok($allInnerElements.hasClass('one'));
+    assert.ok($allInnerElements.hasClass('two'));
+    assert.ok($allInnerElements.hasClass('three'));
+    assert.notOk($allInnerElements.hasClass('five'));
+});
+
+QUnit.test('should return false if elements collection is empty', function(assert) {
+
+    const $wrapper = renderer('<div>').html('<div class="one two">1</div><div class="two three">2</div>');
+
+    const $allInnerElements = $wrapper.find('h1');
+
+    assert.notOk($allInnerElements.hasClass('one'));
+    assert.notOk($allInnerElements.hasClass('two'));
+    assert.notOk($allInnerElements.hasClass('three'));
+    assert.notOk($allInnerElements.hasClass('five'));
+});
+
+
 QUnit.module('width and height methods');
 
 QUnit.test('width and height should take into consideration borders and paddings if box-sizing is border-box', function(assert) {