From 7a258ace33f2a2d38001ba2f65b5718fb992ef9a Mon Sep 17 00:00:00 2001
From: Hel Nershing Thapa <helnershingthapa@gmail.com>
Date: Wed, 27 Jul 2022 14:48:26 +0545
Subject: [PATCH] Add test cases for SocialMedia component

---
 .../components/userDetail/headerProfile.js    |  2 +-
 .../userDetail/tests/headerProfile.test.js    | 74 +++++++++++++++++++
 2 files changed, 75 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/userDetail/tests/headerProfile.test.js

diff --git a/frontend/src/components/userDetail/headerProfile.js b/frontend/src/components/userDetail/headerProfile.js
index 7ac0afbe3e..f67d4a6555 100644
--- a/frontend/src/components/userDetail/headerProfile.js
+++ b/frontend/src/components/userDetail/headerProfile.js
@@ -13,7 +13,7 @@ import MissingMapsLogo from '../../assets/img/organizations/missingmaps.png';
 import SlackLogo from '../../assets/img/icons/slack.png';
 import { OSM_SERVER_URL, ORG_CODE } from '../../config';
 
-const SocialMedia = ({ data }) => {
+export const SocialMedia = ({ data }) => {
   const intl = useIntl();
   const socialMediaItems = ['twitterId', 'facebookId', 'linkedinId'];
 
diff --git a/frontend/src/components/userDetail/tests/headerProfile.test.js b/frontend/src/components/userDetail/tests/headerProfile.test.js
new file mode 100644
index 0000000000..110e5cd48b
--- /dev/null
+++ b/frontend/src/components/userDetail/tests/headerProfile.test.js
@@ -0,0 +1,74 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { SocialMedia } from '../headerProfile';
+import { IntlProviders } from '../../../utils/testWithIntl';
+
+let mockData = {
+  id: 10291369,
+  username: 'johndoe',
+  slackId: 'johndoeSlack',
+  twitterId: 'johndoeTwitter',
+  facebookId: 'johndoeFacebook',
+  linkedinId: 'johndoeLinkedin',
+};
+
+describe('SocialMedia component', () => {
+  it('should render the correct number of icons', () => {
+    const { container } = render(
+      <IntlProviders>
+        <SocialMedia data={mockData} />
+      </IntlProviders>,
+    );
+    // img tag for OSM, Missng Maps and Slack
+    expect(screen.getAllByRole('img')).toHaveLength(3);
+    // SVGs for Facebook, Linkedin, Twitter
+    expect(container.querySelectorAll('svg').length).toBe(3);
+  });
+
+  it('should render correct links', () => {
+    render(
+      <IntlProviders>
+        <SocialMedia data={mockData} />
+      </IntlProviders>,
+    );
+    expect(
+      screen.getAllByRole('link', {
+        name: 'johndoe',
+      }),
+    ).toHaveLength(2);
+    expect(screen.queryAllByRole('link', { name: 'johndoe' })[0]).toHaveAttribute(
+      'href',
+      'https://www.openstreetmap.org/user/johndoe',
+    );
+    expect(screen.queryAllByRole('link', { name: 'johndoe' })[1]).toHaveAttribute(
+      'href',
+      'https://www.missingmaps.org/users/#/johndoe',
+    );
+    expect(screen.getByRole('link', { name: 'johndoeTwitter' })).toHaveAttribute(
+      'href',
+      'https://www.twitter.com/johndoeTwitter',
+    );
+    expect(screen.getByRole('link', { name: 'johndoeFacebook' })).toHaveAttribute(
+      'href',
+      'https://www.facebook.com/johndoeFacebook',
+    );
+    expect(screen.getByRole('link', { name: 'johndoeLinkedin' })).toHaveAttribute(
+      'href',
+      'https://www.linkedin.com/in/johndoeLinkedin',
+    );
+  });
+
+  it('should not render the Facebook icon and link for a falsy value', () => {
+    mockData.facebookId = '';
+    render(
+      <IntlProviders>
+        <SocialMedia data={mockData} />
+      </IntlProviders>,
+    );
+    expect(
+      screen.queryByRole('link', {
+        name: 'johndoefacebook',
+      }),
+    ).not.toBeInTheDocument();
+  });
+});