Get delete SocialMedia to work, refactored Frontend Jest tests, written Cypress tests

Optimised tests and Vue for add Social Media a bit.
Added localisation.

Finished this commit together with @mattwr18 !!!
Thank you so much dude! You did great stuff …
This commit is contained in:
Wolfgang Huß 2019-05-06 17:31:02 +02:00
parent 2af9b853a1
commit 41711c316a
7 changed files with 75 additions and 17 deletions

View File

@ -68,11 +68,11 @@ describe('CreateSocialMedia', () => {
})
it('deletes social media', async () => {
const variablesC = { url: 'http://nsosp.org' }
const { CreateSocialMedia } = await client.request(mutationC, variablesC)
const creationVariables = { url: 'http://nsosp.org' }
const { CreateSocialMedia } = await client.request(mutationC, creationVariables)
const { id } = CreateSocialMedia
const variablesD = { id }
const deletionVariables = { id }
const expected = {
DeleteSocialMedia: {
id: id,
@ -80,7 +80,7 @@ describe('CreateSocialMedia', () => {
}
}
await expect(
client.request(mutationD, variablesD)
client.request(mutationD, deletionVariables)
).resolves.toEqual(expected)
})

View File

@ -77,7 +77,7 @@ Then('I should be on the {string} page', page => {
.should('contain', 'Social media')
})
Then('I add a social media link', () => {
When('I add a social media link', () => {
cy.get("input[name='social-media']")
.type('https://freeradical.zone/peter-pan')
.get('button')
@ -87,7 +87,7 @@ Then('I add a social media link', () => {
Then('it gets saved successfully', () => {
cy.get('.iziToast-message')
.should('contain', 'Updated user')
.should('contain', 'Added social media')
})
Then('the new social media link shows up on the page', () => {
@ -110,3 +110,18 @@ Then('they should be able to see my social media links', () => {
.get('a[href="https://freeradical.zone/peter-pan"]')
.should('have.length', 1)
})
When('I delete a social media link', () => {
cy.get("a[name='delete']")
.click()
})
// Then('Shows delete modal', () => {
// cy.get("a[name='delete']")
// .click()
// })
Then('it gets deleted successfully', () => {
cy.get('.iziToast-message')
.should('contain', 'Deleted social media')
})

View File

@ -19,3 +19,12 @@ Feature: List Social Media Accounts
Given I have added a social media link
When people visit my profile page
Then they should be able to see my social media links
Scenario: Deleting Social Media
Given I am on the "settings" page
And I click on the "Social media" link
Then I should be on the "/settings/my-social-media" page
Given I have added a social media link
When I delete a social media link
Then it gets deleted successfully
# And the new social media link shows up on the page

View File

@ -63,8 +63,10 @@
},
"social-media": {
"name": "Soziale Medien",
"placeholder": "Füge eine Social-Media URL hinzu",
"submit": "Link hinzufügen",
"success": "Profil aktualisiert"
"successAdd": "Social-Media hinzugefügt. Profil aktualisiert!",
"successDelete": "Social-Media gelöscht. Profil aktualisiert!"
}
},
"admin": {

View File

@ -63,8 +63,10 @@
},
"social-media": {
"name": "Social media",
"placeholder": "Add social media url",
"submit": "Add link",
"success": "Updated user profile"
"successAdd": "Added social media. Updated user profile!",
"successDelete": "Deleted social media. Updated user profile!"
}
},
"admin": {

View File

@ -74,8 +74,8 @@ describe('my-social-media.vue', () => {
it('displays a trash sympol after a social media', () => {
wrapper = Wrapper()
iconName = wrapper.find('.ds-icon').attributes().name
expect(iconName).toBe('trash')
const deleteSelector = wrapper.find({ name: 'delete' })
expect(deleteSelector).toEqual({ selector: 'Component' })
})
})

View File

@ -8,7 +8,7 @@
<ds-list>
<ds-list-item
v-for="link in socialMediaLinks"
:key="link.url"
:key="link.id"
>
<a
:href="link.url"
@ -22,7 +22,7 @@
>
{{ link.url }}
</a>
&nbsp;&nbsp; | &nbsp;&nbsp;
&nbsp;&nbsp; <span class="layout-leave-active">|</span> &nbsp;&nbsp;
<ds-icon
name="edit"
class="layout-leave-active"
@ -40,7 +40,7 @@
<div>
<ds-input
v-model="value"
placeholder="Add social media url"
:placeholder="$t('settings.social-media.placeholder')"
name="social-media"
:schema="{type: 'url'}"
/>
@ -95,6 +95,7 @@ export default {
mutation: gql`
mutation($url: String!) {
CreateSocialMedia(url: $url) {
id
url
}
}
@ -113,13 +114,42 @@ export default {
})
}
})
.then(
this.$toast.success(this.$t('settings.social-media.success')),
.then(() => {
this.$toast.success(this.$t('settings.social-media.successAdd')),
(this.value = '')
)
})
.catch(error => {
this.$toast.error(error.message)
})
},
handleDeleteSocialMedia(link) {
console.log(link)
this.$apollo
.mutate({
mutation: gql`
mutation($id: ID!) {
DeleteSocialMedia(id: $id) {
id
url
}
}
`,
variables: {
id: link.id
},
update: (store, { data }) => {
const socialMedia = this.currentUser.socialMedia.filter(element => element.id !== link.id )
this.setCurrentUser({
...this.currentUser,
socialMedia
})
}
})
.then(() => {
this.$toast.success(this.$t('settings.social-media.successDelete'))
})
.catch(error => {
this.$toast.error(error.message)
})
}
}
}