diff --git a/components/lib/badge/Badge.spec.js b/components/lib/badge/Badge.spec.js index 99f7f3a3cb..23a88e3610 100644 --- a/components/lib/badge/Badge.spec.js +++ b/components/lib/badge/Badge.spec.js @@ -1,5 +1,4 @@ import '@testing-library/jest-dom'; -import { render } from '@testing-library/react'; import { Badge } from './Badge'; import { snapshot } from '../../test'; diff --git a/components/lib/card/Card.spec.js b/components/lib/card/Card.spec.js new file mode 100644 index 0000000000..dafc953872 --- /dev/null +++ b/components/lib/card/Card.spec.js @@ -0,0 +1,31 @@ +import '@testing-library/jest-dom'; +import { snapshot } from '../../test'; +import { Button } from '../button/Button'; +import { Card } from './Card'; + +const header = Card (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} />; +const footer = ( + + + + + + + + +`; + +exports[`Card default 1`] = ` +
+
+
+
+
+`; + +exports[`Card subtitle 1`] = ` +
+
+
+
+ subtitle +
+
+ subtitle +
+
+ Content +
+
+
+
+`; + +exports[`Card title 1`] = ` +
+
+
+
+ Simple Card +
+
+ Content +
+
+
+
+`; diff --git a/components/lib/fieldset/Fieldset.spec.js b/components/lib/fieldset/Fieldset.spec.js new file mode 100644 index 0000000000..931ef112dd --- /dev/null +++ b/components/lib/fieldset/Fieldset.spec.js @@ -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(
, 'default'); + snapshot( +
+ Content +
, + 'legend' + ); + test('when Fieldset is toggleable it will toggle when clicked', async () => { + // Arrange + const toggleOn = jest.fn(); + const { container } = render( +
+

Lorem ipsum dolor sit amet

+
+ ); + 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( +
+

Lorem ipsum dolor sit amet

+
+ ); + 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'); + }); +}); diff --git a/components/lib/fieldset/__snapshots__/Fieldset.spec.js.snap b/components/lib/fieldset/__snapshots__/Fieldset.spec.js.snap new file mode 100644 index 0000000000..c24360c301 --- /dev/null +++ b/components/lib/fieldset/__snapshots__/Fieldset.spec.js.snap @@ -0,0 +1,272 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Fieldset default 1`] = ` +
+
+
+
+
+
+
+`; + +exports[`Fieldset legend 1`] = ` +
+
+ + + Simple Fieldset + + +
+
+ Content +
+
+
+
+`; + +exports[`Fieldset when Fieldset is toggleable it must expand and collapse: expandable-closed 1`] = ` +
+
+ + + + +
+
+`; + +exports[`Fieldset when Fieldset is toggleable it must expand and collapse: expandable-open 1`] = ` +
+
+ + + + + Expand/Collapse + + + +
+
+

+ Lorem ipsum dolor sit amet +

+
+
+
+
+`; + +exports[`Fieldset when Fieldset is toggleable it must expand and collapse: expandable-open 2`] = ` +
+
+ + + + + Expand/Collapse + + + +
+
+

+ Lorem ipsum dolor sit amet +

+
+
+
+
+`; + +exports[`Fieldset when Fieldset is toggleable it will toggle when clicked: toggleable-closed 1`] = ` +
+
+ + + + + Toggleable + + + +
+
+

+ Lorem ipsum dolor sit amet +

+
+
+
+
+`; + +exports[`Fieldset when Fieldset is toggleable it will toggle when clicked: toggleable-open 1`] = ` +
+
+ + + + + Toggleable + + + +
+
+

+ Lorem ipsum dolor sit amet +

+
+
+
+
+`; diff --git a/components/lib/panel/Panel.spec.js b/components/lib/panel/Panel.spec.js new file mode 100644 index 0000000000..f85b1b15b7 --- /dev/null +++ b/components/lib/panel/Panel.spec.js @@ -0,0 +1,84 @@ +import '@testing-library/jest-dom'; +import { render } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { snapshot } from '../../test'; +import { Panel } from './Panel'; + +const template = (options) => { + const toggleIcon = options.collapsed ? 'pi pi-chevron-down' : 'pi pi-chevron-up'; + const className = `${options.className} justify-content-start`; + const titleClassName = `${options.titleClassName} pl-1`; + + return ( +
+ + Header +
+ ); +}; + +describe('Panel', () => { + snapshot(, 'default'); + snapshot( + + Content + , + 'header' + ); + snapshot( + + Content + , + 'headerTemplate' + ); + test('when Panel is toggleable it will toggle when clicked', async () => { + // Arrange + const toggleOn = jest.fn(); + const { container } = render( + +

Lorem ipsum dolor sit amet

+ + ); + const toggler = container.getElementsByClassName('p-panel-toggler')[0]; + + expect(container).toMatchSnapshot('toggleable-open'); + + // Act + await userEvent.click(toggler); + + // Assert + expect(toggleOn).toHaveBeenCalledTimes(1); + expect(container).toMatchSnapshot('toggleable-closed'); + }); + test('when Panel is toggleable it must expand and collapse', async () => { + // Arrange + const expandOn = jest.fn(); + const collapseOn = jest.fn(); + const { container } = render( + +

Lorem ipsum dolor sit amet

+ + ); + const toggler = container.getElementsByClassName('p-panel-toggler')[0]; + + expect(container).toMatchSnapshot('expandable-open'); + + // Act + await userEvent.click(toggler); + + // Assert + expect(expandOn).toHaveBeenCalledTimes(0); + expect(collapseOn).toHaveBeenCalledTimes(1); + expect(container).toMatchSnapshot('expandable-closed'); + + // Act + await userEvent.click(toggler); + + // Assert + expect(expandOn).toHaveBeenCalledTimes(1); + expect(collapseOn).toHaveBeenCalledTimes(1); + expect(container).toMatchSnapshot('expandable-open'); + }); +}); diff --git a/components/lib/panel/__snapshots__/Panel.spec.js.snap b/components/lib/panel/__snapshots__/Panel.spec.js.snap new file mode 100644 index 0000000000..f44147c442 --- /dev/null +++ b/components/lib/panel/__snapshots__/Panel.spec.js.snap @@ -0,0 +1,336 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Panel default 1`] = ` +
+
+
+
+
+
+
+`; + +exports[`Panel header 1`] = ` +
+
+
+ + Simple Panel + +
+
+
+
+ Content +
+
+
+
+`; + +exports[`Panel headerTemplate 1`] = ` +
+
+
+ + + Header + +
+
+
+ Content +
+
+
+
+`; + +exports[`Panel when Panel is toggleable it must expand and collapse: expandable-closed 1`] = ` +
+
+
+ + Expand/Collapse + +
+ +
+
+ +
+
+`; + +exports[`Panel when Panel is toggleable it must expand and collapse: expandable-open 1`] = ` +
+
+
+ + Expand/Collapse + +
+ +
+
+
+
+

+ Lorem ipsum dolor sit amet +

+
+
+
+
+`; + +exports[`Panel when Panel is toggleable it must expand and collapse: expandable-open 2`] = ` +
+
+
+ + Expand/Collapse + +
+ +
+
+
+
+

+ Lorem ipsum dolor sit amet +

+
+
+
+
+`; + +exports[`Panel when Panel is toggleable it will toggle when clicked: toggleable-closed 1`] = ` +
+
+
+ + Toggleable + +
+ +
+
+
+
+

+ Lorem ipsum dolor sit amet +

+
+
+
+
+`; + +exports[`Panel when Panel is toggleable it will toggle when clicked: toggleable-open 1`] = ` +
+
+
+ + Toggleable + +
+ +
+
+
+
+

+ Lorem ipsum dolor sit amet +

+
+
+
+
+`;