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