init

.eslintrc

@@ -0,0 +1,10 @@
+{
+  "extends": [
+    "plugin:cypress-dev/general",
+    "plugin:cypress-dev/tests"
+  ],
+  "globals": {
+    "cy": true,
+    "Cypress": true
+  }
+}

.github/workflows/add-issue-to-triage-board.yml

@@ -0,0 +1,14 @@
+name: 'Add issue/PR to Triage Board'
+on:
+  issues:
+    types:
+      - opened
+  pull_request_target:
+    types:
+      - opened
+jobs:
+  add-to-triage-project-board:
+    # skip in fork
+    if: github.repository == 'cypress-io/cypress-example-todomvc'
+    uses: cypress-io/cypress/.github/workflows/triage_add_to_project.yml@develop
+    secrets: inherit

.github/workflows/main.yml

@@ -0,0 +1,13 @@
+name: End-to-end tests
+on: [push, workflow_dispatch]
+jobs:
+  cypress-run:
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Run E2E tests
+        uses: cypress-io/github-action@v5
+        with:
+          start: npm run start
+          wait-on: http://localhost:8888

.github/workflows/triage-closed-issue-comment.yml

@@ -0,0 +1,11 @@
+name: 'Closed Issue Comment'
+on:
+  issue_comment:
+    types:
+      - created
+jobs:
+  closed-issue-comment:
+    # skip in fork
+    if: github.repository == 'cypress-io/cypress-example-todomvc'
+    uses: cypress-io/cypress/.github/workflows/triage_closed_issue_comment.yml@develop
+    secrets: inherit

.gitignore

