Skip to content

Prove remaining Islands are server-safe #9641

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mxdvl merged 5 commits into from
Nov 24, 2023
Merged

Prove remaining Islands are server-safe #9641

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
fd893e4
feat(AppEmailSignup): prove it is server safe
mxdvl Nov 23, 2023
81551f1
feat(MostViewedRightWrapper): prove server safe
mxdvl Nov 23, 2023
6ff0e60
feat(ShowHideContainer): prove server safe
mxdvl Nov 23, 2023
72a6fde
feat(Liveness): already server-safe
mxdvl Nov 23, 2023
3d69c1a
feat(LiveBlogEpic): already server safe
mxdvl Nov 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion dotcom-rendering/cypress/e2e/parallel-3/epic.interactivity.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ describe('Epics', function () {
// Wait for hydration of the Epic
cy.get('gu-island[name=LiveBlogEpic]')
.first()
.should('have.attr', 'data-island-status', 'rendered');
.should('have.attr', 'data-island-status', 'hydrated');
cy.get('[data-cy=contributions-liveblog-epic]').scrollIntoView();
cy.get('[data-cy=contributions-liveblog-epic]').should('be.visible');
});
Expand Down
12 changes: 6 additions & 6 deletions dotcom-rendering/cypress/e2e/parallel-5/liveblog.interactivity.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ describe('Liveblogs', function () {
// Wait for hydration
cy.get('gu-island[name=Liveness]')
.first()
.should('have.attr', 'data-island-status', 'rendered');
.should('have.attr', 'data-island-status', 'hydrated');
cy.scrollTo('center');
cy.get(`[data-testid="toast"]`).should('not.exist');
cy.window().then(function (win) {
Expand Down Expand Up @@ -75,7 +75,7 @@ describe('Liveblogs', function () {
// Wait for hydration
cy.get('gu-island[name=Liveness]')
.first()
.should('have.attr', 'data-island-status', 'rendered');
.should('have.attr', 'data-island-status', 'hydrated');
cy.window().then(function (win) {
win.mockLiveUpdate({
numNewBlocks: 1,
Expand All @@ -92,7 +92,7 @@ describe('Liveblogs', function () {
// Wait for hydration
cy.get('gu-island[name=Liveness]', { timeout: 30000 })
.first()
.should('have.attr', 'data-island-status', 'rendered');
.should('have.attr', 'data-island-status', 'hydrated');
cy.scrollTo('bottom');
cy.get(`[data-testid="toast"]`).should('not.exist');
cy.window().then(function (win) {
Expand Down Expand Up @@ -128,7 +128,7 @@ describe('Liveblogs', function () {
// Wait for hydration
cy.get('gu-island[name=Liveness]')
.first()
.should('have.attr', 'data-island-status', 'rendered');
.should('have.attr', 'data-island-status', 'hydrated');
cy.window().then(function (win) {
win.mockLiveUpdate({
numNewBlocks: 1,
Expand Down Expand Up @@ -171,7 +171,7 @@ describe('Liveblogs', function () {
// Wait for hydration
cy.get('gu-island[name=Liveness]', { timeout: 30000 })
.first()
.should('have.attr', 'data-island-status', 'rendered');
.should('have.attr', 'data-island-status', 'hydrated');
cy.scrollTo('bottom');
cy.get(`[data-testid="toast"]`).should('not.exist');
cy.window().then(function (win) {
Expand All @@ -198,7 +198,7 @@ describe('Liveblogs', function () {
// Wait for hydration
cy.get('gu-island[name=Liveness]')
.first()
.should('have.attr', 'data-island-status', 'rendered');
.should('have.attr', 'data-island-status', 'hydrated');
cy.scrollTo('bottom', { duration: 1000 });
cy.window().then(function (win) {
win.mockLiveUpdate({
Expand Down
4 changes: 3 additions & 1 deletion dotcom-rendering/playwright/tests/parallel-1/article.e2e.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,9 @@ test.describe('E2E Page rendering', () => {
).toBeVisible();

// expect most read right to be loaded, its data response and its text to be visible
await waitForIsland(page, 'MostViewedRightWrapper');
await waitForIsland(page, 'MostViewedRightWrapper', {
status: 'hydrated',
});
await mostReadRightResponsePromise;
await expect(
page
Expand Down
8 changes: 6 additions & 2 deletions dotcom-rendering/playwright/tests/parallel-3/article.interactivity.e2e.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,9 @@ test.describe('Interactivity', () => {
await disableCMP(context);
await loadPage(page, `/Article/${articleUrl}`);
await expectToNotExist(page, '[data-component=geo-most-popular]');
await waitForIsland(page, 'MostViewedRightWrapper');
await waitForIsland(page, 'MostViewedRightWrapper', {
status: 'hydrated',
});
await expectToExist(page, '[data-component=geo-most-popular]');
});

Expand Down Expand Up @@ -151,7 +153,9 @@ test.describe('Interactivity', () => {
).toHaveCount(0);

// Wait for hydration
await waitForIsland(page, 'MostViewedRightWrapper');
await waitForIsland(page, 'MostViewedRightWrapper', {
status: 'hydrated',
});
await expect(
page
.locator(`gu-island[name="MostViewedRightWrapper"]`)
Expand Down
2 changes: 1 addition & 1 deletion dotcom-rendering/src/components/EmailSignUpSwitcher.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export const EmailSignUpSwitcher = ({
const { renderingTarget } = useConfig();

return renderingTarget === 'Apps' ? (
<Island priority="feature" clientOnly={true} defer={{ until: 'idle' }}>
<Island priority="feature" defer={{ until: 'idle' }}>
<AppEmailSignUp skipToIndex={index} {...emailSignUpProps} />
</Island>
) : (
Expand Down
6 changes: 1 addition & 5 deletions dotcom-rendering/src/components/FrontPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,11 +71,7 @@ export const FrontPage = ({ front, NAV }: Props) => {
tests={front.config.abTests}
/>
</Island>
<Island
priority="enhancement"
defer={{ until: 'idle' }}
clientOnly={true}
>
<Island priority="enhancement" defer={{ until: 'idle' }}>
<ShowHideContainers />
</Island>
<Island priority="critical" clientOnly={true}>
Expand Down
35 changes: 35 additions & 0 deletions dotcom-rendering/src/components/Island.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
import { ArticleDesign, ArticleDisplay, Pillar } from '@guardian/libs';
import { renderToString } from 'react-dom/server';
import { AlreadyVisited } from './AlreadyVisited.importable';
import { AppEmailSignUp } from './AppEmailSignUp.importable';
import { AppsEpic } from './AppsEpic.importable';
import { BrazeMessaging } from './BrazeMessaging.importable';
import { CardCommentCount } from './CardCommentCount.importable';
Expand All @@ -21,13 +22,15 @@ import { LiveBlogEpic } from './LiveBlogEpic.importable';
import { Liveness } from './Liveness.importable';
import { Metrics } from './Metrics.importable';
import { MostViewedFooterData } from './MostViewedFooterData.importable';
import { MostViewedRightWrapper } from './MostViewedRightWrapper.importable';
import { OnwardsUpper } from './OnwardsUpper.importable';
import { ReaderRevenueDev } from './ReaderRevenueDev.importable';
import { ReaderRevenueLinks } from './ReaderRevenueLinks.importable';
import { RecipeMultiplier } from './RecipeMultiplier.importable';
import { SendTargetingParams } from './SendTargetingParams.importable';
import { SetABTests } from './SetABTests.importable';
import { SetAdTargeting } from './SetAdTargeting.importable';
import { ShowHideContainers } from './ShowHideContainers.importable';
import { SignInGateSelector } from './SignInGateSelector.importable';
import { SlotBodyEnd } from './SlotBodyEnd.importable';
import { Snow } from './Snow.importable';
Expand Down Expand Up @@ -100,6 +103,22 @@ describe('Island: server-side rendering', () => {
expect(() => renderToString(<AlreadyVisited />)).not.toThrow();
});

test('AppEmailSignup', () => {
expect(() =>
renderToString(
<AppEmailSignUp
skipToIndex={0}
identityName={''}
successDescription={''}
name={''}
description={''}
frequency={''}
theme={''}
/>,
),
).not.toThrow();
});

test('AppsEpic', () => {
expect(() => renderToString(<AppsEpic />)).not.toThrow();
});
Expand Down Expand Up @@ -306,6 +325,18 @@ describe('Island: server-side rendering', () => {
).not.toThrow();
});

test('MostViewedRightWrapper', () => {
expect(() =>
renderToString(
<MostViewedRightWrapper
componentDataAttribute={''}
maxHeightPx={0}
renderAds={false}
/>,
),
).not.toThrow();
});

test('ReaderRevenueDev', () => {
expect(() =>
renderToString(
Expand Down Expand Up @@ -375,6 +406,10 @@ describe('Island: server-side rendering', () => {
).not.toThrow();
});

test('ShowHideContainers', () => {
expect(() => renderToString(<ShowHideContainers />)).not.toThrow();
});

test('SignInGateSelector', () => {
expect(() =>
renderToString(
Expand Down
1 change: 0 additions & 1 deletion dotcom-rendering/src/components/LiveBlogRenderer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,6 @@ export const LiveBlogRenderer = ({
// but this island manipulate the DOM via portals,
// its actual position has no bearing on its effect
defer={{ until: 'idle' }}
clientOnly={true}
>
<LiveBlogEpic
sectionId={sectionId}
Expand Down
1 change: 0 additions & 1 deletion dotcom-rendering/src/components/MostViewedRightWithAd.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,6 @@ export const MostViewedRightWithAd = ({
{!isPaidContent ? (
<Island
priority="feature"
clientOnly={true}
defer={{
until: 'visible',
// Provide a much higher value for the top margin for the intersection observer
Expand Down
1 change: 0 additions & 1 deletion dotcom-rendering/src/layouts/LiveLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -651,7 +651,6 @@ export const LiveLayout = (props: WebProps | AppsProps) => {
`}
/>
<Island
clientOnly={true}
priority="feature"
defer={{ until: 'idle' }}
>
Expand Down