@times-components/ts-components 1.41.1 → 1.43.1

package/src/components/latest-from-section/__tests__/__snapshots__/LatestFromSection.test.tsx.snap

@@ -65,12 +65,12 @@ exports[`<LatestFromSection> renders  1`] = `
                   class="css-view-1dbjc4n"
                 >
                   <div
-                    class="css-view-1dbjc4n"
-                    style="align-items: flex-start; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end;"
+                    class="tc-view__TcView-nuazoi-0 fPjBcr"
+                    style="align-items: flex-start; display: block; flex-direction: row; flex-wrap: wrap; justify-content: flex-end;"
                   >
                     <div
-                      class="imageContainerClass imageContainerClass css-view-1dbjc4n"
-                      style="flex-grow: 1; flex-shrink: 1; flex-basis: 0%; margin-bottom: 10px; min-width: 100%;"
+                      class="imageContainerClass tc-view__TcView-nuazoi-0 fPjBcr"
+                      style="flex: 1; margin-bottom: 10px; min-width: 100%;"
                     >
                       <div
                         class="tc-view__TcView-nuazoi-0 fPjBcr"
@@ -112,8 +112,7 @@ exports[`<LatestFromSection> renders  1`] = `
                       </div>
                     </div>
                     <div
-                      class="contentContainerClass contentContainerClass css-view-1dbjc4n"
-                      style="flex-grow: 1; flex-shrink: 1; flex-basis: 0%; margin-bottom: 0px; min-width: 100%;"
+                      class="tc-view__TcView-nuazoi-0 contentContainerClass card-content__TcCardContainer-sc-1w0wvq8-0 hzpWKJ"
                     >
                       <div
                         class="css-view-1dbjc4n"
@@ -212,12 +211,12 @@ exports[`<LatestFromSection> renders  1`] = `
                   class="css-view-1dbjc4n"
                 >
                   <div
-                    class="css-view-1dbjc4n"
-                    style="align-items: flex-start; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end;"
+                    class="tc-view__TcView-nuazoi-0 fPjBcr"
+                    style="align-items: flex-start; display: block; flex-direction: row; flex-wrap: wrap; justify-content: flex-end;"
                   >
                     <div
-                      class="imageContainerClass imageContainerClass css-view-1dbjc4n"
-                      style="flex-grow: 1; flex-shrink: 1; flex-basis: 0%; margin-bottom: 10px; min-width: 100%;"
+                      class="imageContainerClass tc-view__TcView-nuazoi-0 fPjBcr"
+                      style="flex: 1; margin-bottom: 10px; min-width: 100%;"
                     >
                       <div
                         class="tc-view__TcView-nuazoi-0 fPjBcr"
@@ -259,8 +258,7 @@ exports[`<LatestFromSection> renders  1`] = `
                       </div>
                     </div>
                     <div
-                      class="contentContainerClass contentContainerClass css-view-1dbjc4n"
-                      style="flex-grow: 1; flex-shrink: 1; flex-basis: 0%; margin-bottom: 0px; min-width: 100%;"
+                      class="tc-view__TcView-nuazoi-0 contentContainerClass card-content__TcCardContainer-sc-1w0wvq8-0 hzpWKJ"
                     >
                       <div
                         class="css-view-1dbjc4n"
@@ -359,12 +357,12 @@ exports[`<LatestFromSection> renders  1`] = `
                   class="css-view-1dbjc4n"
                 >
                   <div
-                    class="css-view-1dbjc4n"
-                    style="align-items: flex-start; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end;"
+                    class="tc-view__TcView-nuazoi-0 fPjBcr"
+                    style="align-items: flex-start; display: block; flex-direction: row; flex-wrap: wrap; justify-content: flex-end;"
                   >
                     <div
-                      class="imageContainerClass imageContainerClass css-view-1dbjc4n"
-                      style="flex-grow: 1; flex-shrink: 1; flex-basis: 0%; margin-bottom: 10px; min-width: 100%;"
+                      class="imageContainerClass tc-view__TcView-nuazoi-0 fPjBcr"
+                      style="flex: 1; margin-bottom: 10px; min-width: 100%;"
                     >
                       <div
                         class="tc-view__TcView-nuazoi-0 fPjBcr"
@@ -406,8 +404,7 @@ exports[`<LatestFromSection> renders  1`] = `
                       </div>
                     </div>
                     <div
-                      class="contentContainerClass contentContainerClass css-view-1dbjc4n"
-                      style="flex-grow: 1; flex-shrink: 1; flex-basis: 0%; margin-bottom: 0px; min-width: 100%;"
+                      class="tc-view__TcView-nuazoi-0 contentContainerClass card-content__TcCardContainer-sc-1w0wvq8-0 hzpWKJ"
                     >
                       <div
                         class="css-view-1dbjc4n"

