testing: adding spec for social-media

webapp/components/SocialMedia/SocialMedia.spec.js

@@ -21,16 +21,7 @@ describe('SocialMedia.vue', () => {
       return mount(SocialMedia, { propsData, mocks })
     }
 
-    // it('has class "hc-badges"', () => {
+    describe('socialMedia card title', () => {
-    //   expect(Wrapper().contains('.hc-badges')).toBe(true)
-    // })
-
-
-    // the description should be as good as possible.
-    // Even someone who cannot code should be able to read the specs,
-    // e.g. a project manager can read the tests to understand
-    // what the component ist doing
-    describe('new test', () => {
       beforeEach(() => {
         propsData.userName = 'Jenny Rostock'
         propsData.user = {
@@ -50,16 +41,11 @@ describe('SocialMedia.vue', () => {
       })
     })
 
-    // check the description
+    describe('socialMedia links', () => {
-    describe('given a badge', () => {
-
-      // a variable for the wrapper
       let wrapper
 
       beforeEach(() => {
         propsData.userName = 'Jenny Rostock'
-        // this is too much
-        // three social media links should be enough
         propsData.user = {
           socialMedia: [
             {
@@ -77,63 +63,35 @@ describe('SocialMedia.vue', () => {
               url: 'https://www.youtube.com/channel/UCu3GiKBFn5I07V9hBxF2CRA',
               __typename: 'SocialMedia',
             },
-            {
-              id: '3423d494-13e9-4be3-84c1-c4b5fdaa4077',
-              url: 'https://twitter.com/NimitBhargava',
-              __typename: 'SocialMedia',
-            },
-            {
-              id: 'a29421ed-0e97-455c-9932-b294ca39f0b2',
-              url: 'https://www.linkedin.com/in/nimitbhargava',
-              __typename: 'SocialMedia',
-            },
-            {
-              id: 'c5079a2c-8127-4620-8a34-7e1bccfa13b7',
-              url: 'https://freeradical.zone/@mattwr18',
-              __typename: 'SocialMedia',
-            },
-            {
-              id: 'cf2e00cd-e060-4216-b8ee-8b6a917ec6d0',
-              url: 'https://twitter.com/mattwr18',
-              __typename: 'SocialMedia',
-            },
           ],
         }
         // Now assign wrapper
         wrapper = Wrapper()
       })
 
-      it('shows 7 social media links', () => {
+      it('shows 3 social media links', () => {
-        // check what the wrapper looks like:
+        expect(wrapper.findAll('a')).toHaveLength(3)
-        console.log(wrapper.html())
-        expect(wrapper.findAll('a')).toHaveLength(7)
       })
 
-
       it('renders a social media link', () => {
         const link = wrapper.findAll('a').at(0)
-        console.log(link.html())
         expect(link.attributes('href')).toEqual('https://www.instagram.com/nimitbhargava')
       })
 
-      it('shows the favicon', () => {
+      it('shows the first favicon', () => {
         const favicon = wrapper.findAll('a').at(0).find('img')
-        console.log(favicon.html())
         expect(favicon.attributes('src')).toEqual('https://www.instagram.com/favicon.ico')
       })
 
-      // I think this is enough to test the component
+      it('shows the second favicon', () => {
+        const favicon = wrapper.findAll('a').at(1).find('img')
+        expect(favicon.attributes('src')).toEqual('https://www.facebook.com/favicon.ico')
+      })
 
-      
+      it('shows the last favicon', () => {
-      // Case 0:
+        const favicon = wrapper.findAll('a').at(-1).find('img')
-      // Display profile links
+        expect(favicon.attributes('src')).toEqual('https://www.youtube.com/favicon.ico')
-      //
+      })
-      // Case1:
-      // Have 3 links
-      // Expected 3 links
-      //
-      // Case 2:
-      // Simulate click on link - expect click on link
     })
   })
 })