@times-components/ts-slices 1.3.18 → 1.3.21

package/src/components/slices/Secondary2And2/styles.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { breakpoints } from '@times-components/styleguide';
+import { breakpoints } from '@times-components/ts-styleguide';
 
 import { calculateSlotWidth } from '../../../utils/getArticleStyles';
 

package/src/components/slices/Secondary2And3/styles.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { breakpoints } from '@times-components/styleguide';
+import { breakpoints } from '@times-components/ts-styleguide';
 
 import { calculateSlotWidth } from '../../../utils/getArticleStyles';
 

package/src/components/slices/Secondary2And3NoPic/styles.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { breakpoints } from '@times-components/styleguide';
+import { breakpoints } from '@times-components/ts-styleguide';
 
 import { calculateSlotWidth } from '../../../utils/getArticleStyles';
 

package/src/components/slices/Secondary3/styles.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { breakpoints } from '@times-components/styleguide';
+import { breakpoints } from '@times-components/ts-styleguide';
 
 import { calculateSlotWidth } from '../../../utils/getArticleStyles';
 

package/src/components/slices/Secondary4/styles.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { breakpoints } from '@times-components/styleguide';
+import { breakpoints } from '@times-components/ts-styleguide';
 
 import { calculateSlotWidth } from '../../../utils/getArticleStyles';
 

package/src/components/slices/Secondary4Odd/styles.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { breakpoints } from '@times-components/styleguide';
+import { breakpoints } from '@times-components/ts-styleguide';
 
 import { calculateSlotWidth } from '../../../utils/getArticleStyles';
 

package/src/components/slices/__tests__/Slice.test.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { Slice } from '../Slice';
+
+describe('<Slice/>', () => {
+  const mockData = {
+    name: 'LEAD_1',
+    children: [
+      {
+        article: {
+          headline: 'a headline',
+          images: {
+            alt: 'image alt text',
+            crops: [{ ratio: '3:2', url: 'https://dummyimage.com/300' }]
+          }
+        }
+      }
+    ]
+  };
+
+  it('should render as expected', () => {
+    const { getByText } = render(
+      <Slice
+        slice={mockData}
+        styles={{ removePadding: true, lineColor: 'yellow' }}
+      />
+    );
+
+    getByText('a headline');
+  });
+});

package/src/components/slices/shared-styles.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { breakpoints } from '@times-components/styleguide';
+import { breakpoints } from '@times-components/ts-styleguide';
 
 import { SliceStyle } from '../../types/styles';
 

package/src/fixtures/__tests__/getSlice.test.tsx

@@ -0,0 +1,13 @@
+import { getSlice } from '../getSlice';
+
+describe('getSlice()', () => {
+  it('should return a slice', () => {
+    const result = getSlice('LEAD_1');
+    expect(result.children[0].article!.headline).toBe;
+  });
+
+  it('should not return a slice', () => {
+    const result = getSlice('LEAD_10038033');
+    expect(result).toEqual({ children: [], name: 'UNDEFINED' });
+  });
+});

package/src/fixtures/article-harness/__tests__/ArticleHarness.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ArticleHarness } from '../ArticleHarness';
+
+describe('ArticleHarness', () => {
+  it('should render as expected', () => {
+    const { getByText } = render(
+      <ArticleHarness>
+        <div>hello world</div>
+      </ArticleHarness>
+    );
+    expect(getByText('hello world'));
+  });
+});

