Refactor resolver, write component tests

- use UNWIND instead of iterating over categories(cypher magic)
- do not return nested categories on post creation as it's expensive and we don't use
- refactor backend test
- component tests for CategoriesSelect

backend/src/schema/resolvers/posts.js

@@ -10,8 +10,9 @@ export default {
 
     CreatePost: async (object, params, context, resolveInfo) => {
       const { categories } = params
+      let post
       params = await fileUpload(params, { file: 'imageUpload', url: 'image' })
-      let post = await neo4jgraphql(object, params, context, resolveInfo, false)
+      post = await neo4jgraphql(object, params, context, resolveInfo, false)
 
       const session = context.driver.session()
       await session.run(
@@ -24,42 +25,17 @@ export default {
         },
       )
       if (categories && categories.length) {
-        let postsCategoriesArray = []
-        await Promise.all(
-          categories.map(async categoryId => {
-            let postsCategoriesTransaction = await session.run(
-              `MATCH (category:Category { id: $categoryId}), (post:Post {id: $postId})
-              MERGE (post)-[:CATEGORIZED]->(category)
-              RETURN category
-              `,
-              {
-                categoryId,
-                postId: post.id,
-              },
-            )
-            postsCategoriesArray.push(postsCategoriesTransaction)
-          }),
+        await session.run(
+          `MATCH (post:Post {id: $postId})
+          UNWIND $categories AS categoryId
+          MATCH (category:Category {id: categoryId})
+          MERGE (post)-[:CATEGORIZED]->(category)
+          RETURN category`,
+          {
+            categories,
+            postId: post.id,
+          },
         )
-        let categoryArray = []
-        postsCategoriesArray.map(categoryRecord => {
-          let [category] = categoryRecord.records.map(record => {
-            return {
-              category: record.get('category'),
-            }
-          })
-          categoryArray.push(category)
-        })
-        let categoriesPropertiesArray = []
-        categoryArray.map(node => {
-          let { category } = node
-          let categories = { ...category.properties }
-          categoriesPropertiesArray.push(categories)
-        })
-
-        post = {
-          ...post,
-          categories: categoriesPropertiesArray,
-        }
       }
       session.close()
       return post

backend/src/schema/resolvers/posts.spec.js

@@ -120,25 +120,47 @@ describe('CreatePost', () => {
         const createPostWithCategoriesMutation = `
           mutation($title: String!, $content: String!, $categories: [ID]) {
             CreatePost(title: $title, content: $content, categories: $categories) {
+              id
               categories {
                 id
               }
             }
           }
         `
-        const postCategories = ['cat9', 'cat4', 'cat15']
         const creatPostWithCategoriesVariables = {
           title: postTitle,
           content: postContent,
-          categories: postCategories,
+          categories: ['cat9', 'cat4', 'cat15'],
         }
+        const postQueryWithCategories = `
+          query($id: ID) {
+            Post(id: $id) {
+              categories {
+                id
+              }
+            }
+          }
+        `
         const expected = {
-          CreatePost: {
-            categories: [{ id: 'cat9' }, { id: 'cat4' }, { id: 'cat15' }],
-          },
+          Post: [
+            {
+              categories: [
+                { id: expect.any(String) },
+                { id: expect.any(String) },
+                { id: expect.any(String) },
+              ],
+            },
+          ],
+        }
+        const postWithCategories = await client.request(
+          createPostWithCategoriesMutation,
+          creatPostWithCategoriesVariables,
+        )
+        const postQueryWithCategoriesVariables = {
+          id: postWithCategories.CreatePost.id,
         }
         await expect(
-          client.request(createPostWithCategoriesMutation, creatPostWithCategoriesVariables),
+          client.request(postQueryWithCategories, postQueryWithCategoriesVariables),
         ).resolves.toEqual(expect.objectContaining(expected))
       })
     })

webapp/components/CategoriesSelect/CategoriesSelect.spec.js

@@ -0,0 +1,108 @@
+import { mount, createLocalVue } from '@vue/test-utils'
+import CategoriesSelect from './CategoriesSelect'
+import Styleguide from '@human-connection/styleguide'
+
+const localVue = createLocalVue()
+localVue.use(Styleguide)
+
+describe('CategoriesSelect.vue', () => {
+  let wrapper
+  let mocks
+  let democracyAndPolitics
+  let environmentAndNature
+  let consumptionAndSustainablity
+
+  const categories = [
+    {
+      id: 'cat9',
+      name: 'Democracy & Politics',
+      icon: 'university',
+    },
+    {
+      id: 'cat4',
+      name: 'Environment & Nature',
+      icon: 'tree',
+    },
+    {
+      id: 'cat15',
+      name: 'Consumption & Sustainability',
+      icon: 'shopping-cart',
+    },
+    {
+      name: 'Cooperation & Development',
+      icon: 'users',
+      id: 'cat8',
+    },
+  ]
+  beforeEach(() => {
+    mocks = {
+      $t: jest.fn(),
+    }
+  })
+
+  describe('shallowMount', () => {
+    const Wrapper = () => {
+      return mount(CategoriesSelect, { mocks, localVue })
+    }
+
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    describe('toggleCategory', () => {
+      beforeEach(() => {
+        wrapper.vm.categories = categories
+        democracyAndPolitics = wrapper.findAll('button').at(0)
+        democracyAndPolitics.trigger('click')
+      })
+
+      it('adds categories to selectedCategoryIds when clicked', () => {
+        expect(wrapper.vm.selectedCategoryIds).toEqual([categories[0].id])
+      })
+
+      it('emits an updateCategories event when the selectedCategoryIds changes', () => {
+        expect(wrapper.emitted().updateCategories[0][0]).toEqual([categories[0].id])
+      })
+
+      it('removes categories when clicked a second time', () => {
+        democracyAndPolitics.trigger('click')
+        expect(wrapper.vm.selectedCategoryIds).toEqual([])
+      })
+
+      it('changes the selectedCount when selectedCategoryIds is updated', () => {
+        expect(wrapper.vm.selectedCount).toEqual(1)
+        democracyAndPolitics.trigger('click')
+        expect(wrapper.vm.selectedCount).toEqual(0)
+      })
+
+      it('sets a category to active when it has been selected', () => {
+        expect(wrapper.vm.isActive(categories[0].id)).toEqual(true)
+      })
+
+      describe('maximum', () => {
+        beforeEach(() => {
+          environmentAndNature = wrapper.findAll('button').at(1)
+          consumptionAndSustainablity = wrapper.findAll('button').at(2)
+          environmentAndNature.trigger('click')
+          consumptionAndSustainablity.trigger('click')
+        })
+
+        it('allows three categories to be selected', () => {
+          expect(wrapper.vm.selectedCategoryIds).toEqual([
+            categories[0].id,
+            categories[1].id,
+            categories[2].id,
+          ])
+        })
+
+        it('sets reachedMaximum to true after three', () => {
+          expect(wrapper.vm.reachedMaximum).toEqual(true)
+        })
+
+        it('sets other categories to disabled after three', () => {
+          expect(wrapper.vm.isDisabled(categories[3].id)).toEqual(true)
+        })
+      })
+    })
+  })
+})