Handle scenario where latestItemTime results in no "earlier today" it…

…ems to show.
Financial-Times · Jan 22, 2019 · d6c0c8e · d6c0c8e
1 parent b923ae8
commit d6c0c8e
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 16 deletions.
diff --git a/components/x-teaser-timeline/__tests__/TeaserTimeline.test.jsx b/components/x-teaser-timeline/__tests__/TeaserTimeline.test.jsx
@@ -30,6 +30,24 @@ describe('x-teaser-timeline', () => {
 		});
 	});
 
+	describe('given latestItemsTime is set and results in all today`s articles being "latest"', () => {
+		let component;
+
+		beforeEach(() => {
+			component = shallow(
+				<TeaserTimeline
+					{...props}
+					timezoneOffset={0}
+					latestItemsTime='2018-10-17T00:00:00.000Z'
+				/>);
+		});
+
+		it('does not render the empty "earlier today" group', () => {
+			expect(component.render().find('section')).toHaveLength(3);
+			expect(component.render().find('section h2').text().toLowerCase().includes('earlier today')).toBe(false);
+		});
+	});
+
 	describe('given latestItemsTime is not set', () => {
 		beforeEach(() => {
 			tree = renderer.create(<TeaserTimeline {...props} />).toJSON();
@@ -94,9 +112,13 @@ describe('x-teaser-timeline', () => {
 		describe('custom slot content is a string', () => {
 			describe('without latestArticlesTime set', () => {
 				beforeEach(() => {
-					props.customSlotContent = '<div class="custom-slot">Custom slot content</div>';
-					props.customSlotPosition = 3;
-					component = shallow(<TeaserTimeline {...props} />);
+					component = shallow(
+						<TeaserTimeline
+							{...props}
+							customSlotContent='<div class="custom-slot">Custom slot content</div>'
+							customSlotPosition={3}
+						/>
+					);
 				});
 
 				it('has custom content in correct position', () => {
@@ -107,10 +129,14 @@ describe('x-teaser-timeline', () => {
 
 			describe('with latestArticlesTime set', () => {
 				beforeEach(() => {
-					props.customSlotContent = '<div class="custom-slot">Custom slot content</div>';
-					props.customSlotPosition = 2;
-					props.latestItemsTime = '2018-10-16T12:10:33.000Z';
-					component = shallow(<TeaserTimeline {...props} />);
+					component = shallow(
+						<TeaserTimeline
+							{...props}
+							customSlotContent='<div class="custom-slot">Custom slot content</div>'
+							customSlotPosition={2}
+							latestArticlesTime='2018-10-16T12:10:33.000Z'
+						/>
+					);
 				});
 
 				it('has custom content in correct position', () => {
@@ -122,9 +148,13 @@ describe('x-teaser-timeline', () => {
 
 		describe('custom slot content is a node', () => {
 			beforeEach(() => {
-				props.customSlotContent = <div className="custom-slot">Custom slot content</div>;
-				props.customSlotPosition = 3;
-				component = shallow(<TeaserTimeline {...props} />);
+				component = shallow(
+					<TeaserTimeline
+						{...props}
+						customSlotContent={<div className="custom-slot">Custom slot content</div>}
+						customSlotPosition={3}
+					/>
+				);
 			});
 
 			it('has custom content in correct position', () => {

diff --git a/components/x-teaser-timeline/src/lib/transform.js b/components/x-teaser-timeline/src/lib/transform.js
@@ -36,19 +36,26 @@ export const splitTodaysItems = (itemGroups, localTodayDate, latestItemsTime) =>
 	}
 
 	const { latestItems, earlierItems } = splitLatestEarlier(itemGroups[0].items, latestItemsTime);
-
-	itemGroups[0] = {
-		date: 'today-earlier',
-		items: earlierItems
-	};
+	const splitGroups = [];
 
 	if (latestItems.length) {
-		itemGroups.unshift({
+		splitGroups.push({
 			date: 'today-latest',
 			items: latestItems
 		});
 	}
 
+	if (earlierItems.length) {
+		splitGroups.push({
+			date: 'today-earlier',
+			items: earlierItems
+		});
+	}
+
+	if (splitGroups.length) {
+		itemGroups.splice(0, 1, ...splitGroups);
+	}
+
 	return itemGroups;
 };