Add recipe for blog about page objects and application actions (#219)

* initial todomvc

* add typescript for createDefaultTodos and createTodo custom commands

* trying going through model

* page actions

* more work

* refactor toggle

* routing should use actions

* disable codepen recipe on CI (#216)

* use cy state to get document

* add element coverage to the table

* disable codepen recipe for now

* rename to application actions folder

* testing individual errors

* playing with window

* add recipe to readme

* selectors in closures

* refactor

* move allItems into utils

* example spying on method call

Author: bahmutov

README.md

@@ -15,6 +15,7 @@ Recipe | Category | Description
 [Drag and Drop](#drag-and-drop) | Testing the DOM | Use `.trigger()` to test drag and drop
 [Typescript with Browserify](#typescript-with-browserify) | Preprocessors | Add typescript support with browserify
 [Typescript with Webpack](#typescript-with-webpack) | Preprocessors | Add typescript support with webpack
+[Application Actions](#application-actions) | Blogs | Application actions are a replacement for Page Objects
 [Direct Control of AngularJS](#direct-control-of-angularjs) | Blogs | Bypass the DOM and control AngularJS
 [E2E API Testing](#e2e-api-testing) | Blogs | Run your API Tests with a GUI
 [E2E Snapshots](#e2e-snapshots) | Blogs | End-to-End Snapshot Testing
@@ -182,6 +183,12 @@ Get around the lack of a `.hover()` command.
 - Use [`@cypress/webpack-preprocessor`](https://github.com/cypress-io/cypress-webpack-preprocessor) to write Cypress tests in Typescript
 - Lint TypeScript spec code against Cypress type definitions
 
+### [Application Actions](./examples/blogs__application-actions)
+
+- Invoke methods on the application's model object
+- Avoid code duplication and need to create page object hierarchy
+- Run e2e very quickly by skipping UI unless testing that specific UI feature
+
 ### [Direct Control of AngularJS](./examples/blogs__direct-control-angular)
 
 - [Blog article written here](https://www.cypress.io/blog/2017/11/15/Control-Angular-Application-From-E2E-Tests)

circle.yml

@@ -51,6 +51,8 @@ jobs:
             - .cache/Cypress
 
   # define a new job with defailts for each "examples/*" subfolder
+  blogs__application-actions:
+    <<: *defaults
   blogs__codepen-demo:
     <<: *defaults
   blogs__direct-control-angular:
@@ -118,6 +120,9 @@ workflows:
       # - blogs__codepen-demo:
       #     requires:
       #       - build
+      - blogs__application-actions:
+          requires:
+            - build
       - blogs__direct-control-angular:
           requires:
             - build

examples/blogs__application-actions/.env

@@ -0,0 +1,2 @@
+SKIP_PREFLIGHT_CHECK=true
+BROWSER=none

examples/blogs__application-actions/README.md

@@ -0,0 +1,13 @@
+# Application Actions
+
+Application actions are a replacement for Page Objects
+
+## Shows how to
+
+- Invoke methods on the application's model object
+- Avoid code duplication and need to create page object hierarchy
+- Run e2e very quickly by skipping UI unless testing that specific UI feature
+
+## Blog post
+
+`Stop using Page Objects and Start using Application Actions`

examples/blogs__application-actions/cypress.json

@@ -0,0 +1,4 @@
+{
+  "baseUrl": "http://localhost:8888",
+  "ignoreTestFiles": "utils.js"
+}

examples/blogs__application-actions/cypress/fixtures/3-todos.json

@@ -0,0 +1,17 @@
+[
+  {
+    "id": 0,
+    "text": "first",
+    "completed": true
+  },
+  {
+    "id": 1,
+    "text": "second",
+    "completed": false
+  },
+  {
+    "id": 2,
+    "text": "third",
+    "completed": true
+  }
+]

examples/blogs__application-actions/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}