From a24f5b25f2bfcafe1377f6e340f554c4270e24c0 Mon Sep 17 00:00:00 2001
From: Vince Speelman <vince@ted.com>
Date: Thu, 20 Apr 2017 13:42:14 -0400
Subject: [PATCH 1/3] test for changing attributes based on queries

---
 modules/__tests__/Media-test.js | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/modules/__tests__/Media-test.js b/modules/__tests__/Media-test.js
index e1ab3ef..24fdf57 100644
--- a/modules/__tests__/Media-test.js
+++ b/modules/__tests__/Media-test.js
@@ -102,21 +102,23 @@ describe('A <Media>', () => {
         const element = (
           <Media queries={queries}>
             {({ sm, md }) => (
-              <div>
-                {md && 'goodbye'}
-                {sm && 'hello'}
-              </div>
+              <div
+                className={[
+                  (md ? 'goodbye' : ''),
+                  (sm ? 'hello' : ''),
+                ].join(' ')}
+              />
             )}
           </Media>
         )
 
         render(element, node, () => {
-          expect(node.firstChild.innerHTML).toMatch(/hello/)
+          expect(Array.from(node.firstChild.classList)).toInclude('hello')
+          expect(Array.from(node.firstChild.classList)).toExclude('goodbye')
         })
       })
     })
 
-
   })
 
   describe('with a query that does not match', () => {

From ad4dd9c8107cb8705473f79d2e99fc7efec6898b Mon Sep 17 00:00:00 2001
From: Vince Speelman <vince@ted.com>
Date: Thu, 20 Apr 2017 13:45:26 -0400
Subject: [PATCH 2/3] update readme to show use of queries within `attributes`

---
 README.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index d78f421..6bc6379 100644
--- a/README.md
+++ b/README.md
@@ -78,14 +78,14 @@ class App extends React.Component {
           }}
         >
           {({ small, medium }) => (
-            <div>
-              <p>This always shows.</p>
-              small && (
-                <p>The document is at least 300px wide.</p>
-              )
-              medium && (
-                <p>The document is at least 600px wide.</p>
-              )
+            <div
+              className={[
+                (small ? 'hello' : ''),
+                (medium ? 'goodbye' : ''),
+              ].join(' ')}
+            >
+              At 300px wide, I have a `className` of `hello`. At 600px wide,
+              I have a `className` of `hello goodbye`.
             </div>
           )}
         </Media>

From 900938069c1b27f13ff5b36e987e7aa1d0d32be5 Mon Sep 17 00:00:00 2001
From: Vince Speelman <vince@ted.com>
Date: Thu, 20 Apr 2017 13:59:17 -0400
Subject: [PATCH 3/3] use classList getters

---
 modules/__tests__/Media-test.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/modules/__tests__/Media-test.js b/modules/__tests__/Media-test.js
index 24fdf57..ecf3dff 100644
--- a/modules/__tests__/Media-test.js
+++ b/modules/__tests__/Media-test.js
@@ -113,8 +113,8 @@ describe('A <Media>', () => {
         )
 
         render(element, node, () => {
-          expect(Array.from(node.firstChild.classList)).toInclude('hello')
-          expect(Array.from(node.firstChild.classList)).toExclude('goodbye')
+          expect(node.firstChild.classList.contains('hello')).toBe(true)
+          expect(node.firstChild.classList.contains('goodbye')).toBe(false)
         })
       })
     })