add README to testing-dom examples (#259)

* WIP: add README to testing-dom examples

* add README to testing-dom__drag-drop

* add readme to testing-dom__form-interactions

* add readme to testing-dom__hover-hidden-elements

* add readme to testing-dom__tab-handling-links

Author: bahmutov

examples/testing-dom__drag-drop/README.md

@@ -0,0 +1,10 @@
+# drag-n-drop
+
+> Performing Drag & Drop by triggering mouse and drag events
+
+See test file [cypress/integration/drag_n_drop_spec.js](cypress/integration/drag_n_drop_spec.js) that shows how to simulate drag & drop behavior using
+
+- mouse events
+- drag events
+
+In both cases, the tests use [`cy.trigger`](https://on.cypress.io/trigger) command.

examples/testing-dom__drag-drop/cypress/plugins/index.js

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

examples/testing-dom__drag-drop/package.json

@@ -1,10 +1,11 @@
 {
   "name": "drag-n-drop",
   "version": "1.0.0",
-  "description": "",
+  "description": "Performing Drag & Drop by triggering mouse and drag events",
   "scripts": {
     "cypress:run": "../../node_modules/.bin/cypress run",
     "cypress:open": "../../node_modules/.bin/cypress open",
-    "start": "node server.js --port 7071"
+    "start": "node server.js --port 7071",
+    "dev": "../../node_modules/.bin/start-test http://localhost:7071/puzzle.html cypress:open"
   }
 }

examples/testing-dom__form-interactions/README.md

@@ -0,0 +1,12 @@
+# form-interactions
+
+> Shows how to change the value of a range input
+
+The test triggers `change` event on an `<input name="range-input" type="range" value="0" />` form element and asserts the value does get changed.
+
+![range input](images/range-input.png)
+
+## See
+
+- [cypress/integration/form-interactions-spec.js](cypress/integration/form-interactions-spec.js)
+- [`cy.trigger`](https://on.cypress.io/trigger)

examples/testing-dom__form-interactions/images/range-input.png

@@ -1,10 +1,11 @@
 {
   "name": "form-interactions",
   "version": "1.0.0",
-  "description": "",
+  "description": "Shows how to change the value of a range input",
   "scripts": {
     "cypress:run": "../../node_modules/.bin/cypress run",
     "cypress:open": "../../node_modules/.bin/cypress open",
-    "start": "node server.js --port 7072"
+    "start": "node server.js --port 7072",
+    "dev": "../../node_modules/.bin/start-test 7072 cypress:open"
   }
 }

examples/testing-dom__form-interactions/package.json

@@ -0,0 +1,10 @@
+# hover-hidden-elements
+> Interact with elements that are hidden by CSS
+
+
+See [cypress/integration/hover-hidden-elements-spec.js](cypress/integration/hover-hidden-elements-spec.js) to find how to get the lack if `.hover()` command.
+
+- Use [`.invoke()`](https://on.cypress.io/invoke) and [`.trigger()`](https://on.cypress.io/trigger) to simulate hovering.
+- Trigger `mouseover`, `mouseout`, `mouseenter`, `mouseleave` events.
+
+![Test runner](images/hidden.png)

examples/testing-dom__hover-hidden-elements/README.md

@@ -1,13 +1,14 @@
 {
   "name": "hover-hidden-elements",
   "version": "1.0.0",
-  "description": "",
+  "description": "Interact with elements that are hidden by CSS",
   "scripts": {
     "cypress:run": "../../node_modules/.bin/cypress run",
     "cypress:run:chrome": "../../node_modules/.bin/cypress run --browser chrome",
     "cypress:open": "../../node_modules/.bin/cypress open",
     "start": "node server.js --port 7073",
     "test:ci": "../../node_modules/.bin/start-test 7073 cypress:run",
-    "test:ci:chrome": "../../node_modules/.bin/start-test 7073 cypress:run:chrome"
+    "test:ci:chrome": "../../node_modules/.bin/start-test 7073 cypress:run:chrome",
+    "dev": "../../node_modules/.bin/start-test 7073 cypress:open"
   }
 }

examples/testing-dom__hover-hidden-elements/images/hidden.png

@@ -0,0 +1,10 @@
+# tab-handling-anchor-links
+> How to get around lack of multiple tabs in Cypress
+
+Read [Trade-offs - Multiple tabs](http://on.cypress.io/trade-offs#Multiple-tabs), and see [cypress/integration/tab_handling_anchor_links_spec.js](cypress/integration/tab_handling_anchor_links_spec.js) how to:
+
+- Test anchor links opening in new tabs: `<a target="_blank">`.
+- Test anchor links that link to external domains: `<a href="...">`.
+- Prevent content from opening in a new tab.
+- Request external content that would open in a new tab using [`cy.request()`](https://on.cypress.io/request).
+- Speed up tests by reducing loading times.

examples/testing-dom__hover-hidden-elements/package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "cypress:run": "../../node_modules/.bin/cypress run",
     "cypress:open": "../../node_modules/.bin/cypress open",
-    "start": "node server.js --port 7078"
+    "start": "node server.js --port 7078",
+    "dev": "../../node_modules/.bin/start-test 7078 cypress:open"
   }
 }