Add cucumber scenario, component tests

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

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)
 })

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)
       })
     })
   })