ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

comment out LanguagesFilter, EmotionsFilter, fix tests, fix lint

Browse Source
This commit is contained in:
ogerly 2022-10-28 14:24:57 +02:00
parent e7fe6a9d3d
commit 52dcd772fa
4 changed files with 205 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
webapp/components/FilterMenu/EmotionsFilter.spec.js
View File

@ -1,64 +1,79 @@
import { mount } from '@vue/test-utils' import { mount } from '@vue/test-utils'
import Vuex from 'vuex' // import Vuex from 'vuex'
import EmotionsFilter from './EmotionsFilter' import EmotionsFilter from './EmotionsFilter'
const localVue = global.localVue const localVue = global.localVue
let wrapper, happyEmotionButton // 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),
}
describe('mount', () => {
let wrapper
const Wrapper = () => { const Wrapper = () => {
const store = new Vuex.Store({ mutations, getters }) return mount(EmotionsFilter, { localVue })
return mount(EmotionsFilter, { mocks, localVue, store })
} }
beforeEach(() => { beforeEach(() => {
wrapper = Wrapper() wrapper = Wrapper()
}) })
describe('mount', () => { it('renders button DIV', () => {
it('starts with all emotions button active', () => { expect(wrapper.find('div').exists()).toBe(true)
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', () => { // describe('EmotionsFilter', () => {
it('when all button is clicked', async () => { // const mutations = {
getters['posts/filteredByEmotions'] = jest.fn(() => ['happy']) // 'posts/TOGGLE_EMOTION': jest.fn(),
wrapper = await Wrapper() // 'posts/RESET_EMOTIONS': jest.fn(),
const allEmotionsButton = wrapper.find('.emotions-filter .sidebar .base-button') // }
allEmotionsButton.trigger('click') // const getters = {
expect(mutations['posts/RESET_EMOTIONS']).toHaveBeenCalledTimes(1) // '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)
// })
// })
// })
// })

74
webapp/components/FilterMenu/EmotionsFilter.vue
View File

@ -1,5 +1,6 @@
<template> <template>
<filter-menu-section :title="$t('filter-menu.emotions')" class="emotions-filter"> <div>
<!-- <filter-menu-section :title="$t('filter-menu.emotions')" class="emotions-filter">
<template #sidebar> <template #sidebar>
<labeled-button <labeled-button
:filled="!filteredByEmotions.length" :filled="!filteredByEmotions.length"
@ -17,43 +18,44 @@
/> />
</li> </li>
</template> </template>
</filter-menu-section> </filter-menu-section> -->
</div>
</template> </template>
<script> <script>
import { mapGetters, mapMutations } from 'vuex' // import { mapGetters, mapMutations } from 'vuex'
import EmotionButton from '~/components/EmotionButton/EmotionButton' // import EmotionButton from '~/components/EmotionButton/EmotionButton'
import FilterMenuSection from '~/components/FilterMenu/FilterMenuSection' // import FilterMenuSection from '~/components/FilterMenu/FilterMenuSection'
import LabeledButton from '~/components/_new/generic/LabeledButton/LabeledButton' // import LabeledButton from '~/components/_new/generic/LabeledButton/LabeledButton'
export default { // export default {
components: { // components: {
EmotionButton, // EmotionButton,
FilterMenuSection, // FilterMenuSection,
LabeledButton, // LabeledButton,
}, // },
data() { // data() {
return { // return {
emotionsArray: ['funny', 'happy', 'surprised', 'cry', 'angry'], // emotionsArray: ['funny', 'happy', 'surprised', 'cry', 'angry'],
} // }
}, // },
computed: { // computed: {
...mapGetters({ // ...mapGetters({
filteredByEmotions: 'posts/filteredByEmotions', // filteredByEmotions: 'posts/filteredByEmotions',
currentUser: 'auth/user', // currentUser: 'auth/user',
}), // }),
}, // },
methods: { // methods: {
...mapMutations({ // ...mapMutations({
resetEmotions: 'posts/RESET_EMOTIONS', // resetEmotions: 'posts/RESET_EMOTIONS',
toogleFilteredByEmotions: 'posts/TOGGLE_EMOTION', // toogleFilteredByEmotions: 'posts/TOGGLE_EMOTION',
}), // }),
iconPath(emotion) { // iconPath(emotion) {
if (this.filteredByEmotions.includes(emotion)) { // if (this.filteredByEmotions.includes(emotion)) {
return `/img/svg/emoji/${emotion}_color.svg` // return `/img/svg/emoji/${emotion}_color.svg`
} // }
return `/img/svg/emoji/${emotion}.svg` // return `/img/svg/emoji/${emotion}.svg`
}, // },
}, // },
} // }
</script> </script>

123
webapp/components/FilterMenu/LanguagesFilter.spec.js
View File

@ -1,70 +1,85 @@
import { mount } from '@vue/test-utils' import { mount } from '@vue/test-utils'
import Vuex from 'vuex' // import Vuex from 'vuex'
import locales from '~/locales' // import locales from '~/locales'
import orderBy from 'lodash/orderBy' // import orderBy from 'lodash/orderBy'
import LanguagesFilter from './LanguagesFilter' import LanguagesFilter from './LanguagesFilter'
const localVue = global.localVue const localVue = global.localVue
let wrapper, englishButton, spanishButton // let wrapper, englishButton, spanishButton
const languages = orderBy(locales, 'name') // 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),
}
describe('mount', () => {
let wrapper
const Wrapper = () => { const Wrapper = () => {
const store = new Vuex.Store({ mutations, getters }) return mount(LanguagesFilter, { localVue })
return mount(LanguagesFilter, { mocks, localVue, store })
} }
beforeEach(() => { beforeEach(() => {
wrapper = Wrapper() wrapper = Wrapper()
}) })
describe('mount', () => { it('renders button DIV', () => {
it('starts with all categories button active', () => { expect(wrapper.find('div').exists()).toBe(true)
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', () => { // describe('LanguagesFilter.vue', () => {
it('when all button is clicked', async () => { // const mutations = {
getters['posts/filteredLanguageCodes'] = jest.fn(() => ['en']) // 'posts/TOGGLE_LANGUAGE': jest.fn(),
wrapper = await Wrapper() // 'posts/RESET_LANGUAGES': jest.fn(),
const allLanguagesButton = wrapper.find('.languages-filter .sidebar .base-button') // }
allLanguagesButton.trigger('click') // const getters = {
expect(mutations['posts/RESET_LANGUAGES']).toHaveBeenCalledTimes(1) // '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)
// })
// })
// })
// })

63
webapp/components/FilterMenu/LanguagesFilter.vue
View File

@ -1,7 +1,9 @@
<template> <template>
<filter-menu-section :title="$t('filter-menu.languages')" class="languages-filter"> <div>
<template #sidebar> <!-- <filter-menu-section :title="$t('filter-menu.languages')" class="languages-filter">
<template>
<labeled-button <labeled-button
class="filter-languages"
:filled="!filteredLanguageCodes.length" :filled="!filteredLanguageCodes.length"
:label="$t('filter-menu.all')" :label="$t('filter-menu.all')"
icon="check" icon="check"
@ -19,36 +21,37 @@
</base-button> </base-button>
</li> </li>
</template> </template>
</filter-menu-section> </filter-menu-section> -->
</div>
</template> </template>
<script> <script>
import { mapGetters, mapMutations } from 'vuex' // import { mapGetters, mapMutations } from 'vuex'
import orderBy from 'lodash/orderBy' // import orderBy from 'lodash/orderBy'
import locales from '~/locales' // import locales from '~/locales'
import FilterMenuSection from '~/components/FilterMenu/FilterMenuSection' // import FilterMenuSection from '~/components/FilterMenu/FilterMenuSection'
import LabeledButton from '~/components/_new/generic/LabeledButton/LabeledButton' // import LabeledButton from '~/components/_new/generic/LabeledButton/LabeledButton'
export default { // export default {
components: { // components: {
FilterMenuSection, // FilterMenuSection,
LabeledButton, // LabeledButton,
}, // },
computed: { // computed: {
...mapGetters({ // ...mapGetters({
filteredLanguageCodes: 'posts/filteredLanguageCodes', // filteredLanguageCodes: 'posts/filteredLanguageCodes',
}), // }),
}, // },
methods: { // methods: {
...mapMutations({ // ...mapMutations({
resetLanguages: 'posts/RESET_LANGUAGES', // resetLanguages: 'posts/RESET_LANGUAGES',
toggleLanguage: 'posts/TOGGLE_LANGUAGE', // toggleLanguage: 'posts/TOGGLE_LANGUAGE',
}), // }),
}, // },
data() { // data() {
return { // return {
locales: orderBy(locales, 'name'), // locales: orderBy(locales, 'name'),
} // }
}, // },
} // }
</script> </script>