Mirror: React hooks for accessible, common web interactions. UI super powers without the UI.
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Fix issues with Cypress promisification plugin

+68 -69
+1
cypress.json
··· 1 1 { 2 + "video": false, 2 3 "component": { 3 4 "testFiles": "**/*.test.{js,ts,jsx,tsx}", 4 5 "componentFolder": "src"
-1
cypress/support/index.js
··· 13 13 // https://on.cypress.io/configuration 14 14 // *********************************************************** 15 15 16 - import 'cypress-promise/register'; 17 16 import 'cypress-real-events/support';
-1
package.json
··· 58 58 "@rollup/plugin-node-resolve": "^13.0.2", 59 59 "@types/react": "^17.0.14", 60 60 "cypress": "^8.0.0", 61 - "cypress-promise": "^1.1.0", 62 61 "cypress-real-events": "^1.5.0", 63 62 "husky-v4": "^4.3.8", 64 63 "lint-staged": "^11.0.1",
+66 -61
src/utils/__tests__/selection.test.tsx
··· 1 1 import React from 'react'; 2 2 import { mount } from '@cypress/react'; 3 - import { snapshotSelection, restoreSelection } from '../selection'; 4 - 5 - it('should restore focused elements', async () => { 6 - await mount(<button id="button">Focusable</button>).promisify(); 3 + import { RestoreSelection, snapshotSelection, restoreSelection } from '../selection'; 7 4 8 - let button: HTMLElement | null = null; 5 + it('should restore focused elements', () => { 6 + let selection: RestoreSelection | null = null; 9 7 10 - await cy.get('button').as('button').then($el => { 11 - button = $el.get(0); 12 - }).focus().promisify(); 8 + mount(<button id="button">Focusable</button>); 9 + cy.get('button').as('button').focus(); 13 10 14 - const selection = snapshotSelection(); 11 + // snapshot the selection 12 + cy.get('@button').then($el => { 13 + selection = snapshotSelection(); 15 14 16 - // check selection matches expected state 17 - expect(selection).to.deep.equal({ 18 - element: button, 19 - method: 'focus', 15 + // check selection matches expected state 16 + expect(selection).to.deep.equal({ 17 + element: $el.get(0), 18 + method: 'focus', 19 + }); 20 20 }); 21 21 22 22 // unfocus the button 23 - await cy.realPress('Tab'); 24 - await cy.focused().should('not.exist').promisify(); 23 + cy.realPress('Tab'); 24 + cy.focused().should('not.exist'); 25 25 26 26 // restore the snapshotted selection 27 - restoreSelection(selection); 28 - await cy.focused().should('exist').promisify(); 29 - await cy.get('@button').should('have.focus').promisify(); 30 - }); 27 + cy.get('@button').then(() => { 28 + restoreSelection(selection); 29 + }); 31 30 32 - it('should restore input selections', async () => { 33 - await mount(<input type="text" name="text" />).promisify(); 31 + cy.focused().should('exist'); 32 + cy.get('@button').should('have.focus'); 33 + }); 34 34 35 - let input: HTMLElement | null = null; 35 + it('should restore input selections', () => { 36 + let selection: RestoreSelection | null = null; 36 37 37 - await cy.get('input').as('input').then($el => { 38 - input = $el.get(0); 39 - }).focus().promisify(); 38 + mount(<input type="text" name="text" />); 40 39 41 40 // type and move selection 42 - await cy.realType('test'); 43 - await cy.realPress('ArrowLeft'); 44 - await cy.realPress('ArrowLeft'); 41 + cy.get('input').as('input').focus(); 42 + cy.realType('test'); 43 + cy.realPress('ArrowLeft'); 44 + cy.realPress('ArrowLeft'); 45 45 46 - const selection = snapshotSelection(); 46 + // snapshot the selection 47 + cy.get('@input').then($el => { 48 + selection = snapshotSelection(); 47 49 48 - // check selection matches expected state 49 - expect(selection).to.deep.equal({ 50 - element: input, 51 - method: 'setSelectionRange', 52 - arguments: [2, 2, 'none'], 50 + // check selection matches expected state 51 + expect(selection).to.deep.equal({ 52 + element: $el.get(0), 53 + method: 'setSelectionRange', 54 + arguments: [2, 2, 'none'], 55 + }); 53 56 }); 54 57 55 58 // unfocus the input 56 - await cy.realPress('Tab'); 57 - await cy.focused().should('not.exist').promisify(); 59 + cy.realPress('Tab'); 60 + cy.focused().should('not.exist'); 58 61 59 62 // restore the snapshotted selection 60 - restoreSelection(selection); 61 - await cy.focused().should('exist').promisify(); 63 + cy.get('@input').then(() => { 64 + restoreSelection(selection); 65 + }); 62 66 63 67 // modify input at selected caret and check value 64 - await cy.realType('test'); 65 - await cy.get('@input').should('have.value', 'tetestst').promisify(); 68 + cy.focused().should('exist'); 69 + cy.realType('test'); 70 + cy.get('@input').should('have.value', 'tetestst'); 66 71 }); 67 72 68 73 it('should restore selections otherwise', async () => { 69 - await mount(<div contentEditable="true" id="editable"></div>).promisify(); 70 - 71 - let div: HTMLElement | null = null; 72 - 73 - await cy.get('#editable').as('editable').then($el => { 74 - div = $el.get(0); 75 - }).focus().promisify(); 74 + let selection: RestoreSelection | null = null; 76 75 77 76 // type and move selection 78 - await cy.realType('test'); 79 - await cy.realPress('ArrowLeft'); 80 - await cy.realPress('ArrowLeft'); 77 + cy.get('#editable').as('editable').focus(); 78 + cy.realType('test'); 79 + cy.realPress('ArrowLeft'); 80 + cy.realPress('ArrowLeft'); 81 81 82 - const selection = snapshotSelection(); 82 + // snapshot the selection 83 + cy.get('@editable').then($el => { 84 + selection = snapshotSelection(); 83 85 84 - // check selection matches expected state 85 - expect(selection).to.have.property('element', div); 86 - expect(selection).to.have.property('method', 'range'); 87 - expect(selection).to.have.property('range'); 86 + // check selection matches expected state 87 + expect(selection).to.have.property('element', $el.get(0)); 88 + expect(selection).to.have.property('method', 'range'); 89 + expect(selection).to.have.property('range'); 90 + }); 88 91 89 92 // unfocus the input 90 - await cy.realPress('Tab'); 91 - await cy.focused().should('not.exist').promisify(); 93 + cy.realPress('Tab'); 94 + cy.focused().should('not.exist'); 92 95 93 96 // restore the snapshotted selection 94 - restoreSelection(selection); 95 - await cy.focused().should('exist').promisify(); 97 + cy.get('@editable').then(() => { 98 + restoreSelection(selection); 99 + }); 96 100 97 101 // modify input at selected caret and check value 98 - await cy.realType('test'); 99 - await cy.get('@editable').should('have.text', 'tetestst').promisify(); 102 + cy.focused().should('exist'); 103 + cy.realType('test'); 104 + cy.get('@editable').should('have.text', 'tetestst'); 100 105 });
+1 -6
tsconfig.json
··· 1 1 { 2 2 "compilerOptions": { 3 - "types": [ 4 - "react", 5 - "cypress", 6 - "cypress-real-events", 7 - "cypress-promise/register" 8 - ], 3 + "types": ["react", "cypress", "cypress-real-events"], 9 4 "baseUrl": "./", 10 5 "esModuleInterop": true, 11 6 "forceConsistentCasingInFileNames": true,