feat: test cy.contains support (#5)

bahmutov · Aug 29, 2022 · 08e5b2e · 08e5b2e
1 parent 0ecd54b
commit 08e5b2e
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -2,6 +2,8 @@
 
 **DO NOT USE YET**
 
+Tested with `cy.get`, `cy.contains` commands
+
 ## Install
 
 Add this package as a dev dependency
@@ -52,6 +54,10 @@ If you re-run the tests, you should see the messages appear in the console
 
 ![Debug messages in the console](./img/debug.png)
 
+## See also
+
+- [cypress-ngx-ui-testing](https://github.com/swimlane/ngx-ui/tree/master/projects/swimlane/ngx-ui-testing)
+
 ## Small print
 
 Author: Gleb Bahmutov &lt;gleb.bahmutov@gmail.com&gt; &copy; 2022

diff --git a/cypress/e2e/close-dialog.cy.js b/cypress/e2e/close-dialog.cy.js
@@ -2,10 +2,15 @@
 import '../../src'
 
 it(
-  'closes the survey dialog if it is open',
+  'closes the survey dialog',
   { viewportWidth: 500, viewportHeight: 500 },
   () => {
-    cy.visit('cypress/close-dialog.html')
+    cy.visit('cypress/close-dialog.html', {
+      onBeforeLoad(win) {
+        // trick the app to open the dialog
+        cy.stub(win.Math, 'random').returns(0)
+      },
+    })
     cy.get('dialog#survey')
       .if('visible')
       .wait(1000)
@@ -16,3 +21,66 @@ it(
     cy.get('#main').should('be.visible')
   },
 )
+
+it(
+  'skips the commands since the dialog is closed',
+  { viewportWidth: 500, viewportHeight: 500 },
+  () => {
+    cy.visit('cypress/close-dialog.html', {
+      onBeforeLoad(win) {
+        // trick the app to close the dialog
+        cy.stub(win.Math, 'random').returns(1)
+      },
+    })
+    cy.get('dialog#survey')
+      .if('visible')
+      .wait(1000)
+      .contains('button', 'Close')
+      .click()
+    // if there is a dialog on top,
+    // then the main text is not visible
+    cy.get('#main').should('be.visible')
+  },
+)
+
+describe('cy.contains support', () => {
+  it(
+    'clicks the close survey button',
+    { viewportWidth: 500, viewportHeight: 500 },
+    () => {
+      cy.visit('cypress/close-dialog.html', {
+        onBeforeLoad(win) {
+          // trick the app to open the dialog
+          cy.stub(win.Math, 'random').returns(0)
+        },
+      })
+      cy.contains('dialog#survey button', 'Close')
+        .if('visible')
+        .wait(1000)
+        .click()
+      // if there is a dialog on top,
+      // then the main text is not visible
+      cy.get('#main').should('be.visible')
+    },
+  )
+
+  it(
+    'skips click when the button is hidden',
+    { viewportWidth: 500, viewportHeight: 500 },
+    () => {
+      cy.visit('cypress/close-dialog.html', {
+        onBeforeLoad(win) {
+          // trick the app to hide the dialog
+          cy.stub(win.Math, 'random').returns(1)
+        },
+      })
+      cy.contains('dialog#survey button', 'Close')
+        .if('visible')
+        .wait(1000)
+        .click()
+      // if there is a dialog on top,
+      // then the main text is not visible
+      cy.get('#main').should('be.visible')
+    },
+  )
+})
diff --git a/cypress/e2e/spec.cy.js b/cypress/e2e/spec.cy.js
@@ -21,3 +21,17 @@ it('clicks on the button if it is visible', () => {
   // but we can click on the visible button
   cy.get('button#load').if('visible').click()
 })
+
+describe('cy.contains support', () => {
+  it('clicks on the button by text if exists', () => {
+    cy.visit('cypress/index.html')
+    cy.log('**button exists**')
+    cy.contains('button', 'Load').if().click()
+    cy.log('**attached assertions are passing**')
+    cy.contains('button', 'Load').if().should('be.visible')
+    cy.log('**button does not exist**')
+    cy.contains('button', 'does-not-exist').if().click()
+    cy.log('**attached assertions are skipped**')
+    cy.contains('button', 'does-not-exist').if().should('not.exist')
+  })
+})