From 92b06a352c018932ebab7dc8027fd1b3b7f6625b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Tue, 11 Dec 2018 01:36:45 +0100
Subject: [PATCH] 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 :kissing_heart:
---
 pages/admin/categories.spec.js                | 67 +++++++++++++++++++
 pages/admin/categories.vue                    |  8 +++
 .../components/data-display/Table/Table.vue   |  4 ++
 3 files changed, 79 insertions(+)
 create mode 100644 pages/admin/categories.spec.js

diff --git a/pages/admin/categories.spec.js b/pages/admin/categories.spec.js
new file mode 100644
index 000000000..a3b44de0d
--- /dev/null
+++ b/pages/admin/categories.spec.js
@@ -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)
+    })
+  })
+})
diff --git a/pages/admin/categories.vue b/pages/admin/categories.vue
index e09db79c0..ddd5f72f8 100644
--- a/pages/admin/categories.vue
+++ b/pages/admin/categories.vue
@@ -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: []
diff --git a/styleguide/src/system/components/data-display/Table/Table.vue b/styleguide/src/system/components/data-display/Table/Table.vue
index 3d21532de..1d3a28d44 100644
--- a/styleguide/src/system/components/data-display/Table/Table.vue
+++ b/styleguide/src/system/components/data-display/Table/Table.vue
@@ -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 {