From ff44fdb12c5bf63e3362f75ea1164132f84d5ab3 Mon Sep 17 00:00:00 2001 From: mattwr18 Date: Mon, 30 Mar 2020 18:11:19 +0200 Subject: [PATCH 1/4] refactor: favor CSS over syleguide components --- .../generic/SearchPost/SearchPost.vue | 98 ++++++++----------- 1 file changed, 43 insertions(+), 55 deletions(-) diff --git a/webapp/components/generic/SearchPost/SearchPost.vue b/webapp/components/generic/SearchPost/SearchPost.vue index 3da6056ba..23d7e7a69 100644 --- a/webapp/components/generic/SearchPost/SearchPost.vue +++ b/webapp/components/generic/SearchPost/SearchPost.vue @@ -1,31 +1,19 @@ From 668159fa5e56621eccd5eb2c2a55a7027677088c Mon Sep 17 00:00:00 2001 From: mattwr18 Date: Tue, 31 Mar 2020 14:15:41 +0200 Subject: [PATCH 2/4] fix(frontend): update tests with new CSS selectors --- backend/yarn.lock | 6 ++--- .../generic/SearchPost/SearchPost.spec.js | 25 ++++++------------- 2 files changed, 10 insertions(+), 21 deletions(-) diff --git a/backend/yarn.lock b/backend/yarn.lock index 5bce265dc..7d036529a 100644 --- a/backend/yarn.lock +++ b/backend/yarn.lock @@ -5595,7 +5595,7 @@ jest-environment-node@^25.2.6: jest-util "^25.2.6" semver "^6.3.0" -jest-get-type@^25.2.6: +jest-get-type@^25.2.1, jest-get-type@^25.2.6: version "25.2.6" resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-25.2.6.tgz#0b0a32fab8908b44d508be81681487dbabb8d877" integrity sha512-DxjtyzOHjObRM+sM1knti6or+eOgcGU4xVSb2HNP1TqO4ahsT+rqZg+nyqHWJSvWgKC5cG3QjGFBqxLghiF/Ig== @@ -5792,7 +5792,7 @@ jest-snapshot@^25.2.7: pretty-format "^25.2.6" semver "^6.3.0" -jest-util@^25.2.6: +jest-util@^25.2.3, jest-util@^25.2.6: version "25.2.6" resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-25.2.6.tgz#3c1c95cdfd653126728b0ed861a86610e30d569c" integrity sha512-gpXy0H5ymuQ0x2qgl1zzHg7LYHZYUmDEq6F7lhHA8M0eIwDB2WteOcCnQsohl9c/vBKZ3JF2r4EseipCZz3s4Q== @@ -7467,7 +7467,7 @@ prettier@~2.0.2: resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.0.2.tgz#1ba8f3eb92231e769b7fcd7cb73ae1b6b74ade08" integrity sha512-5xJQIPT8BraI7ZnaDwSbu5zLrB6vvi8hVV58yHQ+QK64qrY40dULy0HSRlQ2/2IdzeBpjhDkqdcFBnFeDEMVdg== -pretty-format@^25.2.6: +pretty-format@^25.2.3, pretty-format@^25.2.6: version "25.2.6" resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-25.2.6.tgz#542a1c418d019bbf1cca2e3620443bc1323cb8d7" integrity sha512-DEiWxLBaCHneffrIT4B+TpMvkV9RNvvJrd3lY9ew1CEQobDzEXmYT1mg0hJhljZty7kCc10z13ohOFAE8jrUDg== diff --git a/webapp/components/generic/SearchPost/SearchPost.spec.js b/webapp/components/generic/SearchPost/SearchPost.spec.js index 713171078..c8372bb8d 100644 --- a/webapp/components/generic/SearchPost/SearchPost.spec.js +++ b/webapp/components/generic/SearchPost/SearchPost.spec.js @@ -5,7 +5,7 @@ const localVue = global.localVue localVue.filter('dateTime', (d) => d) describe('SearchPost.vue', () => { - let mocks, wrapper, propsData + let mocks, wrapper, propsData, counts beforeEach(() => { mocks = { $t: jest.fn((string) => string), @@ -22,6 +22,7 @@ describe('SearchPost.vue', () => { }, } wrapper = Wrapper() + counts = wrapper.find('.search-post > .metadata > .counts') }) const Wrapper = () => { @@ -30,35 +31,23 @@ describe('SearchPost.vue', () => { describe('shallowMount', () => { it('renders post title', () => { - expect(wrapper.find('.search-option-label').text()).toMatch('Post Title') + expect(wrapper.find('.search-post > .label').text()).toMatch('Post Title') }) it('renders post commentsCount', () => { - expect( - wrapper - .find('.search-post-meta') - .findAll('span') - .filter((item) => item.text() === '3') - .exists(), - ).toBe(true) + expect(counts.text()).toContain(propsData.option.commentsCount) }) it('renders post shoutedCount', () => { - expect( - wrapper - .find('.search-post-meta') - .findAll('span') - .filter((item) => item.text() === '6') - .exists(), - ).toBe(true) + expect(counts.text()).toContain(propsData.option.shoutedCount) }) it('renders post author', () => { - expect(wrapper.find('.search-post-author').text()).toContain('Post Author') + expect(wrapper.find('.search-post > .metadata').text()).toContain('Post Author') }) it('renders post createdAt', () => { - expect(wrapper.find('.search-post-author').text()).toContain('23.08.2019') + expect(wrapper.find('.search-post > .metadata').text()).toContain('23.08.2019') }) }) }) From 797efe0a60380cfe68cbc63adbcad31e5d8560ff Mon Sep 17 00:00:00 2001 From: Alina Beck Date: Tue, 7 Apr 2020 13:34:48 +0200 Subject: [PATCH 3/4] use CounterIcon component to show counts - also adds a 'soft' variant to CounterIcon to make it more adaptable --- .../generic/CounterIcon/CounterIcon.story.js | 7 ++++ .../_new/generic/CounterIcon/CounterIcon.vue | 9 +++- .../generic/SearchPost/SearchPost.spec.js | 4 +- .../generic/SearchPost/SearchPost.vue | 41 +++++++------------ 4 files changed, 32 insertions(+), 29 deletions(-) diff --git a/webapp/components/_new/generic/CounterIcon/CounterIcon.story.js b/webapp/components/_new/generic/CounterIcon/CounterIcon.story.js index 85b49f631..4bc685d62 100644 --- a/webapp/components/_new/generic/CounterIcon/CounterIcon.story.js +++ b/webapp/components/_new/generic/CounterIcon/CounterIcon.story.js @@ -26,6 +26,13 @@ storiesOf('Generic/CounterIcon', module) `, })) + .add('soft', () => ({ + components: { CounterIcon }, + template: ` + + `, + })) + .add('count is 0', () => ({ components: { CounterIcon }, template: ` diff --git a/webapp/components/_new/generic/CounterIcon/CounterIcon.vue b/webapp/components/_new/generic/CounterIcon/CounterIcon.vue index 00b4b9c53..0d97921ce 100644 --- a/webapp/components/_new/generic/CounterIcon/CounterIcon.vue +++ b/webapp/components/_new/generic/CounterIcon/CounterIcon.vue @@ -11,6 +11,7 @@ export default { icon: { type: String, required: true }, count: { type: Number, required: true }, danger: { type: Boolean, default: false }, + soft: { type: Boolean, default: false }, }, computed: { cappedCount() { @@ -18,7 +19,8 @@ export default { }, counterClass() { let counterClass = 'count' - if (this.danger) counterClass += ' --danger' + if (this.soft) counterClass += ' --soft' + else if (this.danger) counterClass += ' --danger' if (this.count === 0) counterClass += ' --inactive' return counterClass @@ -58,6 +60,11 @@ export default { &.--inactive { background-color: $color-neutral-60; } + + &.--soft { + background-color: $color-neutral-90; + color: $text-color-soft; + } } } diff --git a/webapp/components/generic/SearchPost/SearchPost.spec.js b/webapp/components/generic/SearchPost/SearchPost.spec.js index c8372bb8d..6128c006e 100644 --- a/webapp/components/generic/SearchPost/SearchPost.spec.js +++ b/webapp/components/generic/SearchPost/SearchPost.spec.js @@ -1,4 +1,4 @@ -import { shallowMount } from '@vue/test-utils' +import { mount } from '@vue/test-utils' import SearchPost from './SearchPost.vue' const localVue = global.localVue @@ -26,7 +26,7 @@ describe('SearchPost.vue', () => { }) const Wrapper = () => { - return shallowMount(SearchPost, { mocks, localVue, propsData }) + return mount(SearchPost, { mocks, localVue, propsData }) } describe('shallowMount', () => { diff --git a/webapp/components/generic/SearchPost/SearchPost.vue b/webapp/components/generic/SearchPost/SearchPost.vue index 23d7e7a69..079322097 100644 --- a/webapp/components/generic/SearchPost/SearchPost.vue +++ b/webapp/components/generic/SearchPost/SearchPost.vue @@ -1,22 +1,23 @@ +