chore: add ui states tests

packages/app/cypress/e2e/runner/ui-states.cy.ts

@@ -0,0 +1,260 @@
+import { runSpec } from './support/spec-loader'
+
+describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 600000 }, () => {
+  beforeEach(() => {
+    cy.viewport(1000, 1500)
+  })
+
+  it('hooks', () => {
+    runSpec({
+      fileName: 'ui-states/hooks.cy.js',
+    })
+    .then((win) => {
+      return new Promise<void>((resolve) => {
+        win.getEventManager().on('cypress:in:cypress:run:complete', () => {
+          resolve()
+        })
+      }).then(() => {
+        cy.contains('test hooks').should('be.visible')
+        cy.percySnapshot()
+      })
+    })
+  })
+
+  it('nested tests', () => {
+    runSpec({
+      fileName: 'ui-states/nested-tests.cy.js',
+    })
+    .then((win) => {
+      return new Promise<void>((resolve) => {
+        win.getEventManager().on('cypress:in:cypress:run:complete', () => {
+          resolve()
+        })
+      }).then(() => {
+        cy.contains('Nested Tests').should('be.visible')
+        cy.percySnapshot()
+      })
+    })
+  })
+
+  describe('commands', () => {
+    it('commands that dont display in UI', () => {
+      runSpec({
+        fileName: 'ui-states/commands.cy.js',
+      })
+      .then((win) => {
+        return new Promise<void>((resolve) => {
+          win.getEventManager().on('cypress:in:cypress:run:complete', () => {
+            resolve()
+          })
+        }).then(() => {
+          cy.contains('commands that dont display in UI').should('be.visible').click()
+          cy.percySnapshot()
+        })
+      })
+    })
+
+    it('commands that display in UI - part 1', () => {
+      runSpec({
+        fileName: 'ui-states/commandsToDisplay.cy.js',
+      })
+      .then((win) => {
+        return new Promise<void>((resolve) => {
+          win.getEventManager().on('cypress:in:cypress:run:complete', () => {
+            resolve()
+          })
+        }).then(() => {
+          cy.contains('commands that display in UI - part 1').should('be.visible')
+          .click()
+
+          cy.percySnapshot()
+        })
+      })
+    })
+
+    it('commands that display in UI - part 2', () => {
+      runSpec({
+        fileName: 'ui-states/commandsToDisplay.cy.js',
+      })
+      .then((win) => {
+        return new Promise<void>((resolve) => {
+          win.getEventManager().on('cypress:in:cypress:run:complete', () => {
+            resolve()
+          })
+        }).then(() => {
+          cy.contains('commands that display in UI - part 2').should('be.visible')
+          .click()
+
+          cy.percySnapshot()
+        })
+      })
+    })
+
+    it('commands that display in UI - part 3', () => {
+      runSpec({
+        fileName: 'ui-states/commandsToDisplay.cy.js',
+      })
+      .then((win) => {
+        return new Promise<void>((resolve) => {
+          win.getEventManager().on('cypress:in:cypress:run:complete', () => {
+            resolve()
+          })
+        }).then(() => {
+          cy.contains('commands that display in UI - part 3').should('be.visible')
+          .click()
+
+          cy.percySnapshot()
+        })
+      })
+    })
+
+    it('commands that display in UI - part 4', () => {
+      runSpec({
+        fileName: 'ui-states/commandsToDisplay.cy.js',
+      })
+      .then((win) => {
+        return new Promise<void>((resolve) => {
+          win.getEventManager().on('cypress:in:cypress:run:complete', () => {
+            resolve()
+          })
+        }).then(() => {
+          cy.contains('commands that display in UI - part 3').should('be.visible')
+          .click()
+
+          cy.percySnapshot()
+        })
+      })
+    })
+
+    it('command options - part 1', () => {
+      runSpec({
+        fileName: 'ui-states/commands.cy.js',
+      })
+      .then((win) => {
+        return new Promise<void>((resolve) => {
+          win.getEventManager().on('cypress:in:cypress:run:complete', () => {
+            resolve()
+          })
+        }).then(() => {
+          cy.contains('command options - part 1').should('be.visible').click()
+          cy.percySnapshot()
+        })
+      })
+    })
+
+    it('command options - part 2', () => {
+      runSpec({
+        fileName: 'ui-states/commands.cy.js',
+      })
+      .then((win) => {
+        return new Promise<void>((resolve) => {
+          win.getEventManager().on('cypress:in:cypress:run:complete', () => {
+            resolve()
+          })
+        }).then(() => {
+          cy.contains('command options - part 2').should('be.visible').click()
+          cy.percySnapshot()
+        })
+      })
+    })
+
+    it('command options - part 3', () => {
+      runSpec({
+        fileName: 'ui-states/commands.cy.js',
+      })
+      .then((win) => {
+        return new Promise<void>((resolve) => {
+          win.getEventManager().on('cypress:in:cypress:run:complete', () => {
+            resolve()
+          })
+        }).then(() => {
+          cy.contains('command options - part 3').should('be.visible').click()
+          cy.percySnapshot()
+        })
+      })
+    })
+
+    it('Element Visibility', () => {
+      runSpec({
+        fileName: 'ui-states/commands.cy.js',
+      })
+      .then((win) => {
+        return new Promise<void>((resolve) => {
+          win.getEventManager().on('cypress:in:cypress:run:complete', () => {
+            resolve()
+          })
+        }).then(() => {
+          cy.contains('Element Visibility').should('be.visible').click()
+          cy.percySnapshot()
+        })
+      })
+    })
+  })
+
+  it('status codes', () => {
+    runSpec({
+      fileName: 'ui-states/status-codes.cy.js',
+    })
+    .then((win) => {
+      return new Promise<void>((resolve) => {
+        win.getEventManager().on('cypress:in:cypress:run:complete', () => {
+          resolve()
+        })
+      }).then(() => {
+        cy.contains('Request Statuses').should('be.visible')
+        cy.percySnapshot()
+      })
+    })
+  })
+
+  it('page events', () => {
+    runSpec({
+      fileName: 'ui-states/page-events.cy.js',
+    })
+    .then((win) => {
+      return new Promise<void>((resolve) => {
+        win.getEventManager().on('cypress:in:cypress:run:complete', () => {
+          resolve()
+        })
+      }).then(() => {
+        cy.contains('events - page events').should('be.visible')
+        cy.percySnapshot()
+      })
+    })
+  })
+
+  describe('errors', () => {
+    it('simple error with docs link', () => {
+      runSpec({
+        fileName: 'ui-states/errors.cy.js',
+      })
+      .then((win) => {
+        return new Promise<void>((resolve) => {
+          win.getEventManager().on('cypress:in:cypress:run:complete', () => {
+            resolve()
+          })
+        }).then(() => {
+          cy.contains('simple error with docs link').should('be.visible')
+          cy.percySnapshot()
+        })
+      })
+    })
+
+    it('long error', () => {
+      runSpec({
+        fileName: 'ui-states/errors.cy.js',
+      })
+      .then((win) => {
+        return new Promise<void>((resolve) => {
+          win.getEventManager().on('cypress:in:cypress:run:complete', () => {
+            resolve()
+          })
+        }).then(() => {
+          cy.contains('simple error with docs link').click()
+          cy.contains('long error').should('be.visible')
+          cy.percySnapshot()
+        })
+      })
+    })
+  })
+})

system-tests/project-fixtures/runner-specs/cypress/e2e/runner/ui-states/commands.cy.js

@@ -0,0 +1,137 @@
+describe('Commands', () => {
+  it('commands that dont display in UI', () => {
+    cy.visit('cypress/fixtures/commandsActions.html')
+
+    cy.wrap({ foo: { bar: 'baz' } })
+    .then((obj) => obj)
+    .should('have.property', 'foo')
+    .and('have.property', 'bar')
+
+    cy.wrap({ foo: { bar: 'baz' } })
+    .as('myObject')
+
+    cy.get('@myObject').then((obj) => {
+      cy.log(obj)
+    })
+
+    cy.get('div').each(($div) => { }).end()
+
+    cy.fixture('uiStates')
+
+    cy.intercept('GET', 'comments/*').as('getComment')
+
+    cy.wrap(['foo', 'bar']).spread(() => {})
+
+    const obj = {
+      foo () { },
+      bar () { },
+    }
+
+    cy.spy(obj, 'foo')
+    cy.stub(obj, 'bar')
+  })
+
+  it('command options - part 1', () => {
+    cy.visit('cypress/fixtures/uiStates.html')
+
+    cy.get('#a').focus().blur({ force: false })
+    cy.get('#checkbox').check({ force: false })
+    cy.get('form').children({ timeout: 2000 })
+    cy.get('#a').clear({ force: false })
+    cy.clearCookie('authId', { timeout: 2001 })
+    cy.clearCookies({ timeout: 2002 })
+
+    cy.contains('button').click({ force: false })
+    cy.contains('button').click(1, 2, { force: false })
+    cy.contains('button').click('bottom', { force: false })
+
+    cy.get('#a').closest('form', { timeout: 2003 })
+    cy.contains('.test', 'Hello', { timeout: 2004 })
+    cy.get('button').dblclick({ force: false })
+
+    cy.document({ timeout: 2005 })
+
+    cy.get('input').eq(0, { timeout: 2006 })
+    cy.exec('ls', { env: { 'a': true } })
+    cy.get('input').filter('#a', { timeout: 2007 })
+    cy.get('form').find('#a', { timeout: 2008 })
+    cy.get('input').first({ timeout: 2009 })
+  })
+
+  it('command options - part 2', () => {
+    cy.visit('cypress/fixtures/uiStates.html')
+
+    cy.get('#a').focus({ timeout: 2010 })
+    cy.get('#a').focus()
+    cy.focused({ timeout: 2011 })
+    cy.get('#a', { withinSubject: document.forms[0] })
+    cy.getCookie('auth_key', { timeout: 2012 })
+    cy.getCookies({ timeout: 2013 })
+    cy.go('forward', { timeout: 2014 })
+    cy.hash({ timeout: 2015 })
+    cy.get('input').last({ timeout: 2016 })
+    cy.location('port', { timeout: 2017 })
+    cy.get('#a').next('input', { timeout: 2018 })
+    cy.get('#a').nextAll('input', { timeout: 2019 })
+    cy.get('#a').nextUntil('#b', { timeout: 2020 })
+    cy.get('input').not('#a', { timeout: 2021 })
+    cy.get('#a').parent('form', { timeout: 2022 })
+    cy.get('#a').parents('form', { timeout: 2023 })
+    cy.get('#a').parentsUntil('body', { timeout: 2024 })
+
+    cy.get('#b').prev('input', { timeout: 2025 })
+    cy.get('#b').prevAll('input', { timeout: 2026 })
+    cy.get('#b').prevUntil('#a', { timeout: 2027 })
+    cy.readFile('./cypress/fixtures/uiStates.json', { timeout: 2028 })
+    cy.reload(true, { timeout: 2028 })
+
+    cy.get('button').rightclick({ timeout: 2028 })
+    cy.root({ timeout: 2028 })
+  })
+
+  it('command options - part 3', () => {
+    cy.visit('cypress/fixtures/uiStates.html')
+
+    cy.screenshot({ capture: 'viewport' })
+    cy.get('form').scrollIntoView({
+      offset: { top: 20, left: 30, right: 20, bottom: 40 },
+      log: true,
+      timeout: 3000,
+      duration: 0,
+    })
+
+    cy.scrollTo(0, 500, { duration: 100 })
+    cy.get('#fruits').select('apples', { force: false })
+
+    cy.setCookie('auth_key', '123key', { httpOnly: true })
+
+    cy.get('#a').siblings('input', { timeout: 2029 })
+
+    cy.get('form').submit({ timeout: 2030 })
+
+    cy.title({ timeout: 2032 })
+    cy.get('#a').trigger('mouseenter', 'top', { cancelable: true })
+    cy.get('#a').type('hi?', {
+      delay: 10,
+      force: true,
+    })
+
+    cy.get('#checkbox').uncheck('good', { force: false })
+    cy.url({ timeout: 2033 })
+    cy.visit('cypress/fixtures/uiStates.html', {
+      timeout: 20000,
+    })
+
+    cy.wait(100, { requestTimeout: 2000 })
+    cy.window({ timeout: 2034 })
+    cy.wrap({ name: 'John Doe' }, { timeout: 2035 })
+    cy.writeFile('./cypress/_test-output/test.txt', 'test', { timeout: 2036 })
+  })
+
+  it('Element Visibility', () => {
+    cy.visit('cypress/fixtures/commandsActions.html')
+
+    cy.get('#scroll-horizontal button')
+    .should('not.be.visible')
+  })
+})