add more basic examples (#362)

Author: bahmutov

README.md

@@ -92,87 +92,10 @@ You can pass extensions (global components, mixins, modules to use)
 when mounting Vue component. Use `{ extensions: { ... }}` object inside
 the `options`.
 
-- `components` - object of 'id' and components to register globally.
-
-```js
-// two different components, each gets "numbers" list
-// into its property "messages"
-const template = `
-  <div>
-    <message-list :messages="numbers"/>
-    <a-list :messages="numbers"/>
-  </div>
-`
-// our top level data
-const data = () => ({ numbers: ['uno', 'dos'] })
-// register same component globally under different names
-const components = {
-  'message-list': MessageList,
-  'a-list': MessageList,
-}
-// extend Vue with global components
-const extensions = {
-  components,
-}
-beforeEach(mountCallback({ template, data }, { extensions }))
-```
-
-See [Vue component docs](https://vuejs.org/v2/api/#Vue-component),
-[global-components-spec.js](cypress/integration/global-components-spec.js)
-
-- `use` (alias `plugins`) - list of plugins
-
-```js
-const use = [MyPlugin]
-// extend Vue with plugins
-const extensions = {
-  use,
-}
-beforeEach(mountCallback({}, { extensions }))
-```
-
-See [Vue plugin docs](https://vuejs.org/v2/guide/plugins.html)
-and [plugin-spec.js](cypress/integration/plugin-spec.js)
-
-- `mixin` (alias `mixins`) - list of global mixins
-
-```js
-const MyMixin = {
-  // we have to use original Sinon to create a spy
-  // because we are outside a test function
-  // and cannot use "cy.spy"
-  created: Cypress.sinon.spy(),
-}
-const mixin = [MyMixin]
-// extend Vue with mixins
-const extensions = {
-  mixin,
-}
-beforeEach(mountCallback({}, { extensions }))
-
-it('calls mixin "created" method', () => {
-  expect(MyMixin.created).to.have.been.calledOnce
-})
-```
-
-See [Vue global mixin docs](https://vuejs.org/v2/guide/mixins.html#Global-Mixin)
-and [mixin-spec.js](cypress/integration/mixin-spec.js)
-
-- `filters` - hash of global filters
-
-```js
-const filters = {
-  reverse: (s) => s.split().reverse().join(),
-}
-// extend Vue with global filters
-const extensions = {
-  filters,
-}
-beforeEach(mountCallback({}, { extensions }))
-```
-
-See [Vue global filters docs](https://vuejs.org/v2/api/#Vue-filter)
-and [filters-spec.js](cypress/integration/filters-spec.js)
+- `components` - object of 'id' and components to register globally, see [Components](cypress/component/basic/components) example
+- `use` (alias `plugins`) - list of plugins, see [Plugins](cypress/component/basic/plugins)
+- `mixin` (alias `mixins`) - list of global mixins, see [Mixins](cypress/component/basic/mixins) example
+- `filters` - hash of global filters, see [Filters](cypress/component/basic/filters) example
 
 <a name="intro-example"/>
 
@@ -587,8 +510,12 @@ describe('HelloWorld component', () => {
 <!-- prettier-ignore-start -->
 Spec | Description
 --- | ---
+[Components](cypress/component/basic/components) | Registers global components to use
+[Filters](cypress/component/basic/filters) | Registering global filters
 [Hello](cypress/component/basic/hello) | Testing examples from Vue2 cookbook
+[Mixins](cypress/component/basic/mixins) | Registering Vue mixins
 [Plugins](cypress/component/basic/plugins) | Loading additional plugins
+[Props](cypress/component/basic/props) | Pass props to the component during mount
 <!-- prettier-ignore-end -->
 
 ### Advanced examples

cypress/component/basic/MessageList.vue

@@ -1,6 +1,6 @@
 <template>
   <ul>
-    <li v-for="message in messages">
+    <li v-for="(message, index) in messages" :key="index" >
       {{ message }}
     </li>
   </ul>

cypress/component/basic/components/README.md

@@ -0,0 +1,31 @@
+# global components
+
+During mounting, you can register other components, even fake ones. See [spec.js](spec.js)
+
+```js
+import MessageList from '../MessageList.vue'
+// two different components, each gets "numbers" list
+// into its property "messages"
+const template = `
+  <div>
+    <message-list :messages="numbers"/>
+    <a-list :messages="numbers"/>
+  </div>
+`
+// our top level data
+const data = () => ({ numbers: ['uno', 'dos'] })
+// register same component globally under different names
+const components = {
+  'message-list': MessageList,
+  'a-list': MessageList,
+}
+// extend Vue with global components
+const extensions = {
+  components,
+}
+beforeEach(mountCallback({ template, data }, { extensions }))
+```
+
+![Components spec](./images/components.png)
+
+See [Vue component docs](https://vuejs.org/v2/api/#Vue-component)

cypress/component/basic/components/images/components.png

@@ -1,10 +1,10 @@
-import MessageList from './MessageList.vue'
+/// <reference types="cypress" />
+import MessageList from '../MessageList.vue'
 import { mountCallback } from 'cypress-vue-unit-test'
 
 // common utils for MessageList
 const getItems = () => cy.get('ul li')
 
-/* eslint-env mocha */
 describe('Global components', () => {
   // two different components, each gets "numbers" list
   // into its property "messages"
@@ -34,6 +34,13 @@ describe('Global components', () => {
       // returns component constructor
       // so we can compare with our component's constructor (Ctor)
       .should('equal', MessageList._Ctor[0])
+
+    // second registered component "a-list" also points
+    // at the same component
+    cy.window()
+      .its('Vue')
+      .invoke('component', 'a-list')
+      .should('equal', MessageList._Ctor[0])
   })
 
   it('shows two items at the start in both lists', () => {

cypress/component/basic/global-components-spec.js renamed to cypress/component/basic/components/spec.js

@@ -0,0 +1,13 @@
+# filters
+
+You can register global Vue filters when mounting the component. See [spec.js](spec.js)
+
+```js
+mount(component, {
+  extensions: {
+    filters: { ... }
+  }
+})
+```
+
+Read [Vue global filters docs](https://vuejs.org/v2/api/#Vue-filter)

cypress/component/basic/filters/README.md

@@ -0,0 +1,6 @@
+/**
+ * Reverses a string
+ * @param {string} s String to reverse
+ * @returns {string} Reversed string
+ */
+export const reverse = (s) => s.split('').reverse().join('')

cypress/component/basic/filters/reverse.js

@@ -1,8 +1,10 @@
+/// <reference types="cypress" />
 import { mountCallback } from 'cypress-vue-unit-test'
+import { reverse } from './reverse'
 
 describe('Global filters', () => {
   const filters = {
-    reverse: (s) => s.split('').reverse().join(''),
+    reverse,
   }
 
   // use reverse filter in template
@@ -18,11 +20,14 @@ describe('Global filters', () => {
 
   it('registers global filter', () => {
     cy.wrap(window.Vue)
-      // cy.window().its('Vue')
       .invoke('filter', 'reverse')
       .should('equal', filters.reverse)
   })
 
+  it('unit tests the reverse function', () => {
+    expect(reverse('Hello')).to.equal('olleH')
+  })
+
   it('reverses the string', () => {
     cy.contains('rab-oof')
   })