feat(deps): update to latest deps, improve oob tests (#90)

Author: seanforyou23

package-lock.json

@@ -23,25 +23,25 @@
     "build:storybook": "build-storybook"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^5.3.18",
-    "@storybook/addon-info": "^5.3.18",
-    "@storybook/addon-links": "^5.3.18",
-    "@storybook/addons": "^5.3.18",
-    "@storybook/react": "^5.3.18",
+    "@storybook/addon-actions": "^5.3.19",
+    "@storybook/addon-info": "^5.3.19",
+    "@storybook/addon-links": "^5.3.19",
+    "@storybook/addons": "^5.3.19",
+    "@storybook/react": "^5.3.19",
     "@types/enzyme": "^3.10.5",
     "@types/enzyme-adapter-react-16": "^1.0.6",
-    "@types/jest": "^25.2.2",
+    "@types/jest": "^25.2.3",
     "@types/victory": "^33.1.4",
-    "@typescript-eslint/eslint-plugin": "^2.33.0",
-    "@typescript-eslint/parser": "^2.33.0",
+    "@typescript-eslint/eslint-plugin": "^3.1.0",
+    "@typescript-eslint/parser": "^3.1.0",
     "css-loader": "^3.5.3",
     "dotenv-webpack": "^1.8.0",
     "enzyme": "^3.7.0",
     "enzyme-adapter-react-16": "^1.15.1",
-    "enzyme-to-json": "^3.4.4",
-    "eslint": "^7.0.0",
+    "enzyme-to-json": "^3.5.0",
+    "eslint": "^7.1.0",
     "eslint-plugin-react": "^7.20.0",
-    "eslint-plugin-react-hooks": "^4.0.2",
+    "eslint-plugin-react-hooks": "^4.0.4",
     "file-loader": "^6.0.0",
     "html-webpack-plugin": "^4.3.0",
     "imagemin": "^7.0.0",
@@ -57,25 +57,25 @@
     "regenerator-runtime": "^0.13.5",
     "rimraf": "^3.0.2",
     "style-loader": "^1.2.1",
-    "svg-url-loader": "^5.0.0",
-    "terser-webpack-plugin": "^3.0.1",
-    "ts-jest": "^26.0.0",
-    "ts-loader": "^7.0.4",
+    "svg-url-loader": "^6.0.0",
+    "terser-webpack-plugin": "^3.0.2",
+    "ts-jest": "^26.1.0",
+    "ts-loader": "^7.0.5",
     "tsconfig-paths-webpack-plugin": "^3.2.0",
     "tslib": "^2.0.0",
-    "typescript": "^3.9.2",
+    "typescript": "^3.9.3",
     "url-loader": "^4.1.0",
     "webpack": "^4.43.0",
-    "webpack-bundle-analyzer": "^3.7.0",
+    "webpack-bundle-analyzer": "^3.8.0",
     "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.11.0",
     "webpack-merge": "^4.1.4"
   },
   "dependencies": {
-    "@patternfly/react-core": "^4.15.0",
-    "@patternfly/react-icons": "^4.3.0",
-    "@patternfly/react-styles": "^4.3.0",
-    "express": "^4.13.4",
+    "@patternfly/react-core": "^4.18.1",
+    "@patternfly/react-icons": "^4.3.2",
+    "@patternfly/react-styles": "^4.3.2",
+    "express": "^4.17.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-router-last-location": "^2.0.1"

package.json

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { PageSection, Title } from '@patternfly/react-core';
 
-const Dashboard: React.FunctionComponent<{}> = () => (
+const Dashboard: React.FunctionComponent = () => (
   <PageSection>
     <Title headingLevel="h1" size="lg">Dashboard Page Title</Title>
   </PageSection>

src/app/Dashboard/Dashboard.tsx

@@ -18,10 +18,10 @@ class DynamicImport extends React.Component<IDynamicImport> {
     super(props);
     this.routeFocusTimer = 0;
   }
-  public componentWillUnmount() {
+  public componentWillUnmount(): void {
     window.clearTimeout(this.routeFocusTimer);
   }
-  public componentDidMount() {
+  public componentDidMount(): void {
     this.props
       .load()
       .then((component) => {
@@ -37,7 +37,7 @@ class DynamicImport extends React.Component<IDynamicImport> {
         }
       });
   }
-  public render() {
+  public render(): React.ReactNode {
     return this.props.children(this.state.component);
   }
 }

src/app/DynamicImport.tsx

@@ -15,12 +15,28 @@ describe('App tests', () => {
     expect(button.exists()).toBe(true);
   });
 
+  it('should hide the sidebar on smaller viewports', () => {
+    Object.defineProperty(window, 'innerWidth', {writable: true, configurable: true, value: 600});
+    const wrapper = mount(<App />);
+    window.dispatchEvent(new Event('resize'));
+    expect(wrapper.find('#page-sidebar').hasClass('pf-m-collapsed')).toBeTruthy();
+  });
+
+  it('should expand the sidebar on larger viewports', () => {
+    Object.defineProperty(window, 'innerWidth', {writable: true, configurable: true, value: 1200});
+    const wrapper = mount(<App />);
+    window.dispatchEvent(new Event('resize'));
+    expect(wrapper.find('#page-sidebar').hasClass('pf-m-expanded')).toBeTruthy();
+  });
+
   it('should hide the sidebar when clicking the nav-toggle button', () => {
+    Object.defineProperty(window, 'innerWidth', {writable: true, configurable: true, value: 1200});
     const wrapper = mount(<App />);
+    window.dispatchEvent(new Event('resize'));
     const button = wrapper.find('#nav-toggle').hostNodes();
-    expect(wrapper.find('#page-sidebar').hasClass('pf-m-collapsed')).toBeTruthy();
-    button.simulate('click');
     expect(wrapper.find('#page-sidebar').hasClass('pf-m-expanded')).toBeTruthy();
-    expect(wrapper.find('#page-sidebar').hasClass('pf-m-collapsed')).toBeFalsy();
+    button.simulate('click');
+    expect(wrapper.find('#page-sidebar').hasClass('pf-m-collapsed')).toBeTruthy();
+    expect(wrapper.find('#page-sidebar').hasClass('pf-m-expanded')).toBeFalsy();
   });
 });

src/app/app.test.tsx

@@ -12,7 +12,7 @@ let routeFocusTimer: number;
 
 const getSupportModuleAsync = () => () => import(/* webpackChunkName: 'support' */ '@app/Support/Support');
 
-const Support = (routeProps: RouteComponentProps) => {
+const Support = (routeProps: RouteComponentProps): React.ReactElement => {
   const lastNavigation = useLastLocation();
   return (
     /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -97,7 +97,7 @@ const PageNotFound = ({ title }: { title: string }) => {
   return <Route component={NotFound} />;
 };
 
-const AppRoutes = () => (
+const AppRoutes = (): React.ReactElement => (
   <LastLocationProvider>
     <Switch>
       {routes.map(({ path, exact, component, title, isAsync }, idx) => (