Merge pull request #71 from mb200/slots-example

#68 add example for slots and scoped slots

Author: afontcu

tests/__tests__/components/Card.vue

@@ -0,0 +1,22 @@
+<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>
+// 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>

tests/__tests__/slots.js

@@ -0,0 +1,32 @@
+import '@testing-library/jest-dom/extend-expect'
+import { render } from '@testing-library/vue'
+import Card from './components/Card'
+
+// 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().
+// For more, see: https://vue-test-utils.vuejs.org/api/options.html#slots
+test('Card component', () => {
+  const { getByText, queryByText } = render(Card, {
+    slots: {
+      header: '<h1>HEADER</h1>',
+      footer: '<div>FOOTER</div>'
+    },
+    scopedSlots: {
+      default: '<p>Yay! {{props.content}}</p>'
+    }
+  })
+
+  // The default slot should render the template above with the scoped prop "content".
+  getByText('Yay! Scoped content!')
+
+  // Instead of the default slot's fallback content.
+  expect(
+    queryByText('Nothing used the Scoped content!')
+  ).not.toBeInTheDocument()
+
+  // And the header and footer slots should be rendered with the given templates.
+  getByText('HEADER')
+  getByText('FOOTER')
+})