package/src/fixtures/article-harness/styles.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { breakpoints } from '@times-components/styleguide';
+import { breakpoints } from '@times-components/ts-styleguide';
 
 export const ArticlePage = styled.div`
   background-color: #f5efeb;

package/src/types/externs.d.ts

@@ -12,7 +12,7 @@ declare module '@times-components/icons' {
   }>;
 }
 
-declare module '@times-components/styleguide' {
+declare module '@times-components/ts-styleguide' {
   type ColourMap = Record<string, string>;
   type Colours = Record<string, ColourMap>;
 

package/src/utils/FakeIntersectionObserver.tsx

@@ -0,0 +1,20 @@
+type MockCallbackType = (props: Array<{ isIntersecting: boolean }>) => {};
+
+class FakeIntersectionObserver {
+  static callback: MockCallbackType;
+  static observe = jest.fn();
+  static disconnect = jest.fn();
+
+  static intersect(isIntersecting = true): void {
+    FakeIntersectionObserver.callback([{ isIntersecting }]);
+  }
+
+  observe = FakeIntersectionObserver.observe;
+  disconnect = FakeIntersectionObserver.disconnect;
+
+  constructor(callback: MockCallbackType) {
+    FakeIntersectionObserver.callback = callback;
+  }
+}
+
+export default FakeIntersectionObserver;

package/src/utils/__tests__/convertChannelSlice.test.ts

@@ -0,0 +1,49 @@
+import 'react';
+import '@testing-library/react';
+
+import { convertChannelSlice } from '../convertChannelSlice';
+
+describe('convertChannelSlice(', () => {
+  const mockData = {
+    name: 'slice',
+    children: [
+      {
+        article: {
+          headline: 'a headline',
+          images: {
+            alt: 'image alt text',
+            crops: [{ ratio: '3:2', url: 'https://dummyimage.com/300' }]
+          }
+        }
+      }
+    ]
+  };
+
+  it('should convert channel slice', () => {
+    expect(convertChannelSlice('channel name', mockData)).toEqual({
+      children: [
+        {
+          article: {
+            headline: 'a headline',
+            images: {
+              alt: 'image alt text',
+              crops: [
+                {
+                  ratio: '3:2',
+                  url: 'https://dummyimage.com/300'
+                }
+              ]
+            },
+            label: ''
+          }
+        }
+      ],
+      name: 'slice'
+    });
+  });
+  it('should return undefined when insufficient data is provided', () => {
+    expect(
+      convertChannelSlice('channel name', { name: 'slice', children: [{}] })
+    ).toEqual({ children: [{ article: undefined }], name: 'slice' });
+  });
+});

package/src/utils/__tests__/getSlice.test.tsx

@@ -0,0 +1,69 @@
+import { getSliceComponent } from '../getSlice';
+import Lead1 from '../../components/slices/Lead1/Lead1';
+import Lead1And1 from '../../components/slices/Lead1And1/Lead1And1';
+import Lead1And2 from '../../components/slices/Lead1And2/Lead1And2';
+import Lead1And3Reversed from '../../components/slices/Lead1And3Reversed/Lead1And3Reversed';
+import Lead2 from '../../components/slices/Lead2/Lead2';
+import Secondary2And2 from '../../components/slices/Secondary2And2/Secondary2And2';
+import Secondary2And3 from '../../components/slices/Secondary2And3/Secondary2And3';
+import Secondary2And3NoPic from '../../components/slices/Secondary2And3NoPic/Secondary2And3NoPic';
+import Secondary3 from '../../components/slices/Secondary3/Secondary3';
+import Secondary4 from '../../components/slices/Secondary4/Secondary4';
+import Secondary4Odd from '../../components/slices/Secondary4Odd/Secondary4Odd';
+import Secondary10 from '../../components/slices/Secondary10/Secondary10';
+import RelatedArticle1 from '../../components/slices/RelatedArticle1/RelatedArticle1';
+
+describe('getSlice()', () => {
+  it('should render null when not able to find slice', () => {
+    expect(getSliceComponent('RELATED_ARTICLE_1000')).not.toBe;
+  });
+
+  it('should render RelatedArticle1 when it is called', () => {
+    expect(getSliceComponent('RELATED_ARTICLE_1')).toEqual(RelatedArticle1);
+  });
+  it('should render Secondary4Odd when it is called', () => {
+    expect(getSliceComponent('SECONDARY_4_ODD')).toEqual(Secondary4Odd);
+  });
+  it('should render Secondary10 when it is called', () => {
+    expect(getSliceComponent('SECONDARY_10')).toEqual(Secondary10);
+  });
+  it('should render Secondary4 when it is called', () => {
+    expect(getSliceComponent('SECONDARY_4')).toEqual(Secondary4);
+  });
+  it('should render Secondary3 when it is called', () => {
+    expect(getSliceComponent('SECONDARY_3')).toEqual(Secondary3);
+  });
+  it('should render Secondary2And3NoPic when it is called', () => {
+    expect(getSliceComponent('SECONDARY_2_AND_3_NO_PIC')).toEqual(
+      Secondary2And3NoPic
+    );
+  });
+  it('should render Secondary2And3 when it is called', () => {
+    expect(getSliceComponent('SECONDARY_2_AND_3')).toEqual(Secondary2And3);
+  });
+  it('should render Secondary2And2 when it is called', () => {
+    expect(getSliceComponent('SECONDARY_2_AND_2')).toEqual(Secondary2And2);
+  });
+
+  it('should render Lead2 when it is called', () => {
+    expect(getSliceComponent('LEAD_2')).toEqual(Lead2);
+  });
+
+  it('should render Lead1And3Reversed when it is called', () => {
+    expect(getSliceComponent('LEAD_1_AND_3_REVERSED')).toEqual(
+      Lead1And3Reversed
+    );
+  });
+
+  it('should render Lead1And2 when it is called', () => {
+    expect(getSliceComponent('LEAD_1_AND_2_COLUMNIST')).toEqual(Lead1And2);
+  });
+
+  it('should render Lead1 when it is called', () => {
+    expect(getSliceComponent('LEAD_1')).toEqual(Lead1);
+  });
+
+  it('should render Lead1And1 when it is called', () => {
+    expect(getSliceComponent('LEAD_1_AND_1_COMPONENT')).toEqual(Lead1And1);
+  });
+});