feat: add overflowing assertion

#8
msmps · Jun 19, 2020 · 88a0bd2 · 88a0bd2
1 parent b793980
commit 88a0bd2
Show file tree

Hide file tree

Showing 4 changed files with 126 additions and 0 deletions.
diff --git a/cypress/fixtures/test-app/overflow.html b/cypress/fixtures/test-app/overflow.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>cypress-layout-inspector Test Application</title>
+        <style>
+            *,
+            *::before,
+            *::after {
+                box-sizing: border-box;
+            }
+
+            .container {
+                position: relative;
+                height: 80px;
+            }
+            .container .outer {
+                color: red;
+                border: 1px solid red;
+            }
+            .container .inner {
+                color: blue;
+                border: 1px solid blue;
+            }
+            .block {
+                padding: 5px;
+            }
+            .outer {
+                height: 50px;
+            }
+            .overflow-2.outer {
+                width: 200px;
+            }
+            .overflow-2 .inner {
+               width: 210px;
+            }
+
+        </style>
+    </head>
+    <body>
+        <pre>no overflow 1</pre>
+        <div class="container">
+            <div class="no-overflow-1 outer">
+                <div class="block no-overflow inner">no-overflow-1-inner</div>
+            </div>
+        </div>
+
+        <pre>is overflowing vertically</pre>
+        <div class="container">
+            <div class="overflow-1 outer">
+                <div class="inner">
+                    overflow-inner-1 <br/>
+                    this content <br/>
+                    is longer <br/>   
+                    is then outer height<br/>                 
+                </div>
+            </div>
+        </div>
+
+        <pre>is overflowing horizontally</pre>
+        <div class="container">
+            <div class="overflow-2 outer">
+                <div class="inner">
+                    this overflow-inner-2 is wider then outer width <br/>                           
+                </div>
+            </div>
+        </div>
+
+    </body>
+</html>
diff --git a/cypress/integration/overflow.spec.js b/cypress/integration/overflow.spec.js
@@ -0,0 +1,24 @@
+describe('overflow testing commands', () => {
+
+    beforeEach(() => {
+        cy.visit('cypress/fixtures/test-app/overflow.html');
+    });
+
+    it('no-overflow-1 should not be overflowing', () => {
+        cy.get('.no-overflow-1.outer').should('not.be.overflowing');
+    });
+
+    it('overflow-1 should be overflowing vertically', () => {
+        cy.get('.overflow-1.outer').should('be.overflowing');
+        cy.get('.overflow-1.outer').should('not.be.overflowing', 'horizontally');
+        cy.get('.overflow-1.outer').should('be.overflowing', 'vertically');
+    });
+
+    it('overflow-2 should be overflowing horizontally', () => {
+        cy.get('.overflow-2.outer').should('be.overflowing');
+        cy.get('.overflow-2.outer').should('be.overflowing', 'horizontally');
+        cy.get('.overflow-2.outer').should('not.be.overflowing', 'vertically');
+    });
+
+});
+
diff --git a/src/assertions/index.js b/src/assertions/index.js
@@ -2,8 +2,10 @@ import alignment from './alignment';
 import position from './position';
 import style from './style';
 import overlap from './overlap';
+import overflow from './overflow';
 
 chai.use(alignment);
 chai.use(position);
 chai.use(style);
 chai.use(overlap);
+chai.use(overflow);
diff --git a/src/assertions/overflow.js b/src/assertions/overflow.js
@@ -0,0 +1,29 @@
+import getElement from '../utils/getElement';
+
+export default _chai => {
+    function overflowing(direction = 'any') {
+        const el = getElement(this._obj);
+        const overflowVertical = el.scrollHeight > el.clientHeight;
+        const overflowHorizontal = el.scrollWidth > el.clientWidth;
+
+        let condition;
+
+        switch (direction) {
+            case 'horizontally':
+                condition = overflowHorizontal;
+                break;
+            case 'vertically':
+                condition = overflowVertical;
+                break;
+            default:
+                condition = overflowVertical || overflowHorizontal;
+        }
+
+        return this.assert(
+            condition,
+            `expected #{this} to overflow ${direction}`,
+            `expected #{this} not to overflow ${direction}`
+        );
+    }
+    _chai.Assertion.addMethod('overflowing', overflowing);
+};