Add example from the blog post (#363)

Author: bahmutov

README.md

@@ -516,6 +516,7 @@ Spec | Description
 [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
+[Small examples](cypress/component/basic/small-examples) | A few small examples testing forms, buttons
 <!-- prettier-ignore-end -->
 
 ### Advanced examples
@@ -551,7 +552,12 @@ Repo | Description
 
 ## Known problems
 
-See issues labeled [v2](https://github.com/bahmutov/cypress-vue-unit-test/labels/v2)
+<details id="slots">
+  <summary>Slots not supported</summary>
+
+See issue [#364](https://github.com/bahmutov/cypress-vue-unit-test/issues/364)
+
+</details>
 
 <a name="bundling"/>
 

cypress/component/basic/small-examples/AppInput.spec.js

@@ -0,0 +1,24 @@
+/// <reference types="cypress" />
+
+import AppInput from './AppInput.vue'
+import { mount } from 'cypress-vue-unit-test'
+
+it('renders label', () => {
+  mount(AppInput, {
+    propsData: {
+      name: 'username',
+      inputId: 'username',
+    },
+    // passing slots to the component #364
+    slots: {
+      label: `<label for="username">Enter Username</label>`,
+    },
+  })
+
+  // input element is present
+  cy.get('input#username')
+
+  // Get input field by label text we passed as slot
+  // enable once #364 is working
+  // cy.contains('label', 'Enter Username')
+})

cypress/component/basic/small-examples/AppInput.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <slot name="label"></slot>
+    <input type="text" :name="name" :id="inputId" />
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    name: {
+      required: true,
+      type: String,
+    },
+    inputId: {
+      required: true,
+      type: String,
+    },
+  },
+};
+</script>

cypress/component/basic/small-examples/Counter.spec.js

@@ -0,0 +1,32 @@
+/// <reference types="cypress" />
+
+import Counter from './Counter.vue'
+import { mount } from 'cypress-vue-unit-test'
+
+describe('Counter', () => {
+  it('renders correctly', () => {
+    mount(Counter)
+    cy.contains('Count: 0')
+  })
+
+  it('correctly responds to button clicks', () => {
+    mount(Counter)
+    cy.contains('Count: 0')
+
+    // save button aliases
+    cy.contains('button', 'Add').as('add')
+    cy.contains('button', 'Subtract').as('subtract')
+
+    cy.get('@add').click()
+    cy.contains('Count: 1')
+
+    cy.get('@subtract').click()
+    cy.contains('Count: 0')
+
+    cy.get('@add').click().click().click().click()
+    cy.contains('Count: 4')
+
+    cy.get('@subtract').click().click()
+    cy.contains('Count: 2')
+  })
+})

cypress/component/basic/small-examples/Counter.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <h3>Count: {{ counter }}</h3>
+    <div class="button-container">
+      <button @click="increment">Add</button>
+      <button @click="decrement">Subtract</button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Counter',
+  data() {
+    return {
+      counter: 0,
+    };
+  },
+  methods: {
+    increment() {
+      this.counter++;
+    },
+    decrement() {
+      this.counter--;
+    },
+  },
+};
+</script>

cypress/component/basic/small-examples/Form.spec.js

@@ -0,0 +1,33 @@
+/// <reference types="cypress" />
+
+import Form from './Form.vue'
+import { mount } from 'cypress-vue-unit-test'
+
+describe('Form', () => {
+  const getByLabelText = (text) => {
+    return cy
+      .contains('label', text)
+      .invoke('attr', 'for')
+      .then((id) => {
+        return cy.get('input#' + id)
+      })
+  }
+  it('User can type and see output on the screen', () => {
+    mount(Form)
+    // save references to input fields
+    getByLabelText('Name').as('name')
+    getByLabelText('Email').as('email')
+    cy.contains('Submit').as('submit')
+
+    // initially the submit button is disabled
+    cy.get('@submit').should('be.disabled')
+
+    // Update the name field.
+    cy.get('@name').type('James John')
+    cy.get('@submit').should('be.disabled')
+
+    // Add email.
+    cy.get('@email').type('james@example.com')
+    cy.get('@submit').should('not.be.disabled')
+  })
+})

cypress/component/basic/small-examples/Form.vue

@@ -0,0 +1,26 @@
+<template>
+  <form action="">
+    <label for="name">Name</label>
+    <input type="text" name="name" id="name" v-model="name" />
+    <label for="email">Email</label>
+    <input type="email" name="email" id="email" v-model="email" />
+    <button type="submit" :disabled="!hasValidFields">Submit</button>
+  </form>
+</template>
+<script>
+export default {
+  name: 'AppForm',
+  data() {
+    return {
+      name: '',
+      email: '',
+    };
+  },
+  computed: {
+    hasValidFields() {
+      return Boolean(this.email && this.name);
+    },
+  },
+};
+</script>
+<style></style>

cypress/component/basic/small-examples/README.md

@@ -0,0 +1,17 @@
+# Small examples
+
+These examples come from the blog post [Testing Vue components with Vue Testing Library](https://blog.logrocket.com/testing-vue-components-with-vue-testing-library/) and the tests are written using `cypress-vue-unit-test`.
+
+Tests for [Counter.vue](Counter.vue) are in [Counter.spec.js](Counter.spec.js)
+
+![Counter spec](images/counter.png)
+
+Tests for [Repeater.vue](Repeater.vue) are in [Repeater.spec.js](Repeater.spec.js)
+
+![Repeater spec](images/repeater.png)
+
+Tests for [Form.vue](Form.vue) are in [Form.spec.js](Form.spec.js)
+
+![Form spec](images/form.gif)
+
+Tests for [AppInput.vue](AppInput.vue) in [AppInput.spec.js](AppInput.spec.js) show how to pass a `slot` template to a component while mounting it.

cypress/component/basic/small-examples/Repeater.spec.js

@@ -0,0 +1,12 @@
+/// <reference types="cypress" />
+
+import Repeater from './Repeater.vue'
+import { mount } from 'cypress-vue-unit-test'
+
+describe('Repeater', () => {
+  it('User can type and see output on the screen', () => {
+    mount(Repeater)
+    cy.get('#item').type('Cypress')
+    cy.contains('You typed: Cypress')
+  })
+})

cypress/component/basic/small-examples/Repeater.vue

@@ -0,0 +1,17 @@
+<template>
+  <section>
+    <label for="item">Start Typing</label>
+    <input type="text" v-model="item" id="item" />
+    <div>You typed: {{ item }}</div>
+  </section>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      item: '',
+    };
+  },
+};
+</script>
+<style></style>