add full slots and scopedSlots test

Author: bahmutov

README.md

@@ -216,7 +216,7 @@ describe('Declarative rendering', () => {
         { text: 'Learn JavaScript' },
         { text: 'Learn Vue' },
         { text: 'Build something awesome' },
-       ],
+      ],
     }
   }
 
@@ -518,6 +518,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
+[Slots](cypress/component/basic/slots) | Passing slots and scopedSlots to the component
 [Small examples](cypress/component/basic/small-examples) | A few small examples testing forms, buttons
 <!-- prettier-ignore-end -->
 
@@ -554,13 +555,6 @@ Repo | Description
 
 ## Known problems
 
-<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"/>
 
 ## Bundling

cypress/component/basic/slots/Card.spec.js

@@ -0,0 +1,37 @@
+// In this test file we demo how to test a component with slots and a scoped slot.
+
+// Usage is the same as Vue Test Utils, since slots and scopedSlots
+// in the render options are directly passed through to the Utils mount().
+
+/// <reference types="cypress" />
+
+import Card from './Card.vue'
+import { mount } from 'cypress-vue-unit-test'
+
+describe('Card', () => {
+  it('skipped slots', () => {
+    mount(Card)
+    cy.contains('Nothing used the Scoped content!').should('be.visible')
+  })
+
+  it('renders slots', () => {
+    mount(Card, {
+      slots: {
+        header: '<h1>HEADER</h1>',
+        footer: '<div>FOOTER</div>',
+      },
+    })
+    cy.contains('h1', 'HEADER')
+    cy.contains('div', 'FOOTER')
+  })
+
+  it('renders scopedSlots', () => {
+    mount(Card, {
+      scopedSlots: {
+        default: '<p>Yay! {{props.content}}</p>',
+      },
+    })
+    cy.contains('Yay! Scoped content!').should('be.visible')
+    cy.contains('Nothing used the Scoped content!').should('not.exist')
+  })
+})

cypress/component/basic/slots/Card.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="card">
+    <slot name="header" />
+    <slot :content="content">
+      <!-- Fallback content if no default slot is given -->
+      <p>Nothing used the {{ content }}</p>
+    </slot>
+    <slot name="footer" />
+  </div>
+</template>
+
+<script>
+// example from https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/components/Card.vue
+// For the sake of demoing scopedSlots, this Card component
+// passes a simple string down to its default slot.
+export default {
+  data() {
+    return {
+      content: 'Scoped content!'
+    }
+  }
+}
+</script>

cypress/component/basic/slots/README.md

@@ -0,0 +1,8 @@
+# Slots
+
+Testing [Vue slots and scopedSlots](https://vue-test-utils.vuejs.org/api/options.html#slots).
+The example taken from [Vue testing library](https://github.com/testing-library/vue-testing-library)
+
+See [Card.vue](Card.vue) and [Card.spec.js](Card.spec.js)
+
+![Slots test](images/slots.png)