Merge pull request #12206 from bbc/eslint-config-airbnb-19.x

NEWSWORLDSERVICE-2188: Upgrade eslint-config-airbnb to 19.0.4

.eslintrc.js

@@ -60,6 +60,12 @@ module.exports = {
     'linebreak-style': process.platform === 'win32' ? 'off' : ['error', 'unix'],
     'react-hooks/rules-of-hooks': 'error',
     'react-hooks/exhaustive-deps': 'warn',
+    'import/no-import-module-exports': [
+      'error',
+      {
+        exceptions: ['**/*/startServer.js'],
+      },
+    ],
     'import/no-extraneous-dependencies': [
       'off',
       {
@@ -97,6 +103,14 @@ module.exports = {
         // adds support for type, interface and enum declarations https://typescript-eslint.io/rules/no-use-before-define/#how-to-use
         'no-use-before-define': 'off',
         '@typescript-eslint/no-use-before-define': ['error'],
+        '@typescript-eslint/no-unused-vars': [
+          'warn',
+          {
+            argsIgnorePattern: '^_',
+            varsIgnorePattern: '^_',
+            caughtErrorsIgnorePattern: '^_',
+          },
+        ],
         'react/require-default-props': 'off',
         'react/no-unused-prop-types': 'off',
       },

cypress/support/helpers/ampOnlyServices.js

@@ -1,2 +1,2 @@
 const ampOnlyServices = ['news', 'sport', 'newsround'];
-export { ampOnlyServices as default };
+export default ampOnlyServices;

package.json

@@ -213,7 +213,7 @@
     "cypress-terminal-report": "7.1.0",
     "depcheck": "1.4.7",
     "eslint": "7.32.0",
-    "eslint-config-airbnb": "18.2.1",
+    "eslint-config-airbnb": "19.0.4",
     "eslint-config-prettier": "10.0.1",
     "eslint-import-resolver-alias": "1.1.2",
     "eslint-plugin-cypress": "4.1.0",

src/app/components/ATIAnalytics/params/index.ts

@@ -121,7 +121,7 @@ type BuilderFunction = {
 };
 
 type PageTypeHandlers = {
-  [key in PageTypes]: BuilderFunction;
+  [_key in PageTypes]: BuilderFunction;
 };
 
 const isMigrated = (pageType: PageTypes) =>

src/app/components/Ad/Amp/AdSlot/index.tsx

@@ -68,8 +68,8 @@ interface DeviceSettings {
 }
 
 const slotConfigurations: {
-  [slot in SlotType]: {
-    [device in Device]?: DeviceSettings;
+  [_slot in SlotType]: {
+    [_device in Device]?: DeviceSettings;
   };
 } = {
   leaderboard: {

src/app/components/ChartbeatAnalytics/utils/index.ts

@@ -33,7 +33,7 @@ export const chartbeatUID = 50924;
 export const useCanonical = true;
 export const chartbeatSource = '//static.chartbeat.com/js/chartbeat.js';
 
-const capitalize = (s: string) => s?.charAt(0).toUpperCase() + s?.slice(1);
+const capitalize = (s = '') => `${s?.charAt(0).toUpperCase()}${s?.slice(1)}`;
 
 const buildSectionArr = (service: Services, value: string, type: string) => [
   `${capitalize(service)} - ${value}`,

src/app/components/EmbedConsentBanner/ConsentBanner.tsx

@@ -16,10 +16,10 @@ import { ConsentBannerProviders, getEventTrackingData } from '.';
 
 type BannerUrls = {
   cookiesUrl: {
-    [key in ConsentBannerProviders]: string;
+    [_key in ConsentBannerProviders]: string;
   };
   privacyUrl: {
-    [key in ConsentBannerProviders]: string;
+    [_key in ConsentBannerProviders]: string;
   };
 };
 

src/app/components/Fragment/index.test.tsx

@@ -1,33 +1,33 @@
 import React from 'react';
-import Fragment from '.';
+import FragmentComponent from '.';
 import { render } from '../react-testing-library-with-providers';
 
 describe('Fragment', () => {
   it('with no attributes', () => {
-    const { getByText } = render(<Fragment text="HELLOWORLD" />);
+    const { getByText } = render(<FragmentComponent text="HELLOWORLD" />);
 
     expect(getByText('HELLOWORLD').textContent).toEqual('HELLOWORLD');
   });
 
   it('with bold attributes', () => {
     const { container } = render(
-      <Fragment text="BOLD TEXT" attributes={['bold']} />,
+      <FragmentComponent text="BOLD TEXT" attributes={['bold']} />,
     );
 
     expect(container.querySelector('b')?.textContent).toEqual('BOLD TEXT');
   });
 
   it('with italic attributes', () => {
     const { container } = render(
-      <Fragment text="ITALIC TEXT" attributes={['italic']} />,
+      <FragmentComponent text="ITALIC TEXT" attributes={['italic']} />,
     );
 
     expect(container.querySelector('i')?.textContent).toEqual('ITALIC TEXT');
   });
 
   it('with unknown attributes', () => {
     const { container } = render(
-      <Fragment
+      <FragmentComponent
         text="BOLD WITH UNKNOWN TEXT"
         attributes={['bold', 'unknown']}
       />,
@@ -40,7 +40,7 @@ describe('Fragment', () => {
 
   it('with italic attributes in Farsi', () => {
     const { container } = render(
-      <Fragment
+      <FragmentComponent
         text="ITALIC WITH PERSIAN TEXT"
         attributes={['italic', 'unknown']}
       />,
@@ -54,7 +54,7 @@ describe('Fragment', () => {
   });
 
   it('should emit a null when provided with no content', () => {
-    const { container } = render(<Fragment text="" />);
+    const { container } = render(<FragmentComponent text="" />);
 
     expect(container.querySelector('div')).toBe(null);
   });

src/app/components/Fragment/index.tsx

@@ -1,7 +1,6 @@
 /** @jsxRuntime classic */
 /** @jsx  jsx  */
-/* @jsxFrag React.Fragment */
-import React, { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 import { jsx } from '@emotion/react';
 import styles from './index.style';
 
@@ -25,14 +24,17 @@ const Fragment = ({ text, attributes = [] }: FragmentProps) => {
     These components are nested inside each other as children as the array is iterated through.
     The text string is passed in as the initial value, so it is the first child or the returned value if there are no attributes.
   */
-  return attributes.reduce(
-    (previousAttribute, attribute) => {
-      const Attribute =
-        attributeComponents[attribute as keyof typeof attributeComponents] ||
-        fallbackAttributeComponent; // If attribute is unknown, will use a fallback component that just returns the passed children
-      return <Attribute>{previousAttribute}</Attribute>;
-    },
-    <>{text}</>,
+  return (
+    attributes.reduce(
+      // @ts-expect-error attribute will be of type string
+      (previousAttribute, attribute) => {
+        const Attribute =
+          attributeComponents[attribute as keyof typeof attributeComponents] ||
+          fallbackAttributeComponent; // If attribute is unknown, will use a fallback component that just returns the passed children
+        return <Attribute>{previousAttribute}</Attribute>;
+      },
+      text,
+    ) || ''
   );
 };
 

src/app/components/LiveHeaderMedia/index.tsx

@@ -113,30 +113,26 @@ const LiveHeaderMedia = ({
   };
 
   const description = (
-    <>
-      <Text
-        size="pica"
-        fontVariant="sansBold"
-        as="span"
-        css={[
-          styles.mediaDescription,
-          showMedia
-            ? styles.closeMediaDescription
-            : styles.openMediaDescription,
-        ]}
-        className="hoverStylesText"
-      >
-        {showMedia && <VisuallyHiddenText>{closeVideo}, </VisuallyHiddenText>}
-        <Text size="pica" fontVariant="sansBold" as="span">
-          {short}
-          {!titleHasPunctuation && ','}
-        </Text>
-        <Text size="pica" fontVariant="sansRegular" as="span">
-          {' '}
-          {networkName}
-        </Text>
+    <Text
+      size="pica"
+      fontVariant="sansBold"
+      as="span"
+      css={[
+        styles.mediaDescription,
+        showMedia ? styles.closeMediaDescription : styles.openMediaDescription,
+      ]}
+      className="hoverStylesText"
+    >
+      {showMedia && <VisuallyHiddenText>{closeVideo}, </VisuallyHiddenText>}
+      <Text size="pica" fontVariant="sansBold" as="span">
+        {short}
+        {!titleHasPunctuation && ','}
       </Text>
-    </>
+      <Text size="pica" fontVariant="sansRegular" as="span">
+        {' '}
+        {networkName}
+      </Text>
+    </Text>
   );
 
   return (

src/app/components/LiveRegion/LiveRegionContext/index.tsx

@@ -2,6 +2,7 @@ import React, {
   PropsWithChildren,
   createContext,
   useContext,
+  useMemo,
   useState,
 } from 'react';
 
@@ -19,13 +20,16 @@ export const LiveRegionContextProvider = ({ children }: PropsWithChildren) => {
     setLiveRegionItem(item);
   };
 
+  const memoisedLiveRegion = useMemo(
+    () => ({
+      liveRegionItem,
+      replaceLiveRegionWith,
+    }),
+    [liveRegionItem],
+  );
+
   return (
-    <LiveRegionContext.Provider
-      value={{
-        liveRegionItem,
-        replaceLiveRegionWith,
-      }}
-    >
+    <LiveRegionContext.Provider value={memoisedLiveRegion}>
       {children}
     </LiveRegionContext.Provider>
   );

src/app/components/MediaLoader/configs/clipMedia.ts

@@ -30,7 +30,7 @@ export default ({
     'clipMedia',
   );
 
-  const { images, video, type } = clipMediaBlock?.model;
+  const { images, video, type } = clipMediaBlock?.model || {};
 
   const { source, urlTemplate: locator } = images?.[1] ?? {};
 

src/app/components/MediaLoader/configs/index.ts

@@ -25,7 +25,7 @@ const BLOCK_TYPES = [
 
 const blockTypeMapping: Record<
   (typeof BLOCK_TYPES)[number],
-  (arg0: ConfigBuilderProps) => ConfigBuilderReturnProps
+  (_arg0: ConfigBuilderProps) => ConfigBuilderReturnProps
 > = {
   aresMedia,
   clipMedia,

src/app/components/Metadata/index.tsx

@@ -167,6 +167,7 @@ const MetadataContainer = ({
       {isoLang &&
         !isEnglishService &&
         alternateLinksWsSites.map(renderAlternateLinks)}
+      {/* eslint-disable-next-line react/no-invalid-html-attribute */}
       {linkToAmpPage && <link rel="amphtml" href={ampLink} />}
       {renderAppleItunesApp({
         iTunesAppId,

src/app/legacy/components/Promo/image.jsx

@@ -19,7 +19,7 @@ const ChildWrapper = styled.div`
 
 // promos with images via Programmes (which can be of type audio and possibly others) use a different iChef recipe requiring a second set of resolutions
 // https://github.com/bbc/programme-images/tree/master/webapp/ichef/recipes
-const createSrcSet = (imageUrl, suffix = '', isProgrammeImage) => {
+const createSrcSet = (imageUrl, isProgrammeImage, suffix = '') => {
   const imageResolutions = [85, 120, 170, 232, 325, 450, 660, 800];
   const imageResolutionsProgrammes = [96, 128, 176, 240, 352, 464, 672, 800];
 
@@ -63,9 +63,9 @@ const Image = props => {
     'https://ichef.bbci.co.uk/images/ic/',
   );
   const suffix = src.endsWith('.webp') ? '' : '.webp';
-  const primarySrcSet = createSrcSet(src, suffix, isProgrammeImage);
+  const primarySrcSet = createSrcSet(src, isProgrammeImage, suffix);
 
-  const fallbackSrcSet = createSrcSet(src, '', isProgrammeImage).replaceAll(
+  const fallbackSrcSet = createSrcSet(src, isProgrammeImage).replaceAll(
     '.webp',
     '',
   );

src/app/legacy/containers/App/index.test.jsx

@@ -22,7 +22,7 @@ describe('ClientApp', () => {
 
   it('BrowserRouter should be called with the correct props', () => {
     const actualBrowserRouter = ReactRouter.BrowserRouter;
-    ReactRouter.BrowserRouter = jest.fn(() => <></>);
+    ReactRouter.BrowserRouter = jest.fn(() => 'Browser Router');
     renderClientApp();
     expect(ReactRouter.BrowserRouter).toHaveBeenCalledWith(
       {
@@ -63,7 +63,7 @@ describe('ServerApp', () => {
 
   it('StaticRouter should be called with the correct props', () => {
     const actualStaticRouter = ReactRouter.StaticRouter;
-    ReactRouter.StaticRouter = jest.fn(() => <></>);
+    ReactRouter.StaticRouter = jest.fn(() => 'Static Router');
     renderServerApp();
     expect(ReactRouter.StaticRouter).toHaveBeenCalledWith(
       {

src/app/legacy/containers/Footer/index.test.jsx

@@ -3,21 +3,9 @@ import React from 'react';
 import { render } from '../../../components/react-testing-library-with-providers';
 import FooterContainer from '.';
 
-const RealDate = Date;
-
 describe(`FooterContainer`, () => {
   beforeEach(() => {
-    // eslint-disable-next-line prettier/prettier
-    global.Date = class extends RealDate {
-      constructor() {
-        super();
-        return new RealDate('3000-01-01T12:00:00');
-      }
-    };
-  });
-
-  afterEach(() => {
-    global.Date = RealDate;
+    jest.useFakeTimers().setSystemTime(new Date('3000-01-01T12:00:00Z'));
   });
 
   describe('snapshots', () => {

src/app/legacy/containers/Fragment/index.test.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { shouldMatchSnapshot } from '#psammead/psammead-test-helpers/src';
 import { ServiceContext } from '../../../contexts/ServiceContext';
-import Fragment from './index';
+import FragmentContainer from './index';
 
 const newsContext = {
   service: 'news',
@@ -18,7 +18,7 @@ const CreateFragment = ({
   text = '',
 } = {}) => (
   <ServiceContext.Provider value={context}>
-    <Fragment text={text} attributes={attributes} />
+    <FragmentContainer text={text} attributes={attributes} />
   </ServiceContext.Provider>
 );
 

src/app/legacy/containers/PodcastPromo/components/card-episodes-text.jsx

@@ -25,12 +25,10 @@ const EpisodesText = styled.p`
 `;
 
 const CardEpisodesText = ({ children, ...props }) => (
-  <>
-    <EpisodesText {...props}>
-      {mediaIcons.seriesstack}
-      {children}
-    </EpisodesText>
-  </>
+  <EpisodesText {...props}>
+    {mediaIcons.seriesstack}
+    {children}
+  </EpisodesText>
 );
 
 export default CardEpisodesText;

src/app/legacy/containers/StoryPromo/index.jsx

@@ -50,9 +50,9 @@ const extractAltText = blocks => {
     if (block.model && block.model.blocks) {
       return extractAltText(block.model.blocks);
     }
-    return '';
   }
 };
+
 const getBlockByType = (blocks, blockType) => {
   let blockData;
   blocks.forEach(block => {