@times-components/ts-components 1.32.1 → 1.32.2

package/src/components/article-header/ArticleHeader.stories.tsx

@@ -1,8 +1,11 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { select, text } from '@storybook/addon-knobs';
-import { format, addMinutes } from 'date-fns';
-import { utcToZonedTime } from 'date-fns-tz';
+import {
+  // format,
+  addMinutes
+} from 'date-fns';
+// import { utcToZonedTime } from 'date-fns-tz';
 
 import { ArticleHarness } from '../../fixtures/article-harness/ArticleHarness';
 import ArticleHeader from './ArticleHeader';
@@ -10,17 +13,19 @@ import ArticleHeader from './ArticleHeader';
 const getAttributes = () => {
   const id = 'Options';
 
-  const now = utcToZonedTime(new Date(), 'Europe/London');
+  const now = new Date();
+  const updated = text('Updated', addMinutes(now, -10).toISOString(), id);
 
-  const date = text('Date', format(now, 'dd/MM/yyyy'), id);
-  const time = text('Time', format(addMinutes(now, -10), 'HH:mm'), id);
+  // const now = utcToZonedTime(new Date(), 'Europe/London');
+  // const date = text('Date', format(now, 'dd/MM/yyyy'), id);
+  // const time = text('Time', format(addMinutes(now, -10), 'HH:mm'), id);
 
   const options = { True: 'true', False: undefined };
   const breaking = select('Breaking', options, 'true', id);
 
   const headline = text('Headline', 'This is the headline', id);
 
-  return { date, time, breaking, headline };
+  return { updated, breaking, headline };
 };
 
 storiesOf('Typescript Component/Article Header', module)
