forked from primefaces/primereact
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix primefaces#3610: Panel, FieldSet, Card jest tests
- Loading branch information
Showing
7 changed files
with
922 additions
and
1 deletion.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import '@testing-library/jest-dom'; | ||
| import { snapshot } from '../../test'; | ||
| import { Button } from '../button/Button'; | ||
| import { Card } from './Card'; | ||
|
|
||
| const header = <img alt="Card" src="images/usercard.png" onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} />; | ||
| const footer = ( | ||
| <span> | ||
| <Button label="Save" icon="pi pi-check" /> | ||
| <Button label="Cancel" icon="pi pi-times" className="p-button-secondary ml-2" /> | ||
| </span> | ||
| ); | ||
|
|
||
| describe('Card', () => { | ||
| snapshot(<Card />, 'default'); | ||
| snapshot(<Card title="Simple Card">Content</Card>, 'title'); | ||
| snapshot( | ||
| <Card title="subtitle" subTitle="subtitle"> | ||
| Content | ||
| </Card>, | ||
| 'subtitle' | ||
| ); | ||
| snapshot( | ||
| <Card id="card" title="Advanced Card" style={{ width: '25rem', marginBottom: '2em' }} subTitle="Subtitle" footer={footer} header={header}> | ||
| <p> | ||
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas! | ||
| </p> | ||
| </Card>, | ||
| 'advanced' | ||
| ); | ||
| }); |
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 |
|---|---|---|
| @@ -0,0 +1,136 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`Card advanced 1`] = ` | ||
| <div> | ||
| <div | ||
| class="p-card p-component" | ||
| id="card" | ||
| style="width: 25rem; margin-bottom: 2em;" | ||
| > | ||
| <div | ||
| class="p-card-header" | ||
| > | ||
| <img | ||
| alt="Card" | ||
| src="images/usercard.png" | ||
| /> | ||
| </div> | ||
| <div | ||
| class="p-card-body" | ||
| > | ||
| <div | ||
| class="p-card-title" | ||
| > | ||
| Advanced Card | ||
| </div> | ||
| <div | ||
| class="p-card-subtitle" | ||
| > | ||
| Subtitle | ||
| </div> | ||
| <div | ||
| class="p-card-content" | ||
| > | ||
| <p> | ||
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas! | ||
| </p> | ||
| </div> | ||
| <div | ||
| class="p-card-footer" | ||
| > | ||
| <span> | ||
| <button | ||
| aria-label="Save" | ||
| class="p-button p-component" | ||
| > | ||
| <span | ||
| class="p-button-icon p-c p-button-icon-left pi pi-check" | ||
| /> | ||
| <span | ||
| class="p-button-label p-c" | ||
| > | ||
| Save | ||
| </span> | ||
| </button> | ||
| <button | ||
| aria-label="Cancel" | ||
| class="p-button p-component p-button-secondary ml-2" | ||
| > | ||
| <span | ||
| class="p-button-icon p-c p-button-icon-left pi pi-times" | ||
| /> | ||
| <span | ||
| class="p-button-label p-c" | ||
| > | ||
| Cancel | ||
| </span> | ||
| </button> | ||
| </span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| `; | ||
|
|
||
| exports[`Card default 1`] = ` | ||
| <div> | ||
| <div | ||
| class="p-card p-component" | ||
| > | ||
| <div | ||
| class="p-card-body" | ||
| /> | ||
| </div> | ||
| </div> | ||
| `; | ||
|
|
||
| exports[`Card subtitle 1`] = ` | ||
| <div> | ||
| <div | ||
| class="p-card p-component" | ||
| > | ||
| <div | ||
| class="p-card-body" | ||
| > | ||
| <div | ||
| class="p-card-title" | ||
| > | ||
| subtitle | ||
| </div> | ||
| <div | ||
| class="p-card-subtitle" | ||
| > | ||
| subtitle | ||
| </div> | ||
| <div | ||
| class="p-card-content" | ||
| > | ||
| Content | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| `; | ||
|
|
||
| exports[`Card title 1`] = ` | ||
| <div> | ||
| <div | ||
| class="p-card p-component" | ||
| > | ||
| <div | ||
| class="p-card-body" | ||
| > | ||
| <div | ||
| class="p-card-title" | ||
| > | ||
| Simple Card | ||
| </div> | ||
| <div | ||
| class="p-card-content" | ||
| > | ||
| Content | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| `; |
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 |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| import '@testing-library/jest-dom'; | ||
| import { render } from '@testing-library/react'; | ||
| import userEvent from '@testing-library/user-event'; | ||
| import { snapshot } from '../../test'; | ||
| import { Fieldset } from './Fieldset'; | ||
|
|
||
| describe('Fieldset', () => { | ||
| snapshot(<Fieldset />, 'default'); | ||
| snapshot( | ||
| <Fieldset id="fieldset" legend="Simple Fieldset"> | ||
| Content | ||
| </Fieldset>, | ||
| 'legend' | ||
| ); | ||
| test('when Fieldset is toggleable it will toggle when clicked', async () => { | ||
| // Arrange | ||
| const toggleOn = jest.fn(); | ||
| const { container } = render( | ||
| <Fieldset legend="Toggleable" toggleable onToggle={toggleOn}> | ||
| <p>Lorem ipsum dolor sit amet</p> | ||
| </Fieldset> | ||
| ); | ||
| const legend = container.getElementsByClassName('p-fieldset-legend')[0]; | ||
|
|
||
| expect(container).toMatchSnapshot('toggleable-open'); | ||
|
|
||
| // Act | ||
| await userEvent.click(legend); | ||
|
|
||
| // Assert | ||
| expect(toggleOn).toHaveBeenCalledTimes(1); | ||
| expect(container).toMatchSnapshot('toggleable-closed'); | ||
| }); | ||
| test('when Fieldset is toggleable it must expand and collapse', async () => { | ||
| // Arrange | ||
| const expandOn = jest.fn(); | ||
| const collapseOn = jest.fn(); | ||
| const { container } = render( | ||
| <Fieldset legend="Expand/Collapse" toggleable onExpand={expandOn} onCollapse={collapseOn}> | ||
| <p>Lorem ipsum dolor sit amet</p> | ||
| </Fieldset> | ||
| ); | ||
| const legend = container.getElementsByClassName('p-fieldset-legend')[0]; | ||
|
|
||
| expect(container).toMatchSnapshot('expandable-open'); | ||
|
|
||
| // Act | ||
| await userEvent.click(legend); | ||
|
|
||
| // Assert | ||
| expect(expandOn).toHaveBeenCalledTimes(0); | ||
| expect(collapseOn).toHaveBeenCalledTimes(1); | ||
| expect(container).toMatchSnapshot('expandable-closed'); | ||
|
|
||
| // Act | ||
| await userEvent.click(legend); | ||
|
|
||
| // Assert | ||
| expect(expandOn).toHaveBeenCalledTimes(1); | ||
| expect(collapseOn).toHaveBeenCalledTimes(1); | ||
| expect(container).toMatchSnapshot('expandable-open'); | ||
| }); | ||
| }); |
Oops, something went wrong.