From 02a8edfcced04fbf652d73b337d6b56b64214d85 Mon Sep 17 00:00:00 2001 From: Hadas Farhi Date: Thu, 22 Jul 2021 10:42:52 +0300 Subject: [PATCH 1/5] add components to index --- src/components/Toast/Toast.jsx | 20 ++++++++++++++++++-- src/components/Toast/ToastConstants.js | 5 +++++ 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/src/components/Toast/Toast.jsx b/src/components/Toast/Toast.jsx index 3abac153c1..e5165fb783 100644 --- a/src/components/Toast/Toast.jsx +++ b/src/components/Toast/Toast.jsx @@ -34,7 +34,23 @@ const getIcon = (type, icon) => { ) : null; }; -const Toast = ({ open, autoHideDuration, type, icon, hideIcon, action, children, closeable, onClose }) => { +const Toast = ({ + open, + autoHideDuration, + type, + icon, + hideIcon, + action: deprecatedAction, + actions, + children, + closeable, + onClose +}) => { + const toastLinks = useMemo(() => { + return actions + .filter(action => action.type === TOAST_ACTION_TYPES.LINK) + .map(({ type, ...otherProps }) => ); + }, []); const classNames = useMemo(() => cx("monday-style-toast", `monday-style-toast--type-${type}`), [type]); const handleClose = useCallback(() => { if (onClose) { @@ -78,7 +94,7 @@ const Toast = ({ open, autoHideDuration, type, icon, hideIcon, action, children, > {children} - {action &&
{action}
} + {deprecatedAction &&
{deprecatedAction}
} {closeable && ( + closeToastLink()} @@ -86,9 +86,9 @@ export const Sandbox = () => { closeable={knobs.closeable} autoHideDuration={knobs.autoHideDuration} hideIcon={knobs.hideIcon} + actions={[{ type: Toast.actionTypes.LINK, text: "Lorem ipsum", href: "https://monday.com" }]} > Something Happened - @@ -96,15 +96,17 @@ export const Sandbox = () => { closeToastLinkButton()} - action={Undo 5} type={knobs.type} icon={icon} closeable={knobs.closeable} autoHideDuration={knobs.autoHideDuration} hideIcon={knobs.hideIcon} + actions={[ + { type: Toast.actionTypes.LINK, text: "Lorem ipsum", href: "https://monday.com" }, + { type: Toast.actionTypes.BUTTON, content: "Undo 5" } + ]} > Something Happened - From bcc16d69e81022817a313a9e77f2ee7a8d6fe074 Mon Sep 17 00:00:00 2001 From: Hadas Farhi Date: Thu, 22 Jul 2021 11:50:52 +0300 Subject: [PATCH 3/5] tests: refactor tests according to changes --- .../Toast/__stories__/toast.stories.js | 2 - .../__snapshots__/toast.jest.js.snap | 367 ++++++++++++++++++ src/components/Toast/__tests__/toast.jest.js | 131 +++++-- 3 files changed, 458 insertions(+), 42 deletions(-) create mode 100644 src/components/Toast/__tests__/__snapshots__/toast.jest.js.snap diff --git a/src/components/Toast/__stories__/toast.stories.js b/src/components/Toast/__stories__/toast.stories.js index f3179086ce..272f62247a 100644 --- a/src/components/Toast/__stories__/toast.stories.js +++ b/src/components/Toast/__stories__/toast.stories.js @@ -5,8 +5,6 @@ import Button from "../../Button/Button"; import Icon from "../../Icon/Icon"; import Send from "../../Icon/Icons/components/Send"; import { StoryStateColumn, StoryStateRow } from "../../storybook-helpers"; -import ToastButton from "../ToastButton/ToastButton"; -import ToastLink from "../ToastLink/ToastLink"; export const Sandbox = () => { const sendIconElement = ( diff --git a/src/components/Toast/__tests__/__snapshots__/toast.jest.js.snap b/src/components/Toast/__tests__/__snapshots__/toast.jest.js.snap new file mode 100644 index 0000000000..f446a72e0a --- /dev/null +++ b/src/components/Toast/__tests__/__snapshots__/toast.jest.js.snap @@ -0,0 +1,367 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Toast tests Snapshot Tests don't renders close button if closeable=false 1`] = ` +
+
+ +
+
+ Something Happened +
+
+`; + +exports[`Toast tests Snapshot Tests renders correctly (renders nothing) with empty props 1`] = `null`; + +exports[`Toast tests Snapshot Tests renders correctly with button 1`] = ` +
+
+ +
+
+ Something Happened +
+
+ +
+ +
+`; + +exports[`Toast tests Snapshot Tests renders correctly with button and link 1`] = ` +
+
+ +
+
+ Something Happened + + + Lorem ipsum + + +
+
+ +
+ +
+`; + +exports[`Toast tests Snapshot Tests renders correctly with link 1`] = ` +
+
+ +
+
+ Something Happened + + + Lorem ipsum + + +
+
+ +
+`; + +exports[`Toast tests Snapshot Tests renders nothing when open is false 1`] = `null`; + +exports[`Toast tests Snapshot Tests renders toast when open is true 1`] = ` +
+
+ +
+
+ Something Happened +
+ +
+`; diff --git a/src/components/Toast/__tests__/toast.jest.js b/src/components/Toast/__tests__/toast.jest.js index 932d972d26..891729ef99 100644 --- a/src/components/Toast/__tests__/toast.jest.js +++ b/src/components/Toast/__tests__/toast.jest.js @@ -2,62 +2,113 @@ import React from "react"; import { fireEvent, render, cleanup } from "@testing-library/react"; import { act } from "@testing-library/react-hooks"; import Toast from "../Toast"; +import renderer from "react-test-renderer"; +import { Checkbox } from "../../Checkbox/Checkbox"; jest.useFakeTimers(); const renderComponent = ({ ...props } = {}, contenct = "") => { return render({contenct}); }; +describe("Toast tests", () => { + describe("Snapshot Tests", () => { + it("renders correctly (renders nothing) with empty props", () => { + const tree = renderer.create().toJSON(); + expect(tree).toMatchSnapshot(); + }); -describe("", () => { - afterEach(() => { - cleanup(); - }); - - it("renders nothing when open=false", () => { - const toast = renderComponent({}, "text"); - expect(toast.queryByText("text")).toBeNull(); - }); - - it("renders toast when open=true", () => { - const toast = renderComponent({ open: true }, "text"); - expect(toast.queryByText("text")).not.toBeNull(); - }); + it("renders nothing when open is false", () => { + const tree = renderer.create(Something Happened).toJSON(); + expect(tree).toMatchSnapshot(); + }); - it("rendres action", () => { - const action =
my action
; - const toast = renderComponent({ open: true, action }, "text"); - expect(toast.queryByText("my action")).not.toBeNull(); - }); + it("renders toast when open is true", () => { + const tree = renderer.create(Something Happened).toJSON(); + expect(tree).toMatchSnapshot(); + }); - it("don't renders close button if closeable=false", () => { - const toast = renderComponent({ open: true, closeable: false }, "text"); - expect(toast.queryByLabelText("close-toast")).toBeNull(); - }); + it("don't renders close button if closeable=false", () => { + const tree = renderer + .create( + + Something Happened + + ) + .toJSON(); + expect(tree).toMatchSnapshot(); + }); - it("calls onClose when click on close button", () => { - const onCloseMock = jest.fn(); - const toast = renderComponent({ - open: true, - onClose: onCloseMock + it("renders correctly with button", () => { + const tree = renderer + .create( + + Something Happened + + ) + .toJSON(); + expect(tree).toMatchSnapshot(); }); - const closeButton = toast.getByLabelText("close-toast"); - act(() => { - fireEvent.click(closeButton); + it("renders correctly with link", () => { + const tree = renderer + .create( + + Something Happened + + ) + .toJSON(); + expect(tree).toMatchSnapshot(); }); - expect(onCloseMock.mock.calls.length).toBe(1); + it("renders correctly with button and link", () => { + const tree = renderer + .create( + + Something Happened + + ) + .toJSON(); + expect(tree).toMatchSnapshot(); + }); }); + describe("Integration Tests", () => { + afterEach(() => { + cleanup(); + }); + + it("calls onClose when click on close button", () => { + const onCloseMock = jest.fn(); + const toast = renderComponent({ + open: true, + onClose: onCloseMock + }); + const closeButton = toast.getByLabelText("close-toast"); + + act(() => { + fireEvent.click(closeButton); + }); + + expect(onCloseMock.mock.calls.length).toBe(1); + }); - it("calls onClose after 1S when autoHideDuration=1000", () => { - const onCloseMock = jest.fn(); - renderComponent({ - onClose: onCloseMock, - autoHideDuration: 1000, - open: true + it("calls onClose after 1S when autoHideDuration=1000", () => { + const onCloseMock = jest.fn(); + renderComponent({ + onClose: onCloseMock, + autoHideDuration: 1000, + open: true + }); + jest.advanceTimersByTime(1000); + expect(onCloseMock.mock.calls.length).toBe(1); }); - jest.advanceTimersByTime(1000); - expect(onCloseMock.mock.calls.length).toBe(1); }); }); From 50b6503126d4a96b61d79d4d915365ea7f1c3c79 Mon Sep 17 00:00:00 2001 From: Hadas Farhi Date: Thu, 22 Jul 2021 12:52:44 +0300 Subject: [PATCH 4/5] bug: fix default props --- src/components/Toast/Toast.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Toast/Toast.jsx b/src/components/Toast/Toast.jsx index 7c0e5c5ed2..10c65b470d 100644 --- a/src/components/Toast/Toast.jsx +++ b/src/components/Toast/Toast.jsx @@ -160,6 +160,7 @@ Toast.defaultProps = { icon: null, closeable: true, autoHideDuration: null, + actions: undefined, onClose: NOOP }; From 1a0fb8c58f65d39c58016996a7bbfefa4e5262c0 Mon Sep 17 00:00:00 2001 From: Hadas Farhi Date: Thu, 22 Jul 2021 12:59:59 +0300 Subject: [PATCH 5/5] bump ver --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c82737b9c3..57abecce44 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "monday-ui-react-core", - "version": "0.3.59", + "version": "0.3.60", "description": "Official monday.com UI resources for application development in React.js", "main": "dist/main.js", "scripts": {