Merge branch 'latest' of https://github.com/bbc/simorgh into ws-playwright-sample-tests

Author: MeriemMechri

.yarn/cache/minimatch-npm-3.1.2-9405269906-e0b25b04cd.zip

@@ -9,5 +9,5 @@
 
 export const VARIANCE = 5;
 
-export const MIN_SIZE = 931;
-export const MAX_SIZE = 1298;
+export const MIN_SIZE = 939;
+export const MAX_SIZE = 1303;

.yarn/cache/minimatch-npm-3.1.5-86958baf50-b11a7ee577.zip

@@ -1,4 +1,3 @@
-import Cookie from 'js-cookie';
 import { screen } from '@testing-library/react';
 import { render } from '#app/components/react-testing-library-with-providers';
 import { IdctaConfig } from '#app/models/types/account';
@@ -17,22 +16,19 @@ const idctaConfig: IdctaConfig = {
   settings_url: 'https://example.com/settings',
   signout_url: 'https://example.com/signout',
   foryou_url: 'https://example.com/foryou',
+  initialIsSignedIn: false,
   identity: {
     idSignedInCookieName: 'ckns_id',
   },
 };
 
-const renderWithProviders = () =>
+const renderWithProviders = (overrides = {}) =>
   render(<AccountHeader />, {
     service: 'hindi',
-    idctaConfig,
+    idctaConfig: { ...idctaConfig, ...overrides },
   });
 
 describe('AccountHeader', () => {
-  afterEach(() => {
-    Cookie.remove('ckns_id');
-  });
-
   it('shows Sign in when signed out and account toggle is enabled for service', async () => {
     renderWithProviders();
 
@@ -53,9 +49,7 @@ describe('AccountHeader', () => {
   });
 
   it('shows For you when signed in', async () => {
-    Cookie.set('ckns_id', '1');
-
-    renderWithProviders();
+    renderWithProviders({ initialIsSignedIn: true });
 
     const link = await screen.findByRole('link', { name: 'For you' });
     expect(link).toHaveAttribute(

scripts/bundleSize/bundleSizeConfig.js

@@ -1,21 +1,19 @@
 import { Theme, css } from '@emotion/react';
 
 export default {
-  actionLinkWrapper: ({ mq }) =>
+  callToActionLink: ({ mq }) =>
     css({
-      display: 'flex',
+      padding: '1rem',
+      display: 'inline-flex',
+      justifyContent: 'center',
       flexDirection: 'column',
-      flex: '1 1 auto',
+      flex: '0 0 auto',
       alignItems: 'center',
       gap: '1rem',
       [mq.GROUP_2_MIN_WIDTH]: {
         flexDirection: 'row',
       },
     }),
-  callToActionLink: () =>
-    css({
-      padding: '1rem',
-    }),
 
   buttonSeparatorText: ({ palette }: Theme) =>
     css({

src/app/components/Account/AccountHeader/index.test.tsx

@@ -1,11 +1,9 @@
-import Cookie from 'js-cookie';
 import userEvent from '@testing-library/user-event';
 import {
   render,
   screen,
 } from '#app/components/react-testing-library-with-providers';
 import type { IdctaConfig } from '#app/models/types/account';
-
 import AccountPromotionalBanner from '.';
 
 const idctaConfig: IdctaConfig = {
@@ -19,7 +17,7 @@ const idctaConfig: IdctaConfig = {
   identity: {
     idSignedInCookieName: 'ckns_id',
   },
-};
+} as unknown as IdctaConfig;
 
 const renderWithProviders = (idctaOverrides: Partial<IdctaConfig> = {}) =>
   render(<AccountPromotionalBanner />, {
@@ -28,10 +26,6 @@ const renderWithProviders = (idctaOverrides: Partial<IdctaConfig> = {}) =>
   });
 
 describe('AccountPromotionalBanner', () => {
-  afterEach(() => {
-    Cookie.remove('ckns_id');
-  });
-
   it('renders when signed out and IDCTA is available', async () => {
     renderWithProviders();
 
@@ -61,9 +55,7 @@ describe('AccountPromotionalBanner', () => {
   });
 
   it('does not render when signed in', () => {
-    Cookie.set('ckns_id', '1');
-
-    renderWithProviders();
+    renderWithProviders({ initialIsSignedIn: true });
 
     expect(
       screen.queryByRole('heading', { name: 'Discover your BBC' }),

src/app/components/Account/AccountPromotionalBanner/index.styles.tsx

@@ -80,37 +80,35 @@ const AccountPromotionalBanner = () => {
         setIsDismissed(true);
       }}
     >
-      <div css={styles.actionLinkWrapper}>
-        <CallToActionLink
-          url={signInUrl}
-          className="focusIndicatorInvert"
-          css={[styles.callToActionLink, styles.signInLink]}
-        >
-          <CallToActionLink.ButtonLikeWrapper>
-            <CallToActionLink.Text shouldUnderlineOnHoverFocus>
-              {signInText}
-              <CallToActionLink.Chevron />
-            </CallToActionLink.Text>
-          </CallToActionLink.ButtonLikeWrapper>
-        </CallToActionLink>
+      <CallToActionLink
+        url={signInUrl}
+        className="focusIndicatorInvert"
+        css={[styles.callToActionLink, styles.signInLink]}
+      >
+        <CallToActionLink.ButtonLikeWrapper>
+          <CallToActionLink.Text shouldUnderlineOnHoverFocus>
+            {signInText}
+            <CallToActionLink.Chevron />
+          </CallToActionLink.Text>
+        </CallToActionLink.ButtonLikeWrapper>
+      </CallToActionLink>
 
-        <Paragraph size="bodyCopy" css={styles.buttonSeparatorText}>
-          {buttonSeparatorText}
-        </Paragraph>
+      <Paragraph size="bodyCopy" css={styles.buttonSeparatorText}>
+        {buttonSeparatorText}
+      </Paragraph>
 
-        <CallToActionLink
-          url={registerUrl}
-          className="focusIndicatorInvert"
-          css={[styles.callToActionLink, styles.registerLink]}
-        >
-          <CallToActionLink.ButtonLikeWrapper>
-            <CallToActionLink.Text shouldUnderlineOnHoverFocus>
-              {registerText}
-              <CallToActionLink.Chevron />
-            </CallToActionLink.Text>
-          </CallToActionLink.ButtonLikeWrapper>
-        </CallToActionLink>
-      </div>
+      <CallToActionLink
+        url={registerUrl}
+        className="focusIndicatorInvert"
+        css={[styles.callToActionLink, styles.registerLink]}
+      >
+        <CallToActionLink.ButtonLikeWrapper>
+          <CallToActionLink.Text shouldUnderlineOnHoverFocus>
+            {registerText}
+            <CallToActionLink.Chevron />
+          </CallToActionLink.Text>
+        </CallToActionLink.ButtonLikeWrapper>
+      </CallToActionLink>
     </PromotionalBanner>
   );
 };

src/app/components/Account/AccountPromotionalBanner/index.test.tsx

@@ -3,6 +3,7 @@ import {
   VISUAL_STYLE,
   VISUAL_PROMINENCE,
 } from '#app/models/types/curationData';
+import { ComponentExperimentProps } from '#app/models/types/global';
 import RadioSchedule from '#app/legacy/containers/RadioSchedule';
 import useViewTracker from '#app/hooks/useViewTracker';
 import useClickTrackerHandler from '#app/hooks/useClickTrackerHandler';
@@ -51,6 +52,11 @@ const getGridComponent = (componentName: string | null) => {
   }
 };
 
+interface CurationProps extends Curation {
+  // keep this local so we do not change the shared bff curation data shape
+  experimentProps?: ComponentExperimentProps;
+}
+
 export default ({
   visualStyle = NONE,
   visualProminence = NORMAL,
@@ -68,7 +74,8 @@ export default ({
   renderVisuallyHiddenH2Title = false,
   curationId,
   mediaCollection,
-}: Curation) => {
+  experimentProps,
+}: CurationProps) => {
   const componentName = getComponentName({
     visualStyle,
     visualProminence,
@@ -95,6 +102,8 @@ export default ({
     isLive: summaryIsLive,
     title: linkText,
   } = firstSummary || {};
+  // flatten this once so the tracking object stays easy to read below
+  const experimentTrackingProps = experimentProps || {};
 
   const eventTrackingData: EventTrackingData = {
     componentName,
@@ -106,6 +115,7 @@ export default ({
       ...(curationId && { resourceId: curationId }),
       ...(summaries?.length > 0 && { itemCount: summaries.length }),
     },
+    ...experimentTrackingProps,
   };
 
   switch (componentName) {