Also implement style checks in 'to only have attributes'

Author: Munter

lib/index.js

@@ -380,6 +380,12 @@ module.exports = {
           } else {
             cmpStyles = cmp.style;
           }
+
+          if (this.flags.exhaustively) {
+            comparator.style = expect.it('to exhaustively satisfy', cmpStyles);
+          } else {
+            comparator.style = expect.it('to satisfy', cmpStyles);
+          }
         }
 
         if (this.flags.exhaustively) {
@@ -407,10 +413,6 @@ module.exports = {
             comparator['class'] = expect.it.apply(null, ['to contain'].concat(cmpClasses));
           }
 
-          if (cmp.style) {
-            comparator.style = expect.it('to satisfy', cmpStyles);
-          }
-
           return expect(attrs, 'to satisfy', comparator);
         }
       } else {

test/unexpected-dom.js

@@ -308,30 +308,127 @@ describe('unexpected-dom', function () {
       });
 
       describe('style attribute', function () {
-        it('should do string comparisons', function () {
-          this.body.innerHTML = '<i style="color: red; background: blue"></i>';
+        describe('lax comparison', function () {
+          it('should do string comparisons', function () {
+            this.body.innerHTML = '<i style="color: red; background: blue"></i>';
 
-          expect(this.body.firstChild, 'to have attributes', {
-            style: 'color: red; background: blue'
+            expect(this.body.firstChild, 'to have attributes', {
+              style: 'color: red; background: blue'
+            });
           });
-        });
 
-        it('should do string comparisons in any order', function () {
-          this.body.innerHTML = '<i style="color: red; background: blue"></i>';
+          it('should do string comparisons in any order', function () {
+            this.body.innerHTML = '<i style="color: red; background: blue"></i>';
 
-          expect(this.body.firstChild, 'to have attributes', {
-            style: 'background: blue; color: red'
+            expect(this.body.firstChild, 'to have attributes', {
+              style: 'background: blue; color: red'
+            });
+          });
+
+          it('should do string comparisons on partial values', function () {
+            this.body.innerHTML = '<i style="color: red; background: blue"></i>';
+
+            expect(this.body.firstChild, 'to have attributes', {
+              style: 'background: blue'
+            });
+          });
+
+          it('should fail when styles are missing', function () {
+            this.body.innerHTML = '<i style="color: red"></i>';
+            var node = this.body.firstChild;
+
+            expect(function () {
+              expect(node, 'to have attributes', {
+                style: 'background: blue'
+              });
+            }, 'to throw', /to have attributes \{ style: 'background: blue' \}/);
+          });
+
+          it('should do object comparisons', function () {
+            this.body.innerHTML = '<i style="color: red; background: blue"></i>';
+
+            expect(this.body.firstChild, 'to have attributes', {
+              style: {
+                color: 'red',
+                background: 'blue'
+              }
+            });
+          });
+
+          it('should do partial object comparisons', function () {
+            this.body.innerHTML = '<i style="color: red; background: blue"></i>';
+
+            expect(this.body.firstChild, 'to have attributes', {
+              style: {
+                background: 'blue'
+              }
+            });
+          });
+
+          it('should fail on missing partial object comparisons', function () {
+            this.body.innerHTML = '<i style="color: red"></i>';
+            var node = this.body.firstChild;
+
+            expect(function () {
+              expect(node, 'to have attributes', {
+                style: {
+                  background: 'blue'
+                }
+              });
+            }, 'to throw', /to have attributes \{ style: \{ background: 'blue' \} \}/);
           });
         });
 
-        it('should do object comparisons', function () {
-          this.body.innerHTML = '<i style="color: red; background: blue"></i>';
+        describe('strict comparison', function () {
+          it('should do string comparisons', function () {
+            this.body.innerHTML = '<i style="color: red; background: blue"></i>';
 
-          expect(this.body.firstChild, 'to have attributes', {
-            style: {
-              color: 'red',
-              background: 'blue'
-            }
+            expect(this.body.firstChild, 'to only have attributes', {
+              style: 'color: red; background: blue'
+            });
+          });
+
+          it('should do string comparisons in any order', function () {
+            this.body.innerHTML = '<i style="color: red; background: blue"></i>';
+
+            expect(this.body.firstChild, 'to only have attributes', {
+              style: 'background: blue; color: red'
+            });
+          });
+
+          it('should fail when styles are missing', function () {
+            this.body.innerHTML = '<i style="color: red; background: blue"></i>';
+            var node = this.body.firstChild;
+
+            expect(function () {
+              expect(node, 'to only have attributes', {
+                style: 'background: blue'
+              });
+            }, 'to throw', /to only have attributes \{ style: 'background: blue' \}/);
+          });
+
+          it('should do object comparisons', function () {
+            this.body.innerHTML = '<i style="color: red; background: blue"></i>';
+
+            expect(this.body.firstChild, 'to only have attributes', {
+              style: {
+                color: 'red',
+                background: 'blue'
+              }
+            });
+          });
+
+          it('should fail on missing partial object comparisons', function () {
+            this.body.innerHTML = '<i style="color: red; background: blue"></i>';
+            var node = this.body.firstChild;
+
+            expect(function () {
+              expect(node, 'to only have attributes', {
+                style: {
+                  background: 'blue'
+                }
+              });
+            }, 'to throw', /to only have attributes \{ style: \{ background: 'blue' \} \}/);
           });
         });
       });