import { FC } from 'react' import useDetachState from '../../../../frontend/js/shared/hooks/use-detach-state' import { EditorProviders } from '../../helpers/editor-providers' import { detachChannel, testDetachChannel } from '../../helpers/detach-channel' const DetachStateTest: FC<{ stateKey: string defaultValue: any senderRole?: string targetRole?: string handleClick: (setValue: (value: any) => void) => void }> = ({ stateKey, defaultValue, handleClick, senderRole, targetRole }) => { const [value, setValue] = useDetachState( stateKey, defaultValue, senderRole, targetRole ) return (
{value}
) } describe('useDetachState', function () { it('create and update state', function () { cy.mount( { setValue('barbaz') }} /> ) cy.get('#value').should('have.text', 'foobar') cy.get('#setValue').click() cy.get('#value').should('have.text', 'barbaz') }) it('broadcast message as sender', function () { window.metaAttributesCache.set('ol-detachRole', 'detacher') cy.mount( { setValue('barbaz1') }} /> ) cy.spy(detachChannel, 'postMessage').as('postDetachMessage') cy.get('#setValue').click() cy.get('@postDetachMessage').should('have.been.calledWith', { role: 'detacher', event: 'state-some-key', data: { value: 'barbaz1' }, }) }) it('receive message as target', function () { window.metaAttributesCache.set('ol-detachRole', 'detached') cy.mount( {}} /> ) cy.wrap(null).then(() => { testDetachChannel.postMessage({ role: 'detached', event: 'state-some-key', data: { value: 'barbaz2' }, }) }) cy.get('#value').should('have.text', 'barbaz2') }) })