cypress-io
diff --git a/‎.babelrc
Lines changed: 0 additions & 9 deletions b/‎.babelrc
Lines changed: 0 additions & 9 deletions
diff --git a/‎.gitignore
Lines changed: 1 addition & 0 deletions b/‎.gitignore
Lines changed: 1 addition & 0 deletions
diff --git a/‎.prettierrc.json
Lines changed: 6 additions & 0 deletions b/‎.prettierrc.json
Lines changed: 6 additions & 0 deletions
diff --git a/‎.travis.yml
Lines changed: 0 additions & 31 deletions b/‎.travis.yml
Lines changed: 0 additions & 31 deletions
diff --git a/‎.vscode/settings.json
Lines changed: 26 additions & 2 deletions b/‎.vscode/settings.json
Lines changed: 26 additions & 2 deletions
diff --git a/‎README.md
Lines changed: 157 additions & 124 deletions b/‎README.md
Lines changed: 157 additions & 124 deletions
diff --git a/‎babel.config.js
Lines changed: 29 additions & 0 deletions b/‎babel.config.js
Lines changed: 29 additions & 0 deletions
diff --git a/‎circle.yml
Lines changed: 54 additions & 0 deletions b/‎circle.yml
Lines changed: 54 additions & 0 deletions
diff --git a/‎cypress.json
Lines changed: 9 additions & 4 deletions b/‎cypress.json
Lines changed: 9 additions & 4 deletions
diff --git a/‎cypress/component/advanced/app-action-example/README.md
Lines changed: 1 addition & 0 deletions b/‎cypress/component/advanced/app-action-example/README.md
Lines changed: 1 addition & 0 deletions
diff --git a/‎cypress/component/advanced/app-action-example/counter-spec.js
Lines changed: 34 additions & 0 deletions b/‎cypress/component/advanced/app-action-example/counter-spec.js
Lines changed: 34 additions & 0 deletions
diff --git a/‎cypress/component/advanced/app-action-example/counter.jsx
Lines changed: 33 additions & 0 deletions b/‎cypress/component/advanced/app-action-example/counter.jsx
Lines changed: 33 additions & 0 deletions
diff --git a/‎cypress/component/advanced/context/context-example.jsx
Lines changed: 43 additions & 0 deletions b/‎cypress/component/advanced/context/context-example.jsx
Lines changed: 43 additions & 0 deletions
diff --git a/‎cypress/component/advanced/context/context-spec.js
Lines changed: 11 additions & 0 deletions b/‎cypress/component/advanced/context/context-spec.js
Lines changed: 11 additions & 0 deletions
diff --git a/‎cypress/component/advanced/forward-ref/forward-ref.jsx
Lines changed: 9 additions & 0 deletions b/‎cypress/component/advanced/forward-ref/forward-ref.jsx
Lines changed: 9 additions & 0 deletions
diff --git a/‎cypress/component/advanced/forward-ref/forward-ref.spec.js
Lines changed: 27 additions & 0 deletions b/‎cypress/component/advanced/forward-ref/forward-ref.spec.js
Lines changed: 27 additions & 0 deletions
diff --git a/‎cypress/component/advanced/hooks/counter-with-hooks.jsx
Lines changed: 18 additions & 0 deletions b/‎cypress/component/advanced/hooks/counter-with-hooks.jsx
Lines changed: 18 additions & 0 deletions
@@ -2,3 +2,4 @@ public/
 node_modules/
 dist
 cypress/videos
