diff --git a/cypress/integration/SocialMedia.feature b/cypress/integration/SocialMedia.feature index 6386b94ee..a535b507a 100644 --- a/cypress/integration/SocialMedia.feature +++ b/cypress/integration/SocialMedia.feature @@ -16,5 +16,6 @@ Feature: List Social Media Accounts And the new social media link shows up on the page Scenario: Other user's viewing my Social Media - Given people visit my profile page + 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 \ No newline at end of file diff --git a/cypress/integration/common/settings.js b/cypress/integration/common/settings.js index 395208b1a..675ecc677 100644 --- a/cypress/integration/common/settings.js +++ b/cypress/integration/common/settings.js @@ -79,7 +79,7 @@ Then('I should be on the {string} page', page => { Then('I add a social media link', () => { cy.get("input[name='social-media']") - .type('https://freeradical.zone/@mattwr18') + .type('https://freeradical.zone/peter-pan') .get('button') .contains('Add social media') .click() @@ -91,11 +91,22 @@ Then('it gets saved successfully', () => { }) Then('the new social media link shows up on the page', () => { - cy.get('a[href="https://freeradical.zone/@mattwr18"]') + cy.get('a[href="https://freeradical.zone/peter-pan"]') .should('have.length', 1) }) +Given('I have added a social media link', () => { + cy.openPage('/settings/my-social-media') + .get("input[name='social-media']") + .type('https://freeradical.zone/peter-pan') + .get('button') + .contains('Add social media') + .click() +}) + Then('they should be able to see my social media links', () => { cy.get('.ds-card-content') - + .contains('Where else can I find Peter Pan?') + .get('a[href="https://freeradical.zone/peter-pan"]') + .should('have.length', 1) }) \ No newline at end of file diff --git a/webapp/pages/settings/my-social-media.spec.js b/webapp/pages/settings/my-social-media.spec.js index 8af15f2a8..591a2d9a6 100644 --- a/webapp/pages/settings/my-social-media.spec.js +++ b/webapp/pages/settings/my-social-media.spec.js @@ -1,4 +1,4 @@ -import { shallowMount, mount, createLocalVue } from '@vue/test-utils' +import { mount, createLocalVue } from '@vue/test-utils' import MySocialMedia from './my-social-media.vue' import Vue from 'vue' import Vuex from 'vuex' @@ -15,10 +15,23 @@ describe('my-social-media.vue', () => { let store let mocks let getters + let input + let submitBtn + const socialMediaUrl = 'https://freeradical.zone/@mattwr18' beforeEach(() => { mocks = { - $t: jest.fn() + $t: jest.fn(), + $apollo: { + mutate: jest + .fn() + .mockRejectedValue({ message: 'Ouch!' }) + .mockResolvedValueOnce({ data: { CreateSocialMeda: { id: 's1', url: socialMediaUrl } }}) + }, + $toast: { + error: jest.fn(), + success: jest.fn() + } } getters = { 'auth/user': () => { @@ -27,12 +40,12 @@ describe('my-social-media.vue', () => { } }) - describe('shallowMount', () => { + describe('mount', () => { const Wrapper = () => { store = new Vuex.Store({ getters }) - return shallowMount(MySocialMedia, { store, mocks, localVue }) + return mount(MySocialMedia, { store, mocks, localVue }) } it('renders', () => { @@ -40,22 +53,35 @@ describe('my-social-media.vue', () => { expect(wrapper.contains('div')).toBe(true) }) - describe('given currentUser has social media accounts', () => { + describe('given currentUser has a social media account linked', () => { beforeEach(() => { getters = { 'auth/user': () => { return { socialMedia: [ - { id: 's1', url: 'https://freeradical.zone/@mattwr18' } + { id: 's1', url: socialMediaUrl } ] } } } }) - it('renders', () => { + it("displays a link to the currentUser's social media", () => { wrapper = Wrapper() - expect(wrapper.contains('div')).toBe(true) + const socialMediaLink = wrapper.find('a') + expect(socialMediaLink.attributes().href).toBe(socialMediaUrl) + }) + }) + + describe('currentUser does not have a social media account linked', () => { + it('allows a user to add a social media link', () => { + wrapper = Wrapper() + input = wrapper.find({ name: 'social-media' }) + input.element.value = socialMediaUrl + input.trigger('input') + submitBtn = wrapper.find('.ds-button') + submitBtn.trigger('click') + expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1) }) }) })