From 80fc273e7d336b47b8be524772accb99e76391f4 Mon Sep 17 00:00:00 2001 From: Satu Date: Fri, 19 Jun 2020 12:12:40 +0300 Subject: [PATCH 1/4] feat(overlapping): add overlapping assertion feat #8 --- cypress/fixtures/test-app/overlap.html | 126 +++++++++++++++++++++++++ cypress/integration/overlap.spec.js | 37 ++++++++ src/assertions/index.js | 2 + src/assertions/overlap.js | 30 ++++++ 4 files changed, 195 insertions(+) create mode 100644 cypress/fixtures/test-app/overlap.html create mode 100644 cypress/integration/overlap.spec.js create mode 100644 src/assertions/overlap.js diff --git a/cypress/fixtures/test-app/overlap.html b/cypress/fixtures/test-app/overlap.html new file mode 100644 index 0000000..139e009 --- /dev/null +++ b/cypress/fixtures/test-app/overlap.html @@ -0,0 +1,126 @@ + + + + + + cypress-layout-inspector Test Application + + + + 
no overlap 1 and 2
+
+
no-overlap-1
+
no-overlap-2
+
+ + 
no overlap 3 and 4
+
+
no-overlap-3
+
no-overlap-4
+
+ + 
no overlap 5 and 6
+
+
no-overlap-5
+
no-overlap-6
+
+ + 
overlap-5 overlaps vertically with overlap-6
+
+
overlap-1
+
overlap-2
+
+ + 
overlap-3 overlaps horizontally with overlap-4
+
+
overlap-3
+
overlap-4
+
+ + 
overlap-5 overlaps horizontally and vertically with overlap-6
+
+
overlap-5
+
overlap-6
+
+ + + diff --git a/cypress/integration/overlap.spec.js b/cypress/integration/overlap.spec.js new file mode 100644 index 0000000..1342b4f --- /dev/null +++ b/cypress/integration/overlap.spec.js @@ -0,0 +1,37 @@ +describe('overlap testing commands', () => { + beforeEach(() => { + cy.visit('cypress/fixtures/test-app/overlap.html'); + }); + + it('no-overlap-1 and no-overlap-2 should not be overlapping', () => { + cy.get('.no-overlap-2').should('not.be.overlapping', '.no-overlap-1'); + cy.get('.no-overlap-1').should('not.be.overlapping', '.no-overlap-2'); + }); + + it('no-overlap-3 and no-overlap-4 should not be overlapping', () => { + cy.get('.no-overlap-3').should('not.be.overlapping', '.no-overlap-4'); + cy.get('.no-overlap-4').should('not.be.overlapping', '.no-overlap-3'); + }); + + it('no-overlap-5 and no-overlap-6 should not be overlapping', () => { + cy.get('.no-overlap-5').should('not.be.overlapping', '.no-overlap-6'); + cy.get('.no-overlap-6').should('not.be.overlapping', '.no-overlap-5'); + }); + + it('overlap-1 and overlap-2 should be overlapping', () => { + cy.get('.overlap-1').should('be.overlapping', '.overlap-2'); + cy.get('.overlap-2').should('be.overlapping', '.overlap-1'); + }); + + it('overlap-3 and overlap-4 should be overlapping', () => { + cy.get('.overlap-3').should('be.overlapping', '.overlap-4'); + cy.get('.overlap-4').should('be.overlapping', '.overlap-3'); + }); + + it('overlap-5 and overlap-6 should be overlapping', () => { + cy.get('.overlap-5').should('be.overlapping', '.overlap-6'); + cy.get('.overlap-6').should('be.overlapping', '.overlap-5'); + }); + +}); + diff --git a/src/assertions/index.js b/src/assertions/index.js index a68423f..65ada20 100644 --- a/src/assertions/index.js +++ b/src/assertions/index.js @@ -1,7 +1,9 @@ import alignment from './alignment'; import position from './position'; import style from './style'; +import overlap from './overlap'; chai.use(alignment); chai.use(position); chai.use(style); +chai.use(overlap); diff --git a/src/assertions/overlap.js b/src/assertions/overlap.js new file mode 100644 index 0000000..e356bd8 --- /dev/null +++ b/src/assertions/overlap.js @@ -0,0 +1,30 @@ +import Rect from '../utils/rect'; + +const linesOverlap = (line1, line2) => { + const line2isBefore = line2.end < line1.start; + const line2isAfter = line2.start > line1.end; + return !(line2isBefore || line2isAfter); +}; + +export default _chai => { + function overlapping(element) { + const [rect1, rect2] = [new Rect(this._obj), new Rect(element)]; + + const overlapVertical = linesOverlap( + { start: rect1.top, end: rect1.bottom }, + { start: rect2.top, end: rect2.bottom } + ); + const overlapHorizontal = linesOverlap( + { start: rect1.left, end: rect1.right }, + { start: rect2.left, end: rect2.right } + ); + const condition = overlapVertical && overlapHorizontal; + + return this.assert( + condition, + `expected #{this} to overlap with ${element} `, + `expected #{this} not to overlap with ${element}` + ); + } + _chai.Assertion.addMethod('overlapping', overlapping); +}; From b793980e8fa0b447ac54a526d0717200dcf277a7 Mon Sep 17 00:00:00 2001 From: Satu Date: Fri, 19 Jun 2020 12:16:18 +0300 Subject: [PATCH 2/4] refactor: extract getElement function to reuse later --- cypress/fixtures/test-app/overlap.html | 2 +- src/utils/getElement.js | 21 +++++++++++++++++++++ src/utils/rect.js | 18 ++---------------- 3 files changed, 24 insertions(+), 17 deletions(-) create mode 100644 src/utils/getElement.js diff --git a/cypress/fixtures/test-app/overlap.html b/cypress/fixtures/test-app/overlap.html index 139e009..f2a164b 100644 --- a/cypress/fixtures/test-app/overlap.html +++ b/cypress/fixtures/test-app/overlap.html @@ -104,7 +104,7 @@
no-overlap-6
- 
overlap-5 overlaps vertically with overlap-6
+ 
overlap-1 overlaps vertically with overlap-2
overlap-1
overlap-2
diff --git a/src/utils/getElement.js b/src/utils/getElement.js new file mode 100644 index 0000000..e8d2f07 --- /dev/null +++ b/src/utils/getElement.js @@ -0,0 +1,21 @@ +function getElement(subject) { + let element; + if (subject == null) { + throw new Error( + `Expected to find element: \`${subject}\`, but never found it.` + ); + } + + if (typeof subject === 'string') [element] = Cypress.$(subject); + if (subject.constructor.name === 'jQuery') [element] = subject; + + if (element === undefined) { + throw new Error( + `Expected to find element: \`${subject}\`, but never found it.` + ); + } + + return element; +} + +export default getElement; diff --git a/src/utils/rect.js b/src/utils/rect.js index 0a012e4..1786d3b 100644 --- a/src/utils/rect.js +++ b/src/utils/rect.js @@ -1,23 +1,9 @@ import { getConfiguration } from '../configure'; +import getElement from './getElement'; class Rect { constructor(subject) { - let element; - if (subject == null) { - throw new Error( - `Expected to find element: \`${subject}\`, but never found it.` - ); - } - - if (typeof subject === 'string') [element] = Cypress.$(subject); - if (subject.constructor.name === 'jQuery') [element] = subject; - - if (element === undefined) { - throw new Error( - `Expected to find element: \`${subject}\`, but never found it.` - ); - } - + const element = getElement(subject); const shape = element.getBoundingClientRect(); this.top = shape.top; From 88a0bd23dff4ddc2e71168b42a7f39336ef9e5a2 Mon Sep 17 00:00:00 2001 From: Satu Date: Fri, 19 Jun 2020 12:20:14 +0300 Subject: [PATCH 3/4] feat: add overflowing assertion #8 --- cypress/fixtures/test-app/overflow.html | 71 +++++++++++++++++++++++++ cypress/integration/overflow.spec.js | 24 +++++++++ src/assertions/index.js | 2 + src/assertions/overflow.js | 29 ++++++++++ 4 files changed, 126 insertions(+) create mode 100644 cypress/fixtures/test-app/overflow.html create mode 100644 cypress/integration/overflow.spec.js create mode 100644 src/assertions/overflow.js diff --git a/cypress/fixtures/test-app/overflow.html b/cypress/fixtures/test-app/overflow.html new file mode 100644 index 0000000..56f535f --- /dev/null +++ b/cypress/fixtures/test-app/overflow.html @@ -0,0 +1,71 @@ + + + + + + cypress-layout-inspector Test Application + + + + 
no overflow 1
+
+
+
no-overflow-1-inner
+
+
+ + 
is overflowing vertically
+
+
+
+ overflow-inner-1
+ this content
+ is longer
+ is then outer height
+
+
+
+ + 
is overflowing horizontally
+
+
+
+ this overflow-inner-2 is wider then outer width
+
+
+
+ + + diff --git a/cypress/integration/overflow.spec.js b/cypress/integration/overflow.spec.js new file mode 100644 index 0000000..098160f --- /dev/null +++ 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 index 65ada20..2519404 100644 --- 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 new file mode 100644 index 0000000..38919cb --- /dev/null +++ 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); +}; From 8c0812737baec67b653bb460253b4086becce785 Mon Sep 17 00:00:00 2001 From: Satu Date: Fri, 19 Jun 2020 12:21:27 +0300 Subject: [PATCH 4/4] docs(readme.md): update readme #8 --- README.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/README.md b/README.md index 1ca71c8..72e2c36 100644 --- a/README.md +++ b/README.md @@ -103,6 +103,19 @@ before(() => { | **element** | string | - | - | | **edge** | string | `'left', 'right', 'centered', 'all'` | `'all'` | +#### `overflowing([, direction])` + +| argument | type | options | default | +| ---------------- | ------ | -------------------------------------| ------- | +| **direction** | string | `'vertically', 'horizontally', 'any'`| `'any'` | + + +#### `overlapping(element)` + +| argument | type | options | default | +| ----------- | ------ | ------------------------------------ | ------- | +| **element** | string | - | - | + ### Dimensions The following width and height assertions are chain-able and can be used with the .gt, .within and .lt methods