+cypress/screenshots
@@ -0,0 +1,6 @@
+{
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true
+}
@@ -1,4 +1,28 @@
 {
   "git.ignoreLimitWarning": true,
-  "eslint.enable": false
-}
+  "eslint.enable": false,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "editor.formatOnPaste": false,
+  "workbench.colorCustomizations": {
+    "activityBar.background": "#a7cf00",
+    "activityBar.activeBackground": "#a7cf00",
+    "activityBar.activeBorder": "#00819f",
+    "activityBar.foreground": "#15202b",
+    "activityBar.inactiveForeground": "#15202b99",
+    "activityBarBadge.background": "#00819f",
+    "activityBarBadge.foreground": "#e7e7e7",
+    "titleBar.activeBackground": "#7e9c00",
+    "titleBar.inactiveBackground": "#7e9c0099",
+    "titleBar.activeForeground": "#15202b",
+    "titleBar.inactiveForeground": "#15202b99",
+    "statusBar.background": "#7e9c00",
+    "statusBarItem.hoverBackground": "#556900",
+    "statusBar.foreground": "#15202b",
+    "statusBar.border": "#7e9c00",
+    "titleBar.border": "#7e9c00"
+  },
+  "peacock.color": "#7e9c00",
+  "javascript.updateImportsOnFileMove.enabled": "never",
+  "typescript.updateImportsOnFileMove.enabled": "never"
+}
@@ -0,0 +1,29 @@
+module.exports = {
+  presets: [
+    '@babel/preset-env',
+    '@babel/preset-react',
+    '@babel/preset-typescript',
+  ],
+  plugins: [
+    // allow lazy loaded components with dynamic "import(...)"
+    // https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import/
+    '@babel/plugin-syntax-dynamic-import',
+    '@babel/plugin-proposal-class-properties',
+    // https://babeljs.io/docs/en/babel-plugin-transform-modules-commonjs
+    // loose ES6 modules allow us to dynamically mock imports during tests
+    [
+      '@babel/plugin-transform-modules-commonjs',
+      {
+        loose: true,
+      },
+    ],
+    [
+      'module-resolver',
+      {
+        alias: {
+          'cypress-react-unit-test': './dist',
+        },
+      },
+    ],
+  ],
+}
@@ -0,0 +1,54 @@
+version: 2.1
+orbs:
+  cypress: cypress-io/cypress@1
+workflows:
+  build:
+    jobs:
+      # install and cache dependencies in this job
+      # AND build the library once
+      # then the workspace will be passed to other jobs
+      - cypress/install:
+          name: Install
+          build: npm run transpile
+          post-steps:
+            - run:
+                name: Show info 📺
+                command: npx cypress info
+            - run:
+                name: Linting code 🧹
+                command: npm run lint
+
+      # the test job automatically attaches the workspace
+      # created by the install job, so it is ready to test
+      - cypress/run:
+          name: Test
+          requires:
+            - Install
+          # notice a trick to avoid re-installing dependencies
+          # in this job - a do-nothing "install-command" parameter
+          install-command: echo 'Nothing to install in this job'
+          # we are not going to use results from this job anywhere else
+          no-workspace: true
+          record: false
+
+      # this job attaches the workspace left by the install job
+      # so it is ready to run Cypress tests
+      # only we will run semantic release script instead
+      - cypress/run:
+          name: NPM release
+          # we need newer Node for semantic release
+          executor: cypress/base-12-6-0
+          requires:
+            - Install
+            - Test
+          install-command: echo 'Nothing to install in this job'
+          no-workspace: true
+          # instead of "cypress run" do NPM release 😁
+          # clear environment variables to trick semantic-release
+          # into thinking this is NOT a pull request.
+          # (under the hood the module env-ci is used to check if this is a PR)
+          command: |
+            CIRCLE_PR_NUMBER= \
+            CIRCLE_PULL_REQUEST= \
+            CI_PULL_REQUEST= \
+            npm run semantic-release
@@ -1,13 +1,18 @@
 {
-  "viewportWidth": 300,
-  "viewportHeight": 100,
+  "viewportWidth": 400,
+  "viewportHeight": 400,
   "video": false,
   "projectId": "z9dxah",
-  "ignoreTestFiles": "*.css",
+  "testFiles": "**/*spec.{js,jsx,ts,tsx}",
   "env": {
     "cypress-react-unit-test": {
       "react": "node_modules/react/umd/react.development.js",
       "react-dom": "node_modules/react-dom/umd/react-dom.development.js"
     }
-  }
+  },
+  "ignoreTestFiles": [
+    "**/__snapshots__/*",
+    "**/__image_snapshots__/*"
+  ],
+  "experimentalComponentTesting": true
 }
