From 52dcd772fa81e02a0d95e89a9fc8232e70a09d28 Mon Sep 17 00:00:00 2001 From: ogerly Date: Fri, 28 Oct 2022 14:24:57 +0200 Subject: [PATCH] comment out LanguagesFilter, EmotionsFilter, fix tests, fix lint --- .../FilterMenu/EmotionsFilter.spec.js | 113 +++++++++------- .../components/FilterMenu/EmotionsFilter.vue | 74 ++++++----- .../FilterMenu/LanguagesFilter.spec.js | 125 ++++++++++-------- .../components/FilterMenu/LanguagesFilter.vue | 63 ++++----- 4 files changed, 205 insertions(+), 170 deletions(-) diff --git a/webapp/components/FilterMenu/EmotionsFilter.spec.js b/webapp/components/FilterMenu/EmotionsFilter.spec.js index fb5b17dac..f854c182b 100644 --- a/webapp/components/FilterMenu/EmotionsFilter.spec.js +++ b/webapp/components/FilterMenu/EmotionsFilter.spec.js @@ -1,64 +1,79 @@ import { mount } from '@vue/test-utils' -import Vuex from 'vuex' +// import Vuex from 'vuex' import EmotionsFilter from './EmotionsFilter' const localVue = global.localVue -let wrapper, happyEmotionButton - -describe('EmotionsFilter', () => { - const mutations = { - 'posts/TOGGLE_EMOTION': jest.fn(), - 'posts/RESET_EMOTIONS': jest.fn(), - } - const getters = { - 'posts/filteredByEmotions': jest.fn(() => []), - } - - const mocks = { - $t: jest.fn((string) => string), - } +// let wrapper, happyEmotionButton +describe('mount', () => { + let wrapper const Wrapper = () => { - const store = new Vuex.Store({ mutations, getters }) - return mount(EmotionsFilter, { mocks, localVue, store }) + return mount(EmotionsFilter, { localVue }) } beforeEach(() => { wrapper = Wrapper() }) - describe('mount', () => { - it('starts with all emotions button active', () => { - const allEmotionsButton = wrapper.find('.emotions-filter .sidebar .base-button') - expect(allEmotionsButton.attributes().class).toContain('--filled') - }) - - describe('click on an "emotion-button" button', () => { - it('calls TOGGLE_EMOTION when clicked', () => { - const wrapper = Wrapper() - happyEmotionButton = wrapper.findAll('.emotion-button > .base-button').at(1) - happyEmotionButton.trigger('click') - expect(mutations['posts/TOGGLE_EMOTION']).toHaveBeenCalledWith({}, 'happy') - }) - - it('sets the attribute `src` to colorized image', () => { - getters['posts/filteredByEmotions'] = jest.fn(() => ['happy']) - const wrapper = Wrapper() - happyEmotionButton = wrapper.findAll('.emotion-button > .base-button').at(1) - const happyEmotionButtonImage = happyEmotionButton.find('img') - expect(happyEmotionButtonImage.attributes().src).toEqual('/img/svg/emoji/happy_color.svg') - }) - }) - - describe('clears filter', () => { - it('when all button is clicked', async () => { - getters['posts/filteredByEmotions'] = jest.fn(() => ['happy']) - wrapper = await Wrapper() - const allEmotionsButton = wrapper.find('.emotions-filter .sidebar .base-button') - allEmotionsButton.trigger('click') - expect(mutations['posts/RESET_EMOTIONS']).toHaveBeenCalledTimes(1) - }) - }) + it('renders button DIV', () => { + expect(wrapper.find('div').exists()).toBe(true) }) }) + +// describe('EmotionsFilter', () => { +// const mutations = { +// 'posts/TOGGLE_EMOTION': jest.fn(), +// 'posts/RESET_EMOTIONS': jest.fn(), +// } +// const getters = { +// 'posts/filteredByEmotions': jest.fn(() => []), +// } + +// const mocks = { +// $t: jest.fn((string) => string), +// } + +// const Wrapper = () => { +// const store = new Vuex.Store({ mutations, getters }) +// return mount(EmotionsFilter, { mocks, localVue, store }) +// } + +// beforeEach(() => { +// wrapper = Wrapper() +// }) + +// describe('mount', () => { +// it('starts with all emotions button active', () => { +// const allEmotionsButton = wrapper.find('.emotions-filter .sidebar .base-button') +// expect(allEmotionsButton.attributes().class).toContain('--filled') +// }) + +// describe('click on an "emotion-button" button', () => { +// it('calls TOGGLE_EMOTION when clicked', () => { +// const wrapper = Wrapper() +// happyEmotionButton = wrapper.findAll('.emotion-button > .base-button').at(1) +// happyEmotionButton.trigger('click') +// expect(mutations['posts/TOGGLE_EMOTION']).toHaveBeenCalledWith({}, 'happy') +// }) + +// it('sets the attribute `src` to colorized image', () => { +// getters['posts/filteredByEmotions'] = jest.fn(() => ['happy']) +// const wrapper = Wrapper() +// happyEmotionButton = wrapper.findAll('.emotion-button > .base-button').at(1) +// const happyEmotionButtonImage = happyEmotionButton.find('img') +// expect(happyEmotionButtonImage.attributes().src).toEqual('/img/svg/emoji/happy_color.svg') +// }) +// }) + +// describe('clears filter', () => { +// it('when all button is clicked', async () => { +// getters['posts/filteredByEmotions'] = jest.fn(() => ['happy']) +// wrapper = await Wrapper() +// const allEmotionsButton = wrapper.find('.emotions-filter .sidebar .base-button') +// allEmotionsButton.trigger('click') +// expect(mutations['posts/RESET_EMOTIONS']).toHaveBeenCalledTimes(1) +// }) +// }) +// }) +// }) diff --git a/webapp/components/FilterMenu/EmotionsFilter.vue b/webapp/components/FilterMenu/EmotionsFilter.vue index 491dd57a8..802eaeb57 100644 --- a/webapp/components/FilterMenu/EmotionsFilter.vue +++ b/webapp/components/FilterMenu/EmotionsFilter.vue @@ -1,5 +1,6 @@ diff --git a/webapp/components/FilterMenu/LanguagesFilter.spec.js b/webapp/components/FilterMenu/LanguagesFilter.spec.js index d7998ce8f..41fc72ccd 100644 --- a/webapp/components/FilterMenu/LanguagesFilter.spec.js +++ b/webapp/components/FilterMenu/LanguagesFilter.spec.js @@ -1,70 +1,85 @@ import { mount } from '@vue/test-utils' -import Vuex from 'vuex' -import locales from '~/locales' -import orderBy from 'lodash/orderBy' +// import Vuex from 'vuex' +// import locales from '~/locales' +// import orderBy from 'lodash/orderBy' import LanguagesFilter from './LanguagesFilter' const localVue = global.localVue -let wrapper, englishButton, spanishButton +// let wrapper, englishButton, spanishButton -const languages = orderBy(locales, 'name') - -describe('LanguagesFilter.vue', () => { - const mutations = { - 'posts/TOGGLE_LANGUAGE': jest.fn(), - 'posts/RESET_LANGUAGES': jest.fn(), - } - const getters = { - 'posts/filteredLanguageCodes': jest.fn(() => []), - } - - const mocks = { - $t: jest.fn((string) => string), - } +// const languages = orderBy(locales, 'name') +describe('mount', () => { + let wrapper const Wrapper = () => { - const store = new Vuex.Store({ mutations, getters }) - return mount(LanguagesFilter, { mocks, localVue, store }) + return mount(LanguagesFilter, { localVue }) } beforeEach(() => { wrapper = Wrapper() }) - describe('mount', () => { - it('starts with all categories button active', () => { - const allLanguagesButton = wrapper.find('.languages-filter .sidebar .base-button') - expect(allLanguagesButton.attributes().class).toContain('--filled') - }) - - it('sets language button attribute `filled` when corresponding language is filtered', () => { - getters['posts/filteredLanguageCodes'] = jest.fn(() => ['es']) - const wrapper = Wrapper() - spanishButton = wrapper - .findAll('.languages-filter .item .base-button') - .at(languages.findIndex((l) => l.code === 'es')) - expect(spanishButton.attributes().class).toContain('--filled') - }) - - describe('click on an "language-button" button', () => { - it('calls TOGGLE_LANGUAGE when clicked', () => { - const wrapper = Wrapper() - englishButton = wrapper - .findAll('.languages-filter .item .base-button') - .at(languages.findIndex((l) => l.code === 'en')) - englishButton.trigger('click') - expect(mutations['posts/TOGGLE_LANGUAGE']).toHaveBeenCalledWith({}, 'en') - }) - }) - - describe('clears filter', () => { - it('when all button is clicked', async () => { - getters['posts/filteredLanguageCodes'] = jest.fn(() => ['en']) - wrapper = await Wrapper() - const allLanguagesButton = wrapper.find('.languages-filter .sidebar .base-button') - allLanguagesButton.trigger('click') - expect(mutations['posts/RESET_LANGUAGES']).toHaveBeenCalledTimes(1) - }) - }) + it('renders button DIV', () => { + expect(wrapper.find('div').exists()).toBe(true) }) }) + +// describe('LanguagesFilter.vue', () => { +// const mutations = { +// 'posts/TOGGLE_LANGUAGE': jest.fn(), +// 'posts/RESET_LANGUAGES': jest.fn(), +// } +// const getters = { +// 'posts/filteredLanguageCodes': jest.fn(() => []), +// } + +// const mocks = { +// $t: jest.fn((string) => string), +// } + +// const Wrapper = () => { +// const store = new Vuex.Store({ mutations, getters }) +// return mount(LanguagesFilter, { mocks, localVue, store }) +// } + +// beforeEach(() => { +// wrapper = Wrapper() +// }) + +// describe('mount', () => { +// it('starts with all categories button active', () => { +// const allLanguagesButton = wrapper.find('.languages-filter .sidebar .base-button') +// expect(allLanguagesButton.attributes().class).toContain('--filled') +// }) + +// it('sets language button attribute `filled` when corresponding language is filtered', () => { +// getters['posts/filteredLanguageCodes'] = jest.fn(() => ['es']) +// const wrapper = Wrapper() +// spanishButton = wrapper +// .findAll('.languages-filter .item .base-button') +// .at(languages.findIndex((l) => l.code === 'es')) +// expect(spanishButton.attributes().class).toContain('--filled') +// }) + +// describe('click on an "language-button" button', () => { +// it('calls TOGGLE_LANGUAGE when clicked', () => { +// const wrapper = Wrapper() +// englishButton = wrapper +// .findAll('.languages-filter .item .base-button') +// .at(languages.findIndex((l) => l.code === 'en')) +// englishButton.trigger('click') +// expect(mutations['posts/TOGGLE_LANGUAGE']).toHaveBeenCalledWith({}, 'en') +// }) +// }) + +// describe('clears filter', () => { +// it('when all button is clicked', async () => { +// getters['posts/filteredLanguageCodes'] = jest.fn(() => ['en']) +// wrapper = await Wrapper() +// const allLanguagesButton = wrapper.find('.languages-filter .sidebar .base-button') +// allLanguagesButton.trigger('click') +// expect(mutations['posts/RESET_LANGUAGES']).toHaveBeenCalledTimes(1) +// }) +// }) +// }) +// }) diff --git a/webapp/components/FilterMenu/LanguagesFilter.vue b/webapp/components/FilterMenu/LanguagesFilter.vue index 10a6778a0..fc67eeb3f 100644 --- a/webapp/components/FilterMenu/LanguagesFilter.vue +++ b/webapp/components/FilterMenu/LanguagesFilter.vue @@ -1,7 +1,9 @@