@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
+node_modules
+cypress/videos
+cypress/screenshots
+js/*.js

.node-version

@@ -0,0 +1 @@
+18.16.1

.npmrc

@@ -0,0 +1,2 @@
+package-lock=true
+save-exact=true

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "standard.enable": false,
+  "eslint.enable": true
+}

LICENSE

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Cypress.io, LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

README.md

@@ -0,0 +1,21 @@
+# TodoMVC
+
+### Install NVM, set node version
+
+#### MacOS
+```
+brew install nvm
+
+nvm install --lts
+nvm use --lts
+```
+
+### Start Project
+
+```
+npm install
+
+npm run dev
+```
+
+Edit `cypress/e2e/app.cy.js`

cypress.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  fixturesFolder: false,
+  e2e: {
+    setupNodeEvents(on, config) {},
+    baseUrl: 'http://localhost:8888',
+  },
+})

cypress/e2e/app.cy.js

@@ -0,0 +1,57 @@
+// type definitions for Cypress object "cy"
+/// <reference types="cypress" />
+
+// type definitions for custom commands like "createDefaultTodos"
+/// <reference types="../support" />
+
+describe('TodoMVC - React', function () {
+  beforeEach(function () {
+    // By default Cypress will automatically
+    // clear the Local Storage prior to each
+    // test which ensures no todos carry over
+    // between tests.
+    //
+    // Go out and visit our local web server
+    // before each test, which serves us the
+    // TodoMVC App we want to test against
+    //
+    // We've set our baseUrl to be http://localhost:8888
+    // which is automatically prepended to cy.visit
+    //
+    // https://on.cypress.io/api/visit
+    cy.visit('/')
+  })
+
+  afterEach(() => {
+    // In firefox, blur handlers will fire upon navigation if there is an activeElement.
+    // Since todos are updated on blur after editing,
+    // this is needed to blur activeElement after each test to prevent state leakage between tests.
+    cy.window().then((win) => {
+      // @ts-ignore
+      win.document.activeElement.blur()
+    })
+  })
+
+  // a very simple example helpful during presentations
+  it('adds 2 todos', function () {
+    cy.get('.new-todo')
+    .type('learn testing{enter}')
+    .type('be cool{enter}')
+
+    cy.get('.todo-list li').should('have.length', 2)
+  })
+
+  context('When page is initially opened', function () {
+    it('should focus on the todo input field', function () {
+      cy.focused().should('have.class', 'new-todo')
+    })
+  })
+
+  context('No Todos', function () {
+    it('should hide #main and #footer', function () {
+      cy.get('.todo-list li').should('not.exist')
+      cy.get('.main').should('not.exist')
+      cy.get('.footer').should('not.exist')
+    })
+  })
+})

cypress/fixtures/example.json

@@ -0,0 +1,3 @@
+{
+  "example": "fixture"
+}

cypress/support/commands.js

@@ -0,0 +1,106 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create the custom commands: 'createDefaultTodos'
+// and 'createTodo'.
+//
+// The commands.js file is a great place to
+// modify existing commands and create custom
+// commands for use throughout your tests.
+//
+// You can read more about custom commands here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+
+Cypress.Commands.add('createDefaultTodos', function () {
+
+  let TODO_ITEM_ONE = 'buy some cheese'
+  let TODO_ITEM_TWO = 'feed the cat'
+  let TODO_ITEM_THREE = 'book a doctors appointment'
+
+  // begin the command here, which by will display
+  // as a 'spinning blue state' in the UI to indicate
+  // the command is running
+  let cmd = Cypress.log({
+    name: 'create default todos',
+    message: [],
+    consoleProps () {
+      // we're creating our own custom message here
+      // which will print out to our browsers console
+      // whenever we click on this command
+      return {
+        'Inserted Todos': [TODO_ITEM_ONE, TODO_ITEM_TWO, TODO_ITEM_THREE],
+      }
+    },
+  })
+
+  // additionally we pass {log: false} to all of our
+  // sub-commands so none of them will output to
+  // our command log
+
+  cy.get('.new-todo', { log: false })
+  .type(`${TODO_ITEM_ONE}{enter}`, { log: false })
+  .type(`${TODO_ITEM_TWO}{enter}`, { log: false })
+  .type(`${TODO_ITEM_THREE}{enter}`, { log: false })
+
+  cy.get('.todo-list li', { log: false })
+  .then(function ($listItems) {
+    // once we're done inserting each of the todos
+    // above we want to return the .todo-list li's
+    // to allow for further chaining and then
+    // we want to snapshot the state of the DOM
+    // and end the command so it goes from that
+    // 'spinning blue state' to the 'finished state'
+    cmd.set({ $el: $listItems }).snapshot().end()
+  })
+
+  // return a query for the todo items so that we can
+  // alias the result of this command in our tests
+  return cy.get('.todo-list li', { log: false })
+})
+
+Cypress.Commands.add('createTodo', function (todo) {
+
+  let cmd = Cypress.log({
+    name: 'create todo',
+    message: todo,
+    consoleProps () {
+      return {
+        'Inserted Todo': todo,
+      }
+    },
+  })
+
+  // create the todo
+  cy.get('.new-todo', { log: false }).type(`${todo}{enter}`, { log: false })
+
+  // now go find the actual todo
+  // in the todo list so we can
+  // easily alias this in our tests
+  // and set the $el so its highlighted
+  cy.get('.todo-list', { log: false })
+  .contains('li', todo.trim(), { log: false })
+  .then(function ($li) {
+    // set the $el for the command so
+    // it highlights when we hover over
+    // our command
+    cmd.set({ $el: $li }).snapshot().end()
+  })
+
+  // return a query for the todo items so that we can
+  // alias the result of this command in our tests
+  return cy.get('.todo-list', { log: false })
+  .contains('li', todo.trim(), { log: false })
+})
+
+Cypress.Commands.add('addAxeCode', () => {
+  cy.window({ log: false }).then((win) => {
+    return new Promise((resolve) => {
+      const script = win.document.createElement('script')
+
+      script.src = '/node_modules/axe-core/axe.min.js'
+      script.addEventListener('load', resolve)
+
+      win.document.head.appendChild(script)
+    })
+  })
+})

cypress/support/e2e.js

@@ -0,0 +1,23 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your other test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/guides/configuration#section-global
+// ***********************************************************
+
+// Import commands.js and defaults.js
+// using ES2015 syntax:
+// import "./commands"
+// import "./defaults"
+
+// Alternatively you can use CommonJS syntax:
+require('./commands')
+require('cypress-axe')

cypress/support/index.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="cypress" />
+
+declare namespace Cypress {
+  interface Chainable<Subject> {
+    /**
+     * Create several Todo items via UI
+     * @example
+     * cy.createDefaultTodos()
+     */
+    createDefaultTodos(): Chainable<any>
+    /**
+     * Creates one Todo using UI
+     * @example
+     * cy.createTodo('new item')
+     */
+    createTodo(title: string): Chainable<any>
+
+    /**
+     * Command that injects Axe core library into app html.
+     * @example
+     *  cy.visit('/')
+     *  cy.v()
+     */
+    addAxeCode(): Chainable<any>
+  }
+}

index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en" data-framework="typescript">
+	<head>
+		<meta charset="utf-8">
+		<title>React • TodoMVC</title>
+		<link rel="stylesheet" href="node_modules/todomvc-common/base.css">
+		<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
+	</head>
+	<body>
+		<section class="todoapp"></section>
+		<footer class="info">
+			<p>Double-click to edit a todo</p>
+		</footer>
+		<script type="text/javascript" src="node_modules/director/build/director.js"></script>
+		<script type="text/javascript" src="js/bundle.js"></script>
+	</body>
+</html>