IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2025-12-13 07:45:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' of github.com:Human-Connection/Human-Connection into dependabot/npm_and_yarn/webapp/tiptap-1.21.0

Browse Source
This commit is contained in:
Matt Rider 2019-06-06 12:35:45 -03:00
commit 8d089be414
13 changed files with 238 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
backend/package.json
View File

@ -52,7 +52,7 @@
"cheerio": "~1.0.0-rc.3",
"cors": "~2.8.5",
"cross-env": "~5.2.0",
"date-fns": "2.0.0-alpha.27",
"date-fns": "2.0.0-alpha.29",
"debug": "~4.1.1",
"dotenv": "~8.0.0",
"express": "~4.17.1",

8
backend/yarn.lock
View File

@ -2579,10 +2579,10 @@ data-urls@^1.0.0:
whatwg-mimetype "^2.2.0"
whatwg-url "^7.0.0"
date-fns@2.0.0-alpha.27:
version "2.0.0-alpha.27"
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.0.0-alpha.27.tgz#5ecd4204ef0e7064264039570f6e8afbc014481c"
integrity sha512-cqfVLS+346P/Mpj2RpDrBv0P4p2zZhWWvfY5fuWrXNR/K38HaAGEkeOwb47hIpQP9Jr/TIxjZ2/sNMQwdXuGMg==
date-fns@2.0.0-alpha.29:
version "2.0.0-alpha.29"
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.0.0-alpha.29.tgz#9d4a36e3ebba63d009e957fea8fdfef7921bc6cb"
integrity sha512-AIFZ0hG/1fdb7HZHTDyiEJdNiaFyZxXcx/kF8z3I9wxbhkN678KrrLSneKcsb0Xy5KqCA4wCIxmGpdVWSNZnpA==
debug@2.6.9, debug@^2.1.2, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9:
version "2.6.9"

14
cypress/integration/common/profile.js
View File

@ -12,14 +12,16 @@ Then('I should be able to change my profile picture', () => {
cy.fixture(avatarUpload, 'base64').then(fileContent => {
cy.get('#customdropzone').upload(
{ fileContent, fileName: avatarUpload, mimeType: 'image/png' },
{ subjectType: 'drag-n-drop' },
{ subjectType: 'drag-n-drop' }
)
})
cy.get('#customdropzone')
.should('have.attr', 'style')
cy.get('.profile-avatar img')
.should('have.attr', 'src')
.and('contains', 'onourjourney')
cy.contains('.iziToast-message', 'Upload successful')
.should('have.length', 1)
cy.contains('.iziToast-message', 'Upload successful').should(
'have.length',
1
)
})
When("I visit another user's profile page", () => {
@ -31,4 +33,4 @@ Then('I cannot upload a picture', () => {
.children()
.should('not.have.id', 'customdropzone')
.should('have.class', 'ds-avatar')
})
})

2
cypress/integration/common/steps.js
View File

