-
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.
- Loading branch information
erwan
committed
Sep 11, 2024
1 parent
33bc644
commit 318cf07
Showing
14 changed files
with
182 additions
and
212 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
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
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
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,141 +1,126 @@ | ||
| import * as React from "react"; | ||
| import { fireEvent, render } from "@testing-library/react"; | ||
| import { Alert } from "../index"; | ||
| import { StatusProps } from "../StatusProps"; | ||
| import { StatusState } from "../../../objects"; | ||
| import { IconName } from "../../icon"; | ||
| import renderer from "react-test-renderer"; | ||
| import { fireEvent, render } from '@testing-library/react' | ||
| import * as React from 'react' | ||
| import renderer from 'react-test-renderer' | ||
| import { StatusState } from '../../../objects' | ||
| import { IconName } from '../../icon' | ||
| import { Alert } from '../index' | ||
|
|
||
| describe("Alert", () => { | ||
| it("should render correctly", () => { | ||
| describe('Alert', () => { | ||
| it('should render correctly', () => { | ||
| const { getByTestId } = render( | ||
| <Alert | ||
| testId={"alert"} | ||
| testId={'alert'} | ||
| display | ||
| alert={StatusState.INFO} | ||
| title="Alert information" | ||
| description="Lorem Ipsum is simply dummy text of the printing and type.." | ||
| /> | ||
| ); | ||
| const alert = getByTestId("alert"); | ||
| expect(alert).toBeInTheDocument(); | ||
| }); | ||
| status={StatusState.INFO} | ||
| title='Alert information' | ||
| description='Lorem Ipsum is simply dummy text of the printing and type..' | ||
| />, | ||
| ) | ||
| const alert = getByTestId('alert') | ||
| expect(alert).toBeInTheDocument() | ||
| }) | ||
|
|
||
| it("should have the right className", () => { | ||
| it('should have the right className', () => { | ||
| const { getByTestId } = render( | ||
| <Alert | ||
| testId={"alert"} | ||
| testId={'alert'} | ||
| display | ||
| alert={StatusState.INFO} | ||
| title="Alert information" | ||
| description="Lorem Ipsum is simply dummy text of the printing and type.." | ||
| /> | ||
| ); | ||
| status={StatusState.INFO} | ||
| title='Alert information' | ||
| description='Lorem Ipsum is simply dummy text of the printing and type..' | ||
| />, | ||
| ) | ||
|
|
||
| const alert = getByTestId("alert"); | ||
| expect(alert).toHaveClass("alert"); | ||
| }); | ||
| const alert = getByTestId('alert') | ||
| expect(alert).toHaveClass('alert') | ||
| }) | ||
|
|
||
| test("should render with correct props and className based on StatusState", () => { | ||
| const props: StatusProps = { | ||
| testId: "alert", | ||
| test('should render with correct props and className based on StatusState', () => { | ||
| const props = { | ||
| testId: 'alert', | ||
| display: true, | ||
| alert: StatusState.INFO, | ||
| title: "Alert information", | ||
| description: | ||
| "Lorem Ipsum is simply dummy text of the printing and type..", | ||
| status: StatusState.INFO, | ||
| title: 'Alert information', | ||
| description: 'Lorem Ipsum is simply dummy text of the printing and type..', | ||
| iconName: IconName.EYE_SLASH, | ||
| }; | ||
| const { getByTestId } = render(<Alert {...props} />); | ||
| const alert = getByTestId("alert"); | ||
| expect(alert).toHaveClass("is-info"); | ||
| }); | ||
| } | ||
| const { getByTestId } = render(<Alert {...props} />) | ||
| const alert = getByTestId('alert') | ||
| expect(alert).toHaveClass('is-info') | ||
| }) | ||
|
|
||
| test("snapshot", () => { | ||
| test('snapshot', () => { | ||
| const tree = renderer | ||
| .create( | ||
| <Alert | ||
| testId={"alert"} | ||
| testId={'alert'} | ||
| display={true} | ||
| alert={StatusState.INFO} | ||
| title="Alert information" | ||
| description="Lorem Ipsum is simply dummy text of the printing and type.." | ||
| status={StatusState.INFO} | ||
| title='Alert information' | ||
| description='Lorem Ipsum is simply dummy text of the printing and type..' | ||
| iconName={IconName.TIMES} | ||
| /> | ||
| />, | ||
| ) | ||
| .toJSON(); | ||
| .toJSON() | ||
|
|
||
| expect(tree).toMatchSnapshot(); | ||
| }); | ||
| expect(tree).toMatchSnapshot() | ||
| }) | ||
|
|
||
| it("should have iconClassName with right icon", () => { | ||
| it('should have iconClassName with right icon', () => { | ||
| const { getByTestId } = render( | ||
| <Alert | ||
| testId={"alert"} | ||
| testId={'alert'} | ||
| display | ||
| alert={StatusState.INFO} | ||
| iconClassname="testIconClassName" | ||
| status={StatusState.INFO} | ||
| iconName={IconName.BELL} | ||
| /> | ||
| ); | ||
| const alert = getByTestId("alert"); | ||
| expect(alert.firstChild).toHaveClass("testIconClassName"); | ||
| expect(alert.firstChild?.firstChild).toHaveClass("tri-bell"); | ||
| }); | ||
| />, | ||
| ) | ||
| const alert = getByTestId('alert') | ||
| expect(alert.firstChild).toHaveClass('icon') | ||
| expect(alert.firstChild?.firstChild).toHaveClass('tri-bell') | ||
| }) | ||
|
|
||
| it("should have icon SUCCESS icon", () => { | ||
| const { getByTestId } = render( | ||
| <Alert testId={"alert"} display alert={StatusState.SUCCESS} /> | ||
| ); | ||
| const alert = getByTestId("alert"); | ||
| expect(alert.firstChild?.firstChild).toHaveClass(IconName.CHECK_CIRCLE); | ||
| }); | ||
| it('should have icon SUCCESS icon', () => { | ||
| const { getByTestId } = render(<Alert testId={'alert'} display status={StatusState.SUCCESS} />) | ||
| const alert = getByTestId('alert') | ||
| expect(alert.firstChild?.firstChild).toHaveClass(IconName.CHECK_CIRCLE) | ||
| }) | ||
|
|
||
| it("should have icon WARNING icon", () => { | ||
| const { getByTestId } = render( | ||
| <Alert testId={"alert"} display alert={StatusState.WARNING} /> | ||
| ); | ||
| const alert = getByTestId("alert"); | ||
| expect(alert.firstChild?.firstChild).toHaveClass(IconName.ALERT); | ||
| }); | ||
| it('should have icon WARNING icon', () => { | ||
| const { getByTestId } = render(<Alert testId={'alert'} display status={StatusState.WARNING} />) | ||
| const alert = getByTestId('alert') | ||
| expect(alert.firstChild?.firstChild).toHaveClass(IconName.ALERT) | ||
| }) | ||
|
|
||
| it("should have icon INFO icon", () => { | ||
| const { getByTestId } = render( | ||
| <Alert testId={"alert"} display alert={StatusState.INFO} /> | ||
| ); | ||
| const alert = getByTestId("alert"); | ||
| expect(alert.firstChild?.firstChild).toHaveClass(IconName.INFOS_CIRCLE); | ||
| }); | ||
| it('should have icon INFO icon', () => { | ||
| const { getByTestId } = render(<Alert testId={'alert'} display status={StatusState.INFO} />) | ||
| const alert = getByTestId('alert') | ||
| expect(alert.firstChild?.firstChild).toHaveClass(IconName.INFOS_CIRCLE) | ||
| }) | ||
|
|
||
| it("should have icon ERROR icon", () => { | ||
| const { getByTestId } = render( | ||
| <Alert testId={"alert"} display alert={StatusState.ERROR} /> | ||
| ); | ||
| const alert = getByTestId("alert"); | ||
| expect(alert.firstChild?.firstChild).toHaveClass( | ||
| IconName.EXCLAMATION_CIRCLE | ||
| ); | ||
| }); | ||
| it('should have icon ERROR icon', () => { | ||
| const { getByTestId } = render(<Alert testId={'alert'} display status={StatusState.ERROR} />) | ||
| const alert = getByTestId('alert') | ||
| expect(alert.firstChild?.firstChild).toHaveClass(IconName.EXCLAMATION_CIRCLE) | ||
| }) | ||
|
|
||
| it("should have icon default icon", () => { | ||
| const { getByTestId } = render(<Alert testId={"alert"} display />); | ||
| const alert = getByTestId("alert"); | ||
| expect(alert.firstChild?.firstChild).toHaveClass(IconName.INFOS_CIRCLE); | ||
| }); | ||
| it('should have icon default icon', () => { | ||
| const { getByTestId } = render(<Alert testId={'alert'} display />) | ||
| const alert = getByTestId('alert') | ||
| expect(alert.firstChild?.firstChild).toHaveClass(IconName.INFOS_CIRCLE) | ||
| }) | ||
|
|
||
| it("should execute onClick fn", () => { | ||
| let isClick = false; | ||
| const { getByTestId } = render( | ||
| <Alert testId={"alert"} display onClick={() => (isClick = true)} /> | ||
| ); | ||
| const alert = getByTestId("alert"); | ||
| fireEvent.click(alert); | ||
| expect(isClick).toBe(true); | ||
| }); | ||
| it('should execute onClick fn', () => { | ||
| let isClick = false | ||
| const { getByTestId } = render(<Alert testId={'alert'} display onClick={() => (isClick = true)} />) | ||
| const alert = getByTestId('alert') | ||
| fireEvent.click(alert) | ||
| expect(isClick).toBe(true) | ||
| }) | ||
|
|
||
| it("should return div", () => { | ||
| const { container } = render(<Alert testId={"alert"} />); | ||
| const divElm = container.querySelector("div"); | ||
| expect(divElm).toBeInTheDocument(); | ||
| }); | ||
| }); | ||
| it('should return div', () => { | ||
| const { container } = render(<Alert testId={'alert'} />) | ||
| const divElm = container.querySelector('div') | ||
| expect(divElm).toBeInTheDocument() | ||
| }) | ||
| }) |
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
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