mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2025-12-13 07:45:56 +00:00
Merge branch 'master' of github.com:Human-Connection/Human-Connection into refactor_filter_bubble
This commit is contained in:
Matt Rider
commit
cbd78a34dc
@ -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')
|
||||
})
|
||||
})
|
||||
|
||||
@ -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,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)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
@ -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",
|
||||
@ -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"
|
||||
}
|
||||
|
||||
@ -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"
|
||||
@ -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"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user