package/src/components/recommended-articles/RecommendedArticles.stories.tsx

@@ -2,25 +2,20 @@ import React from 'react';
 
 import { showcaseConverter } from '@times-components/storybook';
 
+import { getArticles } from './helpers';
 import { FetchProvider } from '../../helpers/fetch/FetchProvider';
 import previewData from '../../fixtures/preview-data/recommended-articles';
 import analyticsStream from '../../fixtures/analytics-actions/analytics-actions';
 
 import { RecommendedArticles } from './RecommendedArticles';
 
-export const getArticles = (data: any, numOfArticles: number) => ({
-  recommendations: {
-    articles: data.recommendations.articles.slice(0, numOfArticles)
-  }
-});
-
 const recommArticles = {
   children: [
     {
       component: () => (
         <FetchProvider previewData={getArticles(previewData, 1)}>
           <RecommendedArticles
-            section="News"
+            heading="Today's news"
             isVisible
             analyticsStream={analyticsStream}
           />
@@ -34,7 +29,7 @@ const recommArticles = {
       component: () => (
         <FetchProvider previewData={getArticles(previewData, 2)}>
           <RecommendedArticles
-            section="Business"
+            heading="Today's business"
             isVisible
             analyticsStream={analyticsStream}
           />
@@ -48,7 +43,7 @@ const recommArticles = {
       component: () => (
         <FetchProvider previewData={previewData}>
           <RecommendedArticles
-            section="Sport"
+            heading="Today's sport"
             isVisible
             analyticsStream={analyticsStream}
           />

package/src/components/recommended-articles/RecommendedArticles.tsx

@@ -3,28 +3,48 @@ import React from 'react';
 import RelatedArticles from '@times-components/related-articles';
 
 import { useFetch } from '../../helpers/fetch/FetchProvider';
+import { useTrackingContext } from '../../helpers/tracking/TrackingContextProvider';
 import { getRelatedArticlesSlice } from './formatters';
 
 export const RecommendedArticles: React.FC<{
-  section: string;
+  heading: string;
   isVisible?: boolean;
   analyticsStream?: (evt: any) => void;
-}> = ({ section, isVisible, analyticsStream }) => {
+}> = ({ heading, isVisible, analyticsStream }) => {
   const { loading, error, data } = useFetch<any>();
 
   if (loading || error || data === undefined) {
     return null;
   }
 
+  const { fireAnalyticsEvent } = useTrackingContext();
+
+  const slice = getRelatedArticlesSlice(data.recommendations);
+
+  const onClickHandler = (__: MouseEvent, article: { url: string }) => {
+    const found = slice.items.find(
+      item => item.article.shortIdentifier === article.url.slice(-9)
+    );
+
+    if (fireAnalyticsEvent) {
+      fireAnalyticsEvent({
+        action: 'Clicked',
+        object: 'RecommendedArticles',
+        attrs: { article_parent_name: found ? found.article.headline : '' }
+      });
+    }
+  };
+
   return (
     <div
       id="recommended-articles"
       style={{ display: isVisible ? 'block' : 'none' }}
     >
       <RelatedArticles
-        heading={`Today's ${section}`}
-        slice={getRelatedArticlesSlice(data.recommendations)}
+        heading={heading}
+        slice={slice}
         isVisible
+        onPress={onClickHandler}
         analyticsStream={analyticsStream}
       />
     </div>

package/src/components/recommended-articles/RecommendedFetch.tsx

@@ -1,27 +1,53 @@
 import React, { useEffect, useState } from 'react';
 
 import { FetchProvider } from '../../helpers/fetch/FetchProvider';
+import { TrackingContextProvider } from '../../helpers/tracking/TrackingContextProvider';
 import { RecommendedArticles } from './RecommendedArticles';
 
 export const RecommendedFetch: React.FC<{
   articleId: string;
-  section: string;
+  articleHeadline: string;
+  articleSection: string;
   isVisible?: boolean;
   analyticsStream?: (evt: any) => void;
-}> = ({ articleId, section, isVisible, analyticsStream }) => {
+}> = ({
+  articleId,
+  articleHeadline,
+  articleSection,
+  isVisible,
+  analyticsStream
+}) => {
   const [isClientSide, setIsClientSide] = useState<boolean>(false);
 
   useEffect(() => {
     setIsClientSide(true);
   }, []);
 
+  const heading = `Today's ${articleSection}`;
+
   return isClientSide ? (
     <FetchProvider url={`/api/recommended-articles/${articleId}`}>
-      <RecommendedArticles
-        section={section}
-        isVisible={isVisible}
-        analyticsStream={analyticsStream}
-      />
+      <TrackingContextProvider
+        context={{
+          object: 'RecommendedArticles',
+          attrs: {
+            event_navigation_action: 'navigation',
+            event_navigation_name: 'widget : relevant article',
+            event_navigation_browsing_method: 'click',
+            section_details: `section : ${articleSection}`,
+            article_name: articleHeadline,
+            widget_headline: heading.toLowerCase(),
+            widget_section: articleSection,
+            widget_type: "today's section"
+          }
+        }}
+      >
+        <RecommendedArticles
+          heading={heading}
+          isVisible={isVisible}
+          analyticsStream={analyticsStream}
+        />
+      </TrackingContextProvider>
     </FetchProvider>
   ) : null;
 };

package/src/components/recommended-articles/__tests__/RecommendedArticles.test.tsx

@@ -1,23 +1,70 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import mockDate from 'mockdate';
+import { render, cleanup, fireEvent } from '@testing-library/react';
 
+import { getArticles } from '../helpers';
 import { useFetch } from '../../../helpers/fetch/FetchProvider';
+import { TrackingContextProvider } from '../../../helpers/tracking/TrackingContextProvider';
 import previewData from '../../../fixtures/preview-data/recommended-articles';
 
 import { RecommendedArticles } from '../RecommendedArticles';
 
-jest.mock('@times-components/related-articles', () => 'RelatedArticles');
-
 jest.mock('../../../helpers/fetch/FetchProvider', () => ({
   useFetch: jest.fn()
 }));
 
+jest.mock('@times-components/related-articles', () => ({
+  __esModule: true,
+  default: (props: any) => (
+    <div>
+      RelatedArticles
+      <div>{props.heading}</div>
+      {props.slice.items.map(({ article }: any) => (
+        <div
+          onClick={() => props.onPress(null, { url: article.shortIdentifier })}
+        >
+          {article.headline}
+        </div>
+      ))}
+    </div>
+  )
+}));
+
+const articles = previewData.recommendations.articles;
+
+const section = 'news';
+const heading = `Today's ${section}`;
+
+const initialContext = {
+  object: 'RecommendedArticles',
+  attrs: {
+    event_navigation_action: 'navigation',
+    event_navigation_name: 'widget : relevant article',
+    event_navigation_browsing_method: 'click',
+    section_details: `section : ${section}`,
+    article_name: 'Headline',
+    widget_headline: heading.toLowerCase(),
+    widget_section: section,
+    widget_type: "today's section"
+  }
+};
+
 describe('<RecommendedArticles>', () => {
+  beforeEach(() => {
+    mockDate.set(1620000000000);
+  });
+
+  afterEach(() => {
+    mockDate.reset();
+    jest.clearAllMocks();
+    cleanup();
+  });
+
   it('should render the initial loading state correctly', () => {
     (useFetch as jest.Mock).mockReturnValue({ loading: true });
 
     const { asFragment } = render(
-      <RecommendedArticles section="News" analyticsStream={() => ({})} />
+      <RecommendedArticles heading={heading} analyticsStream={() => ({})} />
     );
 
     expect(asFragment().firstChild).toBeNull();
@@ -27,26 +74,92 @@ describe('<RecommendedArticles>', () => {
     (useFetch as jest.Mock).mockReturnValue({ error: 'Some error occurred' });
 
     const { asFragment } = render(
-      <RecommendedArticles section="News" analyticsStream={() => ({})} />
+      <RecommendedArticles heading={heading} analyticsStream={() => ({})} />
     );
 
     expect(asFragment().firstChild).toBeNull();
   });
 
-  it('should render RelatedArticles correctly', () => {
-    (useFetch as jest.Mock).mockReturnValue({ data: previewData });
+  it('should render RelatedArticles correctly with 1 article', () => {
+    (useFetch as jest.Mock).mockReturnValue({
+      data: getArticles(previewData, 1)
+    });
 
-    const { container, asFragment } = render(
+    const { asFragment, getByText } = render(
       <RecommendedArticles
-        section="News"
+        heading={heading}
         isVisible
         analyticsStream={() => ({})}
       />
     );
 
-    const related = container.querySelector('relatedarticles') as HTMLElement;
-    expect(related.getAttribute('heading')).toEqual("Today's News");
+    expect(getByText(heading));
+    expect(getByText(articles[0].headline));
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should render RelatedArticles correctly with 2 articles', () => {
+    (useFetch as jest.Mock).mockReturnValue({
+      data: getArticles(previewData, 2)
+    });
 
+    const { asFragment, getByText } = render(
+      <RecommendedArticles heading={heading} analyticsStream={() => ({})} />
+    );
+
+    expect(getByText(heading));
+    expect(getByText(articles[0].headline));
+    expect(getByText(articles[1].headline));
     expect(asFragment()).toMatchSnapshot();
   });
+
+  it('should render RelatedArticles correctly with 3 articles', () => {
+    (useFetch as jest.Mock).mockReturnValue({ data: previewData });
+
+    const { asFragment, getByText } = render(
+      <RecommendedArticles
+        heading={heading}
+        isVisible
+        analyticsStream={() => ({})}
+      />
+    );
+
+    expect(getByText(heading));
+    expect(getByText(articles[0].headline));
+    expect(getByText(articles[1].headline));
+    expect(getByText(articles[2].headline));
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should fire analytics event when an article is clicked', () => {
+    const analyticsStream = jest.fn();
+
+    (useFetch as jest.Mock).mockReturnValue({ data: previewData });
+
+    const { getByText } = render(
+      <TrackingContextProvider
+        context={initialContext}
+        analyticsStream={analyticsStream}
+      >
+        <RecommendedArticles
+          heading={heading}
+          isVisible
+          analyticsStream={() => ({})}
+        />
+      </TrackingContextProvider>
+    );
+
+    fireEvent.click(getByText(articles[0].headline));
+
+    expect(analyticsStream).toHaveBeenCalledTimes(1);
+    expect(analyticsStream).toHaveBeenCalledWith({
+      action: 'Clicked',
+      object: 'RecommendedArticles',
+      attrs: {
+        ...initialContext.attrs,
+        eventTime: '2021-05-03T00:00:00.000Z',
+        article_parent_name: articles[0].headline
+      }
+    });
+  });
 });

package/src/components/recommended-articles/__tests__/RecommendedFetch.test.tsx

@@ -21,7 +21,8 @@ describe('<RecommendedFetch>', () => {
     const { asFragment, getByText } = render(
       <RecommendedFetch
         articleId="1234"
-        section="News"
+        articleHeadline="Some headline"
+        articleSection="News"
         analyticsStream={() => ({})}
       />
     );

package/src/components/recommended-articles/__tests__/__snapshots__/RecommendedArticles.test.tsx.snap

@@ -1,15 +1,67 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<RecommendedArticles> should render RelatedArticles correctly 1`] = `
+exports[`<RecommendedArticles> should render RelatedArticles correctly with 1 article 1`] = `
 <DocumentFragment>
   <div
     id="recommended-articles"
     style="display: block;"
   >
-    <relatedarticles
-      heading="Today's News"
-      slice="[object Object]"
-    />
+    <div>
+      RelatedArticles
+      <div>
+        Today's news
+      </div>
+      <div>
+        Save or splurge: what experts spend their own money on
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`<RecommendedArticles> should render RelatedArticles correctly with 2 articles 1`] = `
+<DocumentFragment>
+  <div
+    id="recommended-articles"
+    style="display: none;"
+  >
+    <div>
+      RelatedArticles
+      <div>
+        Today's news
+      </div>
+      <div>
+        Save or splurge: what experts spend their own money on
+      </div>
+      <div>
+        Lieutenant Colonel Ian Crooke
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`<RecommendedArticles> should render RelatedArticles correctly with 3 articles 1`] = `
+<DocumentFragment>
+  <div
+    id="recommended-articles"
+    style="display: block;"
+  >
+    <div>
+      RelatedArticles
+      <div>
+        Today's news
+      </div>
+      <div>
+        Save or splurge: what experts spend their own money on
+      </div>
+      <div>
+        Lieutenant Colonel Ian Crooke
+      </div>
+      <div>
+        Is the party over for Johnson?
+      </div>
+    </div>
   </div>
 </DocumentFragment>
 `;

package/src/components/recommended-articles/helpers.ts

@@ -0,0 +1,5 @@
+export const getArticles = (data: any, numOfArticles: number) => ({
+  recommendations: {
+    articles: data.recommendations.articles.slice(0, numOfArticles)
+  }
+});

package/src/types/externs.d.ts

@@ -207,9 +207,10 @@ declare module '@times-components/related-articles' {
   import { FC } from 'react';
   type RelatedArticles = {
     heading?: string;
-    analyticsStream: AnalyticsStreamType;
-    isVisible: boolean;
     slice: any;
+    isVisible: boolean;
+    onPress?: any;
+    analyticsStream: AnalyticsStreamType;
   };
   const RelatedArticles: FC<RelatedArticles>;
   export default RelatedArticles;