test: add more framework tests

src/picker/components/Picker/framework.js

@@ -187,6 +187,7 @@ function parse (tokens) {
     let attributeValuePre
     let attributeValuePost
     if (withinAttribute) {
+      // I never use single-quotes for attribute values in HTML, so just support double-quotes or no-quotes
       const match = /(\S+)="?([^"=]*)$/.exec(token)
       attributeName = match[1]
       attributeValuePre = match[2]

test/spec/picker/framework.test.js

@@ -95,4 +95,33 @@ describe('framework', () => {
     render()
     expect(node.outerHTML).toBe('<div>1baz2quux3</div>')
   })
+
+  test('attributes', () => {
+    const state = {}
+
+    const { html } = createFramework(state)
+
+    const expectRender = (render, expected1, expected2) => {
+      state.name = 'foo'
+      expect(render().outerHTML).toBe(expected1)
+
+      state.name = 'bar'
+      expect(render().outerHTML).toBe(expected2)
+    }
+
+    expectRender(() => html`<div class="${state.name}"></div>`, '<div class="foo"></div>', '<div class="bar"></div>')
+    expectRender(() => html`<div class=${state.name}></div>`, '<div class="foo"></div>', '<div class="bar"></div>')
+
+    // pre
+    expectRender(() => html`<div class="a${state.name}"></div>`, '<div class="afoo"></div>', '<div class="abar"></div>')
+    expectRender(() => html`<div class=a${state.name}></div>`, '<div class="afoo"></div>', '<div class="abar"></div>')
+
+    // post
+    expectRender(() => html`<div class="${state.name}z"></div>`, '<div class="fooz"></div>', '<div class="barz"></div>')
+    expectRender(() => html`<div class=${state.name}z></div>`, '<div class="fooz"></div>', '<div class="barz"></div>')
+
+    // pre+post
+    expectRender(() => html`<div class="a${state.name}z"></div>`, '<div class="afooz"></div>', '<div class="abarz"></div>')
+    expectRender(() => html`<div class=a${state.name}z></div>`, '<div class="afooz"></div>', '<div class="abarz"></div>')
+  })
 })