Ocelot-Social/pages/admin/categories.spec.js
Robert Schäfer 92b06a352c 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 😘
2018-12-11 01:36:45 +01:00

68 lines
1.2 KiB
JavaScript

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)
})
})
})