include magic numbers in tokens, fix tests

This commit is contained in:
Alina Beck 2020-03-24 17:59:40 +01:00 committed by mattwr18
parent d9c3412b41
commit 478e4fa08f
7 changed files with 16 additions and 14 deletions

View File

@ -248,7 +248,9 @@ $size-ribbon: 6px;
* @presenter Spacing
*/
$size-width-filter-sidebar: 85px;
$size-width-paginate: 100px;
$size-max-width-filter-menu: 1026px;
/**
* @tokens Size Avatar

View File

@ -49,7 +49,7 @@ describe('CategoriesFilter.vue', () => {
describe('mount', () => {
it('starts with all categories button active', () => {
const allCategoriesButton = wrapper.find(
'.categories-filter > .labeled-button > .base-button',
'.categories-filter .sidebar .base-button',
)
expect(allCategoriesButton.attributes().class).toContain('--filled')
})
@ -58,7 +58,7 @@ describe('CategoriesFilter.vue', () => {
getters['posts/filteredCategoryIds'] = jest.fn(() => ['cat9'])
wrapper = await Wrapper()
democracyAndPoliticsButton = wrapper
.findAll('.menu-item > .labeled-button > .base-button')
.findAll('.categories-filter .item .base-button')
.at(2)
expect(democracyAndPoliticsButton.attributes().class).toContain('--filled')
})
@ -66,7 +66,7 @@ describe('CategoriesFilter.vue', () => {
describe('click on an "catetories-buttons" button', () => {
it('calls TOGGLE_CATEGORY when clicked', () => {
environmentAndNatureButton = wrapper
.findAll('.menu-item > .labeled-button > .base-button')
.findAll('.categories-filter .item .base-button')
.at(0)
environmentAndNatureButton.trigger('click')
expect(mutations['posts/TOGGLE_CATEGORY']).toHaveBeenCalledWith({}, 'cat4')
@ -78,7 +78,7 @@ describe('CategoriesFilter.vue', () => {
getters['posts/filteredCategoryIds'] = jest.fn(() => ['cat9'])
wrapper = await Wrapper()
const allCategoriesButton = wrapper.find(
'.categories-filter > .labeled-button > .base-button',
'.categories-filter .sidebar .base-button',
)
allCategoriesButton.trigger('click')
expect(mutations['posts/RESET_CATEGORIES']).toHaveBeenCalledTimes(1)

View File

@ -30,7 +30,7 @@ describe('EmotionsFilter', () => {
describe('mount', () => {
it('starts with all emotions button active', () => {
const allEmotionsButton = wrapper.find('.emotions-filter > .labeled-button > .base-button')
const allEmotionsButton = wrapper.find('.emotions-filter .sidebar .base-button')
expect(allEmotionsButton.attributes().class).toContain('--filled')
})
@ -55,7 +55,7 @@ describe('EmotionsFilter', () => {
it('when all button is clicked', async () => {
getters['posts/filteredByEmotions'] = jest.fn(() => ['happy'])
wrapper = await Wrapper()
const allEmotionsButton = wrapper.find('.emotions-filter > .labeled-button > .base-button')
const allEmotionsButton = wrapper.find('.emotions-filter .sidebar .base-button')
allEmotionsButton.trigger('click')
expect(mutations['posts/RESET_EMOTIONS']).toHaveBeenCalledTimes(1)
})

View File

@ -52,7 +52,7 @@ export default {
<style lang="scss">
.filter-menu-options {
max-width: 1026px;
max-width: $size-max-width-filter-menu;
padding: $space-small $space-x-small;
> .title {

View File

@ -39,7 +39,7 @@ export default {
> .sidebar {
flex-basis: 12%;
max-width: 85px;
max-width: $size-width-filter-sidebar;
}
> .divider {

View File

@ -36,13 +36,13 @@ describe('FollowingFilter', () => {
getters['posts/filteredByUsersFollowed'] = jest.fn(() => true)
const wrapper = Wrapper()
expect(
wrapper.find('.following-filter > .labeled-button > .base-button').classes('--filled'),
wrapper.find('.following-filter .sidebar .base-button').classes('--filled'),
).toBe(true)
})
describe('click "filter-by-followed" button', () => {
it('calls TOGGLE_FILTER_BY_FOLLOWED', () => {
wrapper.find('.following-filter > .labeled-button > .base-button').trigger('click')
wrapper.find('.following-filter .sidebar .base-button').trigger('click')
expect(mutations['posts/TOGGLE_FILTER_BY_FOLLOWED']).toHaveBeenCalledWith({}, 'u34')
})
})

View File

@ -33,7 +33,7 @@ describe('LanguagesFilter.vue', () => {
describe('mount', () => {
it('starts with all categories button active', () => {
const allLanguagesButton = wrapper.find('.languages-filter > .labeled-button > .base-button')
const allLanguagesButton = wrapper.find('.languages-filter .sidebar .base-button')
expect(allLanguagesButton.attributes().class).toContain('--filled')
})
@ -41,7 +41,7 @@ describe('LanguagesFilter.vue', () => {
getters['posts/filteredLanguageCodes'] = jest.fn(() => ['es'])
const wrapper = Wrapper()
spanishButton = wrapper
.findAll('.languages-filter > .languages-list .base-button')
.findAll('.languages-filter .item .base-button')
.at(languages.findIndex(l => l.code === 'es'))
expect(spanishButton.attributes().class).toContain('--filled')
})
@ -50,7 +50,7 @@ describe('LanguagesFilter.vue', () => {
it('calls TOGGLE_LANGUAGE when clicked', () => {
const wrapper = Wrapper()
englishButton = wrapper
.findAll('.languages-filter > .languages-list .base-button')
.findAll('.languages-filter .item .base-button')
.at(languages.findIndex(l => l.code === 'en'))
englishButton.trigger('click')
expect(mutations['posts/TOGGLE_LANGUAGE']).toHaveBeenCalledWith({}, 'en')
@ -62,7 +62,7 @@ describe('LanguagesFilter.vue', () => {
getters['posts/filteredLanguageCodes'] = jest.fn(() => ['en'])
wrapper = await Wrapper()
const allLanguagesButton = wrapper.find(
'.languages-filter > .labeled-button > .base-button',
'.languages-filter .sidebar .base-button',
)
allLanguagesButton.trigger('click')
expect(mutations['posts/RESET_LANGUAGES']).toHaveBeenCalledTimes(1)