AA-381: Fix shorten welcome message bug (#251)

src/course-home/outline-tab/OutlineTab.test.jsx

@@ -123,19 +123,22 @@ describe('Outline Tab', () => {
   });
 
   describe('Welcome Message', () => {
-    it('does not render show more/less button under 200 characters', () => {
+    it('does not render show more/less button under 100 words', () => {
       render(<OutlineTab />, { store });
       expect(screen.getByTestId('alert-container-welcome')).toBeInTheDocument();
       expect(screen.queryByRole('button', { name: 'Show more' })).not.toBeInTheDocument();
     });
 
-    describe('over 200 characters', () => {
+    describe('over 100 words', () => {
       beforeEach(async () => {
         const outlineTabDataLongMessage = Factory.build('outlineTabData', {
           courseId,
           welcome_message_html: '<p>'
-            + 'Welcome to Demonstration Course!!! This message is over 200 characters long. We would like to test the '
-            + 'shorten message feature! When the page renders, this text should be shortened because it is very long.'
+            + 'This is a test welcome message that happens to be longer than one hundred words. We hope it will be shortened.'
+            + 'This is a test welcome message that happens to be longer than one hundred words. We hope it will be shortened.'
+            + 'This is a test welcome message that happens to be longer than one hundred words. We hope it will be shortened.'
+            + 'This is a test welcome message that happens to be longer than one hundred words. We hope it will be shortened.'
+            + 'This is a test welcome message that happens to be longer than one hundred words. We hope it will be shortened.'
             + '</p>',
         });
         axiosMock.onGet(outlineUrl).reply(200, outlineTabDataLongMessage);

src/course-home/outline-tab/widgets/WelcomeMessage.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Button, TransitionReplace } from '@edx/paragon';
+import truncate from 'truncate-html';
 
 import { useDispatch } from 'react-redux';
 import LmsHtmlFragment from '../LmsHtmlFragment';
@@ -22,8 +23,9 @@ function WelcomeMessage({ courseId, intl }) {
 
   const [display, setDisplay] = useState(true);
 
-  const shortWelcomeMessageHtml = welcomeMessageHtml.length > 200 && `${welcomeMessageHtml.substring(0, 199)}...`;
-  const [showShortMessage, setShowShortMessage] = useState(!!shortWelcomeMessageHtml);
+  const shortWelcomeMessageHtml = truncate(welcomeMessageHtml, 100, { byWords: true, keepWhitespaces: true });
+  const messageCanBeShortened = shortWelcomeMessageHtml.length < welcomeMessageHtml.length;
+  const [showShortMessage, setShowShortMessage] = useState(messageCanBeShortened);
   const dispatch = useDispatch();
 
   return (
@@ -35,7 +37,7 @@ function WelcomeMessage({ courseId, intl }) {
           setDisplay(false);
           dispatch(dismissWelcomeMessage(courseId));
         }}
-        footer={shortWelcomeMessageHtml && (
+        footer={messageCanBeShortened && (
           <div className="row w-100 m-0">
             <div className="col-12 col-sm-auto p-0">
               <Button