update types + tests

fix ts lint

cli/types/index.d.ts

@@ -122,13 +122,9 @@ declare namespace Cypress {
     clear: (keys?: string[]) => void
   }
 
-  interface ViewportPosition {
-    top: number
-    left: number
+  interface ViewportPosition extends WindowPosition {
     right: number
     bottom: number
-    topCenter: number
-    leftCenter: number
   }
 
   interface WindowPosition {
@@ -143,15 +139,17 @@ declare namespace Cypress {
     scrollLeft: number
     width: number
     height: number
-    fromViewport: ViewportPosition
-    fromWindow: WindowPosition
+    fromElViewport: ViewportPosition
+    fromElWindow: WindowPosition
+    fromAutWindow: WindowPosition
   }
 
   interface ElementCoordinates {
     width: number
     height: number
-    fromViewport: ViewportPosition
-    fromWindow: WindowPosition
+    fromElViewport: ViewportPosition & { x: number, y: number }
+    fromElWindow: WindowPosition & { x: number, y: number }
+    fromAutWindow: WindowPosition & { x: number, y: number }
   }
 
   /**
@@ -433,7 +431,7 @@ declare namespace Cypress {
       /**
        * Returns a boolean indicating whether an element is scrollable.
        */
-      isScrollable(element: JQuery | HTMLElement): boolean
+      isScrollable(element: Window | JQuery | HTMLElement): boolean
       /**
        * Returns a boolean indicating whether an element currently has focus.
        */
@@ -445,7 +443,7 @@ declare namespace Cypress {
       /**
        * Returns a boolean indicating whether an element is attached to the DOM.
        */
-      isAttached(element: JQuery | HTMLElement): boolean
+      isAttached(element: JQuery | HTMLElement | Window | Document): boolean
       isSelector(element: JQuery | HTMLElement, selector: JQuery.Selector): boolean
       /**
        * Returns a boolean indicating whether an element is a descendent of another element.
@@ -467,6 +465,7 @@ declare namespace Cypress {
        * Returns a boolean indicating whether an object is a jQuery object.
        */
       isJquery(obj: any): boolean
+      isInputType(element: JQuery | HTMLElement, type: string | string[]): boolean
       stringify(element: JQuery | HTMLElement, form: string): string
       getElements(element: JQuery): JQuery | HTMLElement[]
       getContainsSelector(text: string, filter?: string): JQuery.Selector

packages/driver/test/cypress/integration/dom/coordinates_spec.ts

@@ -1,6 +1,13 @@
-const $ = Cypress.$.bind(Cypress)
+declare namespace Cypress {
+  interface cy {
+    state(key: 'document'): Document
+  }
+}
 
 describe('src/dom/coordinates', () => {
+  const $ = Cypress.$.bind(Cypress)
+  let doc: Document
+
   before(() => {
     return cy
     .visit('/fixtures/generic.html')
@@ -10,9 +17,9 @@ describe('src/dom/coordinates', () => {
   })
 
   beforeEach(function () {
-    this.doc = cy.state('document')
+    doc = cy.state('document')
 
-    $(this.doc.body).empty().html(this.body)
+    $(doc.body).empty().html(this.body)
 
     this.$button = $('<button style=\'position: absolute; top: 25px; left: 50px; width: 100px; line-height: 50px; padding: 10px; margin: 10px; border: 10px solid black\'>foo</button>')
     .appendTo(cy.$$('body'))
@@ -24,8 +31,8 @@ describe('src/dom/coordinates', () => {
     it('returns the leftCenter and topCenter normalized', function () {
       const win = Cypress.dom.getWindowByElement(this.$button.get(0))
 
-      const scrollY = Object.getOwnPropertyDescriptor(win, 'scrollY')
-      const scrollX = Object.getOwnPropertyDescriptor(win, 'scrollX')
+      const scrollY = Object.getOwnPropertyDescriptor(win, 'scrollY')!
+      const scrollX = Object.getOwnPropertyDescriptor(win, 'scrollX')!
 
       Object.defineProperty(win, 'scrollY', {
         value: 10,
@@ -63,17 +70,17 @@ describe('src/dom/coordinates', () => {
 
   context('.getElementAtPointFromViewport', () => {
     it('returns same element based on x/y coords', function () {
-      expect(Cypress.dom.getElementAtPointFromViewport(this.doc, 100, 60)).to.eq(this.$button.get(0))
+      expect(Cypress.dom.getElementAtPointFromViewport(doc, 100, 60)).to.eq(this.$button.get(0))
     })
 
     it('does not return if element is hidden', function () {
       this.$button.hide()
 
-      expect(Cypress.dom.getElementAtPointFromViewport(this.doc, 100, 60)).not.to.eq(this.$button.get(0))
+      expect(Cypress.dom.getElementAtPointFromViewport(doc, 100, 60)).not.to.eq(this.$button.get(0))
     })
 
     it('returns null if no element was found', function () {
-      expect(Cypress.dom.getElementAtPointFromViewport(this.doc, 1e9, 1e9)).to.be.null
+      expect(Cypress.dom.getElementAtPointFromViewport(doc, 1e9, 1e9)).to.be.null
     })
   })
 

packages/driver/test/cypress/integration/dom/elements_spec.ts

@@ -1,13 +1,19 @@
-const $ = Cypress.$.bind(Cypress)
+declare namespace Cypress {
+  interface cy {
+    state(key: 'window'): Window
+  }
+}
 
 describe('src/dom/elements', () => {
+  const $ = Cypress.$.bind(Cypress)
+
   context('.isAttached', () => {
     beforeEach(() => {
       cy.visit('/fixtures/iframe-outer.html')
     })
 
     it('no elements', () => {
-      const $el = $(null)
+      const $el = $(null!)
 
       expect(Cypress.dom.isAttached($el)).to.be.false
     })
@@ -68,9 +74,9 @@ describe('src/dom/elements', () => {
 
     it('element in iframe', (done) => {
       cy.get('iframe').then(($iframe) => {
-        const $doc = $iframe.contents()
+        const $doc = $iframe.contents() as JQuery<Document>
 
-        const $btn = $doc.find('button')
+        const $btn = $doc.find('button') as unknown as JQuery<HTMLButtonElement>
 
         expect($btn.length).to.eq(1)
 
@@ -84,7 +90,7 @@ describe('src/dom/elements', () => {
           done()
         })
 
-        const win = $doc.get(0).defaultView
+        const win = $doc.get(0).defaultView!
 
         win.location.reload()
       })
@@ -93,7 +99,7 @@ describe('src/dom/elements', () => {
 
   context('.isDetached', () => {
     it('opposite of attached', () => {
-      const $el = $(null)
+      const $el = $(null!)
 
       expect(Cypress.dom.isDetached($el)).to.be.true
     })

packages/driver/test/cypress/integration/dom/jquery_spec.ts

@@ -1,4 +1,6 @@
-const { $ } = Cypress
+declare interface Window {
+  jquery: Function
+}
 
 describe('src/dom/jquery', () => {
   context('.isJquery', () => {
@@ -9,7 +11,7 @@ describe('src/dom/jquery', () => {
     })
 
     it('is true for actual jquery instances', () => {
-      expect(Cypress.dom.isJquery($(':first'))).to.be.true
+      expect(Cypress.dom.isJquery(Cypress.$(':first'))).to.be.true
     })
   })
 })

packages/driver/test/cypress/integration/dom/visibility_spec.ts

@@ -1,7 +1,8 @@
 const $dom = Cypress.dom
-const $ = Cypress.$.bind(Cypress)
 
 describe('src/cypress/dom/visibility', () => {
+  const $ = Cypress.$.bind(Cypress)
+
   beforeEach(() => {
     cy.visit('/fixtures/generic.html')
   })
@@ -13,7 +14,7 @@ describe('src/cypress/dom/visibility', () => {
 
     it('throws when not passed a DOM element', () => {
       const fn = () => {
-        $dom.isHidden(null)
+        $dom.isHidden(null!)
       }
 
       expect(fn).to.throw('Cypress.dom.isHidden() failed because it requires a DOM element. The subject received was: \'null\'')
@@ -27,6 +28,7 @@ describe('src/cypress/dom/visibility', () => {
 
     it('throws when not passed a DOM element', () => {
       const fn = () => {
+        // @ts-ignore
         $dom.isVisible('form')
       }
 
@@ -362,7 +364,7 @@ describe('src/cypress/dom/visibility', () => {
 <div style='width: 100px; height: 100px; overflow: hidden; position: relative; top: 700px; left: 700px;'>
   <div style='position: absolute;'>
     <div style='position: absolute;'>
-      <span style='position: absolute; left: -300px; top: 0px;'>out of bounds, parent position: absolute</span>
+      <span style='position: absolute; left: -350px; top: 0px;'>out of bounds, parent position: absolute</span>
     </div>
   </div>
 </div>\
@@ -442,15 +444,6 @@ describe('src/cypress/dom/visibility', () => {
 <div style="transform: scale(1,1)">
   <span>TRANSFORMERS</span>
 </div>\
-`)
-
-      this.$parentsWithBackfaceVisibilityHidden = add(`\
-<div style="position: absolute; width: 200px; height: 260px; background: red; backface-visibility: hidden;">
-  <span id="front">front</span>
-</div>
-<div style="position: absolute; width: 200px; height: 260px; background: blue; backface-visibility: hidden; transform: rotateY(180deg);">
-  <span id="back" >back</span>
-</div>\
 `)
 
       this.$ancestorTransformMakesElOutOfBoundsOfAncestor = add(`\
@@ -801,11 +794,11 @@ describe('src/cypress/dom/visibility', () => {
     })
 
     describe('css transform', () => {
-      describe('element visibility by css transform', () => {
-        const add = (el) => {
-          return $(el).appendTo(cy.$$('body'))
-        }
+      const add = (el) => {
+        return $(el).appendTo(cy.$$('body'))
+      }
 
+      describe('element visibility by css transform', () => {
         it('is visible when an element is translated a bit', () => {
           const el = add(`<div style="transform: translate(10px, 10px)">Translated</div>`)
 
@@ -899,72 +892,90 @@ describe('src/cypress/dom/visibility', () => {
         })
       })
 
-      it('is hidden when outside parents transform scale', function () {
-        expect(this.$parentWithTransformScaleElOutsideScale.find('span')).to.be.hidden
-      })
+      describe('when height/width is set', () => {
+        it('is visible when transform is not 0, but height is 0', () => {
+          const el = add('<div style="transform: translate(0, 0); height: 0;">Text</div>')
 
-      it('is visible when inside of parents transform scale', function () {
-        expect(this.$parentWithTransformScaleElInsideScale.find('span')).to.be.visible
-      })
-
-      it('is hidden when out of ancestor\'s bounds due to ancestor\'s transform', function () {
-        expect(this.$ancestorTransformMakesElOutOfBoundsOfAncestor.find('span')).to.be.hidden
-      })
+          expect(el).to.be.visible
+        })
 
-      it('is visible when in ancestor\'s bounds due to ancestor\'s transform', function () {
-        expect(this.$ancestorTransformMakesElInBoundsOfAncestor.find('#inbounds')).to.be.visible
-      })
-    })
+        it('is visible when transform is not 0, but width is 0', () => {
+          const el = add('<p style="transform: rotateX(30deg); width: 0;">Text</p>')
 
-    describe('css backface-visibility', () => {
-      describe('element visibility by backface-visibility and rotation', () => {
-        const add = (el) => {
-          return $(el).appendTo(cy.$$('body'))
-        }
+          expect(el).to.be.visible
+        })
 
-        it('is visible when there is no transform', () => {
-          const el = add('<div>No transform</div>')
+        it('is visible when parent transform is not 0, but height is 0', () => {
+          const el = add('<div style="transform: translate(0, 0); height: 0;"><p id="tr-p-0">Text</p></div>')
 
-          expect(el).to.be.visible
+          expect(el.find('#tr-p-0')).to.be.visible
         })
 
-        it('is visible when an element is rotated < 90 degrees', () => {
-          const el = add('<div style="backface-visibility: hidden; transform: rotateX(45deg)">rotateX(45deg)</div>')
+        it('is visible when parent transform is not 0, but width is 0', () => {
+          const el = add('<div style="transform: translate(0, 0); height: 0%;"><p id="tr-p-1">Test</p></div>')
 
-          expect(el).to.be.visible
+          expect(el.find('#tr-p-1')).to.be.visible
+        })
 
-          const el2 = add('<div style="backface-visibility: hidden; transform: rotateY(-45deg)">rotateY(-45deg)</div>')
+        it('is invisible when parent transform is 0, but height is not 0', () => {
+          const el = add('<div style="transform: scaleX(0); height: 10px"><p id="tr-p-2">Test</p></div>')
 
-          expect(el2).to.be.visible
+          expect(el.find('#tr-p-2')).to.be.hidden
         })
 
-        it('is invisible when an element is rotated > 90 degrees', () => {
-          const el = add('<div style="backface-visibility: hidden; transform: rotateX(135deg)">rotateX(135deg)</div>')
+        describe('invisible when overflow: hidden', () => {
+          it('height: 0 + overflow', () => {
+            const el = add('<div style="height: 0px; transform: translate(1, 2); overflow: hidden"><p id="h0th">Test</p></div>')
 
-          expect(el).to.be.hidden
+            expect(el.find('#h0th')).to.be.hidden
+          })
 
-          const el2 = add('<div style="backface-visibility: hidden; transform: rotateY(-135deg)">rotateY(-135deg)</div>')
+          it('height: 0 + overflow-x', () => {
+            const el = add('<div style="height: 0px; transform: translate(1, 2); overflow-x: hidden"><p id="h0th">Test</p></div>')
 
-          expect(el2).to.be.hidden
-        })
+            expect(el.find('#h0th')).to.be.hidden
+          })
 
-        it('is invisible when an element is rotated in 90 degrees', () => {
-          const el = add('<div style="backface-visibility: hidden; transform: rotateX(90deg)">rotateX(90deg)</div>')
+          it('height: 0 + overflow-y', () => {
+            const el = add('<div style="height: 0px; transform: translate(1, 2); overflow-y: hidden"><p id="h0th">Test</p></div>')
 
-          expect(el).to.be.hidden
+            expect(el.find('#h0th')).to.be.hidden
+          })
 
-          const el2 = add('<div style="backface-visibility: hidden; transform: rotateY(-90deg)">rotateY(-90deg)</div>')
+          it('width: 0 + overflow', () => {
+            const el = add('<div style="width: 0px; transform: translate(1, 2); overflow: hidden"><p id="h0th">Test</p></div>')
 
-          expect(el2).to.be.hidden
+            expect(el.find('#h0th')).to.be.hidden
+          })
+
+          it('width: 0 + overflow-x', () => {
+            const el = add('<div style="width: 0px; transform: translate(1, 2); overflow-x: hidden"><p id="h0th">Test</p></div>')
+
+            expect(el.find('#h0th')).to.be.hidden
+          })
+
+          it('width: 0 + overflow-y', () => {
+            const el = add('<div style="width: 0px; transform: translate(1, 2); overflow-y: hidden"><p id="h0th">Test</p></div>')
+
+            expect(el.find('#h0th')).to.be.hidden
+          })
         })
       })
 
-      it('is visible when backface not visible', function () {
-        expect(this.$parentsWithBackfaceVisibilityHidden.find('#front')).to.be.visible
+      it('is hidden when outside parents transform scale', function () {
+        expect(this.$parentWithTransformScaleElOutsideScale.find('span')).to.be.hidden
+      })
+
+      it('is visible when inside of parents transform scale', function () {
+        expect(this.$parentWithTransformScaleElInsideScale.find('span')).to.be.visible
       })
 
-      it('is hidden when backface visible', function () {
-        expect(this.$parentsWithBackfaceVisibilityHidden.find('#back')).to.be.hidden
+      it('is hidden when out of ancestor\'s bounds due to ancestor\'s transform', function () {
+        expect(this.$ancestorTransformMakesElOutOfBoundsOfAncestor.find('span')).to.be.hidden
+      })
+
+      it('is visible when in ancestor\'s bounds due to ancestor\'s transform', function () {
+        expect(this.$ancestorTransformMakesElInBoundsOfAncestor.find('#inbounds')).to.be.visible
       })
     })