diff --git a/src/components/Metadata/Metadata.test.tsx b/src/components/Metadata/Metadata.test.tsx
index b1e80ccae..940af8a43 100644
--- a/src/components/Metadata/Metadata.test.tsx
+++ b/src/components/Metadata/Metadata.test.tsx
@@ -1,7 +1,7 @@
import useForm from "@saleor/hooks/useForm";
import Wrapper from "@test/wrapper";
+import Adapter from "@wojtekmaj/enzyme-adapter-react-17";
import { configure, mount } from "enzyme";
-import Adapter from "enzyme-adapter-react-16";
import React from "react";
import { props } from "./fixtures";
diff --git a/src/components/Metadata/MetadataCard.tsx b/src/components/Metadata/MetadataCard.tsx
index d792fb971..e27aa1537 100644
--- a/src/components/Metadata/MetadataCard.tsx
+++ b/src/components/Metadata/MetadataCard.tsx
@@ -41,7 +41,7 @@ const MetadataCard: React.FC
= ({
const intl = useIntl();
const loaded = React.useRef(false);
const [expanded, setExpanded] = React.useState(true);
- const classes = useStyles({});
+ const classes = useStyles();
useEffect(() => {
if (data !== undefined) {
diff --git a/src/components/Navigator/useQuickSearch.ts b/src/components/Navigator/useQuickSearch.ts
index 31212d1b3..5cbe979c8 100644
--- a/src/components/Navigator/useQuickSearch.ts
+++ b/src/components/Navigator/useQuickSearch.ts
@@ -66,12 +66,15 @@ function useQuickSearch(
useEffect(() => {
setQuery("");
+
+ const inputInstance = input.current;
+
if (mode !== "default" && input.current) {
- input.current.addEventListener("keyup", handleBack);
+ inputInstance.addEventListener("keyup", handleBack);
return () => {
- if (input.current) {
- input.current.removeEventListener("keyup", handleBack);
+ if (inputInstance) {
+ inputInstance.removeEventListener("keyup", handleBack);
}
};
}
diff --git a/src/components/TableCellAvatar/Avatar.tsx b/src/components/TableCellAvatar/Avatar.tsx
index c577b1a43..da210688a 100644
--- a/src/components/TableCellAvatar/Avatar.tsx
+++ b/src/components/TableCellAvatar/Avatar.tsx
@@ -42,7 +42,7 @@ export interface AvatarProps {
thumbnail?: string;
alignRight?: boolean;
avatarProps?: string;
- children?: React.ReactNode | React.ReactNodeArray;
+ children?: React.ReactNode | React.ReactNode[];
badge?: React.ReactNode;
}
diff --git a/src/components/TableCellAvatar/TableCellAvatar.tsx b/src/components/TableCellAvatar/TableCellAvatar.tsx
index f7503bfdc..6fd0a3d1c 100644
--- a/src/components/TableCellAvatar/TableCellAvatar.tsx
+++ b/src/components/TableCellAvatar/TableCellAvatar.tsx
@@ -19,7 +19,9 @@ const useStyles = makeStyles(
{ name: "TableCellAvatar" },
);
-interface TableCellAvatarProps extends AvatarProps, TableCellProps {
+interface TableCellAvatarProps
+ extends TableCellProps,
+ Omit {
className?: string;
}
diff --git a/src/components/TypeDeleteWarningDialog/DeleteWarningDialogConsentContent.tsx b/src/components/TypeDeleteWarningDialog/DeleteWarningDialogConsentContent.tsx
index af30a9b91..31295c0ce 100644
--- a/src/components/TypeDeleteWarningDialog/DeleteWarningDialogConsentContent.tsx
+++ b/src/components/TypeDeleteWarningDialog/DeleteWarningDialogConsentContent.tsx
@@ -6,7 +6,7 @@ import ControlledCheckbox from "../ControlledCheckbox";
import { useTypeDeleteWarningDialogStyles as useStyles } from "./styles";
interface DeleteWarningDialogConsentContentProps {
- description: string | React.ReactNode[];
+ description: string | React.ReactNode[] | readonly React.ReactNode[];
consentLabel: string;
isConsentChecked: boolean;
onConsentChange: (value: boolean) => void;
diff --git a/src/graphql/client.ts b/src/graphql/client.ts
index 1b474d65e..3e3703524 100644
--- a/src/graphql/client.ts
+++ b/src/graphql/client.ts
@@ -1,7 +1,6 @@
// DON'T TOUCH THIS
// These are separate clients and do not share configs between themselves
-import { ApolloClient, InMemoryCache } from "@apollo/client";
-import { ApolloLink } from "@apollo/client/link/core";
+import { ApolloClient, ApolloLink, InMemoryCache } from "@apollo/client";
import { createFetch, createSaleorClient } from "@saleor/sdk";
import { createUploadLink } from "apollo-upload-client";
diff --git a/src/hooks/useElementScroll.ts b/src/hooks/useElementScroll.ts
index b21c10612..e6b14a3b8 100644
--- a/src/hooks/useElementScroll.ts
+++ b/src/hooks/useElementScroll.ts
@@ -28,16 +28,18 @@ function useElementScroll(anchor: MutableRefObject): Position {
const [scroll, setScroll] = useState(getPosition(anchor.current));
useEffect(() => {
- if (!!anchor.current) {
+ const anchorInstance = anchor.current;
+
+ if (!!anchorInstance) {
const handleScroll = throttle(
- () => setScroll(getPosition(anchor.current)),
+ () => setScroll(getPosition(anchorInstance)),
100,
);
- anchor.current.addEventListener("scroll", handleScroll);
+ anchorInstance.addEventListener("scroll", handleScroll);
return () => {
- if (!!anchor.current) {
- anchor.current.removeEventListener("scroll", handleScroll);
+ if (!!anchorInstance) {
+ anchorInstance.removeEventListener("scroll", handleScroll);
}
};
}
diff --git a/src/index.tsx b/src/index.tsx
index 24fc5e020..0d3f64dbb 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -6,7 +6,7 @@ import { ThemeProvider } from "@saleor/macaw-ui";
import { SaleorProvider } from "@saleor/sdk";
import React from "react";
import { render } from "react-dom";
-import ErrorBoundary from "react-error-boundary";
+import { ErrorBoundary } from "react-error-boundary";
import TagManager from "react-gtm-module";
import { useIntl } from "react-intl";
import { BrowserRouter, Route, Switch } from "react-router-dom";
@@ -30,6 +30,7 @@ import useAppChannel, {
AppChannelProvider,
} from "./components/AppLayout/AppChannelContext";
import { DateProvider } from "./components/Date";
+import ErrorPage from "./components/ErrorPage";
import ExitFormDialogProvider from "./components/Form/ExitFormDialogProvider";
import { LocaleProvider } from "./components/Locale";
import MessageManagerProvider from "./components/messages";
@@ -143,6 +144,12 @@ const Routes: React.FC = () => {
type: "displayError",
});
}}
+ fallbackRender={({ resetErrorBoundary }) => (
+ window.location.reload()}
+ />
+ )}
>
diff --git a/src/products/components/ProductUpdatePage/ProductUpdatePage.test.tsx b/src/products/components/ProductUpdatePage/ProductUpdatePage.test.tsx
index cf1fcdd31..3f41d175a 100644
--- a/src/products/components/ProductUpdatePage/ProductUpdatePage.test.tsx
+++ b/src/products/components/ProductUpdatePage/ProductUpdatePage.test.tsx
@@ -14,7 +14,7 @@ import ProductUpdatePage, { ProductUpdatePageProps } from "./ProductUpdatePage";
const product = productFixture(placeholderImage);
import * as _useNavigator from "@saleor/hooks/useNavigator";
-import Adapter from "enzyme-adapter-react-16";
+import Adapter from "@wojtekmaj/enzyme-adapter-react-17";
import { act } from "react-dom/test-utils";
import { MemoryRouter } from "react-router-dom";
@@ -24,7 +24,17 @@ const onSubmit = jest.fn();
const useNavigator = jest.spyOn(_useNavigator, "default");
jest.mock("@saleor/components/RichTextEditor/RichTextEditor");
jest.mock("@saleor/utils/richText/useRichText");
-jest.mock("@glideapps/glide-data-grid");
+/**
+ * Mocking glide library. We do want to test only if page renders, grid itself has dedicated tests.
+ */
+jest.mock("@glideapps/glide-data-grid", () => {
+ const { forwardRef } = jest.requireActual("react");
+ return {
+ ...jest.requireActual("@glideapps/glide-data-grid"),
+ __esModule: true,
+ default: forwardRef((_: any, ref: any) => ),
+ };
+});
(global as any).document.createRange = () => ({
// eslint-disable-next-line
diff --git a/src/storybook/Stories.test.ts b/src/storybook/Stories.test.ts
index 52682e2c3..611e46e2c 100644
--- a/src/storybook/Stories.test.ts
+++ b/src/storybook/Stories.test.ts
@@ -1,8 +1,8 @@
import createGenerateClassName from "@material-ui/styles/createGenerateClassName";
import initStoryshots from "@storybook/addon-storyshots";
+import Adapter from "@wojtekmaj/enzyme-adapter-react-17";
// tslint:disable no-submodule-imports
import { configure, render } from "enzyme";
-import Adapter from "enzyme-adapter-react-16";
import toJSON from "enzyme-to-json";
import { mockRandomForEach } from "jest-mock-random";
import React from "react";
diff --git a/src/storybook/stories/components/ErrorPage.tsx b/src/storybook/stories/components/ErrorPage.tsx
index 6fbff02c6..476305633 100644
--- a/src/storybook/stories/components/ErrorPage.tsx
+++ b/src/storybook/stories/components/ErrorPage.tsx
@@ -1,9 +1,29 @@
import ErrorPage, { ErrorPageProps } from "@saleor/components/ErrorPage";
+import {
+ AppStateContext,
+ AppStateContextType,
+} from "@saleor/containers/AppState";
+import { initialAppState } from "@saleor/containers/AppState/state";
import { storiesOf } from "@storybook/react";
import React from "react";
import Decorator from "../../Decorator";
+const initialAppStateFixture: AppStateContextType = [
+ initialAppState,
+ () => undefined,
+];
+const errorAppStateFixture: AppStateContextType = [
+ {
+ error: {
+ id: "LS5E4RahA4Dc+mNICEUKXPaVkOR1ChT=",
+ type: "unhandled",
+ },
+ loading: false,
+ },
+ () => undefined,
+];
+
const props: Omit = {
onBack: () => undefined,
onRefresh: () => undefined,
@@ -11,7 +31,13 @@ const props: Omit = {
storiesOf("Views / Error page", module)
.addDecorator(Decorator)
- .add("default", () => )
+ .add("default", () => (
+
+
+
+ ))
.add("with error id", () => (
-
+
+
+
));