@@ -0,0 +1 @@
+Example showing how a component exposes a reference from its constructor, allowing the test to interact with the component's internals.
@@ -0,0 +1,34 @@
+/// <reference types="cypress" />
+import React from 'react'
+import { mount } from 'cypress-react-unit-test'
+import { Counter } from './counter.jsx'
+
+/* eslint-env mocha */
+describe('Counter with access', () => {
+  it('works', () => {
+    mount(<Counter />)
+    cy.contains('count: 0')
+      .click()
+      .contains('count: 1')
+      .click()
+      .contains('count: 2')
+  })
+
+  it('allows access via reference', () => {
+    mount(<Counter />)
+
+    // the window.counter was set from the Counter's constructor
+    cy.window()
+      .should('have.property', 'counter')
+      .its('state')
+      .should('deep.equal', { count: 0 })
+    // let's change the state of the component
+    cy.window()
+      .its('counter')
+      .invoke('setState', {
+        count: 101,
+      })
+    // the UI should update to reflect the new count
+    cy.contains('count: 101').should('be.visible')
+  })
+})
@@ -0,0 +1,33 @@
+import React from 'react'
+
+export class Counter extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      count: 0,
+    }
+
+    if (window.Cypress) {
+      // if this component is mounted from inside Cypress Test Runner
+      // then expose the reference to this instance
+      // to allow controlling it from tests
+      console.log(
+        'set window.counter to this component in window',
+        window.location.pathname,
+      )
+      window.counter = this
+    } else {
+      console.log('running outside Cypress')
+    }
+  }
+
+  click = () => {
+    this.setState({
+      count: this.state.count + 1,
+    })
+  }
+
+  render() {
+    return <p onClick={this.click}>count: {this.state.count}</p>
+  }
+}
@@ -0,0 +1,43 @@
+import React from 'react'
+
+// Context lets us pass a value deep into the component tree
+// without explicitly threading it through every component.
+// Create a context for the current theme (with "light" as the default).
+const ThemeContext = React.createContext('light')
+
+export default class App extends React.Component {
+  render() {
+    // Use a Provider to pass the current theme to the tree below.
+    // Any component can read it, no matter how deep it is.
+    // In this example, we're passing "dark" as the current value.
+    return (
+      <ThemeContext.Provider value="dark">
+        <Toolbar />
+      </ThemeContext.Provider>
+    )
+  }
+}
+
+// A component in the middle doesn't have to
+// pass the theme down explicitly anymore.
+function Toolbar(props) {
+  return (
+    <div>
+      <ThemedButton />
+    </div>
+  )
+}
+
+function Button(props) {
+  return <button>{props.theme}</button>
+}
+
+class ThemedButton extends React.Component {
+  // Assign a contextType to read the current theme context.
+  // React will find the closest theme Provider above and use its value.
+  // In this example, the current theme is "dark".
+  static contextType = ThemeContext
+  render() {
+    return <Button theme={this.context} />
+  }
+}
@@ -0,0 +1,11 @@
+import React from 'react'
+import { mount } from 'cypress-react-unit-test'
+import App from './context-example.jsx'
+
+describe('Context example', () => {
+  it('renders', () => {
+    mount(<App />)
+    // the label "dark" was passed through React context
+    cy.contains('button', 'dark').should('be.visible')
+  })
+})
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Button = React.forwardRef(({ children, ...rest }, ref) => (
+  <button {...rest} ref={ref}>
+    {children}
+  </button>
+))
+
+export default Button
@@ -0,0 +1,27 @@
+/// <reference types="cypress" />
+/// <reference types="../../lib" />
+
+import React from 'react'
+import ReactDom from 'react-dom'
+import { mount } from 'cypress-react-unit-test'
+import Button from './forward-ref.jsx'
+
+/* eslint-env mocha */
+describe('Button component', function() {
+  it('works', function() {
+    mount(<Button>Hello, World</Button>)
+    cy.contains('Hello, World')
+  })
+
+  it('forwards refs as expected', function() {
+    const ref = React.createRef()
+
+    mount(
+      <Button className="testing" ref={ref}>
+        Hello, World
+      </Button>,
+    )
+    expect(ref).to.have.property('current')
+    // expect(ref.current).not.be.null;
+  })
+})
@@ -0,0 +1,18 @@
+import React from 'react'
+
+export default function CounterWithHooks({ initialCount = 0 }) {
+  const [count, setCount] = React.useState(initialCount)
+
+  const handleCountIncrement = React.useCallback(() => {
+    setCount(count + 1)
+  }, [count])
+
+  return (
+    <>
+      <div className="counter">{count}</div>
+      <button id="increment" onClick={handleCountIncrement}>
+        +
+      </button>
+    </>
+  )
+}
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+Example showing how a component exposes a reference from its constructor, allowing the test to interact with the component's internals.`