From 0d4617399b9addc6206eb15bfee3537814751170 Mon Sep 17 00:00:00 2001 From: Matt Rider Date: Tue, 9 Jul 2019 18:29:31 -0300 Subject: [PATCH] Fix/add tests --- backend/src/schema/resolvers/posts.spec.js | 27 ++--- .../FilterPosts/FilterPosts.spec.js | 114 ++++++++++++++++++ webapp/components/FilterPosts/FilterPosts.vue | 4 +- 3 files changed, 128 insertions(+), 17 deletions(-) create mode 100644 webapp/components/FilterPosts/FilterPosts.spec.js diff --git a/backend/src/schema/resolvers/posts.spec.js b/backend/src/schema/resolvers/posts.spec.js index 46a2912a8..233be450a 100644 --- a/backend/src/schema/resolvers/posts.spec.js +++ b/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, diff --git a/webapp/components/FilterPosts/FilterPosts.spec.js b/webapp/components/FilterPosts/FilterPosts.spec.js new file mode 100644 index 000000000..bbeeeee52 --- /dev/null +++ b/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), + }, + }), + ) + }) + }) +}) diff --git a/webapp/components/FilterPosts/FilterPosts.vue b/webapp/components/FilterPosts/FilterPosts.vue index 526736d95..01073b834 100644 --- a/webapp/components/FilterPosts/FilterPosts.vue +++ b/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),