Issue #581 - coerce attribute names to lower case in HTML mode

src/__fixtures__/fixtures.ts

@@ -13,6 +13,14 @@ export const vegetables = [
   '</ul>',
 ].join('');
 
+export const meats = [
+  '<ul id="meats">',
+  '<li class="beef" COOKED="mediumrare">Beef</li>',
+  '<li class="chicken">Chicken</li>',
+  '<li class="pork">Pork</li>',
+  '</ul>',
+].join('');
+
 export const divcontainers = [
   '<div class="container">',
   '<div class="inner">First</div>',

src/api/attributes.spec.ts

@@ -8,6 +8,7 @@ import {
   chocolates,
   inputs,
   mixedText,
+  meats,
 } from '../__fixtures__/fixtures.js';
 
 function withClass(attr: string) {
@@ -42,6 +43,34 @@ describe('$(...)', () => {
       expect(attr).toBe('autofocus');
     });
 
+    it('(valid key) should get uppercase attr with lowercase name in HTML mode', () => {
+      const $casetest = load(meats);
+      const $meats = $casetest('.beef');
+      expect($meats.attr('COOKED')).toBe('mediumrare');
+      expect($meats.attr('cooked')).toBe('mediumrare');
+    });
+
+    it('(valid key) should get lowercase attr with uppercase name in HTML mode', () => {
+      const $casetest = load(meats);
+      const $meats = $casetest('.beef');
+      expect($meats.attr('CLASS')).toBe('beef');
+      expect($meats.attr('class')).toBe('beef');
+    });
+
+    it('(valid key) should get uppercase attr with uppercase name only in XML mode', () => {
+      const $casetest = load(meats, { xml: true });
+      const $meats = $casetest('[class="beef"]');
+      expect($meats.attr('COOKED')).toBe('mediumrare');
+      expect($meats.attr('cooked')).toBeUndefined();
+    });
+
+    it('(valid key) should get lowercase attr with lowercase name only in XML mode', () => {
+      const $casetest = load(meats, { xml: true });
+      const $meats = $casetest('[class="beef"]');
+      expect($meats.attr('CLASS')).toBeUndefined();
+      expect($meats.attr('class')).toBe('beef');
+    });
+
     it('(key, value) : should set one attr', () => {
       const $pear = $('.pear').attr('id', 'pear');
       expect($('#pear')).toHaveLength(1);
@@ -65,6 +94,20 @@ describe('$(...)', () => {
       expect($src[0]).toBeUndefined();
     });
 
+    it('(key, value) should save uppercase attr name as lowercase in HTML mode', () => {
+      const $casetest = load(meats);
+      const $meats = $casetest('.beef').attr('USDA', 'choice');
+      expect($meats.attr('USDA')).toBe('choice');
+      expect($meats.attr('usda')).toBe('choice');
+    });
+
+    it('(key, value) should save uppercase attr name as uppercase in XML mode', () => {
+      const $casetest = load(meats, { xml: true });
+      const $meats = $casetest('[class="beef"]').attr('USDA', 'choice');
+      expect($meats.attr('USDA')).toBe('choice');
+      expect($meats.attr('usda')).toBeUndefined();
+    });
+
     it('(map) : object map should set multiple attributes', () => {
       $('.apple').attr({
         id: 'apple',
@@ -168,19 +211,24 @@ describe('$(...)', () => {
     });
 
     it('(chaining) setting value and calling attr returns result', () => {
+      const pearAttr = $('.pear').attr('fizz', 'buzz').attr('fizz');
+      expect(pearAttr).toBe('buzz');
+    });
+
+    it('(chaining) overwriting value and calling attr returns result', () => {
       const pearAttr = $('.pear').attr('foo', 'bar').attr('foo');
       expect(pearAttr).toBe('bar');
     });
 
     it('(chaining) setting attr to null returns a $', () => {
-      const $pear = $('.pear').attr('foo', null);
+      const $pear = $('.pear').attr('bar', null);
       expect($pear).toBeInstanceOf($);
     });
 
     it('(chaining) setting attr to undefined returns a $', () => {
-      const $pear = $('.pear').attr('foo', undefined);
+      const $pear = $('.pear').attr('bar', undefined);
       expect($('.pear')).toHaveLength(1);
-      expect($('.pear').attr('foo')).toBeUndefined();
+      expect($('.pear').attr('bar')).toBeUndefined();
       expect($pear).toBeInstanceOf($);
     });
 

src/api/attributes.ts

@@ -56,21 +56,26 @@ function getAttr(
     return elem.attribs;
   }
 
-  if (hasOwn.call(elem.attribs, name)) {
+  // Coerce attribute names to lowercase to match load() and setAttr() behavior (HTML only)
+  const nameToUse = xmlMode ? name : name.toLowerCase();
+
+  if (hasOwn.call(elem.attribs, nameToUse)) {
     // Get the (decoded) attribute
-    return !xmlMode && rboolean.test(name) ? name : elem.attribs[name];
+    return !xmlMode && rboolean.test(nameToUse)
+      ? nameToUse
+      : elem.attribs[nameToUse];
   }
 
   // Mimic the DOM and return text content as value for `option's`
-  if (elem.name === 'option' && name === 'value') {
+  if (elem.name === 'option' && nameToUse === 'value') {
     return text(elem.children);
   }
 
   // Mimic DOM with default value for radios/checkboxes
   if (
     elem.name === 'input' &&
     (elem.attribs['type'] === 'radio' || elem.attribs['type'] === 'checkbox') &&
-    name === 'value'
+    nameToUse === 'value'
   ) {
     return 'on';
   }
@@ -86,12 +91,21 @@ function getAttr(
  * @param el - The element to set the attribute on.
  * @param name - The attribute's name.
  * @param value - The attribute's value.
+ * @param xmlMode - True if running in XML mode.
  */
-function setAttr(el: Element, name: string, value: string | null) {
+function setAttr(
+  el: Element,
+  name: string,
+  value: string | null,
+  xmlMode?: boolean
+) {
+  // Coerce attr names to lowercase to match load() behavior (HTML only)
+  const nameToUse = xmlMode ? name : name.toLowerCase();
+
   if (value === null) {
-    removeAttribute(el, name);
+    removeAttribute(el, nameToUse);
   } else {
-    el.attribs[name] = `${value}`;
+    el.attribs[nameToUse] = `${value}`;
   }
 }
 
@@ -197,7 +211,14 @@ export function attr<T extends AnyNode>(
         }
       }
       return domEach(this, (el, i) => {
-        if (isTag(el)) setAttr(el, name, value.call(el, i, el.attribs[name]));
+        if (isTag(el)) {
+          setAttr(
+            el,
+            name,
+            value.call(el, i, el.attribs[name]),
+            this.options.xmlMode
+          );
+        }
       });
     }
     return domEach(this, (el) => {
@@ -206,10 +227,10 @@ export function attr<T extends AnyNode>(
       if (typeof name === 'object') {
         for (const objName of Object.keys(name)) {
           const objValue = name[objName];
-          setAttr(el, objName, objValue);
+          setAttr(el, objName, objValue, this.options.xmlMode);
         }
       } else {
-        setAttr(el, name as string, value as string);
+        setAttr(el, name as string, value as string, this.options.xmlMode);
       }
     });
   }