From c4959bb85190478e0136a8eb89badf2efb28e911 Mon Sep 17 00:00:00 2001 From: Alina Beck Date: Thu, 19 Dec 2019 01:02:15 +0530 Subject: [PATCH 001/241] use computed property to enable/disable delete button --- .../components/DeleteData/DeleteData.spec.js | 6 +++--- webapp/components/DeleteData/DeleteData.vue | 20 ++++++++++--------- 2 files changed, 14 insertions(+), 12 deletions(-) diff --git a/webapp/components/DeleteData/DeleteData.spec.js b/webapp/components/DeleteData/DeleteData.spec.js index abcdf9101..484fd5492 100644 --- a/webapp/components/DeleteData/DeleteData.spec.js +++ b/webapp/components/DeleteData/DeleteData.spec.js @@ -81,7 +81,7 @@ describe('DeleteData.vue', () => { }) it('does not call the delete user mutation if deleteEnabled is false', () => { - deleteAccountBtn = wrapper.find('.ds-button-danger') + deleteAccountBtn = wrapper.find('[data-test="delete-button"]') deleteAccountBtn.trigger('click') expect(mocks.$apollo.mutate).not.toHaveBeenCalled() }) @@ -90,7 +90,7 @@ describe('DeleteData.vue', () => { beforeEach(() => { enableDeletionInput = wrapper.find('.enable-deletion-input input') enableDeletionInput.setValue(deleteAccountName) - deleteAccountBtn = wrapper.find('.ds-button-danger') + deleteAccountBtn = wrapper.find('[data-test="delete-button"]') }) it('if deleteEnabled is true and only deletes user by default', () => { @@ -168,7 +168,7 @@ describe('DeleteData.vue', () => { it('shows an error toaster when the mutation rejects', async () => { enableDeletionInput = wrapper.find('.enable-deletion-input input') enableDeletionInput.setValue(deleteAccountName) - deleteAccountBtn = wrapper.find('.ds-button-danger') + deleteAccountBtn = wrapper.find('[data-test="delete-button"]') await deleteAccountBtn.trigger('click') // second submission causes mutation to reject await deleteAccountBtn.trigger('click') diff --git a/webapp/components/DeleteData/DeleteData.vue b/webapp/components/DeleteData/DeleteData.vue index 045d00f26..9686f442f 100644 --- a/webapp/components/DeleteData/DeleteData.vue +++ b/webapp/components/DeleteData/DeleteData.vue @@ -57,14 +57,19 @@ - + {{ $t('settings.deleteUserAccount.name') }} - + @@ -82,7 +87,6 @@ export default { return { deleteContributions: false, deleteComments: false, - deleteEnabled: false, enableDeletionValue: null, } }, @@ -90,16 +94,14 @@ export default { ...mapGetters({ currentUser: 'auth/user', }), + deleteEnabled() { + return this.enableDeletionValue === this.currentUser.name + }, }, methods: { ...mapActions({ logout: 'auth/logout', }), - enableDeletion() { - if (this.enableDeletionValue === this.currentUser.name) { - this.deleteEnabled = true - } - }, handleSubmit() { const resourceArgs = [] if (this.deleteContributions) { From da9403794db72566329670511d8e33f2c4b291e8 Mon Sep 17 00:00:00 2001 From: Alina Beck Date: Thu, 19 Dec 2019 01:02:48 +0530 Subject: [PATCH 002/241] move embed related css to EmbedComponent, rename classes --- webapp/components/Editor/Editor.vue | 81 ------------- .../components/Embed/EmbedComponent.spec.js | 10 +- webapp/components/Embed/EmbedComponent.vue | 113 +++++++++++++++--- 3 files changed, 104 insertions(+), 100 deletions(-) diff --git a/webapp/components/Editor/Editor.vue b/webapp/components/Editor/Editor.vue index 6c8a1908a..235437c32 100644 --- a/webapp/components/Editor/Editor.vue +++ b/webapp/components/Editor/Editor.vue @@ -326,85 +326,4 @@ li > p { margin: 0 0 $space-x-small; } } - -.ProseMirror[contenteditable='false'] { - .embed-close-button { - display: none; - } -} - -.embed-container { - position: relative; - padding: 0; - margin: $space-small auto; - overflow: hidden; - border-radius: $border-radius-base; - border: 1px solid $color-neutral-70; - background-color: $color-neutral-90; -} - -.embed-content { - width: 100%; - height: 100%; - - h4 { - margin: $space-small 0 0 $space-small; - } - - p, - a { - display: block; - margin: 0 0 0 $space-small; - } -} - -.embed-preview-image { - width: 100%; - height: auto; - max-height: 450px; -} - -.embed-preview-image--clickable { - cursor: pointer; -} - -.embed-html { - width: 100%; - - iframe { - width: 100%; - } -} - -.embed-overlay { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - - padding: $space-large; - background-color: $color-neutral-100; -} - -.embed-buttons { - button { - margin-right: $space-small; - } -} - -.embed-checkbox { - display: flex; - - input { - margin-right: $space-small; - } -} - -.embed-close-button { - position: absolute; - top: $space-x-small; - right: $space-x-small; - background-color: rgba(250, 249, 250, 0.6); -} diff --git a/webapp/components/Embed/EmbedComponent.spec.js b/webapp/components/Embed/EmbedComponent.spec.js index ab0f0c8fb..4f8ac02e7 100644 --- a/webapp/components/Embed/EmbedComponent.spec.js +++ b/webapp/components/Embed/EmbedComponent.spec.js @@ -135,19 +135,19 @@ describe('EmbedComponent.vue', () => { wrapper.setData({ showOverlay: true }) }) - it('when user agress', () => { - wrapper.find('.ds-button-primary').trigger('click') + it('when user agrees', () => { + wrapper.find('[data-test="play-now-button"]').trigger('click') expect(wrapper.vm.showEmbed).toBe(true) }) it('does not show iframe when user clicks to cancel', () => { - wrapper.find('.ds-button-ghost').trigger('click') + wrapper.find('[data-test="cancel-button"]').trigger('click') expect(wrapper.vm.showEmbed).toBe(false) }) describe("doesn't set permanently", () => { beforeEach(() => { - wrapper.find('.ds-button-primary').trigger('click') + wrapper.find('[data-test="play-now-button"]').trigger('click') }) it("if user doesn't give consent", () => { @@ -162,7 +162,7 @@ describe('EmbedComponent.vue', () => { describe('sets permanently', () => { beforeEach(() => { wrapper.find('input[type=checkbox]').trigger('click') - wrapper.find('.ds-button-primary').trigger('click') + wrapper.find('[data-test="play-now-button"]').trigger('click') }) it('changes setting permanetly when user requests', () => { diff --git a/webapp/components/Embed/EmbedComponent.vue b/webapp/components/Embed/EmbedComponent.vue index f1790304e..7c08db87b 100644 --- a/webapp/components/Embed/EmbedComponent.vue +++ b/webapp/components/Embed/EmbedComponent.vue @@ -2,17 +2,17 @@ {{ dataEmbedUrl }} - -
-
+ +
+

{{ embedTitle }}

{{ embedDescription }}

@@ -20,25 +20,27 @@ {{ dataEmbedUrl }}
-
diff --git a/webapp/components/generic/SearchableInput/SearchableInput.spec.js b/webapp/components/generic/SearchableInput/SearchableInput.spec.js index db314630f..994e617d6 100644 --- a/webapp/components/generic/SearchableInput/SearchableInput.spec.js +++ b/webapp/components/generic/SearchableInput/SearchableInput.spec.js @@ -32,81 +32,79 @@ describe('SearchableInput.vue', () => { } describe('mount', () => { - describe('testing custom functions', () => { - let select + let select, dropdown + beforeEach(() => { + select = wrapper.find('.ds-select') + select.trigger('focus') + select.element.value = 'abcd' + }) + + it('opens the dropdown when focused', () => { + expect(wrapper.find('.ds-select-dropdown').isVisible()).toBe(true) + }) + + it('closes the dropdown when blurred', () => { + select.trigger('blur') + expect(wrapper.find('.ds-select-is-open').exists()).toBe(false) + }) + + it('closes the dropdown when cleared with esc key', () => { + select.trigger('input') + select.trigger('keyup.esc') + expect(wrapper.find('.ds-select-is-open').exists()).toBe(false) + }) + + it('changes the unprocessedSearchInput as the value changes', () => { + select.trigger('input') + expect(select.element.value).toBe('abcd') + }) + + it('searches for the term when enter is pressed', async () => { + select.element.value = 'ab' + select.trigger('input') + select.trigger('keyup.enter') + await expect(wrapper.emitted().query[0]).toEqual(['ab']) + }) + + it('calls onDelete when the delete key is pressed', () => { + const spy = jest.spyOn(wrapper.vm, 'onDelete') + select.trigger('input') + select.trigger('keyup.delete') + expect(spy).toHaveBeenCalledTimes(1) + }) + + describe('navigating to resource', () => { beforeEach(() => { + propsData = { options: searchResults } + wrapper = Wrapper() select = wrapper.find('.ds-select') select.trigger('focus') - select.element.value = 'abcd' }) - it('opens the select dropdown when focused on', () => { - expect(wrapper.find('.is-open').exists()).toBe(true) - }) - - it('opens the select dropdown and blurs after focused on', () => { - select.trigger('blur') - expect(wrapper.find('.is-open').exists()).toBe(false) - }) - - it('is clearable', () => { + it('pushes to post page', async () => { + select.element.value = 'Post' select.trigger('input') - select.trigger('keyup.esc') - expect(wrapper.find('.is-open').exists()).toBe(false) - }) - - it('changes the unprocessedSearchInput as the value changes', () => { - select.trigger('input') - expect(select.element.value).toBe('abcd') - }) - - it('searches for the term when enter is pressed', async () => { - select.element.value = 'ab' - select.trigger('input') - select.trigger('keyup.enter') - await expect(wrapper.emitted().query[0]).toEqual(['ab']) - }) - - it('calls onDelete when the delete key is pressed', () => { - const spy = jest.spyOn(wrapper.vm, 'onDelete') - select.trigger('input') - select.trigger('keyup.delete') - expect(spy).toHaveBeenCalledTimes(1) - }) - - describe('navigating to resource', () => { - beforeEach(() => { - propsData = { options: searchResults } - wrapper = Wrapper() - select = wrapper.find('.ds-select') - select.trigger('focus') - }) - - it('pushes to post page', async () => { - select.element.value = 'Post' - select.trigger('input') - const post = wrapper.find('.search-post') - post.trigger('click') - await Vue.nextTick().then(() => { - expect(mocks.$router.push).toHaveBeenCalledWith({ - name: 'post-id-slug', - params: { id: 'post-by-jenny', slug: 'user-post-by-jenny' }, - }) + const post = wrapper.find('.search-post') + post.trigger('click') + await Vue.nextTick().then(() => { + expect(mocks.$router.push).toHaveBeenCalledWith({ + name: 'post-id-slug', + params: { id: 'post-by-jenny', slug: 'user-post-by-jenny' }, }) }) + }) - it("pushes to user's profile", async () => { - select.element.value = 'Bob' - select.trigger('input') - const users = wrapper.findAll('.userinfo') - const bob = users.filter(item => item.text() === '@bob-der-baumeister') - bob.trigger('click') - await Vue.nextTick().then(() => { - expect(mocks.$router.push).toHaveBeenCalledWith({ - name: 'profile-id-slug', - params: { id: 'u2', slug: 'bob-der-baumeister' }, - }) + it("pushes to user's profile", async () => { + select.element.value = 'Bob' + select.trigger('input') + const users = wrapper.findAll('.userinfo') + const bob = users.filter(item => item.text() === '@bob-der-baumeister') + bob.trigger('click') + await Vue.nextTick().then(() => { + expect(mocks.$router.push).toHaveBeenCalledWith({ + name: 'profile-id-slug', + params: { id: 'u2', slug: 'bob-der-baumeister' }, }) }) }) diff --git a/webapp/components/generic/SearchableInput/SearchableInput.vue b/webapp/components/generic/SearchableInput/SearchableInput.vue index cc9269ecf..c92d22cbe 100644 --- a/webapp/components/generic/SearchableInput/SearchableInput.vue +++ b/webapp/components/generic/SearchableInput/SearchableInput.vue @@ -3,58 +3,48 @@ class="searchable-input" aria-label="search" role="search" - :class="{ - 'is-active': isActive, - 'is-open': isOpen, - }" > -
-
- - + + +
+ + From eaf738c12bceea559ede59e9cceb4b0622273065 Mon Sep 17 00:00:00 2001 From: Alina Beck Date: Wed, 15 Jan 2020 16:13:47 +0300 Subject: [PATCH 027/241] replace last instance of ds-button with base-button --- webapp/components/FilterPosts/FilterPosts.spec.js | 4 ++-- .../generic/SearchableInput/SearchableInput.spec.js | 2 +- .../components/generic/SearchableInput/SearchableInput.vue | 6 +----- webapp/pages/post/_id/_slug/index.vue | 7 ++++++- 4 files changed, 10 insertions(+), 9 deletions(-) diff --git a/webapp/components/FilterPosts/FilterPosts.spec.js b/webapp/components/FilterPosts/FilterPosts.spec.js index 37c34919a..3dd1cebef 100644 --- a/webapp/components/FilterPosts/FilterPosts.spec.js +++ b/webapp/components/FilterPosts/FilterPosts.spec.js @@ -150,7 +150,7 @@ describe('FilterPosts.vue', () => { describe('click on an "emotions-buttons" button', () => { it('calls TOGGLE_EMOTION when clicked', () => { const wrapper = openFilterPosts() - happyEmotionButton = wrapper.findAll('button.emotions-buttons').at(1) + happyEmotionButton = wrapper.findAll('.emotion-button .base-button').at(1) happyEmotionButton.trigger('click') expect(mutations['posts/TOGGLE_EMOTION']).toHaveBeenCalledWith({}, 'happy') }) @@ -158,7 +158,7 @@ describe('FilterPosts.vue', () => { it('sets the attribute `src` to colorized image', () => { getters['posts/filteredByEmotions'] = jest.fn(() => ['happy']) const wrapper = openFilterPosts() - happyEmotionButton = wrapper.findAll('button.emotions-buttons').at(1) + 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') }) diff --git a/webapp/components/generic/SearchableInput/SearchableInput.spec.js b/webapp/components/generic/SearchableInput/SearchableInput.spec.js index 994e617d6..cc538a50b 100644 --- a/webapp/components/generic/SearchableInput/SearchableInput.spec.js +++ b/webapp/components/generic/SearchableInput/SearchableInput.spec.js @@ -32,7 +32,7 @@ describe('SearchableInput.vue', () => { } describe('mount', () => { - let select, dropdown + let select beforeEach(() => { select = wrapper.find('.ds-select') diff --git a/webapp/components/generic/SearchableInput/SearchableInput.vue b/webapp/components/generic/SearchableInput/SearchableInput.vue index c92d22cbe..a45f4104c 100644 --- a/webapp/components/generic/SearchableInput/SearchableInput.vue +++ b/webapp/components/generic/SearchableInput/SearchableInput.vue @@ -1,9 +1,5 @@ @@ -49,7 +49,7 @@ From 5c7a6ace0860354c3e771ec8d0ad251e12ca798c Mon Sep 17 00:00:00 2001 From: mattwr18 Date: Fri, 10 Jan 2020 11:08:53 +0100 Subject: [PATCH 076/241] Refactor - Move mouse events to nuxt-link - use .native - refactor deprecated slot syntax --- webapp/components/User/User.vue | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/webapp/components/User/User.vue b/webapp/components/User/User.vue index bf8913b54..211984e3f 100644 --- a/webapp/components/User/User.vue +++ b/webapp/components/User/User.vue @@ -6,14 +6,15 @@
-