feat(TMRS-482): linting and test updates

newsuk · Nov 28, 2024 · ad62398 · ad62398
1 parent a368387
commit ad62398
Show file tree

Hide file tree

Showing 7 changed files with 220 additions and 17 deletions.
diff --git a/packages/article-extras/__tests__/shared.js b/packages/article-extras/__tests__/shared.js
@@ -11,7 +11,11 @@ import { iterator } from "@times-components/test-utils";
 
 import { UserState } from "./mocks";
 import ArticleExtras from "../src/article-extras";
-import { relatedArticleSlice, topics } from "../fixtures/article-extras";
+import {
+  relatedArticleSlice,
+  categorisedArticles,
+  topics
+} from "../fixtures/article-extras";
 
 const commentingConfig = {
   account: "sp_pCQgrRiN"
@@ -45,6 +49,7 @@ export default () => {
             commentsEnabled
             registerNode={() => {}}
             relatedArticleSlice={relatedArticleSlice}
+            categorisedArticles={categorisedArticles}
             relatedArticlesVisible
             commentingConfig={commentingConfig}
             topics={topics}
@@ -56,7 +61,7 @@ export default () => {
     },
     {
       name:
-        "no topics and comments when user not logged in, only related articles and sponsored div",
+        "no topics and comments when user not logged in, only related articles, category articles, and sponsored div",
       test: () => {
         UserState.mockStates = [];
         const testInstance = TestRenderer.create(
@@ -66,6 +71,7 @@ export default () => {
             commentsEnabled
             registerNode={() => {}}
             relatedArticleSlice={relatedArticleSlice}
+            categorisedArticles={categorisedArticles}
             relatedArticlesVisible
             commentingConfig={commentingConfig}
             topics={topics}
@@ -85,6 +91,7 @@ export default () => {
             commentsEnabled
             registerNode={() => {}}
             relatedArticleSlice={relatedArticleSlice}
+            categorisedArticles={categorisedArticles}
             relatedArticlesVisible
             commentingConfig={commentingConfig}
             topics={topics}
@@ -104,6 +111,7 @@ export default () => {
             commentsEnabled
             registerNode={() => {}}
             relatedArticleSlice={relatedArticleSlice}
+            categorisedArticles={categorisedArticles}
             relatedArticlesVisible
             commentingConfig={commentingConfig}
             topics={topics}

diff --git a/packages/article-extras/__tests__/web/__snapshots__/article-extras.test.js.snap b/packages/article-extras/__tests__/web/__snapshots__/article-extras.test.js.snap
@@ -17,6 +17,7 @@ Array [
     id="related-articles"
   >
     <RelatedArticles
+      hideBorder={false}
       isVisible={true}
     />
     <div>
@@ -56,14 +57,107 @@ Array [
 ]
 `;
 
-exports[`2. no topics and comments when user not logged in, only related articles and sponsored div 1`] = `
+exports[`2. no topics and comments when user not logged in, only related articles, category articles, and sponsored div 1`] = `
 Array [
   <div
     id="related-articles"
   >
     <RelatedArticles
+      hideBorder={true}
       isVisible={true}
     />
+    <div
+      id="categorised-articles"
+    >
+      <div>
+        More from category
+      </div>
+      <div>
+        <div>
+          <article>
+            <div>
+              <div>
+                <a
+                  href="/article/tms-pratchetts-law-of-the-jungle-xgqrcw779"
+                >
+                  <div>
+                    <div>
+                      <img
+                        alt="TMS: Pratchett’s law of the jungle - Disable Saving 2"
+                      />
+                    </div>
+                  </div>
+                </a>
+              </div>
+            </div>
+            <div>
+              <p>
+                Health
+              </p>
+              <div>
+                <a
+                  href="/article/tms-pratchetts-law-of-the-jungle-xgqrcw779"
+                >
+                  <h3>
+                    TMS: Pratchett’s law of the jungle - Disable Saving 2
+                  </h3>
+                </a>
+              </div>
+              <p>
+                March 23 2015, 8.39pm
+              </p>
+              
+            </div>
+          </article>
+        </div>
+      </div>
+    </div>
+    <div
+      id="categorised-articles"
+    >
+      <div>
+        More from parent
+      </div>
+      <div>
+        <div>
+          <article>
+            <div>
+              <div>
+                <a
+                  href="/article/tms-pratchetts-law-of-the-jungle-xgqrcw779"
+                >
+                  <div>
+                    <div>
+                      <img
+                        alt="TMS: Pratchett’s law of the jungle - Disable Saving"
+                      />
+                    </div>
+                  </div>
+                </a>
+              </div>
+            </div>
+            <div>
+              <p>
+                Health
+              </p>
+              <div>
+                <a
+                  href="/article/tms-pratchetts-law-of-the-jungle-xgqrcw779"
+                >
+                  <h3>
+                    TMS: Pratchett’s law of the jungle - Disable Saving
+                  </h3>
+                </a>
+              </div>
+              <p>
+                March 23 2015, 7.39pm
+              </p>
+              
+            </div>
+          </article>
+        </div>
+      </div>
+    </div>
   </div>,
   <div>
     <span>
@@ -105,6 +199,7 @@ Array [
     id="related-articles"
   >
     <RelatedArticles
+      hideBorder={false}
       isVisible={true}
     />
     <div>
@@ -161,6 +256,7 @@ Array [
     id="related-articles"
   >
     <RelatedArticles
+      hideBorder={false}
       isVisible={true}
     />
     <div>

diff --git a/packages/article-extras/fixtures/article-extras.js b/packages/article-extras/fixtures/article-extras.js
@@ -609,6 +609,90 @@ const relatedArticleSlice = {
   ],
   sliceName: "StandardSlice"
 };
+
+const categorisedArticles = {
+  categoryArticles: {
+    label: "category",
+    articles: [
+      {
+        bylines: [
+          {
+            byline: [
+              {
+                attributes: {},
+                children: [
+                  {
+                    attributes: {
+                      value: "Patrick Kidd"
+                    },
+                    children: [],
+                    name: "text"
+                  }
+                ],
+                name: "inline"
+              }
+            ]
+          }
+        ],
+        headline: "TMS: Pratchett’s law of the jungle - Disable Saving 2",
+        label: "Health",
+        media: {
+          crops: [
+            {
+              url:
+                "https://www.thetimes.co.uk/imageserver/image/methode%2Ftimes%2Fprod%2Fweb%2Fbin%2F0547a7be-fb77-11e7-a987-7fcf5e9983dc.jpg?crop=1600%2C1125%2C0%2C104",
+              ratio: "3:2"
+            }
+          ]
+        },
+        publicationName: "TIMES",
+        publishedDateTime: "2015-03-23T20:39:39.000Z",
+        categoryPath: "/article/tms-pratchetts-law-of-the-jungle-xgqrcw779"
+      }
+    ]
+  },
+  parentCategoryArticles: {
+    label: "parent",
+    articles: [
+      {
+        bylines: [
+          {
+            byline: [
+              {
+                attributes: {},
+                children: [
+                  {
+                    attributes: {
+                      value: "Patrick Kidd"
+                    },
+                    children: [],
+                    name: "text"
+                  }
+                ],
+                name: "inline"
+              }
+            ]
+          }
+        ],
+        headline: "TMS: Pratchett’s law of the jungle - Disable Saving",
+        label: "Health",
+        media: {
+          crops: [
+            {
+              url:
+                "https://www.thetimes.co.uk/imageserver/image/methode%2Ftimes%2Fprod%2Fweb%2Fbin%2F0547a7be-fb77-11e7-a987-7fcf5e9983dc.jpg?crop=1600%2C1125%2C0%2C104",
+              ratio: "3:2"
+            }
+          ]
+        },
+        publicationName: "TIMES",
+        publishedDateTime: "2015-03-23T19:39:39.000Z",
+        categoryPath: "/article/tms-pratchetts-law-of-the-jungle-xgqrcw779"
+      }
+    ]
+  }
+};
+
 const topics = [
   {
     __typename: "Topic",
@@ -637,4 +721,4 @@ const topics = [
   }
 ];
 
-export { relatedArticleSlice, topics };
+export { relatedArticleSlice, categorisedArticles, topics };
diff --git a/packages/article-extras/src/article-extras.js b/packages/article-extras/src/article-extras.js
@@ -5,7 +5,11 @@ import ArticleComments from "@times-components/article-comments";
 import RelatedArticles from "@times-components/related-articles";
 import { MessageContext } from "@times-components/message-bar";
 import SaveAndShareBar from "@times-components/save-and-share-bar";
-import { RecommendedFetch, Breadcrumb, CategorisedArticles } from "@times-components/ts-components";
+import {
+  RecommendedFetch,
+  Breadcrumb,
+  CategorisedArticles
+} from "@times-components/ts-components";
 
 import ArticleTopics from "./article-topics";
 import {
@@ -81,12 +85,20 @@ const ArticleExtras = ({
             articleSection={section}
           />
         )}
-        {!isRecommendedActive && categoryArticles && (
-          <CategorisedArticles heading={categoryArticles.label} articles={categoryArticles.articles} />
-        )}
-        {!isRecommendedActive && parentCategoryArticles && (
-          <CategorisedArticles heading={parentCategoryArticles.label} articles={parentCategoryArticles.articles} />
-        )}
+        {!isRecommendedActive &&
+          categoryArticles && (
+            <CategorisedArticles
+              heading={categoryArticles.label}
+              articles={categoryArticles.articles}
+            />
+          )}
+        {!isRecommendedActive &&
+          parentCategoryArticles && (
+            <CategorisedArticles
+              heading={parentCategoryArticles.label}
+              articles={parentCategoryArticles.articles}
+            />
+          )}
       </div>
       <PromotedContentContainer>
         <PromotedContentTitle>PROMOTED CONTENT</PromotedContentTitle>
@@ -151,6 +163,7 @@ ArticleExtras.propTypes = {
   commentsEnabled: PropTypes.bool.isRequired,
   registerNode: PropTypes.func.isRequired,
   relatedArticleSlice: PropTypes.shape({}),
+  categorisedArticles: PropTypes.shape({}),
   relatedArticlesVisible: PropTypes.bool.isRequired,
   commentingConfig: PropTypes.shape({
     account: PropTypes.string.isRequired
@@ -168,6 +181,7 @@ ArticleExtras.propTypes = {
 
 ArticleExtras.defaultProps = {
   relatedArticleSlice: null,
+  categorisedArticles: null,
   topics: null,
   isSharingSavingEnabled: true,
   isCommentEnabled: true,

diff --git a/packages/article-skeleton/src/article-skeleton.js b/packages/article-skeleton/src/article-skeleton.js
@@ -146,7 +146,8 @@ const ArticleSkeleton = ({
       window.removeEventListener("scroll", handleScroll);
     };
   }, []);
-  const { hostName, canonicalUrl, breadcrumbs, categorisedArticles } = articleDataFromRender || {};
+  const { hostName, canonicalUrl, breadcrumbs, categorisedArticles } =
+    articleDataFromRender || {};
   const articleUrl =
     hostName && canonicalUrl ? `${hostName}${canonicalUrl}` : url;
 

diff --git a/packages/ts-components/src/components/categorised-articles/CategorisedArticles.stories.tsx b/packages/ts-components/src/components/categorised-articles/CategorisedArticles.stories.tsx
@@ -20,8 +20,8 @@ storiesOf('Typescript Component/Categorised Articles', module).add(
           article_name: '<headline>',
           widget_headline: '<headline>',
           widget_section: '<section>',
-          widget_type: "today's section",
-        },
+          widget_type: "today's section"
+        }
       }}
       analyticsStream={analyticsStream}
     >

diff --git a/packages/ts-components/src/components/categorised-articles/CategorisedArticles.tsx b/packages/ts-components/src/components/categorised-articles/CategorisedArticles.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {
   Slice,
   SliceArticle,
-  MouseEventType,
+  MouseEventType
 } from '@times-components/ts-slices';
 
 import { useTrackingContext } from '../../helpers/tracking/TrackingContextProvider';
@@ -16,15 +16,15 @@ interface CategorisedArticlesProps {
 }
 export const CategorisedArticles: React.FC<CategorisedArticlesProps> = ({
   heading,
-  articles,
+  articles
 }) => {
   const { fireAnalyticsEvent } = useTrackingContext();
 
   const onClickHandler = (__: MouseEventType, article: SliceArticle) => {
     if (fireAnalyticsEvent) {
       fireAnalyticsEvent({
         action: 'Clicked',
-        attrs: { article_parent_name: article.headline },
+        attrs: { article_parent_name: article.headline }
       });
     }
   };