feat(client): ts-migrate client/utils/** (#42823)

* rename js files * update imports and references * migrate build-challenges * migrate challenge-types * migrate utils/index * migrate state-management * install @types/psl for tags * migrate tags * migrate tags.test * migrate challenge-page-creator * migrate utils/gatsby/index * migrate layout-selector * migrate layout-selector.test * revert challenge-types Curriculum can't handle TS or modules * convert arrow functions * revert build-challenges * revert utils/gatsby/index * revert challenge-page-creator * revert challenge-types reference * Delete state-management Deleted in #42960 * Disable render-result-naming-convention (for now) * update layout-selector.test comment * reorder imports in build-challenges * change ts-ignore to ts-expect-error
2021-08-09 01:30:31 -07:00
parent fcadd534e7
commit dd5d2919be
23 changed files with 116 additions and 83 deletions
--- a/client/utils/gatsby/layout-selector.test.tsx
+++ b/client/utils/gatsby/layout-selector.test.tsx
@ -0,0 +1,90 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+import React from 'react';
+import { Provider } from 'react-redux';
+import ShallowRenderer from 'react-test-renderer/shallow';
+
+import FourOhFourPage from '../../src/pages/404';
+import Certification from '../../src/pages/certification';
+import Learn from '../../src/pages/learn';
+import { createStore } from '../../src/redux/createStore';
+import layoutSelector from './layout-selector';
+
+jest.mock('../../src/analytics');
+
+const store = createStore();
+
+interface NameAndProps {
+  props: Record<string, unknown>;
+  name: string;
+}
+function getComponentNameAndProps(
+  elementType: React.JSXElementConstructor<never>,
+  pathname: string
+): NameAndProps {
+  // eslint-disable-next-line testing-library/render-result-naming-convention
+  const shallow = ShallowRenderer.createRenderer();
+  const LayoutReactComponent = layoutSelector({
+    element: { type: elementType, props: {}, key: '' },
+    props: {
+      location: {
+        pathname
+      }
+    }
+  });
+  shallow.render(<Provider store={store}>{LayoutReactComponent}</Provider>);
+  const view = shallow.getRenderOutput();
+  return {
+    props: view.props as Record<string, unknown>,
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    name: view.type.WrappedComponent.displayName
+    // TODO: Revisit this when react-test-renderer is replaced with
+    // react-testing-library
+  };
+}
+
+test('Challenge path should have DefaultLayout and no footer', () => {
+  const challengePath =
+    '/learn/responsive-web-design/basic-html-and-html5/say-hello-to-html-elements';
+  const compnentObj = getComponentNameAndProps(Learn, challengePath);
+  expect(compnentObj.name).toEqual('DefaultLayout');
+  expect(compnentObj.props.showFooter).toEqual(false);
+});
+
+test('SuperBlock path should have DefaultLayout and footer', () => {
+  const superBlockPath = '/learn/responsive-web-design/';
+  const compnentObj = getComponentNameAndProps(Learn, superBlockPath);
+  expect(compnentObj.name).toEqual('DefaultLayout');
+  expect(compnentObj.props.showFooter).toEqual(true);
+});
+
+test('i18l challenge path should have DefaultLayout and no footer', () => {
+  const challengePath =
+    'espanol/learn/responsive-web-design/basic-html-and-html5/say-hello-to-html-elements/';
+  const compnentObj = getComponentNameAndProps(Learn, challengePath);
+  expect(compnentObj.name).toEqual('DefaultLayout');
+  expect(compnentObj.props.showFooter).toEqual(false);
+});
+
+test('i18l superBlock path should have DefaultLayout and footer', () => {
+  const superBlockPath = '/learn/responsive-web-design/';
+  const compnentObj = getComponentNameAndProps(Learn, superBlockPath);
+  expect(compnentObj.name).toEqual('DefaultLayout');
+  expect(compnentObj.props.showFooter).toEqual(true);
+});
+
+test('404 page should have DefaultLayout and footer', () => {
+  const challengePath =
+    '/espanol/learn/responsive-web-design/basic-html-and-html5/say-hello-to-html-elements/';
+  const compnentObj = getComponentNameAndProps(FourOhFourPage, challengePath);
+  expect(compnentObj.name).toEqual('DefaultLayout');
+  expect(compnentObj.props.showFooter).toEqual(true);
+});
+
+test('Certification path should have CertificationLayout', () => {
+  const challengePath =
+    '/certification/mot01/javascript-algorithms-and-data-structures/';
+  const compnentObj = getComponentNameAndProps(Certification, challengePath);
+  expect(compnentObj.name).toEqual('CertificationLayout');
+});