@@ -31,8 +36,9 @@ storiesOf('Typescript Component/Article Header', module)
     const props = getAttributes();
     return (
       <ArticleHeader
-        date={props.date}
-        time={props.time}
+        updated={props.updated}
+        // date={props.date}
+        // time={props.time}
         breaking={props.breaking}
         headline={encodeURIComponent(props.headline)}
       />
@@ -42,8 +48,9 @@ storiesOf('Typescript Component/Article Header', module)
     const props = getAttributes();
     return (
       <ArticleHeader
-        date={props.date}
-        time={props.time}
+        updated={props.updated}
+        // date={props.date}
+        // time={props.time}
         breaking={props.breaking}
       />
     );

package/src/components/article-header/ArticleHeader.tsx

@@ -1,12 +1,15 @@
 import React from 'react';
 import {
-  parse,
+  // parse,
   format,
   differenceInSeconds,
   differenceInCalendarDays,
   formatDistanceStrict
 } from 'date-fns';
-import { zonedTimeToUtc } from 'date-fns-tz';
+import {
+  // zonedTimeToUtc,
+  utcToZonedTime
+} from 'date-fns-tz';
 
 import { BreakingArticleFlag } from '../article-flag/LiveArticleFlag';
 import safeDecodeURIComponent from '../../utils/safeDecodeURIComponent';
@@ -34,16 +37,20 @@ const anchorString = (updateTxt = '', headlineTxt = '') => {
 };
 
 const ArticleHeader: React.FC<{
-  date: string;
-  time: string;
+  updated: string;
+  // date: string;
+  // time: string;
   breaking?: string;
   headline?: string;
-}> = ({ date, time, breaking, headline }) => {
+}> = ({ updated, breaking, headline }) => {
   const currentDateTime = new Date();
 
-  const updated = `${date} ${time}`;
-  const parsedDate = parse(updated, 'dd/MM/yyyy HH:mm', new Date());
-  const updatedDate = zonedTimeToUtc(parsedDate, 'Europe/London');
+  // const updated = `${date} ${time}`;
+  // const parsedDate = parse(updated, 'dd/MM/yyyy HH:mm', new Date());
+  // const updatedDate = zonedTimeToUtc(parsedDate, 'Europe/London');
+
+  const updatedDate = new Date(updated);
+  const parsedDate = utcToZonedTime(updatedDate, 'Europe/London');
 
   const timeSincePublishing =
     formatDistanceStrict(updatedDate, currentDateTime, {

package/src/components/article-header/__tests__/ArticleHeader.test.tsx

@@ -5,6 +5,148 @@ import MockDate from 'mockdate';
 
 import ArticleHeader from '../ArticleHeader';
 
+describe('ArticleHeader', () => {
+  describe('Same calendar day during GMT', () => {
+    afterEach(() => MockDate.reset());
+
+    const updated = '2021-12-31T06:30:00Z';
+
+    it('Within a minute of updating', () => {
+      MockDate.set('2021-12-31T06:30:10Z');
+
+      const { getByText, queryByTestId } = render(
+        <ArticleHeader updated={updated} />
+      );
+
+      expect(getByText('6.30am')).toBeVisible();
+      expect(queryByTestId('TimeSincePublishing')).toBeFalsy();
+    });
+
+    it('Within an hour of updating', () => {
+      MockDate.set('2021-12-31T07:00:00Z');
+
+      const { getByText } = render(<ArticleHeader updated={updated} />);
+
+      expect(getByText('6.30am')).toBeVisible();
+      expect(getByText('30 minutes ago')).toBeVisible();
+    });
+
+    it('Between 1 and 12 hours after updating', () => {
+      MockDate.set('2021-12-31T08:30:00Z');
+
+      const { getByText } = render(<ArticleHeader updated={updated} />);
+
+      expect(getByText('6.30am')).toBeVisible();
+      expect(getByText('2 hours ago')).toBeVisible();
+    });
+
+    it('After 12 hours but same calendar day', () => {
+      MockDate.set('2021-12-20T20:30:00Z');
+
+      const { getByText, queryByTestId } = render(
+        <ArticleHeader updated={updated} />
+      );
+
+      expect(getByText('6.30am')).toBeVisible();
+      expect(queryByTestId('TimeSincePublishing')).toBeFalsy();
+    });
+
+    it('With breaking flag and headline', () => {
+      MockDate.set('2021-12-31T07:00:00Z');
+
+      const { baseElement, getByText } = render(
+        <ArticleHeader
+          updated={updated}
+          breaking="true"
+          headline="This%20is%20the%20headline"
+        />
+      );
+
+      expect(getByText('6.30am')).toBeVisible();
+      expect(getByText('30 minutes ago')).toBeVisible();
+      expect(getByText('BREAKING')).toBeVisible();
+      expect(getByText('This is the headline')).toBeVisible();
+
+      expect(baseElement).toMatchSnapshot();
+    });
+
+    it('With breaking flag expired', () => {
+      MockDate.set('2021-12-31T08:30:00Z');
+
+      const { getByText, queryByText } = render(
+        <ArticleHeader updated={updated} breaking="true" />
+      );
+
+      expect(getByText('6.30am')).toBeVisible();
+      expect(getByText('2 hours ago')).toBeVisible();
+      expect(queryByText('BREAKING')).toBeFalsy();
+    });
+  });
+
+  describe('Same calendar day during BST', () => {
+    afterEach(() => MockDate.reset());
+
+    const updated = '2022-04-20T06:30:00+01:00';
+
+    it('Within a minute of updating', () => {
+      MockDate.set('2022-04-20T06:30:10+01:00');
+
+      const { getByText, queryByTestId } = render(
+        <ArticleHeader updated={updated} />
+      );
+
+      expect(getByText('6.30am')).toBeVisible();
+      expect(queryByTestId('TimeSincePublishing')).toBeFalsy();
+    });
+
+    it('Within an hour of updating', () => {
+      MockDate.set('2022-04-20T07:00:00+01:00');
+
+      const { getByText } = render(<ArticleHeader updated={updated} />);
+
+      expect(getByText('6.30am')).toBeVisible();
+      expect(getByText('30 minutes ago')).toBeVisible();
+    });
+
+    it('Between 1 and 12 hours after updating', () => {
+      MockDate.set('2022-04-20T08:30:00+01:00');
+
+      const { getByText } = render(<ArticleHeader updated={updated} />);
+
+      expect(getByText('6.30am')).toBeVisible();
+      expect(getByText('2 hours ago')).toBeVisible();
+    });
+
+    it('After 12 hours but same calendar day', () => {
+      MockDate.set('2022-04-20T20:30:00+01:00');
+
+      const { getByText, queryByTestId } = render(
+        <ArticleHeader updated={updated} />
+      );
+
+      expect(getByText('6.30am')).toBeVisible();
+      expect(queryByTestId('TimeSincePublishing')).toBeFalsy();
+    });
+  });
+
+  describe('Different calendar days', () => {
+    afterEach(() => MockDate.reset());
+
+    const updated = '2021-12-31T22:30:00Z';
+
+    it('Between 1 and 12 hours after updating', () => {
+      MockDate.set('2022-01-01T02:30:00Z');
+
+      const { getByText } = render(<ArticleHeader updated={updated} />);
+
+      expect(getByText('10.30pm')).toBeVisible();
+      expect(getByText('4 hours ago')).toBeVisible();
+      expect(getByText('December 31 2021')).toBeVisible();
+    });
+  });
+});
+
+/*
 describe('ArticleHeader', () => {
   describe('Same calendar day during GMT', () => {
     afterEach(() => MockDate.reset());
@@ -149,3 +291,4 @@ describe('ArticleHeader', () => {
     });
   });
 });
+*/

package/src/components/article-header/__tests__/__snapshots__/ArticleHeader.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`ArticleHeader Same calendar day during GMT With breaking flag and headl
   <div>
     <div
       class="sc-VigVT esKZlx"
-      id="u_311220210630T222"
+      id="u_20211231063000T222"
     >
       <div
         class="sc-jTzLTM hsNKrf"