IW-4876 | tests and more fixes

Author: Karol Tatała

package.json

@@ -63,6 +63,7 @@
     "@babel/preset-react": "^7.8.3",
     "@rollup/plugin-commonjs": "^11.0.2",
     "@rollup/plugin-node-resolve": "^7.1.1",
+    "@testing-library/react": "^11.2.2",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^25.1.0",

source/components/GlobalNavigation/components/Notifications/CardText.js

@@ -19,6 +19,10 @@ function bold(text) {
 }
 
 function escapeHtml(unsafe) {
+    if (!unsafe) {
+        return unsafe;
+    }
+
     return unsafe
         .replace(/&/g, '&')
         .replace(/</g, '&lt;')
@@ -159,9 +163,9 @@ function getArticleCommentReplyAtMentionMessageBody(t, { latestActors, title })
 }
 
 const getText = (translateFunc, model, userData) => {
-    const { type, snippet, title, totalUniqueActors, latestActors, refersToAuthorId } = model;
-    const escapedTitle = escapeHtml(title);
-    const postTitleMarkup = `<b>${escapedTitle}</b>`;
+    const { type, snippet, title: dangerousTitle, totalUniqueActors, latestActors, refersToAuthorId } = model;
+    const title = escapeHtml(dangerousTitle);
+    const postTitleMarkup = `<b>${title}</b>`;
 
     if (isAnnouncement(type)) {
         return snippet;

source/components/GlobalNavigation/components/Notifications/CardText.spec.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import ShallowRenderer from 'react-test-renderer/shallow';
 import merge from 'lodash/merge';
+import { render } from '@testing-library/react';
 
 import { notificationTypes } from '../../models/notificationTypes';
 import { useUserData } from '../../context/UserContext';
@@ -10,7 +11,7 @@ import CardText from './CardText';
 const actorsMock = [
     {
         id: '12345',
-        name: 'ATOB',
+        name: 'ATO<b>B</b>',
         avatarUrl: 'https://static.wikia.nocookie.net/458a839b-8f84-42c2-b9d1-cf8c5a21bd75',
         profileUrl: 'http://localhost:6060/wiki/User:ATOB',
         src: 'https://static.wikia.nocookie.net/458a839b-8f84-42c2-b9d1-cf8c5a21bd75',
@@ -35,6 +36,13 @@ jest.mock('../../context/UserContext', () => ({
     useUserData: jest.fn(),
 }));
 
+jest.mock('react-i18next', () => ({
+    ...jest.requireActual('react-i18next'),
+    useTranslation: () => [jest.fn((key, params) => {
+        return `${key}${params ? JSON.stringify(params) : ''}`;
+    })],
+}));
+
 const defaultProps = {
     track: () => null,
     model: {
@@ -45,20 +53,19 @@ const defaultProps = {
         latestEventUri: 'http://xkxd.wikia.com/d/p/3100000000000001096/r/3086787452863005635',
         snippet: 'some snippet',
         timestamp: 1550663179,
-        title: 'MOAR LIKES',
+        title: 'MOAR <b>LIKES</b>',
         type: notificationTypes.discussionReply,
         totalUniqueActors: actorsMock.length,
         uri: 'http://xkxd.wikia.com/d/p/3100000000000001096',
     },
 };
 
 function renderComponent(props) {
-    const renderer = new ShallowRenderer();
     const computedProps = merge({}, defaultProps, props);
 
-    renderer.render(<CardText {...computedProps} />);
+    const {container} = render(<CardText {...computedProps} />);
 
-    return renderer.getRenderOutput();
+    return container.firstChild;
 }
 
 test('CardText renders correctly with default props', () => {
@@ -223,7 +230,7 @@ describe('Discussion at mentions', () => {
                 type: notificationTypes.postAtMention,
                 latestActors: actorsMock.slice(0, 1),
                 totalUniqueActors: 1,
-                title: 'Post with at mention',
+                title: 'Post with at <b>mention</b>',
             },
         })).toMatchSnapshot();
     });
@@ -234,7 +241,7 @@ describe('Discussion at mentions', () => {
                 type: notificationTypes.threadAtMention,
                 latestActors: actorsMock.slice(0, 1),
                 totalUniqueActors: 1,
-                title: 'Post with at mention',
+                title: 'Post with at <b>mention</b>',
             },
         })).toMatchSnapshot();
     });
@@ -250,7 +257,7 @@ describe('Article Comments', () => {
                 type: notificationTypes.articleCommentReply,
                 latestActors: actorsMock.slice(0, 1),
                 totalUniqueActors: 1,
-                title: 'Article Title',
+                title: 'Article <b>Title</b>',
                 refersToAuthorId: someMockAuthor.id,
             },
         })).toMatchSnapshot();
@@ -265,7 +272,7 @@ describe('Article Comments', () => {
                 type: notificationTypes.articleCommentReply,
                 latestActors: actorsMock.slice(0, 1),
                 totalUniqueActors: 1,
-                title: 'Article Title',
+                title: 'Article <b>Title</b>',
                 refersToAuthorId: '11111',
             },
         })).toMatchSnapshot();
@@ -283,7 +290,7 @@ describe('Article Comments at mentions', () => {
                 type: notificationTypes.articleCommentAtMention,
                 latestActors: actorsMock.slice(0, 1),
                 totalUniqueActors: 1,
-                title: 'Article Title',
+                title: 'Article <b>Title</b>',
             },
         })).toMatchSnapshot();
     });
@@ -294,7 +301,7 @@ describe('Article Comments at mentions', () => {
                 type: notificationTypes.articleCommentReplyAtMention,
                 latestActors: actorsMock.slice(0, 1),
                 totalUniqueActors: 1,
-                title: 'Article Title',
+                title: 'Article <b>Title</b>',
             },
         })).toMatchSnapshot();
     });
@@ -305,7 +312,7 @@ describe('Article Comments at mentions', () => {
                 type: notificationTypes.articleCommentReplyAtMention,
                 latestActors: [{ id: 0, name: null }],
                 totalUniqueActors: 1,
-                title: 'Article Title',
+                title: 'Article <b>Title</b>',
             },
         })).toMatchSnapshot();
     });