add tests for setAttributes function

example/index.ts

@@ -5,4 +5,11 @@ const debug = Debug()
 const el = document.getElementById('example')
 const str = attributesToString(Array.from(el!.attributes))
 
+// @ts-expect-error dev
+window.el = el
+
 debug('attributes as string', `'${str}'`)
+
+// @ts-expect-error dev
+window.test = function () {
+}

src/index.ts

@@ -33,5 +33,17 @@ export function objectToString (obj:Record<string, string|true>):string {
 
 export default {
     attributesToString,
-    attributesAsObject
+    attributesAsObject,
+    setAttributes
+}
+
+export function setAttributes (el:HTMLElement, attrs:Record<string, string|boolean>) {
+    for (const key in attrs) {
+        const val = attrs[key]
+        if (val === false) {
+            el.removeAttribute(key)
+        } else {
+            el.setAttribute(key, (val === true ? '' : val))
+        }
+    }
 }

test/index.ts

@@ -2,20 +2,21 @@ import { test } from '@bicycle-codes/tapzero'
 import {
     attributesToString,
     attributesAsObject,
-    objectToString
+    objectToString,
+    setAttributes
 } from '../src/index.js'
 
 test('attributesToString', t => {
-    const el = document.querySelector('input')
+    const el = document.querySelector('input')!
     const str = attributesToString(Array.from(el!.attributes))
     t.equal(str, 'type="text" required name="fooo" foo="bar"',
         'should return a string in the right format')
 })
 
 let obj
 test('attributesAsObject', t => {
-    const el = document.querySelector('input')
-    const attrs = Array.from(el!.attributes)
+    const el = document.querySelector('input')!
+    const attrs = Array.from(el.attributes)
     obj = attributesAsObject(attrs)
     console.log('object...', JSON.stringify(obj, null, 2))
     t.equal(obj.required, true, 'boolean attributes are set to `true`')
@@ -29,3 +30,34 @@ test('object to string', t => {
     t.equal(str, 'type="text" required name="fooo" foo="bar"',
         'should serialize the attribute object')
 })
+
+test('setAttributes', t => {
+    document.body.innerHTML += `
+        <input id="test" class="test" name="example">
+        </input>
+    `
+
+    const input = document.getElementById('test') as HTMLDivElement
+    t.equal(input.getAttribute('name'), 'example')
+    setAttributes(input, {
+        required: true,
+        name: 'fooo',
+        class: 'testing'
+    })
+
+    console.log('input.attributes',
+        attributesToString(Array.from(input.attributes))
+    )
+
+    t.equal(
+        attributesToString(Array.from(input.attributes)),
+        'id="test" class="testing" name="fooo" required',
+        'should create the expected attributes'
+    )
+
+    setAttributes(input, { required: false })
+    t.equal(input.getAttribute('required'), null,
+        'should remove an attribute')
+    t.equal(input.getAttribute('name'), 'fooo',
+        'should not change other attributes')
+})