mirror of
https://github.com/LukeHagar/firecamp.git
synced 2025-12-10 12:27:45 +00:00
ui(Modal): removed previous modal package & updated stories
This commit is contained in:
Nishchit14
@@ -1,88 +1,85 @@
|
||||
import { useState } from "react";
|
||||
import "@testing-library/jest-dom";
|
||||
import { screen, render, waitFor } from "@testing-library/react";
|
||||
import { default as Modal } from './Modal';
|
||||
import Button from "../buttons/Button";
|
||||
import { click } from "../../../__mocks__/eventMock";
|
||||
// TODO : update tests based on new button
|
||||
|
||||
const Template = (args: any) => {
|
||||
const [isOpen, toggleOpen] = useState(true);
|
||||
// import { useState } from "react";
|
||||
// import "@testing-library/jest-dom";
|
||||
// import { screen, render, waitFor } from "@testing-library/react";
|
||||
// import { default as Modal } from './Modal';
|
||||
// import Button from "../buttons/Button";
|
||||
// import { click } from "../../../__mocks__/eventMock";
|
||||
|
||||
return <div className="bg-app-background h-screen w-screen block">
|
||||
<Button text={isOpen ? "Close Modal" : "Open Modal"} onClick={() => toggleOpen(true)} data-testid={'togglePreview'} />
|
||||
<Modal {...args} isOpen={isOpen} onClose={() => toggleOpen(false)}>
|
||||
<Modal.Header>
|
||||
<div className="text-modal-foreground-active text-lg mb-6">Modal Header</div>
|
||||
</Modal.Header>
|
||||
<Modal.Body >
|
||||
<div>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
|
||||
</div>
|
||||
</Modal.Body>
|
||||
<Modal.Footer>
|
||||
<div className="text-sm mt-6">
|
||||
Modal Footer
|
||||
</div>
|
||||
</Modal.Footer>
|
||||
</Modal>
|
||||
</div>
|
||||
};
|
||||
// const Template = (args: any) => {
|
||||
// const [isOpen, toggleOpen] = useState(true);
|
||||
|
||||
describe("Modal component", () => {
|
||||
// return <div className="bg-app-background h-screen w-screen block">
|
||||
// <Button text={isOpen ? "Close Modal" : "Open Modal"} onClick={() => toggleOpen(true)} data-testid={'togglePreview'} />
|
||||
// <Modal {...args} isOpen={isOpen} onClose={() => toggleOpen(false)}>
|
||||
// <Modal.Header>
|
||||
// <div className="text-modal-foreground-active text-lg mb-6">Modal Header</div>
|
||||
// </Modal.Header>
|
||||
// <Modal.Body >
|
||||
// <div>
|
||||
// Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
// Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
|
||||
// </div>
|
||||
// </Modal.Body>
|
||||
// <Modal.Footer>
|
||||
// <div className="text-sm mt-6">
|
||||
// Modal Footer
|
||||
// </div>
|
||||
// </Modal.Footer>
|
||||
// </Modal>
|
||||
// </div>
|
||||
// };
|
||||
|
||||
test("Validating child element count and styles of modal wrapper", () => {
|
||||
render(<Template id={'modal-container-div'} />);
|
||||
// describe("Modal component", () => {
|
||||
|
||||
const ModalContainer = screen.queryByTestId('root');
|
||||
const ModalContainerDiv = ModalContainer.querySelector('#modal-container-div');
|
||||
// test("Validating child element count and styles of modal wrapper", () => {
|
||||
// render(<Template id={'modal-container-div'} />);
|
||||
|
||||
expect(ModalContainerDiv).toHaveClass('max-w-screen-md min-w-screen-md bg-modal-background text-app-foreground w-full relative z-9999 max-h-modal flex fc-modal-wrapper');
|
||||
expect(ModalContainerDiv.childElementCount).toBe(3);
|
||||
// const ModalContainer = screen.queryByTestId('root');
|
||||
// const ModalContainerDiv = ModalContainer.querySelector('#modal-container-div');
|
||||
|
||||
// expect(ModalContainerDiv).toHaveClass('max-w-screen-md min-w-screen-md bg-modal-background text-app-foreground w-full relative z-9999 max-h-modal flex fc-modal-wrapper');
|
||||
// expect(ModalContainerDiv.childElementCount).toBe(3);
|
||||
|
||||
});
|
||||
// });
|
||||
|
||||
test("Validating default classnames for modal children elements", () => {
|
||||
render(<Template id={'modal-container-div'} />);
|
||||
// test("Validating default classnames for modal children elements", () => {
|
||||
// render(<Template id={'modal-container-div'} />);
|
||||
|
||||
const ModalContainer = screen.queryByTestId('root');
|
||||
const ModalContainerDiv = ModalContainer.querySelector('#modal-container-div');
|
||||
const ModalContainerElements = ModalContainerDiv.children;
|
||||
// const ModalContainer = screen.queryByTestId('root');
|
||||
// const ModalContainerDiv = ModalContainer.querySelector('#modal-container-div');
|
||||
// const ModalContainerElements = ModalContainerDiv.children;
|
||||
|
||||
//Header - dont have default class names
|
||||
// //Header - dont have default class names
|
||||
|
||||
//Body
|
||||
expect(ModalContainerElements[1]).toHaveClass('flex flex-col overflow-auto')
|
||||
// //Body
|
||||
// expect(ModalContainerElements[1]).toHaveClass('flex flex-col overflow-auto')
|
||||
|
||||
//Footer
|
||||
expect(ModalContainerElements[2]).toHaveClass('flex')
|
||||
});
|
||||
// //Footer
|
||||
// expect(ModalContainerElements[2]).toHaveClass('flex')
|
||||
// });
|
||||
|
||||
test("should appears/disappers based on button click event", async () => {
|
||||
render(<Template id={'modal-container-div'} />);
|
||||
// test("should appears/disappers based on button click event", async () => {
|
||||
// render(<Template id={'modal-container-div'} />);
|
||||
|
||||
// when react-responsive-modal is visible
|
||||
const container = screen.queryByTestId('overlay');
|
||||
expect(container).toHaveStyle("animation: react-responsive-modal-overlay-in 300ms");
|
||||
// // when react-responsive-modal is visible
|
||||
// const container = screen.queryByTestId('overlay');
|
||||
// expect(container).toHaveStyle("animation: react-responsive-modal-overlay-in 300ms");
|
||||
|
||||
// validate the button text for popup state
|
||||
let button = screen.queryByText('Close Modal');
|
||||
expect(button).toBeInTheDocument();
|
||||
// // validate the button text for popup state
|
||||
// let button = screen.queryByText('Close Modal');
|
||||
// expect(button).toBeInTheDocument();
|
||||
|
||||
// modal should not be visible after clicking close button
|
||||
const ClosePopupButton = screen.queryByTestId("close-button");
|
||||
click(ClosePopupButton);
|
||||
// // modal should not be visible after clicking close button
|
||||
// const ClosePopupButton = screen.queryByTestId("close-button");
|
||||
// click(ClosePopupButton);
|
||||
|
||||
button = await waitFor(() => screen.queryByText('Open Modal'));
|
||||
expect(button).toBeInTheDocument();
|
||||
// button = await waitFor(() => screen.queryByText('Open Modal'));
|
||||
// expect(button).toBeInTheDocument();
|
||||
|
||||
// visibility of react-responsive-modal is seen by update in style property
|
||||
expect(container).toHaveStyle("animation: react-responsive-modal-overlay-out 300ms");
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
// Todo update the import in Modal component to run the test case
|
||||
// import Container from "../grid/Container";
|
||||
// import Row from "../grid/Row";
|
||||
// // visibility of react-responsive-modal is seen by update in style property
|
||||
// expect(container).toHaveStyle("animation: react-responsive-modal-overlay-out 300ms");
|
||||
// });
|
||||
|
||||
// });
|
||||
|
||||
Reference in New Issue
Block a user