@ -230,7 +230,7 @@ When('I type in the following text:', text => {
Then('the post shows up on the landing page at position {int}', index => {
cy.openPage('landing')
const selector = `:nth-child(${index}) > .ds-card > .ds-card-content`
const selector = `.post-card:nth-child(${index}) > .ds-card-content`
cy.get(selector).should('contain', lastPost.title)
cy.get(selector).should('contain', lastPost.content)
})

54
webapp/components/FilterMenu/FilterMenu.spec.js Normal file
View File

@ -0,0 +1,54 @@
import { mount, createLocalVue } from '@vue/test-utils'
import FilterMenu from './FilterMenu.vue'
import Styleguide from '@human-connection/styleguide'
const localVue = createLocalVue()
localVue.use(Styleguide)
describe('FilterMenu.vue', () => {
let wrapper
let mocks
const createWrapper = mountMethod => {
return mountMethod(FilterMenu, {
mocks,
localVue,
})
}
beforeEach(() => {
mocks = { $t: () => {} }
})
describe('mount', () => {
beforeEach(() => {
wrapper = createWrapper(mount)
})
it('renders a card', () => {
expect(wrapper.is('.ds-card')).toBe(true)
})
describe('click "filter-by-followed-authors-only" button', () => {
it('emits filterBubble object', () => {
wrapper.find({ name: 'filter-by-followed-authors-only' }).trigger('click')
expect(wrapper.emitted('changeFilterBubble')).toBeTruthy()
})
it('toggles filterBubble.author property', () => {
wrapper.find({ name: 'filter-by-followed-authors-only' }).trigger('click')
expect(wrapper.emitted('changeFilterBubble')[0]).toEqual([{ author: 'following' }])
wrapper.find({ name: 'filter-by-followed-authors-only' }).trigger('click')
expect(wrapper.emitted('changeFilterBubble')[1]).toEqual([{ author: 'all' }])
})
it('makes button primary', () => {
wrapper.find({ name: 'filter-by-followed-authors-only' }).trigger('click')
expect(
wrapper.find({ name: 'filter-by-followed-authors-only' }).classes('ds-button-primary'),
).toBe(true)
})
})
})
})

57
webapp/components/FilterMenu/FilterMenu.vue Normal file
View File

@ -0,0 +1,57 @@
<template>
<ds-card>
<ds-flex>
<ds-flex-item class="filter-menu-title">
<ds-heading size="h3">
{{ $t('filter-menu.title') }}
</ds-heading>
</ds-flex-item>
<ds-flex-item>
<div class="filter-menu-buttons">
<ds-button
name="filter-by-followed-authors-only"
icon="user-plus"
:primary="onlyFollowed"
@click="toggleOnlyFollowed"
/>
</div>
</ds-flex-item>
</ds-flex>
</ds-card>
</template>
<script>
export default {
data() {
// We have to fix styleguide here. It uses .includes wich will always be
// false for arrays of objects.
return {
filterBubble: {
author: 'all',
},
}
},
computed: {
onlyFollowed() {
return this.filterBubble.author === 'following'
},
},
methods: {
toggleOnlyFollowed() {
this.filterBubble.author = this.onlyFollowed ? 'all' : 'following'
this.$emit('changeFilterBubble', this.filterBubble)
},
},
}
</script>
<style lang="scss">
.filter-menu-title {
display: flex;
align-items: center;
}
.filter-menu-buttons {
float: right;
}
</style>

124
webapp/components/Upload/index.vue
View File

@ -4,21 +4,30 @@
id="customdropzone"
:key="user.avatar"
ref="el"
:use-custom-slot="true"
:options="dropzoneOptions"
:include-styling="false"
:style="backgroundImage"
@vdropzone-thumbnail="thumbnail"
@vdropzone-error="verror"
/>
>
<div class="dz-message" @mouseover="hover = true" @mouseleave="hover = false">
<hc-avatar :user="user" class="profile-avatar" size="x-large"></hc-avatar>
<div class="hc-attachments-upload-area">
<div class="hc-drag-marker">
<ds-icon v-if="hover" name="image" size="xxx-large" />
</div>
</div>
</div>
</vue-dropzone>
</div>
</template>
<script>
import vueDropzone from 'nuxt-dropzone'
import gql from 'graphql-tag'
import HcAvatar from '~/components/Avatar/Avatar.vue'
export default {
components: {
vueDropzone,
HcAvatar,
},
props: {
user: { type: Object, default: null },
@ -29,22 +38,11 @@ export default {
url: this.vddrop,
maxFilesize: 5.0,
previewTemplate: this.template(),
dictDefaultMessage: '',
},
error: false,
hover: false,
}
},
computed: {
backgroundImage() {
const avatar =
this.user.avatar ||
'https://human-connection.org/wp-content/uploads/2019/03/human-connection-logo.svg'
const userAvatar = avatar.startsWith('/') ? avatar.replace('/', '/api/') : avatar
return {
backgroundImage: `url(${userAvatar})`,
}
},
},
watch: {
error() {
let that = this
@ -62,20 +60,6 @@ export default {
</div>
`
},
thumbnail(file, dataUrl) {
let j, len, ref, thumbnailElement
if (file.previewElement) {
this.$refs.el.$el.style.backgroundImage = ''
file.previewElement.classList.remove('dz-file-preview')
ref = file.previewElement.querySelectorAll('[data-dz-thumbnail-bg]')
for (j = 0, len = ref.length; j < len; j++) {
thumbnailElement = ref[j]
thumbnailElement.alt = file.name
thumbnailElement.style.backgroundImage = 'url("' + dataUrl + '")'
}
file.previewElement.classList.add('dz-image-preview')
}
},
vddrop(file) {
const avatarUpload = file[0]
this.$apollo
@ -107,25 +91,7 @@ export default {
},
}
</script>
<style>
#customdropzone {
margin: -60px auto auto;
width: 122px;
min-height: 122px;
background-size: cover;
background-repeat: no-repeat;
border-radius: 50%;
font-family: 'Arial', sans-serif;
letter-spacing: 0.2px;
color: #777;
transition: background-color 0.2s linear;
padding: 40px;
}
#customdropzone:hover {
cursor: pointer;
}
<style lang="scss">
#customdropzone .dz-preview {
transition: all 0.2s ease-out;
width: 160px;
@ -150,15 +116,59 @@ export default {
width: 100%;
}
#customdropzone .dz-preview .dz-details {
color: white;
transition: opacity 0.2s linear;
text-align: center;
.hc-attachments-upload-area {
position: relative;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
#customdropzone .dz-success-mark,
.dz-error-mark,
.dz-remove {
display: none;
.hc-attachments-upload-button {
pointer-events: none;
}
.hc-drag-marker {
position: relative;
width: 122px;
height: 122px;
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
color: hsl(0, 0%, 25%);
transition: all 0.2s ease-out;
font-size: 60px;
margin: -120px auto 5px;
background-color: rgba(255, 255, 255, 0.3);
opacity: 0.1;
&:before {
position: absolute;
content: '';
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 100%;
border: 20px solid rgba(255, 255, 255, 0.4);
visibility: hidden;
}
&:after {
position: absolute;
content: '';
top: 10px;
left: 10px;
bottom: 10px;
right: 10px;
border-radius: 100%;
border: 1px dashed hsl(0, 0%, 25%);
}
.hc-attachments-upload-area:hover & {
opacity: 1;
}
}
</style>

35
webapp/components/Upload/spec.js
View File

@ -35,26 +35,6 @@ describe('Upload', () => {
},
}
const fileSuccess = {
filename: 'avatar.jpg',
previewElement: {
classList: {
remove: jest.fn(),
add: jest.fn(),
},
querySelectorAll: jest.fn().mockReturnValue([
{
alt: '',
style: {
'background-image': '/api/generic.jpg',
},
},
]),
},
}
const dataUrl = 'avatar.jpg'
beforeEach(() => {
jest.useFakeTimers()
wrapper = shallowMount(Upload, { localVue, propsData, mocks })
@ -69,11 +49,6 @@ describe('Upload', () => {
expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
})
it('thumbnail', () => {
wrapper.vm.thumbnail(fileSuccess, dataUrl)
expect(fileSuccess.previewElement.classList.add).toHaveBeenCalledTimes(1)
})
describe('error handling', () => {
const message = 'File upload failed'
const fileError = { status: 'error' }
@ -93,5 +68,15 @@ describe('Upload', () => {
jest.runAllTimers()
expect(wrapper.vm.error).toEqual(false)
})
it('shows an error toaster when the apollo mutation rejects', async () => {
// calls vddrop twice because of how mockResolvedValueOnce works in jest
// the first time the mock function is called it will resolve, calling it a
// second time will cause it to fail(with this implementation)
// https://jestjs.io/docs/en/mock-function-api.html#mockfnmockresolvedvalueoncevalue
await wrapper.vm.vddrop([{ filename: 'avatar.jpg' }])
await wrapper.vm.vddrop([{ filename: 'avatar.jpg' }])
expect(mocks.$toast.error).toHaveBeenCalledTimes(1)
})
})
})

3
webapp/locales/de.json
View File

@ -1,4 +1,7 @@
{
"filter-menu": {
"title": "Deine Filterblase"
},
"login": {
"copy": "Wenn Du bereits ein Konto bei Human Connection hast, melde Dich bitte hier an.",
"login": "Einloggen",

3
webapp/locales/en.json
View File

@ -1,4 +1,7 @@
{
"filter-menu": {
"title": "Your filter bubble"
},
"login": {
"copy": "If you already have a human-connection account, login here.",
"login": "Login",

7
webapp/package.json
View File

@ -51,7 +51,7 @@
"dependencies": {
"@human-connection/styleguide": "0.5.17",
"@nuxtjs/apollo": "4.0.0-rc4.2",
"@nuxtjs/axios": "~5.5.3",
"@nuxtjs/axios": "~5.5.4",
"@nuxtjs/dotenv": "~1.3.0",
"@nuxtjs/style-resources": "~0.1.2",
"accounting": "~0.4.1",
@ -59,7 +59,7 @@
"apollo-client": "~2.6.1",
"cookie-universal-nuxt": "~2.0.14",
"cross-env": "~5.2.0",
"date-fns": "2.0.0-alpha.27",
"date-fns": "2.0.0-alpha.29",
"express": "~4.17.1",
"graphql": "~14.3.1",
"jsonwebtoken": "~8.5.1",
@ -75,7 +75,6 @@
"vue-count-to": "~1.0.13",
"vue-izitoast": "1.1.2",
"vue-sweetalert-icons": "~3.2.0",
"vue2-dropzone": "^3.5.9",
"vuex-i18n": "~1.11.0",
"zxcvbn": "^4.4.2"
},
@ -107,7 +106,7 @@
"nodemon": "~1.19.1",
"prettier": "~1.17.1",
"sass-loader": "~7.1.0",
"tippy.js": "^4.3.2",
"tippy.js": "^4.3.3",
"vue-jest": "~3.0.4",
"vue-svg-loader": "~0.12.0"
}

18
webapp/pages/index.vue
View File

@ -1,6 +1,9 @@
<template>
<div>
<ds-flex v-if="Post && Post.length" :width="{ base: '100%' }" gutter="base">
<ds-flex :width="{ base: '100%' }" gutter="base">
<ds-flex-item>
<filter-menu @changeFilterBubble="changeFilterBubble" />
</ds-flex-item>
<hc-post-card
v-for="(post, index) in uniq(Post)"
:key="post.id"
@ -24,6 +27,7 @@
</template>
<script>
import FilterMenu from '~/components/FilterMenu/FilterMenu.vue'
import gql from 'graphql-tag'
import uniqBy from 'lodash/uniqBy'
import HcPostCard from '~/components/PostCard'
@ -31,6 +35,7 @@ import HcLoadMore from '~/components/LoadMore.vue'
export default {
components: {
FilterMenu,
HcPostCard,
HcLoadMore,
},
@ -40,6 +45,7 @@ export default {
Post: [],
page: 1,
pageSize: 10,
filterBubble: { author: 'all' },
}
},
computed: {
@ -51,6 +57,10 @@ export default {
},
},
methods: {
changeFilterBubble(filterBubble) {
this.filterBubble = filterBubble
this.$apollo.queries.Post.refresh()
},
uniq(items, field = 'id') {
return uniqBy(items, field)
},
@ -66,6 +76,7 @@ export default {
this.page++
this.$apollo.queries.Post.fetchMore({
variables: {
filterBubble: this.filterBubble,
first: this.pageSize,
offset: this.offset,
},
@ -91,8 +102,8 @@ export default {
Post: {
query() {
return gql(`
query Post($first: Int, $offset: Int) {
Post(first: $first, offset: $offset) {
query Post($filterBubble: FilterBubble, $first: Int, $offset: Int) {
Post(filterBubble: $filterBubble, first: $first, offset: $offset) {
id
title
contentExcerpt
@ -135,6 +146,7 @@ export default {
},
variables() {
return {
filterBubble: this.filterBubble,
first: this.pageSize,
offset: 0,
}

31
webapp/yarn.lock
View File

@ -1141,10 +1141,10 @@
vue-cli-plugin-apollo "^0.20.0"
webpack-node-externals "^1.7.2"
"@nuxtjs/axios@~5.5.3":
version "5.5.3"
resolved "https://registry.yarnpkg.com/@nuxtjs/axios/-/axios-5.5.3.tgz#1893609fc4a3e845516a45c1aaf428104cb3d524"
integrity sha512-WEgWcmgJqWLHWw8ZTieQvuV+I6vcaVgdnCmtzrsKliPsCTtbhDu1i7iFkM/dYAqppIxpL2v46lH6sQ4FfOOxTA==
"@nuxtjs/axios@~5.5.4":
version "5.5.4"
resolved "https://registry.yarnpkg.com/@nuxtjs/axios/-/axios-5.5.4.tgz#c4aee2322901b19d4072670c03144662a73ea6f4"
integrity sha512-/Ljsyh5VIc9paXGrQue7RQ+PpBNES1oit0g4l+ya1tfyKnZMpHSbghuLcv0xq+BpXlSEr690uemHbz54/N6U5w==
dependencies:
"@nuxtjs/proxy" "^1.3.3"
axios "^0.19.0"
@ -3747,10 +3747,10 @@ data-urls@^1.0.0:
whatwg-mimetype "^2.2.0"
whatwg-url "^7.0.0"
date-fns@2.0.0-alpha.27:
version "2.0.0-alpha.27"
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.0.0-alpha.27.tgz#5ecd4204ef0e7064264039570f6e8afbc014481c"
integrity sha512-cqfVLS+346P/Mpj2RpDrBv0P4p2zZhWWvfY5fuWrXNR/K38HaAGEkeOwb47hIpQP9Jr/TIxjZ2/sNMQwdXuGMg==
date-fns@2.0.0-alpha.29:
version "2.0.0-alpha.29"
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.0.0-alpha.29.tgz#9d4a36e3ebba63d009e957fea8fdfef7921bc6cb"
integrity sha512-AIFZ0hG/1fdb7HZHTDyiEJdNiaFyZxXcx/kF8z3I9wxbhkN678KrrLSneKcsb0Xy5KqCA4wCIxmGpdVWSNZnpA==
date-now@^0.1.4:
version "0.1.4"
@ -10561,10 +10561,10 @@ timsort@^0.3.0:
resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
tippy.js@^4.3.2:
version "4.3.2"
resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-4.3.2.tgz#f785d96fd03d890aa118646e1a873f851bd1c8b4"
integrity sha512-vSdVU8zkhsdCFegwtKq7WJfF29xo4Qiq5GWPZEjKbW4knogI43HJHPAOCUkxbi28gKTTgiWF+GveZgTqhS9QOw==
tippy.js@^4.3.3:
version "4.3.3"
resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-4.3.3.tgz#396304bea577bbff03f2700a1761329e8c1fce86"
integrity sha512-2fPMlquzVQxpLoOd0eJA1sPZ86/R6zD/9985wV0d2zhhX52DiO3aeg7TTS/mBrUjgFwVZh19YLb4l2c8bJkQPw==
dependencies:
popper.js "^1.14.7"
@ -11318,13 +11318,6 @@ vue2-dropzone@3.5.8:
dependencies:
dropzone "^5.5.1"
vue2-dropzone@^3.5.9:
version "3.5.9"
resolved "https://registry.yarnpkg.com/vue2-dropzone/-/vue2-dropzone-3.5.9.tgz#a63999a45a7aad24d4c21e3d35be409b4e6bdce8"
integrity sha512-nJz6teulVKlZIAeKgvPU7wBI/gzfIgqDOrEp1okSkQIkdprDVCoM0U7XWM0NOM4AAVX+4XGRtMoocYWdTYb3bQ==
dependencies:
dropzone "^5.5.1"
vue@^2.6.10, vue@^2.6.6:
version "2.6.10"
resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.10.tgz#a72b1a42a4d82a721ea438d1b6bf55e66195c637"