frontend/core: deps and test fixes

frontend/packages/app/package.json

@@ -18,9 +18,7 @@
     "@types/react-dom": "^16.9.0",
     "@types/react-router-dom": "^5.1.3",
     "@types/zen-observable": "^0.8.0",
-    "classnames": "^2.2.6",
     "cross-env": "^7.0.0",
-    "rc-progress": "^2.5.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-router-dom": "^5.1.2",

frontend/packages/core/package.json

@@ -15,6 +15,8 @@
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",
     "@types/react-router-dom": "^5.1.3",
+    "classnames": "^2.2.6",
+    "rc-progress": "^2.5.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-helmet": "5.2.1",

frontend/packages/core/src/components/CircleProgress.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { wrapInThemedTestApp } from '../testUtils';
-import CircleProgress from '@backstage/core';
+import CircleProgress from './CircleProgress';
 //import { COLORS, V1 } from 'core/app/Themes';
 
 describe('<CircleProgress />', () => {

frontend/packages/core/src/components/HorizontalScrollGrid.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import { renderWithEffects, wrapInThemedTestApp } from '../testUtils';
-import HorizontalScrollGrid from 'shared/components/HorizontalScrollGrid';
+import HorizontalScrollGrid from './HorizontalScrollGrid';
 import { Grid } from '@material-ui/core';
 
 describe('<HorizontalScrollGrid />', () => {

frontend/packages/core/src/components/HorizontalScrollGrid.tsx

@@ -1,9 +1,8 @@
 import React, { FC } from 'react';
 import classNames from 'classnames';
-import { makeStyles, Theme } from '@material-ui/core/styles';
 import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
-import { Grid, IconButton } from '@material-ui/core';
+import { Grid, IconButton, makeStyles, Theme } from '@material-ui/core';
 
 // Generated with https://larsenwork.com/easing-gradients/
 const fadeGradient = `
@@ -34,7 +33,7 @@ type Props = {
   minScrollDistance?: number; // limits how small steps the scroll can take in px
 };
 
-const useStyles = makeStyles<Theme, Props>(theme => ({
+const useStyles = makeStyles<Theme>(theme => ({
   root: {
     position: 'relative',
     display: 'flex',
@@ -43,7 +42,7 @@ const useStyles = makeStyles<Theme, Props>(theme => ({
   },
   container: {
     overflow: 'auto',
-    scrollbarWidth: 0, // hide in FF
+    scrollbarWidth: 0 as any, // hide in FF
     '&::-webkit-scrollbar': {
       display: 'none', // hide in Chrome
     },

frontend/packages/core/src/testUtils/index.js

@@ -10,6 +10,8 @@ import { Route } from 'react-router-dom';
 
 import { V1 } from '../theme/BackstageTheme';
 import ErrorBoundary from '../layout/ErrorBoundary';
+import { act } from 'react-dom/test-utils';
+import { render } from '@testing-library/react';
 
 export { default as Keyboard } from './Keyboard';
 export { default as mockBreakpoint } from './mockBreakpoint';
@@ -34,3 +36,16 @@ export function wrapInThemedTestApp(component, initialRouterEntries) {
 export const wrapInTheme = (component, theme = V1) => (
   <ThemeProvider theme={theme}>{component}</ThemeProvider>
 );
+
+// Components using useEffect to perform an asynchronous action (such as fetch) must be rendered within an async
+// act call to properly get the final state, even with mocked responses. This utility method makes the signature a bit
+// cleaner, since act doesn't return the result of the evaluated function.
+// https://github.com/testing-library/react-testing-library/issues/281
+// https://github.com/facebook/react/pull/14853
+export async function renderWithEffects(nodes) {
+  let value;
+  await act(async () => {
+    value = await render(nodes);
+  });
+  return value;
+}