Try write a component test for categories page

@visualjerk could you help us out on this PR? I'm trying to get rid of
this error:
```
Unknown custom element: <ds-table> - did you register the component
correctly? For recursive components, make sure to provide the "name"
option.
```
How do we tell @vue/test-utils to stub globally registered components?

Second, I don't understand why the resulting html() of the categories
components looks so odd:

```
<h1 class="ds-heading ds-heading-h1" space="small" categories="[object Object],[object Object],[object Object],[object Object],[object Object]">
<h3 class="ds-card"><!----> <!----> <!----> <div class="ds-card-content">
  Themen / Kategorien
</div> <!----></h3> <ds-table data="" fields="icon,name,postCount" condensed=""></ds-table></h1>
```
Why on earth does the categories array end up in the `categories`
property of `ds-heading` component?

@visualjerk and @appinteractive have a look, please 😘
This commit is contained in:
Robert Schäfer 2018-12-11 01:36:45 +01:00
parent 809a250f1f
commit 92b06a352c
3 changed files with 79 additions and 0 deletions

View File

@ -0,0 +1,67 @@
import { shallowMount, mount } from '@vue/test-utils'
import Categories from './categories.vue'
const someCategories = [
{
id: 'cat1',
name: 'Just For Fun',
slug: 'justforfun',
icon: 'smile',
postCount: 5
},
{
id: 'cat2',
name: 'Happyness & Values',
slug: 'happyness-values',
icon: 'heart-o',
postCount: 2
},
{
id: 'cat3',
name: 'Health & Wellbeing',
slug: 'health-wellbeing',
icon: 'medkit',
postCount: 1
},
{
id: 'cat4',
name: 'Environment & Nature',
slug: 'environment-nature',
icon: 'tree',
postCount: 1
},
{
id: 'cat5',
name: 'Animal Protection',
slug: 'animalprotection',
icon: 'paw',
postCount: 1
}
]
describe('Categories.vue', () => {
let wrapper
beforeEach(() => {
wrapper = mount(Categories, {})
})
it('renders', () => {
expect(wrapper.is('div')).toBe(true)
})
describe('given some categories', () => {
beforeEach(() => {
wrapper = mount(Categories, {
propsData: {
Categories: someCategories
}
})
})
it('renders a row for each category', () => {
console.log(wrapper.html())
expect(wrapper.findAll('tr')).toHaveLength(5)
})
})
})

View File

@ -20,8 +20,16 @@
<script>
import gql from 'graphql-tag'
import DsCard from '@@/components/typography/Heading/Heading.vue'
import DsHeading from '@@/components/layout/Card/Card.vue'
import DsTable from '@@/components/data-display/Table/Table.vue'
export default {
components: {
'ds-card': DsCard,
'ds-heading': DsHeading,
'ds-table': DsTable
},
data() {
return {
Category: []

View File

@ -49,12 +49,16 @@
<script>
import startCase from 'lodash/startCase'
import DsTableHeadCol from './TableHeadCol.vue'
/**
* Used in combination with the table row to create data tables.
* @version 1.0.0
*/
export default {
components: {
'ds-table-head-col': DsTableHeadCol
},
name: 'DsTable',
provide() {
return {