Fix/add tests

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

@@ -18,10 +18,11 @@ const createPostWithCategoriesMutation = `
   mutation($title: String!, $content: String!, $categoryIds: [ID]) {
     CreatePost(title: $title, content: $content, categoryIds: $categoryIds) {
       id
+      title
     }
   }
 `
-const creatPostWithCategoriesVariables = {
+const createPostWithCategoriesVariables = {
   title: postTitle,
   content: postContent,
   categoryIds: ['cat9', 'cat4', 'cat15'],
@@ -41,19 +42,19 @@ const createPostWithoutCategoriesVariables = {
   categoryIds: null,
 }
 const postQueryFilteredByCategory = `
-  query($name: String) {
-    Post(filter: { categories_some: { name: $name } }) {
+query Post($filter: _PostFilter) {
+  Post(filter: $filter) {
       title
       id
       categories {
-        name
+        id
       }
     }
   }
 `
-const postCategoriesFilterParam = 'Environment & Nature'
+const postCategoriesFilterParam = { categories_some: { id_in: ['cat4'] } }
 const postQueryFilteredByCategoryVariables = {
-  name: postCategoriesFilterParam,
+  filter: postCategoriesFilterParam,
 }
 beforeEach(async () => {
   userParams = {
@@ -174,7 +175,7 @@ describe('CreatePost', () => {
         ])
         postWithCategories = await client.request(
           createPostWithCategoriesMutation,
-          creatPostWithCategoriesVariables,
+          createPostWithCategoriesVariables,
         )
       })
 
@@ -183,6 +184,7 @@ describe('CreatePost', () => {
         const postQueryWithCategoriesVariables = {
           id: postWithCategories.CreatePost.id,
         }
+
         await expect(
           client.request(postQueryWithCategories, postQueryWithCategoriesVariables),
         ).resolves.toEqual({ Post: [{ categories: expect.arrayContaining(expected) }] })
@@ -190,21 +192,16 @@ describe('CreatePost', () => {
 
       it('allows a user to filter for posts by category', async () => {
         await client.request(createPostWithCategoriesMutation, createPostWithoutCategoriesVariables)
-        const categoryNames = [
-          { name: 'Democracy & Politics' },
-          { name: 'Environment & Nature' },
-          { name: 'Consumption & Sustainability' },
-        ]
+        const categoryIds = [{ id: 'cat4' }, { id: 'cat15' }, { id: 'cat9' }]
         const expected = {
           Post: [
             {
               title: postTitle,
               id: postWithCategories.CreatePost.id,
-              categories: expect.arrayContaining(categoryNames),
+              categories: expect.arrayContaining(categoryIds),
             },
           ],
         }
-
         await expect(
           client.request(postQueryFilteredByCategory, postQueryFilteredByCategoryVariables),
         ).resolves.toEqual(expected)
@@ -306,7 +303,7 @@ describe('UpdatePost', () => {
         ])
         postWithCategories = await client.request(
           createPostWithCategoriesMutation,
-          creatPostWithCategoriesVariables,
+          createPostWithCategoriesVariables,
         )
         updatePostVariables = {
           id: postWithCategories.CreatePost.id,

webapp/components/FilterPosts/FilterPosts.spec.js

@@ -0,0 +1,114 @@
+import { mount, createLocalVue } from '@vue/test-utils'
+import FilterPosts from './FilterPosts.vue'
+import Styleguide from '@human-connection/styleguide'
+import VTooltip from 'v-tooltip'
+
+const localVue = createLocalVue()
+
+localVue.use(Styleguide)
+localVue.use(VTooltip)
+
+describe('FilterPosts.vue', () => {
+  let wrapper
+  let mocks
+  let propsData
+  let menuToggle
+  let allCategoriesButton
+  let environmentAndNatureButton
+  let consumptionAndSustainabiltyButton
+  let democracyAndPoliticsButton
+
+  beforeEach(() => {
+    mocks = {
+      $apollo: {
+        query: jest
+          .fn()
+          .mockResolvedValueOnce()
+          .mockRejectedValue({ message: 'We were unable to filter' }),
+      },
+      $t: jest.fn(),
+      $i18n: {
+        locale: () => 'en',
+      },
+      $toast: {
+        error: jest.fn(),
+      },
+    }
+    propsData = {
+      categories: [
+        { id: 'cat4', name: 'Environment & Nature', icon: 'tree' },
+        { id: 'cat15', name: 'Consumption & Sustainability', icon: 'shopping-cart' },
+        { id: 'cat9', name: 'Democracy & Politics', icon: 'university' },
+      ],
+    }
+  })
+
+  describe('mount', () => {
+    const Wrapper = () => {
+      return mount(FilterPosts, { mocks, localVue, propsData })
+    }
+
+    beforeEach(() => {
+      wrapper = Wrapper()
+      menuToggle = wrapper.findAll('a').at(0)
+      menuToggle.trigger('click')
+    })
+
+    it('groups the categories by pair', () => {
+      expect(wrapper.vm.chunk).toEqual([
+        [
+          { id: 'cat4', name: 'Environment & Nature', icon: 'tree' },
+          { id: 'cat15', name: 'Consumption & Sustainability', icon: 'shopping-cart' },
+        ],
+        [{ id: 'cat9', name: 'Democracy & Politics', icon: 'university' }],
+      ])
+    })
+
+    it('starts with all categories button active', () => {
+      allCategoriesButton = wrapper.findAll('button').at(0)
+      expect(allCategoriesButton.attributes().class).toContain('ds-button-primary')
+    })
+
+    it('adds a categories id to selectedCategoryIds when clicked', () => {
+      environmentAndNatureButton = wrapper.findAll('button').at(1)
+      environmentAndNatureButton.trigger('click')
+      expect(wrapper.vm.selectedCategoryIds).toEqual(['cat4'])
+    })
+
+    it('sets primary to true when the button is clicked', () => {
+      democracyAndPoliticsButton = wrapper.findAll('button').at(3)
+      democracyAndPoliticsButton.trigger('click')
+      expect(democracyAndPoliticsButton.attributes().class).toContain('ds-button-primary')
+    })
+
+    it('queries a post by its categories', () => {
+      consumptionAndSustainabiltyButton = wrapper.findAll('button').at(2)
+      consumptionAndSustainabiltyButton.trigger('click')
+      expect(mocks.$apollo.query).toHaveBeenCalledWith(
+        expect.objectContaining({
+          variables: {
+            filter: { categories_some: { id_in: ['cat15'] } },
+            first: expect.any(Number),
+            offset: expect.any(Number),
+          },
+        }),
+      )
+    })
+
+    it('supports a query of multiple categories', () => {
+      environmentAndNatureButton = wrapper.findAll('button').at(1)
+      environmentAndNatureButton.trigger('click')
+      consumptionAndSustainabiltyButton = wrapper.findAll('button').at(2)
+      consumptionAndSustainabiltyButton.trigger('click')
+      expect(mocks.$apollo.query).toHaveBeenCalledWith(
+        expect.objectContaining({
+          variables: {
+            filter: { categories_some: { id_in: ['cat4', 'cat15'] } },
+            first: expect.any(Number),
+            offset: expect.any(Number),
+          },
+        }),
+      )
+    })
+  })
+})

webapp/components/FilterPosts/FilterPosts.vue

@@ -235,9 +235,9 @@ export default {
     }),
     filterPosts(categoryIds) {
       const filter = categoryIds.length
-        ? { categories_in: { id_in: this.selectedCategoryIds } }
+        ? { categories_some: { id_in: this.selectedCategoryIds } }
         : {}
-      filter.categories_in ? (this.allCategories = false) : (this.allCategories = true)
+      filter.categories_some ? (this.allCategories = false) : (this.allCategories = true)
       this.$apollo
         .query({
           query: filterPosts(this.$i18n),