From 8c86ae96dbdd9ecd76471083c73f87142a2410e1 Mon Sep 17 00:00:00 2001 From: Denis Hernandez Date: Mon, 24 Feb 2020 15:13:21 +0000 Subject: [PATCH 1/5] Remove FrontPageMain and move logic to /pages --- .../__snapshots__/index.test.jsx.snap | 1358 ---------------- src/app/containers/FrontPageMain/index.jsx | 128 -- .../FrontPageMain/index.stories.jsx | 59 - .../containers/FrontPageMain/index.test.jsx | 109 -- .../__snapshots__/index.test.jsx.snap | 1373 ++++++++++++++++- src/app/pages/FrontPage/index.jsx | 146 +- src/app/pages/FrontPage/index.stories.jsx | 76 +- src/app/pages/FrontPage/index.test.jsx | 173 ++- 8 files changed, 1598 insertions(+), 1824 deletions(-) delete mode 100644 src/app/containers/FrontPageMain/__snapshots__/index.test.jsx.snap delete mode 100644 src/app/containers/FrontPageMain/index.jsx delete mode 100644 src/app/containers/FrontPageMain/index.stories.jsx delete mode 100644 src/app/containers/FrontPageMain/index.test.jsx diff --git a/src/app/containers/FrontPageMain/__snapshots__/index.test.jsx.snap b/src/app/containers/FrontPageMain/__snapshots__/index.test.jsx.snap deleted file mode 100644 index 60ad2b9be4e..00000000000 --- a/src/app/containers/FrontPageMain/__snapshots__/index.test.jsx.snap +++ /dev/null @@ -1,1358 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`FrontPageMain snapshots should render a pidgin frontpage correctly 1`] = ` -
-
-`; diff --git a/src/app/containers/FrontPageMain/index.jsx b/src/app/containers/FrontPageMain/index.jsx deleted file mode 100644 index 34616b5fb28..00000000000 --- a/src/app/containers/FrontPageMain/index.jsx +++ /dev/null @@ -1,128 +0,0 @@ -/* eslint-disable jsx-a11y/aria-role */ -import React, { Fragment, useContext } from 'react'; -import { string } from 'prop-types'; -import VisuallyHiddenText from '@bbc/psammead-visually-hidden-text'; -import path from 'ramda/src/path'; -import findIndex from 'ramda/src/findIndex'; -import Grid, { FrontPageGrid } from '#app/components/Grid'; -import { frontPageDataPropTypes } from '#models/propTypes/frontPage'; -import { ServiceContext } from '#contexts/ServiceContext'; -import FrontPageSection from '../FrontPageSection'; -import MetadataContainer from '../Metadata'; -import MostReadContainer from '../MostRead'; -import LinkedData from '../LinkedData'; -import ATIAnalytics from '../ATIAnalytics'; -import ChartbeatAnalytics from '../ChartbeatAnalytics'; - -const mainColumns = { - group0: 6, - group1: 6, - group2: 6, - group3: 6, - group4: 8, - group5: 20, -}; - -const itemColumns = { - group0: 6, - group1: 6, - group2: 6, - group3: 6, - group4: 6, - group5: 12, -}; - -const itemMargins = { - group0: true, - group1: true, - group2: true, - group3: true, -}; - -const startOffsets = { - group0: 1, - group1: 1, - group2: 1, - group3: 1, - group4: 2, - group5: 5, -}; - -const FrontPageMain = ({ frontPageData, mostReadEndpointOverride }) => { - const { - product, - serviceLocalizedName, - translations, - frontPageTitle, - } = useContext(ServiceContext); - const home = path(['home'], translations); - const groups = path(['content', 'groups'], frontPageData); - const lang = path(['metadata', 'language'], frontPageData); - const description = path(['metadata', 'summary'], frontPageData); - const seoTitle = path(['promo', 'name'], frontPageData); - - // eslint-disable-next-line jsx-a11y/aria-role - const offScreenText = ( - - {product}, {serviceLocalizedName} - {home} - - ); - - // Most Read is required to render above useful-links if it exists - const hasUsefulLinks = - findIndex(group => group.type === 'useful-links')(groups) > -1; - - return ( - <> - - - - -
- - {offScreenText} - - - - {groups.map((group, index) => ( - - {group.type === 'useful-links' && ( - - )} - - - ))} - {!hasUsefulLinks && ( - - )} - - -
- - ); -}; - -FrontPageMain.propTypes = { - frontPageData: frontPageDataPropTypes.isRequired, - mostReadEndpointOverride: string, -}; - -FrontPageMain.defaultProps = { - mostReadEndpointOverride: null, -}; - -export default FrontPageMain; diff --git a/src/app/containers/FrontPageMain/index.stories.jsx b/src/app/containers/FrontPageMain/index.stories.jsx deleted file mode 100644 index 4a3984f492a..00000000000 --- a/src/app/containers/FrontPageMain/index.stories.jsx +++ /dev/null @@ -1,59 +0,0 @@ -import React from 'react'; -import { storiesOf } from '@storybook/react'; -import WithTimeMachine from '#testHelpers/withTimeMachine'; -import newsData from '#data/news/frontpage'; -import igboData from '#data/igbo/frontpage'; -import pidginData from '#data/pidgin/frontpage'; -import thaiData from '#data/thai/frontpage'; -import yorubaData from '#data/yoruba/frontpage'; -import punjabiData from '#data/punjabi/frontpage'; -import serbianCyrData from '#data/serbian/frontpage/cyr'; -import serbianLatData from '#data/serbian/frontpage/lat'; -import FrontPageMain from '.'; -import { ServiceContextProvider } from '#contexts/ServiceContext'; -import { ToggleContextProvider } from '#contexts/ToggleContext'; -import { RequestContextProvider } from '#contexts/RequestContext'; -import { UserContextProvider } from '#contexts/UserContext'; - -const serviceDataSets = { - news: { default: newsData }, - igbo: { default: igboData }, - yoruba: { default: yorubaData }, - pidgin: { default: pidginData }, - thai: { default: thaiData }, - punjabi: { default: punjabiData }, - serbian: { - cyr: serbianCyrData, - lat: serbianLatData, - }, -}; - -const stories = storiesOf('Main|Front Page', module).addDecorator(story => ( - {story()} -)); - -Object.keys(serviceDataSets).forEach(service => { - Object.keys(serviceDataSets[service]).forEach(variant => { - stories.add(`${service} ${variant === 'default' ? '' : variant}`, () => ( - - - - - - - - - - )); - }); -}); diff --git a/src/app/containers/FrontPageMain/index.test.jsx b/src/app/containers/FrontPageMain/index.test.jsx deleted file mode 100644 index 1366a4331a5..00000000000 --- a/src/app/containers/FrontPageMain/index.test.jsx +++ /dev/null @@ -1,109 +0,0 @@ -import React from 'react'; -import { render, wait, waitForElement } from '@testing-library/react'; -import FrontPageMain from '.'; - -// 'index-light' is a lighter version of front page data that improves the -// speed of this suite by reducing the amount of pre-processing required. -import { RequestContextProvider } from '#contexts/RequestContext'; -import { ServiceContextProvider } from '#contexts/ServiceContext'; -import { ToggleContextProvider } from '#contexts/ToggleContext'; -import frontPageDataPidgin from '#data/pidgin/frontpage/index-light'; -import pidginMostReadData from '#data/pidgin/mostRead'; -import getInitialData from '#app/routes/home/getInitialData'; - -jest.mock('uuid', () => { - let x = 1; - return () => { - x += 1; - return `mockid-${x}`; - }; -}); - -jest.mock('../ChartbeatAnalytics', () => { - const ChartbeatAnalytics = () =>
chartbeat
; - return ChartbeatAnalytics; -}); - -const requestContextData = { - isAmp: false, - service: 'igbo', - statusCode: 200, - pageType: 'frontPage', - pathname: '/pathname', -}; - -const FrontPageMainWithContext = props => ( - - - - - - - -); - -let pageData; - -beforeEach(async () => { - fetch.mockResponse(JSON.stringify(frontPageDataPidgin)); - - const response = await getInitialData('some-front-page-path'); - - pageData = response.pageData; - - fetch.mockResponse(JSON.stringify(pidginMostReadData)); -}); - -describe('FrontPageMain', () => { - describe('snapshots', () => { - it('should render a pidgin frontpage correctly', async () => { - const { container } = render( - , - ); - - // Waiting to ensure most read data is loaded and element is rendered - // The data is loaded separately which was previously causing snapshots to fail - await waitForElement(() => container.querySelector('#Most-Read')); - - expect(container).toMatchSnapshot(); - }); - }); - - describe('assertions', () => { - it('should render visually hidden text as h1', async () => { - const { container } = render( - , - ); - - const h1 = container.querySelector('h1'); - const content = h1.getAttribute('id'); - const tabIndex = h1.getAttribute('tabIndex'); - - expect(content).toEqual('content'); - expect(tabIndex).toBe('-1'); - - const span = h1.querySelector('span'); - expect(span.getAttribute('role')).toEqual('text'); - expect(span.textContent).toEqual('BBC News, Ìgbò - Akụkọ'); - - const langSpan = span.querySelector('span'); - expect(langSpan.getAttribute('lang')).toEqual('en-GB'); - expect(langSpan.textContent).toEqual('BBC News'); - - await wait(); - }); - - it('should render front page sections', async () => { - const { container } = render( - , - ); - const sections = container.querySelectorAll('section'); - - expect(sections).toHaveLength(2); - sections.forEach(section => { - expect(section.getAttribute('role')).toEqual('region'); - }); - await wait(); - }); - }); -}); diff --git a/src/app/pages/FrontPage/__snapshots__/index.test.jsx.snap b/src/app/pages/FrontPage/__snapshots__/index.test.jsx.snap index 62cb4210e59..7e431d9569b 100644 --- a/src/app/pages/FrontPage/__snapshots__/index.test.jsx.snap +++ b/src/app/pages/FrontPage/__snapshots__/index.test.jsx.snap @@ -1,26 +1,1377 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`FrontPageContainer Component Composing the Front Page Container using the page handlers should compose frontPageContainer with the Page Handler in the correct order 1`] = ` -
+exports[`Front Page snapshots should render a pidgin frontpage correctly 1`] = ` +
-
- FrontPageMain +
+
diff --git a/src/app/pages/FrontPage/index.jsx b/src/app/pages/FrontPage/index.jsx index ec01404083c..22c3e6ff113 100644 --- a/src/app/pages/FrontPage/index.jsx +++ b/src/app/pages/FrontPage/index.jsx @@ -1,30 +1,136 @@ -import React from 'react'; -import { string, shape } from 'prop-types'; +/* eslint-disable jsx-a11y/aria-role */ +import React, { Fragment, useContext } from 'react'; import pipe from 'ramda/src/pipe'; -import frontPagePropTypes from '#models/propTypes/frontPage'; -import FrontPageMain from '../../containers/FrontPageMain'; - -import withVariant from '../../containers/PageHandlers/withVariant'; -import withContexts from '../../containers/PageHandlers/withContexts'; -import withPageWrapper from '../../containers/PageHandlers/withPageWrapper'; -import withLoading from '../../containers/PageHandlers/withLoading'; -import withError from '../../containers/PageHandlers/withError'; -import withData from '../../containers/PageHandlers/withData'; - -const FrontPageContainer = ({ pageData, mostReadEndpointOverride }) => ( - -); +import { string } from 'prop-types'; +import VisuallyHiddenText from '@bbc/psammead-visually-hidden-text'; +import path from 'ramda/src/path'; +import findIndex from 'ramda/src/findIndex'; +import Grid, { FrontPageGrid } from '#app/components/Grid'; +import { frontPageDataPropTypes } from '#models/propTypes/frontPage'; +import { ServiceContext } from '#contexts/ServiceContext'; +import FrontPageSection from '#containers/FrontPageSection'; +import MetadataContainer from '#containers/Metadata'; +import MostReadContainer from '#containers/MostRead'; +import LinkedData from '#containers/LinkedData'; +import ATIAnalytics from '#containers/ATIAnalytics'; +import ChartbeatAnalytics from '#containers/ChartbeatAnalytics'; + +// Page Handlers +import withVariant from '#containers/PageHandlers/withVariant'; +import withContexts from '#containers/PageHandlers/withContexts'; +import withPageWrapper from '#containers/PageHandlers/withPageWrapper'; +import withLoading from '#containers/PageHandlers/withLoading'; +import withError from '#containers/PageHandlers/withError'; +import withData from '#containers/PageHandlers/withData'; + +const mainColumns = { + group0: 6, + group1: 6, + group2: 6, + group3: 6, + group4: 8, + group5: 20, +}; + +const itemColumns = { + group0: 6, + group1: 6, + group2: 6, + group3: 6, + group4: 6, + group5: 12, +}; + +const itemMargins = { + group0: true, + group1: true, + group2: true, + group3: true, +}; + +const startOffsets = { + group0: 1, + group1: 1, + group2: 1, + group3: 1, + group4: 2, + group5: 5, +}; + +const FrontPageContainer = ({ pageData, mostReadEndpointOverride }) => { + const { + product, + serviceLocalizedName, + translations, + frontPageTitle, + } = useContext(ServiceContext); + const home = path(['home'], translations); + const groups = path(['content', 'groups'], pageData); + const lang = path(['metadata', 'language'], pageData); + const description = path(['metadata', 'summary'], pageData); + const seoTitle = path(['promo', 'name'], pageData); + + // eslint-disable-next-line jsx-a11y/aria-role + const offScreenText = ( + + {product}, {serviceLocalizedName} - {home} + + ); + + // Most Read is required to render above useful-links if it exists + const hasUsefulLinks = + findIndex(group => group.type === 'useful-links')(groups) > -1; + + return ( + <> + + + + +
+ + {offScreenText} + + + + {groups.map((group, index) => ( + + {group.type === 'useful-links' && ( + + )} + + + ))} + {!hasUsefulLinks && ( + + )} + + +
+ + ); +}; FrontPageContainer.propTypes = { - pageData: shape(frontPagePropTypes), + pageData: frontPageDataPropTypes.isRequired, mostReadEndpointOverride: string, }; FrontPageContainer.defaultProps = { - pageData: null, mostReadEndpointOverride: null, }; diff --git a/src/app/pages/FrontPage/index.stories.jsx b/src/app/pages/FrontPage/index.stories.jsx index 576845c58ef..cf43cda2b56 100644 --- a/src/app/pages/FrontPage/index.stories.jsx +++ b/src/app/pages/FrontPage/index.stories.jsx @@ -1,6 +1,8 @@ -import React, { useState, useEffect } from 'react'; +import React from 'react'; import { storiesOf } from '@storybook/react'; -import { BrowserRouter, Route } from 'react-router-dom'; +import { BrowserRouter } from 'react-router-dom'; +import WithTimeMachine from '#testHelpers/withTimeMachine'; +import newsData from '#data/news/frontpage'; import igboData from '#data/igbo/frontpage'; import pidginData from '#data/pidgin/frontpage'; import thaiData from '#data/thai/frontpage'; @@ -9,10 +11,9 @@ import punjabiData from '#data/punjabi/frontpage'; import serbianCyrData from '#data/serbian/frontpage/cyr'; import serbianLatData from '#data/serbian/frontpage/lat'; import FrontPage from '.'; -import WithTimeMachine from '#testHelpers/withTimeMachine'; -import getInitialData from '#app/routes/home/getInitialData'; -const serviceDatasets = { +const serviceDataSets = { + news: { default: newsData }, igbo: { default: igboData }, yoruba: { default: yorubaData }, pidgin: { default: pidginData }, @@ -24,56 +25,27 @@ const serviceDatasets = { }, }; -const getPageData = async (service, variant) => { - const { fetch } = window; - window.fetch = () => - Promise.resolve({ - status: 200, - json: () => serviceDatasets[service][variant], - }); // stub fetch - const { pageData } = await getInitialData('some-front-page-path'); - window.fetch = fetch; // restore fetch - return pageData; -}; - -// eslint-disable-next-line react/prop-types -const DataWrapper = ({ service, variant, children }) => { - const [data, setData] = useState(); - - useEffect(() => { - (async () => setData(await getPageData(service, variant)))(); - }, [service, variant]); - - return data ? children(data) : null; -}; - const stories = storiesOf('Pages|Front Page', module).addDecorator(story => ( {story()} )); -Object.keys(serviceDatasets).forEach(service => { - Object.keys(serviceDatasets[service]).forEach(variant => { - stories.add(`${service} ${variant === 'default' ? '' : variant}`, () => { - return ( - - - - {frontPageData => ( - - )} - - - - ); - }); +Object.keys(serviceDataSets).forEach(service => { + Object.keys(serviceDataSets[service]).forEach(variant => { + stories.add(`${service} ${variant === 'default' ? '' : variant}`, () => ( + + + + )); }); }); diff --git a/src/app/pages/FrontPage/index.test.jsx b/src/app/pages/FrontPage/index.test.jsx index f2ece04adbe..51a9707f603 100644 --- a/src/app/pages/FrontPage/index.test.jsx +++ b/src/app/pages/FrontPage/index.test.jsx @@ -1,23 +1,56 @@ import React from 'react'; -import { render } from '@testing-library/react'; -import { shouldMatchSnapshot } from '@bbc/psammead-test-helpers'; +import { render, wait, waitForElement } from '@testing-library/react'; +import { RequestContextProvider } from '#contexts/RequestContext'; +import { ServiceContextProvider } from '#contexts/ServiceContext'; +import { ToggleContextProvider } from '#contexts/ToggleContext'; +import frontPageDataPidgin from '#data/pidgin/frontpage/index-light'; +import pidginMostReadData from '#data/pidgin/mostRead'; +import getInitialData from '#app/routes/home/getInitialData'; import FrontPageContainer from './index'; -import { service as igboConfig } from '#lib/config/services/igbo'; -import igboData from '#data/igbo/frontpage'; -import toggleReducer from '../../reducers/ToggleReducer'; -import defaultToggles from '#lib/config/toggles'; -// explicitly ignore console.log errors for Article/index:getInitialProps() error logging -global.console.log = jest.fn(); - -const defaultProps = { +const requestContextData = { isAmp: false, pageType: 'frontPage', - service: 'news', + service: 'pidgin', pathname: '/pathname', data: { status: 200 }, }; +const FrontPageWithContext = props => ( + + + + + + + +); + +let pageData; + +beforeEach(async () => { + fetch.mockResponse(JSON.stringify(frontPageDataPidgin)); + + const response = await getInitialData('some-front-page-path'); + + pageData = response.pageData; + + fetch.mockResponse(JSON.stringify(pidginMostReadData)); +}); + +jest.mock('uuid', () => { + let x = 1; + return () => { + x += 1; + return `mockid-${x}`; + }; +}); + +jest.mock('../../containers/ChartbeatAnalytics', () => { + const ChartbeatAnalytics = () =>
chartbeat
; + return ChartbeatAnalytics; +}); + jest.mock('../../containers/PageHandlers/withVariant', () => Component => { const VariantContainer = props => (
@@ -31,7 +64,7 @@ jest.mock('../../containers/PageHandlers/withVariant', () => Component => { jest.mock('../../containers/PageHandlers/withContexts', () => Component => { const DataContainer = props => (
- + {' '}
); @@ -88,90 +121,56 @@ jest.mock('../../containers/PageHandlers/withContexts', () => Component => { return ContextsContainer; }); -jest.mock('../../containers/FrontPageMain', () => { - return jest.fn().mockReturnValue(
FrontPageMain
); -}); - -describe('FrontPageContainer', () => { - describe('Component', () => { - describe('Composing the Front Page Container using the page handlers', () => { - shouldMatchSnapshot( - 'should compose frontPageContainer with the Page Handler in the correct order', - , +describe('Front Page', () => { + describe('snapshots', () => { + it('should render a pidgin frontpage correctly', async () => { + const { container } = render( + , ); + + // Waiting to ensure most read data is loaded and element is rendered + // The data is loaded separately which was previously causing snapshots to fail + await waitForElement(() => container.querySelector('#Most-Read')); + + expect(container).toMatchSnapshot(); }); + }); - describe('Assertions', () => { - let FrontPageComponent; - beforeAll(() => { - jest.resetModules(); - jest.unmock('../../containers/PageHandlers/withError'); - jest.unmock('../../containers/PageHandlers/withLoading'); - jest.unmock('../../containers/PageHandlers/withData'); - - jest.mock('react', () => { - const original = jest.requireActual('react'); - return { - ...original, - useContext: jest.fn(), - useReducer: jest.fn(), - useState: jest.fn(), - }; - }); - - const { useContext, useReducer, useState } = jest.requireMock('react'); - useContext.mockReturnValue(igboConfig.default); - FrontPageComponent = jest.requireActual('.').default; - useReducer.mockReturnValue([toggleReducer, defaultToggles]); - useState.mockImplementation(input => [input, () => {}]); - }); + describe('Assertions', () => { + it('should render visually hidden text as h1', async () => { + const { container } = render( + , + ); - it('should not render frontpage if still loading', () => { - const { container } = render( - , - ); - const { textContent } = container.querySelector('main'); + const h1 = container.querySelector('h1'); + const content = h1.getAttribute('id'); + const tabIndex = h1.getAttribute('tabIndex'); - expect(textContent).toEqual(''); - expect(textContent).not.toContain('FrontPageMain'); - }); + expect(content).toEqual('content'); + expect(tabIndex).toBe('-1'); - it('should render error page when an error occurs', () => { - const { container } = render( - , - ); + const span = h1.querySelector('span'); + expect(span.getAttribute('role')).toEqual('text'); + expect(span.textContent).toEqual('BBC News, Pidgin - Home'); - const { textContent } = container.querySelector('main'); - expect(textContent).toContain('Mperi'); - expect(textContent).not.toContain('FrontPageMain'); - }); + const langSpan = span.querySelector('span'); + expect(langSpan.getAttribute('lang')).toEqual('en-GB'); + expect(langSpan.textContent).toEqual('BBC News'); + + await wait(); + }); + + it('should render front page sections', async () => { + const { container } = render( + , + ); + const sections = container.querySelectorAll('section'); - it('should render the frontpage with data', () => { - const pageData = igboData; - const status = 200; - - const frontPageMainMock = jest.requireMock( - '../../containers/FrontPageMain', - ); - const { container } = render( - , - ); - - const expectedProps = { - frontPageData: igboData, - mostReadEndpointOverride: null, - }; - - expect(frontPageMainMock.mock.calls).toHaveLength(1); - expect(frontPageMainMock.mock.calls[0][0]).toEqual(expectedProps); - expect(container.textContent).toEqual('FrontPageMain'); + expect(sections).toHaveLength(2); + sections.forEach(section => { + expect(section.getAttribute('role')).toEqual('region'); }); + await wait(); }); }); }); From d2cb1f1212577cd8640c699bbd9a6bcf5e4cb3a8 Mon Sep 17 00:00:00 2001 From: Denis Hernandez Date: Tue, 25 Feb 2020 09:34:51 +0000 Subject: [PATCH 2/5] Remove space --- src/app/pages/FrontPage/index.test.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/pages/FrontPage/index.test.jsx b/src/app/pages/FrontPage/index.test.jsx index 51a9707f603..acfac4dfa39 100644 --- a/src/app/pages/FrontPage/index.test.jsx +++ b/src/app/pages/FrontPage/index.test.jsx @@ -64,7 +64,7 @@ jest.mock('../../containers/PageHandlers/withVariant', () => Component => { jest.mock('../../containers/PageHandlers/withContexts', () => Component => { const DataContainer = props => (
- {' '} +
); From 5575312c8a1bc6878a750408dbccc27f141cda14 Mon Sep 17 00:00:00 2001 From: Denis Hernandez Date: Tue, 25 Feb 2020 15:25:59 +0000 Subject: [PATCH 3/5] Update snapshots --- .../__snapshots__/index.test.jsx.snap | 1164 ---------- .../__snapshots__/index.test.jsx.snap | 1900 ++++++++--------- 2 files changed, 853 insertions(+), 2211 deletions(-) delete mode 100644 src/app/containers/FrontPageMain/__snapshots__/index.test.jsx.snap diff --git a/src/app/containers/FrontPageMain/__snapshots__/index.test.jsx.snap b/src/app/containers/FrontPageMain/__snapshots__/index.test.jsx.snap deleted file mode 100644 index 2a1e913258b..00000000000 --- a/src/app/containers/FrontPageMain/__snapshots__/index.test.jsx.snap +++ /dev/null @@ -1,1164 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`FrontPageMain snapshots should render a pidgin frontpage correctly 1`] = ` -
-
-`; diff --git a/src/app/pages/FrontPage/__snapshots__/index.test.jsx.snap b/src/app/pages/FrontPage/__snapshots__/index.test.jsx.snap index 7e431d9569b..8843816fdee 100644 --- a/src/app/pages/FrontPage/__snapshots__/index.test.jsx.snap +++ b/src/app/pages/FrontPage/__snapshots__/index.test.jsx.snap @@ -25,6 +25,7 @@ exports[`Front Page snapshots should render a pidgin frontpage correctly 1`] = ` chartbeat

-
-
+
-
+
+
+

-
-
-
-
-
-
-
-
-
-
-

- - Majid Waris no get ‘sɛlɛ’ for Coach Kwesi Appiah en Black Stars Afcon squad - -

- - -
-
- -
  • + Senators don begin vote for Senate President + + +
  • +

    -

    + +
    +

    -
    +
    -

    - - + 4 tins wey go determine who become di next Senate President, Speaker + + + + +
    +
    - -
    +
    +
    + + -
    -
    + + +
    +
    +
    -
    +
    + + +
    +
    From 13b7fec2c991fec8efe074515f8a6709d63bb1ce Mon Sep 17 00:00:00 2001 From: Denis Hernandez Date: Tue, 25 Feb 2020 15:26:52 +0000 Subject: [PATCH 4/5] Remove FrontPageMain again --- src/app/containers/FrontPageMain/index.jsx | 133 --------------------- 1 file changed, 133 deletions(-) delete mode 100644 src/app/containers/FrontPageMain/index.jsx diff --git a/src/app/containers/FrontPageMain/index.jsx b/src/app/containers/FrontPageMain/index.jsx deleted file mode 100644 index 277adae9bcb..00000000000 --- a/src/app/containers/FrontPageMain/index.jsx +++ /dev/null @@ -1,133 +0,0 @@ -/* eslint-disable jsx-a11y/aria-role */ -import React, { Fragment, useContext } from 'react'; -import { string } from 'prop-types'; -import VisuallyHiddenText from '@bbc/psammead-visually-hidden-text'; -import path from 'ramda/src/path'; -import findIndex from 'ramda/src/findIndex'; -import styled from 'styled-components'; -import { - GEL_GROUP_2_SCREEN_WIDTH_MIN, - GEL_GROUP_2_SCREEN_WIDTH_MAX, - GEL_GROUP_3_SCREEN_WIDTH_MIN, - GEL_GROUP_4_SCREEN_WIDTH_MIN, -} from '@bbc/gel-foundations/breakpoints'; -import { - GEL_SPACING, - GEL_SPACING_DBL, - GEL_SPACING_TRPL, - GEL_SPACING_QUAD, - GEL_SPACING_QUIN, - GEL_MARGIN_BELOW_400PX, - GEL_MARGIN_ABOVE_400PX, -} from '@bbc/gel-foundations/spacings'; -import { frontPageDataPropTypes } from '#models/propTypes/frontPage'; -import { ServiceContext } from '#contexts/ServiceContext'; -import FrontPageSection from '../FrontPageSection'; -import MetadataContainer from '../Metadata'; -import MostReadContainer from '../MostRead'; -import LinkedData from '../LinkedData'; -import ATIAnalytics from '../ATIAnalytics'; -import ChartbeatAnalytics from '../ChartbeatAnalytics'; -import { StyledFrontPageMain } from '#app/components/Grid'; - -export const StyledFrontPageDiv = styled.div` - /* To add GEL Margins */ - margin: 0 ${GEL_MARGIN_BELOW_400PX}; - @media (min-width: ${GEL_GROUP_2_SCREEN_WIDTH_MIN}) { - margin: 0 ${GEL_MARGIN_ABOVE_400PX}; - } - - /* To add extra spacing */ - padding-top: ${GEL_SPACING}; - - @media (min-width: ${GEL_GROUP_2_SCREEN_WIDTH_MIN}) { - padding-top: ${GEL_SPACING_DBL}; - } - @media (min-width: ${GEL_GROUP_3_SCREEN_WIDTH_MIN}) { - padding-top: 0; - } - - @media (max-width: ${GEL_GROUP_2_SCREEN_WIDTH_MAX}) { - padding-bottom: ${GEL_SPACING_TRPL}; - } - - padding-bottom: ${GEL_SPACING_QUAD}; - - @media (min-width: ${GEL_GROUP_4_SCREEN_WIDTH_MIN}) { - padding-bottom: ${GEL_SPACING_QUIN}; - } -`; - -const FrontPageMain = ({ frontPageData, mostReadEndpointOverride }) => { - const { - product, - serviceLocalizedName, - translations, - frontPageTitle, - } = useContext(ServiceContext); - const home = path(['home'], translations); - const groups = path(['content', 'groups'], frontPageData); - const lang = path(['metadata', 'language'], frontPageData); - const description = path(['metadata', 'summary'], frontPageData); - const seoTitle = path(['promo', 'name'], frontPageData); - - // eslint-disable-next-line jsx-a11y/aria-role - const offScreenText = ( - - {product}, {serviceLocalizedName} - {home} - - ); - - // Most Read is required to render above useful-links if it exists - const hasUsefulLinks = - findIndex(group => group.type === 'useful-links')(groups) > -1; - - return ( - <> - - - - - - - {offScreenText} - - - {groups.map((group, index) => ( - - {group.type === 'useful-links' && ( - - )} - - - ))} - {!hasUsefulLinks && ( - - )} - - - - ); -}; - -FrontPageMain.propTypes = { - frontPageData: frontPageDataPropTypes.isRequired, - mostReadEndpointOverride: string, -}; - -FrontPageMain.defaultProps = { - mostReadEndpointOverride: null, -}; - -export default FrontPageMain; From 4d5f79e727da169a474fcd11929f854774bca769 Mon Sep 17 00:00:00 2001 From: Denis Hernandez Date: Thu, 27 Feb 2020 12:41:30 +0000 Subject: [PATCH 5/5] Update snapshots --- src/app/pages/FrontPage/__snapshots__/index.test.jsx.snap | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/pages/FrontPage/__snapshots__/index.test.jsx.snap b/src/app/pages/FrontPage/__snapshots__/index.test.jsx.snap index 8843816fdee..2ae99539d06 100644 --- a/src/app/pages/FrontPage/__snapshots__/index.test.jsx.snap +++ b/src/app/pages/FrontPage/__snapshots__/index.test.jsx.snap @@ -717,6 +717,7 @@ exports[`Front Page snapshots should render a pidgin frontpage correctly 1`] = `