Partial rendering and hydration of react on the client

cypress/integration/e2e/article.e2e.spec.js

@@ -1,5 +1,5 @@
 import { getPolyfill } from '../../lib/polyfill';
-import { visitOptions } from '../../lib/config';
+import { fetchPolyfill } from '../../lib/config';
 import { articles, AMPArticles } from '../../lib/articles.js';
 import { setupApiRoutes } from '../../lib/apiRoutes.js';
 
@@ -12,7 +12,7 @@ describe('E2E Page rendering', function() {
             const { url, pillar, designType } = article;
 
             it(`It should load ${designType} articles under the ${pillar} pillar`, function() {
-                cy.visit(`Article?url=${url}`, visitOptions);
+                cy.visit(`Article?url=${url}`, fetchPolyfill);
                 cy.contains('Sign in');
 
                 cy.wait('@getMostRead').then(xhr => {
@@ -49,7 +49,7 @@ describe('E2E Page rendering', function() {
                 // Prevent the Privacy consent banner from obscuring snapshots
                 cy.setCookie('GU_TK', 'true');
 
-                cy.visit(`AMPArticle?url=${url}`, visitOptions);
+                cy.visit(`AMPArticle?url=${url}`, fetchPolyfill);
                 cy.contains('Opinion');
             });
         });

cypress/integration/e2e/article.interactivity.spec.js

@@ -0,0 +1,66 @@
+import { getPolyfill } from '../../lib/polyfill';
+import { mockApi } from '../../lib/mocks';
+import { fetchPolyfill } from '../../lib/config';
+
+const READER_REVENUE_TITLE_TEXT = 'Support The';
+const articleUrl =
+    'https://www.theguardian.com/politics/2019/oct/29/tories-restore-party-whip-to-10-mps-who-sought-to-block-no-deal-brexit';
+
+describe('Interactivity', function() {
+    describe('Verify elements have been hydrated', function() {
+        it('should open the edition dropdown menu when clicked', function() {
+            cy.visit(`/Article?url=${articleUrl}`);
+            cy.contains('Australian').should('not.be.visible');
+            cy.contains('edition').click();
+            cy.contains('Australian')
+                .parents('ul')
+                .should('be.visible');
+        });
+
+        it('should display the expanded pillar menu when More is clicked', function() {
+            cy.visit(`/Article?url=${articleUrl}`);
+            cy.contains('Crosswords').should('not.exist');
+            cy.contains('More').click();
+            cy.contains('Crosswords').should('be.visible');
+        });
+
+        it('should display the share count for an article', function() {
+            cy.visit(`/Article?url=${articleUrl}`);
+            cy.get('[data-cy=share-count]').should('exist');
+        });
+
+        it('should display all the rich links for an article', function() {
+            cy.visit(`/Article?url=${articleUrl}`);
+            cy.get('[data-link-name=rich-link]')
+                .should('exist')
+                .its('length')
+                // This count of rich links is dependent on the article that we're testing not changing
+                // If this assertion fails then it could be because a link was added or removed in
+                // which case this check should be updated
+                .should('be', 2);
+        });
+
+        describe('When most viewed is mocked', function() {
+            beforeEach(getPolyfill);
+            beforeEach(mockApi);
+            it('should change the list of most viewed items when a tab is clicked', function() {
+                cy.visit(`/Article?url=${articleUrl}`, fetchPolyfill);
+                cy.get('[data-cy=tab-body-0]').should('be.visible');
+                cy.get('[data-cy=tab-body-1]').should('not.be.visible');
+                cy.get('[data-cy=tab-heading-1]').click();
+                cy.get('[data-cy=tab-body-0]').should('not.be.visible');
+                cy.get('[data-cy=tab-body-1]').should('be.visible');
+            });
+        });
+
+        it('should render the reader revenue links in the header and footer', function() {
+            cy.visit(`/Article?url=${articleUrl}`);
+            cy.get('header')
+                .contains(READER_REVENUE_TITLE_TEXT)
+                .should('be.visible');
+            cy.get('footer')
+                .contains(READER_REVENUE_TITLE_TEXT)
+                .should('be.visible');
+        });
+    });
+});

cypress/integration/percy/article.amp.spec.js

@@ -1,6 +1,6 @@
 import { getPolyfill } from '../../lib/polyfill';
 import { fixTime } from '../../lib/time';
-import { visitOptions } from '../../lib/config';
+import { fetchPolyfill } from '../../lib/config';
 import { AMPArticles } from '../../lib/articles.js';
 import { mockApi } from '../../lib/mocks';
 
@@ -12,7 +12,7 @@ describe('For AMP', function() {
     AMPArticles.map((article, index) => {
         const { url, pillar, designType } = article;
         it(`It should load ${designType} articles under the ${pillar} pillar`, function() {
-            cy.visit(`AMPArticle?url=${url}`, visitOptions);
+            cy.visit(`AMPArticle?url=${url}`, fetchPolyfill);
             cy.percySnapshot(`AMP-${pillar}-${designType}-${index}`, {
                 widths: [375],
             });

cypress/integration/percy/article.web.spec.js

@@ -1,6 +1,6 @@
 import { getPolyfill } from '../../lib/polyfill';
 import { fixTime } from '../../lib/time';
-import { visitOptions } from '../../lib/config';
+import { fetchPolyfill } from '../../lib/config';
 import { articles } from '../../lib/articles.js';
 import { mockApi } from '../../lib/mocks';
 
@@ -14,7 +14,9 @@ describe('For WEB', function() {
         it(`It should load ${designType} articles under the ${pillar} pillar`, function() {
             // Prevent the Privacy consent banner from obscuring snapshots
             cy.setCookie('GU_TK', 'true');
-            cy.visit(`Article?url=${url}`, visitOptions);
+            // Fix the location to UK (for edition)
+            cy.setCookie('GU_EDITION', 'UK');
+            cy.visit(`Article?url=${url}`, fetchPolyfill);
             cy.percySnapshot(`WEB-${pillar}-${designType}-${index}`, {
                 widths: [739, 979, 1139, 1299, 1400],
             });

cypress/lib/config.js

@@ -1,6 +1,6 @@
 import { polyfillFetch } from '../lib/polyfill';
 
-export const visitOptions = {
+export const fetchPolyfill = {
     onBeforeLoad(win) {
         polyfillFetch(win);
     },

src/web/browser/react/init.ts

@@ -1,27 +1,26 @@
-import React from 'react';
 import { hydrate as hydrateCSS } from 'emotion';
-import { hydrate as hydrateApp } from 'react-dom';
-import { Article } from '@root/src/web/pages/Article';
 import { startup } from '@root/src/web/browser/startup';
 
-const init = (): Promise<void> => {
-    const { cssIDs, data } = window.guardian.app;
-    const container = document.getElementById('app');
+import { hydrateIslands } from '@frontend/web/islands/islands';
 
-    if (container) {
-        /**
-         * TODO: Remove conditional when Emotion's issue is resolved.
-         * We're having to prevent emotion hydrating styles in the browser
-         * in development mode to retain the sourceMap info. As detailed
-         * in the issue raised here https://github.com/emotion-js/emotion/issues/487
-         */
-        if (process.env.NODE_ENV !== 'development') {
-            hydrateCSS(cssIDs);
-        }
+const init = (): Promise<void> => {
+    const {
+        cssIDs,
+        data: { CAPI, config, NAV },
+    } = window.guardian.app;
 
-        hydrateApp(React.createElement(Article, { data }), container);
+    /**
+     * TODO: Remove conditional when Emotion's issue is resolved.
+     * We're having to prevent emotion hydrating styles in the browser
+     * in development mode to retain the sourceMap info. As detailed
+     * in the issue raised here https://github.com/emotion-js/emotion/issues/487
+     */
+    if (process.env.NODE_ENV !== 'development') {
+        hydrateCSS(cssIDs);
     }
 
+    hydrateIslands(CAPI, config, NAV);
+
     return Promise.resolve();
 };
 

src/web/components/ArticleMeta.tsx

@@ -3,7 +3,6 @@ import { css, cx } from 'emotion';
 import { palette } from '@guardian/src-foundations';
 import { between, until } from '@guardian/src-foundations/mq';
 
-import { ShareCount } from './ShareCount';
 import { Dateline } from './Dateline';
 import { SharingIcons } from './ShareIcons';
 import { Byline } from '@root/src/web/components/Byline';
@@ -65,7 +64,7 @@ export const ArticleMeta = ({ CAPI, config }: Props) => {
                         pillar={CAPI.pillar}
                         displayIcons={['facebook', 'twitter', 'email']}
                     />
-                    <ShareCount config={config} pageId={CAPI.pageId} />
+                    <div data-island="share-count" />
                 </div>
             </div>
         </>

src/web/components/Dropdown.test.tsx

@@ -0,0 +1,137 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { Dropdown, Link } from './Dropdown';
+
+const links: Link[] = [
+    {
+        url: '/preference/edition/uk',
+        title: 'UK edition',
+        isActive: true,
+        dataLinkName: 'linkname-UK',
+    },
+    {
+        url: '/preference/edition/us',
+        title: 'US edition',
+        dataLinkName: 'linkname-US',
+    },
+    {
+        url: '/preference/edition/au',
+        title: 'Australian edition',
+        dataLinkName: 'linkname-AU',
+    },
+    {
+        url: '/preference/edition/int',
+        title: 'International edition',
+        dataLinkName: 'linkname-INT',
+    },
+];
+
+const LABEL = 'Dropdown label';
+
+/*
+        interface Props {
+            id: string;
+            label: string;
+            links: Link[];
+            dataLinkName: string;
+        }
+*/
+
+describe('Dropdown', () => {
+    it('should display the given label', () => {
+        const { getByText } = render(
+            <Dropdown
+                id="abc"
+                label={LABEL}
+                links={links}
+                dataLinkName="linkname"
+            />,
+        );
+
+        expect(getByText(LABEL)).toBeInTheDocument();
+    });
+
+    it('should display link titles', () => {
+        const { getByText } = render(
+            <Dropdown
+                id="abc"
+                label={LABEL}
+                links={links}
+                dataLinkName="linkname"
+            />,
+        );
+
+        expect(getByText(links[0].title)).toBeInTheDocument();
+        expect(getByText(links[1].title)).toBeInTheDocument();
+        expect(getByText(links[2].title)).toBeInTheDocument();
+        expect(getByText(links[3].title)).toBeInTheDocument();
+    });
+
+    it('should render the correct number of link items', () => {
+        const { container } = render(
+            <Dropdown
+                id="abc"
+                label={LABEL}
+                links={links}
+                dataLinkName="linkname"
+            />,
+        );
+
+        const listItems = container.querySelectorAll('li');
+
+        expect(listItems.length).toEqual(links.length);
+    });
+
+    it('should expand the menu when clicked upon', () => {
+        const { container, getByRole } = render(
+            <Dropdown
+                id="abc"
+                label={LABEL}
+                links={links}
+                dataLinkName="linkname"
+            />,
+        );
+
+        const ulElement = container.querySelector('ul');
+
+        expect(ulElement).toHaveStyle('display: none');
+        fireEvent.click(getByRole('button'));
+        expect(ulElement).toHaveStyle('display: block');
+    });
+
+    it('should close the expanded menu when they click away', () => {
+        const { container, getByRole } = render(
+            <Dropdown
+                id="abc"
+                label={LABEL}
+                links={links}
+                dataLinkName="linkname"
+            />,
+        );
+
+        const ulElement = container.querySelector('ul');
+
+        fireEvent.click(getByRole('button'));
+        expect(ulElement).toHaveStyle('display: block');
+        container.click();
+        expect(ulElement).toHaveStyle('display: none');
+    });
+
+    it('should close the expanded menu when blurred', () => {
+        const { container, getByRole } = render(
+            <Dropdown
+                id="abc"
+                label={LABEL}
+                links={links}
+                dataLinkName="linkname"
+            />,
+        );
+
+        const ulElement = container.querySelector('ul');
+
+        fireEvent.click(getByRole('button'));
+        expect(ulElement).toHaveStyle('display: block');
+        fireEvent.keyDown(container, { key: 'Escape', code: 'Escape' });
+        expect(ulElement).toHaveStyle('display: none');
+    });
+});

src/web/components/Footer.tsx

@@ -5,7 +5,6 @@ import { textSans, palette } from '@guardian/src-foundations';
 import { from, until } from '@guardian/src-foundations/mq';
 
 import { clearFix } from '@root/src/lib/mixins';
-import { ReaderRevenueLinks } from '@root/src/web/components/ReaderRevenueLinks';
 import { Pillars, pillarWidth, firstPillarWidth } from './Pillars';
 import { BackToTop } from './BackToTop';
 
@@ -187,12 +186,7 @@ const FooterLinks: React.FC<{
 
     const rrLinks = (
         <div className={readerRevenueLinks}>
-            <ReaderRevenueLinks
-                urls={nav.readerRevenueLinks.footer}
-                edition={edition}
-                dataLinkNamePrefix={'footer : '}
-                noResponsive={true}
-            />
+            <div data-island="reader-revenue-links-footer" />
         </div>
     );