Something went wrong. Try again.
Mirror: React hooks for accessible, common web interactions. UI super powers without the UI.
Something went wrong. Try again.
2.7 kB · 102 lines
TSX
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103import React from 'react';import { mount } from '@cypress/react';import { RestoreSelection, snapshotSelection, restoreSelection } from '../selection';
it('should restore focused elements', () => { let selection: RestoreSelection | null = null;
mount(<button id="button">Focusable</button>); cy.get('button').as('button').focus();
// snapshot the selection cy.get('@button').then($el => { selection = snapshotSelection();
// check selection matches expected state expect(selection?.element).to.deep.equal( $el.get(0), ); });
// unfocus the button cy.realPress('Tab'); cy.focused().should('not.exist');
// restore the snapshotted selection cy.get('@button').then(() => { restoreSelection(selection); });
cy.focused().should('exist'); cy.get('@button').should('have.focus');});
it('should restore input selections', () => { let selection: RestoreSelection | null = null;
mount(<input type="text" name="text" />);
// type and move selection cy.get('input').as('input').focus(); cy.realType('test'); cy.realPress('ArrowLeft'); cy.realPress('ArrowLeft');
// snapshot the selection cy.get('@input').then($el => { selection = snapshotSelection();
// check selection matches expected state expect(selection?.element).to.deep.equal( $el.get(0), ); });
// unfocus the input cy.realPress('Tab'); cy.focused().should('not.exist');
// restore the snapshotted selection cy.get('@input').then(() => { restoreSelection(selection); });
// modify input at selected caret and check value cy.focused().should('exist'); cy.realType('test'); cy.get('@input').should('have.value', 'tetestst');});
it('should restore selections otherwise', async () => { let selection: RestoreSelection | null = null;
// type and move selection cy.get('#editable').as('editable').focus(); cy.realType('test'); cy.realPress('ArrowLeft'); cy.realPress('ArrowLeft');
// snapshot the selection cy.get('@editable').then($el => { selection = snapshotSelection();
// check selection matches expected state expect(selection).to.have.property('element', $el.get(0)); expect(selection).to.have.property('method', 'range'); expect(selection).to.have.property('range'); });
// unfocus the input cy.realPress('Tab'); cy.focused().should('not.exist');
// restore the snapshotted selection cy.get('@editable').then(() => { restoreSelection(selection); });
// modify input at selected caret and check value cy.focused().should('exist'); cy.realType('test'); cy.get('@editable').should('have.text', 'tetestst');});