mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-13 07:46:06 +00:00
comment out LanguagesFilter, EmotionsFilter, fix tests, fix lint
This commit is contained in:
ogerly
parent
e7fe6a9d3d
commit
52dcd772fa
@ -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)
|
||||
// })
|
||||
// })
|
||||
// })
|
||||
// })
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<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>
|
||||
<labeled-button
|
||||
:filled="!filteredByEmotions.length"
|
||||
@ -17,43 +18,44 @@
|
||||
/>
|
||||
</li>
|
||||
</template>
|
||||
</filter-menu-section>
|
||||
</filter-menu-section> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters, mapMutations } from 'vuex'
|
||||
import EmotionButton from '~/components/EmotionButton/EmotionButton'
|
||||
import FilterMenuSection from '~/components/FilterMenu/FilterMenuSection'
|
||||
import LabeledButton from '~/components/_new/generic/LabeledButton/LabeledButton'
|
||||
// import { mapGetters, mapMutations } from 'vuex'
|
||||
// import EmotionButton from '~/components/EmotionButton/EmotionButton'
|
||||
// import FilterMenuSection from '~/components/FilterMenu/FilterMenuSection'
|
||||
// import LabeledButton from '~/components/_new/generic/LabeledButton/LabeledButton'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
EmotionButton,
|
||||
FilterMenuSection,
|
||||
LabeledButton,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
emotionsArray: ['funny', 'happy', 'surprised', 'cry', 'angry'],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
filteredByEmotions: 'posts/filteredByEmotions',
|
||||
currentUser: 'auth/user',
|
||||
}),
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({
|
||||
resetEmotions: 'posts/RESET_EMOTIONS',
|
||||
toogleFilteredByEmotions: 'posts/TOGGLE_EMOTION',
|
||||
}),
|
||||
iconPath(emotion) {
|
||||
if (this.filteredByEmotions.includes(emotion)) {
|
||||
return `/img/svg/emoji/${emotion}_color.svg`
|
||||
}
|
||||
return `/img/svg/emoji/${emotion}.svg`
|
||||
},
|
||||
},
|
||||
}
|
||||
// export default {
|
||||
// components: {
|
||||
// EmotionButton,
|
||||
// FilterMenuSection,
|
||||
// LabeledButton,
|
||||
// },
|
||||
// data() {
|
||||
// return {
|
||||
// emotionsArray: ['funny', 'happy', 'surprised', 'cry', 'angry'],
|
||||
// }
|
||||
// },
|
||||
// computed: {
|
||||
// ...mapGetters({
|
||||
// filteredByEmotions: 'posts/filteredByEmotions',
|
||||
// currentUser: 'auth/user',
|
||||
// }),
|
||||
// },
|
||||
// methods: {
|
||||
// ...mapMutations({
|
||||
// resetEmotions: 'posts/RESET_EMOTIONS',
|
||||
// toogleFilteredByEmotions: 'posts/TOGGLE_EMOTION',
|
||||
// }),
|
||||
// iconPath(emotion) {
|
||||
// if (this.filteredByEmotions.includes(emotion)) {
|
||||
// return `/img/svg/emoji/${emotion}_color.svg`
|
||||
// }
|
||||
// return `/img/svg/emoji/${emotion}.svg`
|
||||
// },
|
||||
// },
|
||||
// }
|
||||
</script>
|
||||
|
||||
@ -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)
|
||||
// })
|
||||
// })
|
||||
// })
|
||||
// })
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<filter-menu-section :title="$t('filter-menu.languages')" class="languages-filter">
|
||||
<template #sidebar>
|
||||
<div>
|
||||
<!-- <filter-menu-section :title="$t('filter-menu.languages')" class="languages-filter">
|
||||
<template>
|
||||
<labeled-button
|
||||
class="filter-languages"
|
||||
:filled="!filteredLanguageCodes.length"
|
||||
:label="$t('filter-menu.all')"
|
||||
icon="check"
|
||||
@ -19,36 +21,37 @@
|
||||
</base-button>
|
||||
</li>
|
||||
</template>
|
||||
</filter-menu-section>
|
||||
</filter-menu-section> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters, mapMutations } from 'vuex'
|
||||
import orderBy from 'lodash/orderBy'
|
||||
import locales from '~/locales'
|
||||
import FilterMenuSection from '~/components/FilterMenu/FilterMenuSection'
|
||||
import LabeledButton from '~/components/_new/generic/LabeledButton/LabeledButton'
|
||||
// import { mapGetters, mapMutations } from 'vuex'
|
||||
// import orderBy from 'lodash/orderBy'
|
||||
// import locales from '~/locales'
|
||||
// import FilterMenuSection from '~/components/FilterMenu/FilterMenuSection'
|
||||
// import LabeledButton from '~/components/_new/generic/LabeledButton/LabeledButton'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FilterMenuSection,
|
||||
LabeledButton,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
filteredLanguageCodes: 'posts/filteredLanguageCodes',
|
||||
}),
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({
|
||||
resetLanguages: 'posts/RESET_LANGUAGES',
|
||||
toggleLanguage: 'posts/TOGGLE_LANGUAGE',
|
||||
}),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
locales: orderBy(locales, 'name'),
|
||||
}
|
||||
},
|
||||
}
|
||||
// export default {
|
||||
// components: {
|
||||
// FilterMenuSection,
|
||||
// LabeledButton,
|
||||
// },
|
||||
// computed: {
|
||||
// ...mapGetters({
|
||||
// filteredLanguageCodes: 'posts/filteredLanguageCodes',
|
||||
// }),
|
||||
// },
|
||||
// methods: {
|
||||
// ...mapMutations({
|
||||
// resetLanguages: 'posts/RESET_LANGUAGES',
|
||||
// toggleLanguage: 'posts/TOGGLE_LANGUAGE',
|
||||
// }),
|
||||
// },
|
||||
// data() {
|
||||
// return {
|
||||
// locales: orderBy(locales, 'name'),
|
||||
// }
|
||||
// },
|
||||
// }
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user