forked from appsmithorg/appsmith
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix jest test for comments by overriding isCommentMode selector (apps…
- Loading branch information
1 parent
c0364d7
commit eb55385
Showing
5 changed files
with
157 additions
and
144 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,149 +1,139 @@ | ||
| // import React from "react"; | ||
| // import userEvent from "@testing-library/user-event"; | ||
| // import { unmountComponentAtNode } from "react-dom"; | ||
| // import OverlayCommentsWrapper from "../inlineComments/OverlayCommentsWrapper"; | ||
| // import store from "store"; | ||
| // import { createEvent, fireEvent, render, waitFor } from "test/testUtils"; | ||
| // import { | ||
| // fetchApplicationCommentsRequest, | ||
| // setAreCommentsEnabled, | ||
| // } from "actions/commentActions"; | ||
| // import { ReduxActionTypes } from "constants/ReduxActionConstants"; | ||
| // import { setCommentMode } from "actions/commentActions"; | ||
| // import { resetEditorSuccess } from "actions/initActions"; | ||
| // import setMockPages from "./setMockPages"; | ||
| // import { | ||
| // createNewThreadMockResponse, | ||
| // fetchApplicationThreadsMockResponse, | ||
| // addCommentToThreadMockResponse, | ||
| // } from "mockResponses/CommentApiMockResponse"; | ||
| // import { act } from "react-dom/test-utils"; | ||
| // import { uniqueId } from "lodash"; | ||
| // import { WidgetTypes } from "constants/WidgetConstants"; | ||
| import React from "react"; | ||
| import userEvent from "@testing-library/user-event"; | ||
| import { unmountComponentAtNode } from "react-dom"; | ||
| import OverlayCommentsWrapper from "../inlineComments/OverlayCommentsWrapper"; | ||
| import store from "store"; | ||
| import { createEvent, fireEvent, render, waitFor } from "test/testUtils"; | ||
| import { fetchApplicationCommentsRequest } from "actions/commentActions"; | ||
| import { ReduxActionTypes } from "constants/ReduxActionConstants"; | ||
| import { setCommentMode } from "actions/commentActions"; | ||
| import { resetEditorSuccess } from "actions/initActions"; | ||
| import setMockPages from "./setMockPages"; | ||
| import { | ||
| createNewThreadMockResponse, | ||
| fetchApplicationThreadsMockResponse, | ||
| addCommentToThreadMockResponse, | ||
| } from "mockResponses/CommentApiMockResponse"; | ||
| import { act } from "react-dom/test-utils"; | ||
| import { uniqueId } from "lodash"; | ||
| import { WidgetTypes } from "constants/WidgetConstants"; | ||
|
|
||
| // let container: any = null; | ||
| // describe("Comment threads", () => { | ||
| // beforeEach(async () => { | ||
| // // setup a DOM element as a render target | ||
| // container = document.createElement("div"); | ||
| // document.body.appendChild(container); | ||
| // // application id is required | ||
| // setMockPages(); | ||
| // store.dispatch(setAreCommentsEnabled(true)); | ||
| // store.dispatch(setCommentMode(true)); | ||
| // // dispatch fetch comments and mock the axios req | ||
| // store.dispatch(fetchApplicationCommentsRequest()); | ||
| // // fetch threads saga waits for init | ||
| // store.dispatch({ | ||
| // type: ReduxActionTypes.INITIALIZE_EDITOR_SUCCESS, | ||
| // }); | ||
| // }); | ||
| // it("are rendered", async (done) => { | ||
| // // find is a combination of get and waitFor | ||
| // // follows a approach waiting for the element to appear on screen | ||
| // // instead of waiting for the api execution | ||
| // const { findAllByDataCy } = render( | ||
| // <OverlayCommentsWrapper refId="0" widgetType={WidgetTypes.BUTTON_WIDGET}> | ||
| // <div style={{ height: 100, width: 100 }} /> | ||
| // </OverlayCommentsWrapper>, | ||
| // container, | ||
| // ); | ||
| // const commentPins = await findAllByDataCy("inline-comment-pin"); | ||
| // expect(commentPins).toHaveLength(8); | ||
| // done(); | ||
| // }); | ||
|
|
||
| // it("can be created", async (done) => { | ||
| // const { findByDataCy, findByText, getAllByDataCy, getByDataCy } = render( | ||
| // <OverlayCommentsWrapper refId="0" widgetType={WidgetTypes.BUTTON_WIDGET}> | ||
| // <div style={{ height: 100, width: 100 }} /> | ||
| // </OverlayCommentsWrapper>, | ||
| // container, | ||
| // ); | ||
| // // clicking creates a new unpublished comment | ||
| // userEvent.click(getByDataCy("overlay-comments-wrapper")); | ||
| // const textAreas = await waitFor(() => | ||
| // document.querySelectorAll(".public-DraftEditor-content"), | ||
| // ); | ||
| // const textArea = textAreas[textAreas.length - 1]; | ||
| // expect(textArea).toBeTruthy(); | ||
| let container: any = null; | ||
| describe("Comment threads", () => { | ||
| beforeEach(async () => { | ||
| (window as any).isCommentModeForced = true; | ||
| // setup a DOM element as a render target | ||
| container = document.createElement("div"); | ||
| document.body.appendChild(container); | ||
| // application id is required | ||
| setMockPages(); | ||
| store.dispatch(setCommentMode(true)); | ||
| // dispatch fetch comments and mock the axios req | ||
| store.dispatch(fetchApplicationCommentsRequest()); | ||
| // fetch threads saga waits for init | ||
| store.dispatch({ | ||
| type: ReduxActionTypes.INITIALIZE_EDITOR_SUCCESS, | ||
| }); | ||
| }); | ||
| it("are rendered", async (done) => { | ||
| // find is a combination of get and waitFor | ||
| // follows a approach waiting for the element to appear on screen | ||
| // instead of waiting for the api execution | ||
| const { findAllByDataCy } = render( | ||
| <OverlayCommentsWrapper refId="0" widgetType={WidgetTypes.BUTTON_WIDGET}> | ||
| <div style={{ height: 100, width: 100 }} /> | ||
| </OverlayCommentsWrapper>, | ||
| container, | ||
| ); | ||
| const commentPins = await findAllByDataCy("inline-comment-pin"); | ||
| expect(commentPins).toHaveLength(8); | ||
| done(); | ||
| }); | ||
|
|
||
| // if (textArea) { | ||
| // const newComment = uniqueId(); | ||
| // const event = createEvent.paste(textArea, { | ||
| // clipboardData: { | ||
| // types: ["text/plain"], | ||
| // getData: () => newComment, | ||
| // }, | ||
| // }); | ||
| // act(() => { | ||
| // fireEvent(textArea, event); | ||
| // }); | ||
| // // wait for text change to be propogated | ||
| // await findByText(newComment); | ||
| // userEvent.click(getByDataCy("add-comment-submit")); | ||
| // const createdThreadId = createNewThreadMockResponse.data.id; | ||
| // // wait for the new thread to be rendered | ||
| // await findByDataCy(`t--inline-comment-pin-trigger-${createdThreadId}`); | ||
| // const commentPins = getAllByDataCy("inline-comment-pin"); | ||
| // // now we should have 9 threads rendered | ||
| // expect(commentPins).toHaveLength(9); | ||
| // } | ||
| // done(); | ||
| // }); | ||
| // it("accept replies", async (done) => { | ||
| // const { findByDataCy, findByText, getByDataCy } = render( | ||
| // <OverlayCommentsWrapper refId="0" widgetType={WidgetTypes.BUTTON_WIDGET}> | ||
| // <div style={{ height: 100, width: 100 }} /> | ||
| // </OverlayCommentsWrapper>, | ||
| // container, | ||
| // ); | ||
| // const existingThreadId = fetchApplicationThreadsMockResponse.data[0].id; | ||
| // const pin = await findByDataCy( | ||
| // `t--inline-comment-pin-trigger-${existingThreadId}`, | ||
| // ); | ||
| // // show comment thread popover | ||
| // userEvent.click(pin); | ||
| it("can be created", async (done) => { | ||
| const { findByDataCy, findByText, getAllByDataCy, getByDataCy } = render( | ||
| <OverlayCommentsWrapper refId="0" widgetType={WidgetTypes.BUTTON_WIDGET}> | ||
| <div style={{ height: 100, width: 100 }} /> | ||
| </OverlayCommentsWrapper>, | ||
| container, | ||
| ); | ||
| // clicking creates a new unpublished comment | ||
| userEvent.click(getByDataCy("overlay-comments-wrapper")); | ||
| const textAreas = await waitFor(() => | ||
| document.querySelectorAll(".public-DraftEditor-content"), | ||
| ); | ||
| const textArea = textAreas[textAreas.length - 1]; | ||
| expect(textArea).toBeTruthy(); | ||
|
|
||
| // const textAreas = await waitFor(() => | ||
| // document.querySelectorAll(".public-DraftEditor-content"), | ||
| // ); | ||
| // const textArea = textAreas[textAreas.length - 1]; | ||
| // expect(textArea).toBeTruthy(); | ||
| if (textArea) { | ||
| const newComment = uniqueId(); | ||
| const event = createEvent.paste(textArea, { | ||
| clipboardData: { | ||
| types: ["text/plain"], | ||
| getData: () => newComment, | ||
| }, | ||
| }); | ||
| act(() => { | ||
| fireEvent(textArea, event); | ||
| }); | ||
| // wait for text change to be propogated | ||
| await findByText(newComment); | ||
| userEvent.click(getByDataCy("add-comment-submit")); | ||
| const createdThreadId = createNewThreadMockResponse.data.id; | ||
| // wait for the new thread to be rendered | ||
| await findByDataCy(`t--inline-comment-pin-trigger-${createdThreadId}`); | ||
| const commentPins = getAllByDataCy("inline-comment-pin"); | ||
| // now we should have 9 threads rendered | ||
| expect(commentPins).toHaveLength(9); | ||
| } | ||
| done(); | ||
| }); | ||
| it("accept replies", async (done) => { | ||
| const { findByDataCy, findByText, getByDataCy } = render( | ||
| <OverlayCommentsWrapper refId="0" widgetType={WidgetTypes.BUTTON_WIDGET}> | ||
| <div style={{ height: 100, width: 100 }} /> | ||
| </OverlayCommentsWrapper>, | ||
| container, | ||
| ); | ||
| const existingThreadId = fetchApplicationThreadsMockResponse.data[0].id; | ||
| const pin = await findByDataCy( | ||
| `t--inline-comment-pin-trigger-${existingThreadId}`, | ||
| ); | ||
| // show comment thread popover | ||
| userEvent.click(pin); | ||
|
|
||
| // if (textArea) { | ||
| // const event = createEvent.paste(textArea, { | ||
| // clipboardData: { | ||
| // types: ["text/plain"], | ||
| // getData: () => "new", | ||
| // }, | ||
| // }); | ||
| // fireEvent(textArea, event); | ||
| // // wait for text change to be propogated | ||
| // await findByText("new"); | ||
| // userEvent.click(getByDataCy("add-comment-submit")); | ||
| // // newly created comment should be visible | ||
| // const createdCommentId = addCommentToThreadMockResponse.data.id; | ||
| // await findByDataCy(`t--comment-card-${createdCommentId}`); | ||
| // } | ||
| // done(); | ||
| // }); | ||
| const textAreas = await waitFor(() => | ||
| document.querySelectorAll(".public-DraftEditor-content"), | ||
| ); | ||
| const textArea = textAreas[textAreas.length - 1]; | ||
| expect(textArea).toBeTruthy(); | ||
|
|
||
| // afterEach(() => { | ||
| // // cleanup on exiting | ||
| // unmountComponentAtNode(container); | ||
| // container.remove(); | ||
| // container = null; | ||
| // store.dispatch(resetEditorSuccess()); | ||
| // // close any open comment thread popovers | ||
| // userEvent.keyboard("{esc}"); | ||
| // }); | ||
| // }); | ||
| if (textArea) { | ||
| const event = createEvent.paste(textArea, { | ||
| clipboardData: { | ||
| types: ["text/plain"], | ||
| getData: () => "new", | ||
| }, | ||
| }); | ||
| fireEvent(textArea, event); | ||
| // wait for text change to be propogated | ||
| await findByText("new"); | ||
| userEvent.click(getByDataCy("add-comment-submit")); | ||
| // newly created comment should be visible | ||
| const createdCommentId = addCommentToThreadMockResponse.data.id; | ||
| await findByDataCy(`t--comment-card-${createdCommentId}`); | ||
| } | ||
| done(); | ||
| }); | ||
|
|
||
| describe("test", () => { | ||
| it("test", () => { | ||
| expect("test").toBe("test"); | ||
| afterEach(() => { | ||
| // cleanup on exiting | ||
| unmountComponentAtNode(container); | ||
| container.remove(); | ||
| container = null; | ||
| store.dispatch(resetEditorSuccess()); | ||
| // close any open comment thread popovers | ||
| userEvent.keyboard("{esc}"); | ||
| (window as any).isCommentModeForced = false; | ||
| }); | ||
| }); | ||
|
|
||
| export {}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters