-
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.
Browse files
Browse the repository at this point in the history
…176) * chore: circleci setup to allow pre-release on next branch * feat!: register toolkit components and include wrap container by default [ALT-115] (#175) BREAKING CHANGE: Registered components will be wrapped with a div container by default. The `wrapComponent` option can be used when registering components to opt-out of this behavior if necessary. * chore(release): updated release notes and package versions [ci skip] - @contentful/experience-builder@3.0.0 - @contentful/experience-builder-types@2.0.0 * fix(experience-builder-types): extend variables type on component definition [ALT-57] (#178) * chore(release): updated release notes and package versions [ci skip] - @contentful/experience-builder@3.0.1 - @contentful/experience-builder-types@2.0.1 --------- Co-authored-by: Adrian Meyer <8539634+primeinteger@users.noreply.github.com> Co-authored-by: contentful-automation[bot] <100587065+contentful-automation[bot]@users.noreply.github.com>
- Loading branch information
3 people
authored
Dec 8, 2023
1 parent
f95acdb
commit 9b6b5b3
Showing
13 changed files
with
2,966 additions
and
2,933 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
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
137 changes: 137 additions & 0 deletions
137
packages/experience-builder-sdk/src/utils/withComponentWrapper.spec.tsx
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,137 @@ | ||
| import React from 'react'; | ||
| import { withComponentWrapper } from './withComponentWrapper'; | ||
| import { fireEvent, render } from '@testing-library/react'; | ||
|
|
||
| const MyButton: React.FC<React.PropsWithChildren> = ({ children, ...props }) => ( | ||
| <button {...props}>{children}</button> | ||
| ); | ||
|
|
||
| describe('withComponentWrapper', () => { | ||
| describe('when component is wrapped', () => { | ||
| const WrappedButton = withComponentWrapper(MyButton); | ||
|
|
||
| it('events should be bound to the container div', () => { | ||
| const onClickSpy = jest.fn(); | ||
| const onMouseDownSpy = jest.fn(); | ||
| const onMouseUpSpy = jest.fn(); | ||
|
|
||
| const { container } = render( | ||
| <WrappedButton onClick={onClickSpy} onMouseDown={onMouseDownSpy} onMouseUp={onMouseUpSpy}> | ||
| Click me | ||
| </WrappedButton> | ||
| ); | ||
|
|
||
| fireEvent.click(container.firstChild!); | ||
| expect(onClickSpy).toHaveBeenCalledTimes(1); | ||
|
|
||
| fireEvent.mouseDown(container.firstChild!); | ||
| expect(onMouseDownSpy).toHaveBeenCalledTimes(1); | ||
|
|
||
| fireEvent.mouseUp(container.firstChild!); | ||
| expect(onMouseUpSpy).toHaveBeenCalledTimes(1); | ||
| }); | ||
|
|
||
| it('extra props should be passed to the container div', () => { | ||
| const { container } = render( | ||
| <WrappedButton | ||
| data-cf-node-block-id="test1" | ||
| data-cf-node-block-type="test2" | ||
| data-cf-node-id="test3"> | ||
| Click me | ||
| </WrappedButton> | ||
| ); | ||
|
|
||
| expect(container.firstChild).toHaveAttribute('data-cf-node-block-id', 'test1'); | ||
| expect(container.firstChild).toHaveAttribute('data-cf-node-block-type', 'test2'); | ||
| expect(container.firstChild).toHaveAttribute('data-cf-node-id', 'test3'); | ||
| }); | ||
|
|
||
| it('can wrap a component with a custom tag', () => { | ||
| const WrappedButtonSpan = withComponentWrapper(MyButton, { wrapContainerTag: 'span' }); | ||
|
|
||
| const { container } = render( | ||
| <WrappedButtonSpan className="my-span">Click me</WrappedButtonSpan> | ||
| ); | ||
|
|
||
| expect(container.firstChild).toHaveClass('my-span'); | ||
| expect(container.firstChild).toHaveTextContent('Click me'); | ||
| }); | ||
|
|
||
| it('classes get added to the correct elements', () => { | ||
| const { container, getByRole } = render( | ||
| <WrappedButton | ||
| data-cf-node-block-id="test1" | ||
| data-cf-node-block-type="test2" | ||
| data-cf-node-id="test3" | ||
| className="my-wrapper" | ||
| classes="my-class" | ||
| data-caca="yep"> | ||
| Click me | ||
| </WrappedButton> | ||
| ); | ||
|
|
||
| expect(container.firstChild).toHaveClass('my-wrapper'); | ||
| expect(getByRole('button')).toHaveClass('my-class'); | ||
| expect(getByRole('button')).toHaveAttribute('data-caca', 'yep'); | ||
| }); | ||
| }); | ||
|
|
||
| describe('when component is not wrapped', () => { | ||
| const Button = withComponentWrapper(MyButton, { wrapComponent: false }); | ||
|
|
||
| it('classes should be applied to the component itself', () => { | ||
| const { getByRole } = render(<Button classes="test">Click me</Button>); | ||
| expect(getByRole('button')).toHaveClass('test'); | ||
| }); | ||
|
|
||
| it('events should be bound to the component itself', () => { | ||
| const onClickSpy = jest.fn(); | ||
| const onMouseDownSpy = jest.fn(); | ||
| const onMouseUpSpy = jest.fn(); | ||
|
|
||
| const { container } = render( | ||
| <Button onClick={onClickSpy} onMouseDown={onMouseDownSpy} onMouseUp={onMouseUpSpy}> | ||
| Click me | ||
| </Button> | ||
| ); | ||
|
|
||
| fireEvent.click(container.firstChild!); | ||
| expect(onClickSpy).toHaveBeenCalledTimes(1); | ||
|
|
||
| fireEvent.mouseDown(container.firstChild!); | ||
| expect(onMouseDownSpy).toHaveBeenCalledTimes(1); | ||
|
|
||
| fireEvent.mouseUp(container.firstChild!); | ||
| expect(onMouseUpSpy).toHaveBeenCalledTimes(1); | ||
| }); | ||
|
|
||
| it('extra props should be passed to the component', () => { | ||
| const { container } = render( | ||
| <Button | ||
| data-cf-node-block-id="test1" | ||
| data-cf-node-block-type="test2" | ||
| data-cf-node-id="test3"> | ||
| Click me | ||
| </Button> | ||
| ); | ||
| expect(container.firstChild).toHaveAttribute('data-cf-node-block-id', 'test1'); | ||
| expect(container.firstChild).toHaveAttribute('data-cf-node-block-type', 'test2'); | ||
| expect(container.firstChild).toHaveAttribute('data-cf-node-id', 'test3'); | ||
| }); | ||
|
|
||
| it('classes get added to the correct elements', () => { | ||
| const { container } = render( | ||
| <Button | ||
| data-cf-node-block-id="test1" | ||
| data-cf-node-block-type="test2" | ||
| data-cf-node-id="test3" | ||
| className="my-button" //so we can select it later | ||
| classes="my-class"> | ||
| Click me | ||
| </Button> | ||
| ); | ||
| expect(container.firstChild).toHaveClass('my-button'); | ||
| expect(container.firstChild).toHaveClass('my-class'); | ||
| }); | ||
| }); | ||
| }); |
Oops, something went wrong.