From 67ee31cbfc1c50ac8a96b6b7da1bf9786542ccec Mon Sep 17 00:00:00 2001 From: Ismail Tlemcani <34961373+Ismailtlem@users.noreply.github.com> Date: Thu, 26 Aug 2021 23:17:25 +0100 Subject: [PATCH] feat(client): ts-migration for layout index file, Intro Component and header test file (#43094) --- .../{Header.test.js => Header.test.tsx} | 87 +++++++++++-------- ...troDescription.js => IntroDescription.tsx} | 2 +- .../components/layouts/{index.js => index.ts} | 0 3 files changed, 51 insertions(+), 38 deletions(-) rename client/src/components/Header/{Header.test.js => Header.test.tsx} (73%) rename client/src/components/Intro/components/{IntroDescription.js => IntroDescription.tsx} (96%) rename client/src/components/layouts/{index.js => index.ts} (100%) diff --git a/client/src/components/Header/Header.test.js b/client/src/components/Header/Header.test.tsx similarity index 73% rename from client/src/components/Header/Header.test.js rename to client/src/components/Header/Header.test.tsx index 748af6494e7..2bfbed6af4d 100644 --- a/client/src/components/Header/Header.test.js +++ b/client/src/components/Header/Header.test.tsx @@ -1,6 +1,10 @@ -import React from 'react'; +/* eslint-disable @typescript-eslint/no-unsafe-assignment */ +/* eslint-disable @typescript-eslint/no-unsafe-member-access */ +/* eslint-disable @typescript-eslint/no-unsafe-return */ + +import React, { Ref } from 'react'; import { useTranslation } from 'react-i18next'; -import { create } from 'react-test-renderer'; +import { create, ReactTestRendererJSON } from 'react-test-renderer'; import ShallowRenderer from 'react-test-renderer/shallow'; import envData from '../../../../config/env.json'; @@ -15,8 +19,9 @@ jest.mock('../../analytics'); describe('', () => { const UniversalNavProps = { displayMenu: false, - menuButtonRef: {}, + menuButtonRef: {} as Ref | undefined, searchBarRef: {}, + // eslint-disable-next-line @typescript-eslint/no-empty-function toggleDisplayMenu: function () {}, pathName: '/', fetchState: { @@ -24,14 +29,15 @@ describe('', () => { } }; it('renders to the DOM', () => { - const shallow = new ShallowRenderer(); - shallow.render(); - const view = shallow.getRenderOutput(); + const utils = ShallowRenderer.createRenderer(); + utils.render(); + const view = utils.getRenderOutput(); expect(view).toBeTruthy(); }); }); describe('', () => { + const { t } = useTranslation(); it('has expected navigation links when not signed in', () => { const landingPageProps = { fetchState: { @@ -45,12 +51,12 @@ describe('', () => { i18n: { language: 'en' }, - toggleNightMode: theme => theme + toggleNightMode: (theme: string) => theme, + t: t }; - const shallow = new ShallowRenderer(); - shallow.render(); - const view = shallow.getRenderOutput(); - + const utils = ShallowRenderer.createRenderer(); + utils.render(); + const view = utils.getRenderOutput(); expect( hasDonateNavItem(view) && hasSignInNavItem(view) && @@ -74,12 +80,12 @@ describe('', () => { i18n: { language: 'en' }, - t: useTranslation.t, - toggleNightMode: theme => theme + t: t, + toggleNightMode: (theme: string) => theme }; - const shallow = new ShallowRenderer(); - shallow.render(); - const view = shallow.getRenderOutput(); + const utils = ShallowRenderer.createRenderer(); + utils.render(); + const view = utils.getRenderOutput(); expect( hasDonateNavItem(view) && hasCurriculumNavItem(view) && @@ -104,12 +110,12 @@ describe('', () => { i18n: { language: 'en' }, - t: useTranslation.t, - toggleNightMode: theme => theme + t: t, + toggleNightMode: (theme: string) => theme }; - const shallow = new ShallowRenderer(); - shallow.render(); - const view = shallow.getRenderOutput(); + const utils = ShallowRenderer.createRenderer(); + utils.render(); + const view = utils.getRenderOutput(); expect( hasThanksForDonating(view) && hasCurriculumNavItem(view) && @@ -192,39 +198,43 @@ describe('', () => { }); }); -const navigationLinks = (component, key) => { +const navigationLinks = (component: JSX.Element, key: string) => { + // eslint-disable-next-line @typescript-eslint/no-unsafe-call const target = component.props.children.find( - child => child && child.key === key + (child: { key?: string }) => child && child.key === key ); return target.props; }; +// eslint-disable-next-line @typescript-eslint/no-explicit-any +const profileNavItem = (component: any) => component.children[0]; -const profileNavItem = component => component.children[0]; - -const hasDonateNavItem = component => { +const hasDonateNavItem = (component: JSX.Element) => { const { children, to } = navigationLinks(component, 'donate'); return children === 'buttons.donate' && to === '/donate'; }; -const hasThanksForDonating = component => { +const hasThanksForDonating = (component: JSX.Element) => { const { children } = navigationLinks(component, 'donate'); - return children[0].props.children === 'donate.thanks'; + return children ? children[0].props.children === 'donate.thanks' : null; }; -const hasSignInNavItem = component => { +const hasSignInNavItem = (component: JSX.Element) => { const { children } = navigationLinks(component, 'signin'); return children === 'buttons.sign-in'; }; -const hasCurriculumNavItem = component => { +const hasCurriculumNavItem = (component: JSX.Element) => { const { children, to } = navigationLinks(component, 'learn'); return children === 'buttons.curriculum' && to === '/learn'; }; -const hasProfileAndSettingsNavItems = (component, username) => { +const hasProfileAndSettingsNavItems = ( + component: JSX.Element, + username: string +) => { const fragment = navigationLinks(component, 'profile-settings'); - const profile = fragment.children[0].props; + const profile = fragment ? fragment.children[0].props : null; const settings = fragment.children[1].props; const hasProfile = @@ -235,7 +245,7 @@ const hasProfileAndSettingsNavItems = (component, username) => { return hasProfile && hasSettings; }; -const hasForumNavItem = component => { +const hasForumNavItem = (component: JSX.Element) => { const { children, to } = navigationLinks(component, 'forum'); // TODO: test compiled TFunction value return ( @@ -243,14 +253,14 @@ const hasForumNavItem = component => { ); }; -const hasNewsNavItem = component => { +const hasNewsNavItem = (component: JSX.Element) => { const { children, to } = navigationLinks(component, 'news'); return ( children[0].props.children === 'buttons.news' && to === 'links:nav.news' ); }; -const hasRadioNavItem = component => { +const hasRadioNavItem = (component: JSX.Element) => { const { children, to } = navigationLinks(component, 'radio'); return ( children[0].props.children === 'buttons.radio' && @@ -258,7 +268,7 @@ const hasRadioNavItem = component => { ); }; -const hasSignOutNavItem = component => { +const hasSignOutNavItem = (component: JSX.Element) => { const { children } = navigationLinks(component, 'signout-frag'); const signOutProps = children[1].props; @@ -273,7 +283,10 @@ const hasSignInButton = component => component.props.children[1].props.children === 'buttons.sign-in'; */ -const avatarHasClass = (componentTree, classes) => { +const avatarHasClass = ( + componentTree: ReactTestRendererJSON | ReactTestRendererJSON[] | null, + classes: string +) => { return ( profileNavItem(componentTree).props.className === 'avatar-container ' + classes diff --git a/client/src/components/Intro/components/IntroDescription.js b/client/src/components/Intro/components/IntroDescription.tsx similarity index 96% rename from client/src/components/Intro/components/IntroDescription.js rename to client/src/components/Intro/components/IntroDescription.tsx index 0e7586d52a4..c1d13d8c9c1 100644 --- a/client/src/components/Intro/components/IntroDescription.js +++ b/client/src/components/Intro/components/IntroDescription.tsx @@ -6,7 +6,7 @@ import { Link, Spacer } from '../../helpers'; import '../intro.css'; const { forumLocation } = envData; -function IntroDescription() { +function IntroDescription(): JSX.Element { const { t } = useTranslation(); return ( diff --git a/client/src/components/layouts/index.js b/client/src/components/layouts/index.ts similarity index 100% rename from client/src/components/layouts/index.js rename to client/src/components/layouts/index.ts