import { act } from '@testing-library/react-hooks' import { expect } from 'chai' import sinon from 'sinon' import { renderHookWithEditorContext } from '../../helpers/render-with-context' import sysendTestHelper from '../../helpers/sysend' import useDetachLayout from '../../../../frontend/js/shared/hooks/use-detach-layout' describe('useDetachLayout', function () { let openStub let closeStub beforeEach(function () { window.metaAttributesCache = new Map() openStub = sinon.stub(window, 'open') closeStub = sinon.stub(window, 'close') }) afterEach(function () { window.metaAttributesCache = new Map() openStub.restore() closeStub.restore() }) it('detaching', async function () { // 1. create hook in normal mode const { result } = renderHookWithEditorContext(() => useDetachLayout()) expect(result.current.reattach).to.be.a('function') expect(result.current.detach).to.be.a('function') expect(result.current.isLinked).to.be.false expect(result.current.isLinking).to.be.false expect(result.current.role).to.be.null // 2. detach act(() => { result.current.detach() }) expect(result.current.isLinked).to.be.false expect(result.current.isLinking).to.be.true expect(result.current.role).to.equal('detacher') sinon.assert.calledOnce(openStub) sinon.assert.calledWith( openStub, 'https://www.test-overleaf.com/detached', '_blank' ) }) it('detacher role', async function () { window.metaAttributesCache.set('ol-detachRole', 'detacher') // 1. create hook in detacher mode const { result } = renderHookWithEditorContext(() => useDetachLayout()) expect(result.current.reattach).to.be.a('function') expect(result.current.detach).to.be.a('function') expect(result.current.isLinked).to.be.false expect(result.current.isLinking).to.be.false expect(result.current.role).to.equal('detacher') // 2. simulate connected detached tab sysendTestHelper.spy.broadcast.resetHistory() sysendTestHelper.receiveMessage({ role: 'detached', event: 'connected', }) expect(sysendTestHelper.getLastBroacastMessage()).to.deep.equal({ role: 'detacher', event: 'up', }) expect(result.current.isLinked).to.be.true expect(result.current.isLinking).to.be.false expect(result.current.role).to.equal('detacher') // 3. simulate closed detached tab sysendTestHelper.spy.broadcast.resetHistory() sysendTestHelper.receiveMessage({ role: 'detached', event: 'closed', }) expect(result.current.isLinked).to.be.false expect(result.current.isLinking).to.be.false expect(result.current.role).to.equal('detacher') // 4. simulate up detached tab sysendTestHelper.spy.broadcast.resetHistory() sysendTestHelper.receiveMessage({ role: 'detached', event: 'up', }) expect(result.current.isLinked).to.be.true expect(result.current.isLinking).to.be.false expect(result.current.role).to.equal('detacher') // 5. simulate closed detacher tab sysendTestHelper.spy.broadcast.resetHistory() sysendTestHelper.receiveMessage({ role: 'detacher', event: 'closed', }) expect(result.current.isLinked).to.be.true expect(result.current.isLinking).to.be.false expect(result.current.role).to.equal('detacher') expect(sysendTestHelper.getLastBroacastMessage()).to.deep.equal({ role: 'detacher', event: 'up', }) // 6. reattach sysendTestHelper.spy.broadcast.resetHistory() act(() => { result.current.reattach() }) expect(result.current.isLinked).to.be.false expect(result.current.isLinking).to.be.false expect(result.current.role).to.be.null expect(sysendTestHelper.getLastBroacastMessage()).to.deep.equal({ role: 'detacher', event: 'reattach', }) }) it('detached role', async function () { window.metaAttributesCache.set('ol-detachRole', 'detached') // 1. create hook in detached mode const { result } = renderHookWithEditorContext(() => useDetachLayout()) expect(result.current.reattach).to.be.a('function') expect(result.current.detach).to.be.a('function') expect(result.current.isLinked).to.be.false expect(result.current.isLinking).to.be.false expect(result.current.role).to.equal('detached') // 2. simulate up detacher tab sysendTestHelper.spy.broadcast.resetHistory() sysendTestHelper.receiveMessage({ role: 'detacher', event: 'up', }) expect(result.current.isLinked).to.be.true expect(result.current.isLinking).to.be.false expect(result.current.role).to.equal('detached') // 3. simulate closed detacher tab sysendTestHelper.spy.broadcast.resetHistory() sysendTestHelper.receiveMessage({ role: 'detacher', event: 'closed', }) expect(result.current.isLinked).to.be.false expect(result.current.isLinking).to.be.false expect(result.current.role).to.equal('detached') // 4. simulate up detacher tab sysendTestHelper.spy.broadcast.resetHistory() sysendTestHelper.receiveMessage({ role: 'detacher', event: 'up', }) expect(result.current.isLinked).to.be.true expect(result.current.isLinking).to.be.false expect(result.current.role).to.equal('detached') // 5. simulate closed detached tab sysendTestHelper.spy.broadcast.resetHistory() sysendTestHelper.receiveMessage({ role: 'detached', event: 'closed', }) expect(result.current.isLinked).to.be.true expect(result.current.isLinking).to.be.false expect(result.current.role).to.equal('detached') expect(sysendTestHelper.getLastBroacastMessage()).to.deep.equal({ role: 'detached', event: 'up', }) // 6. simulate reattach event sysendTestHelper.spy.broadcast.resetHistory() sysendTestHelper.receiveMessage({ role: 'detacher', event: 'reattach', }) expect(result.current.isLinked).to.be.false expect(result.current.isLinking).to.be.false expect(result.current.role).to.equal('detached') sinon.assert.called(closeStub) }) })