mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2025-12-13 07:45:56 +00:00
@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 😘
68 lines
1.2 KiB
JavaScript
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)
|
|
})
|
|
})
|
|
})
|