Upgrade cypress tests to 11.2.0 and remove requery stuff (#66)

* upgrade component tests * remove requery/churn stuff * Update index.cy.jsx * fix a test * Make lint clean * Speed up cypress CLI runs; mute tsconfig spam * Simplify Cypress config * Switch test suite to to use cy.mount * Squelch type errors Co-authored-by: Tony Spataro <[email protected]> Co-authored-by: Tony Spataro <[email protected]>
AppFolio-IM · Dec 10, 2022 · 6847644 · 6847644
1 parent 9042058
commit 6847644
Show file tree

Hide file tree

Showing 36 changed files with 11,501 additions and 15,826 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -37,8 +37,11 @@ module.exports = {
     '@typescript-eslint/explicit-member-accessibility': 'off',
     '@typescript-eslint/interface-name-prefix': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-unused-vars': 'off', // warns about mandatory param names in function types!
+    '@typescript-eslint/no-use-before-define': 'off', // pointless rule
     'no-empty': 'warn',
     'no-extra-boolean-cast': 'warn',
+    'no-undef': 'off', // gives false alarms about Cypress globals e.g. JQuery
     'prettier/prettier': ['error', {singleQuote: true, trailingComma: 'es5'}],
     'react/prop-types': 'off'
   },

diff --git a/cypress.config.ts b/cypress.config.ts
@@ -0,0 +1,14 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  component: {
+    devServer: {
+      framework: 'react',
+      bundler: 'webpack',
+    },
+    specPattern: 'cypress/component/**/*.cy.{js,ts,jsx,tsx}',
+    video: false,
+    viewportWidth: 640,
+    viewportHeight: 480,
+  },
+});
diff --git a/cypress.json b/cypress.json
diff --git a/cypress/component/commands/clear.spec.jsx → cypress/component/commands/clear.cy.jsx b/cypress/component/commands/clear.spec.jsx → cypress/component/commands/clear.cy.jsx
@@ -8,11 +8,10 @@ import {
 
 import * as comp from '../../../src/components';
 import eventually from '../../support/eventually';
-import mount from '../../support/mount';
 
 describe('cy.clear', () => {
   it('clears Input', () => {
-    mount(
+    cy.mount(
       <FormLabelGroup label="some label">
         <Input />
       </FormLabelGroup>
@@ -26,15 +25,13 @@ describe('cy.clear', () => {
   });
 
   it('clears DateInput', () => {
-    mount(
+    cy.mount(
       <FormLabelGroup label="some label">
         <DateInput />
       </FormLabelGroup>
     );
 
-    cy.get('input')
-      .focus()
-      .type('04/02/2018{enter}');
+    cy.get('input').focus().type('04/02/2018{enter}');
     cy.get('div[aria-haspopup="true"]').should(
       'have.attr',
       'aria-expanded',
@@ -52,17 +49,17 @@ describe('cy.clear', () => {
 
   context('Select component', () => {
     it('clears values', () => {
-      const options = ['alpha', 'bravo', 'charlie'].map(o => ({
+      const options = ['alpha', 'bravo', 'charlie'].map((o) => ({
         label: o,
         value: o,
       }));
 
       let selected;
-      const onChange = o => {
+      const onChange = (o) => {
         selected = o && o.value;
       };
 
-      mount(
+      cy.mount(
         <FormLabelGroup label="some label">
           <Select options={options} onChange={onChange} />
         </FormLabelGroup>
@@ -80,13 +77,13 @@ describe('cy.clear', () => {
 
     it('dismisses popups', () => {
       const options = ['steve rogers', 'tony stark', 'natasha romanov'].map(
-        o => ({
+        (o) => ({
           label: o,
           value: o,
         })
       );
 
-      mount(
+      cy.mount(
         <>
           <FormLabelGroup label="first">
             <Select clearable={false} options={options} />

diff --git a/...ess/component/commands/component.spec.jsx → cypress/component/commands/component.cy.jsx b/...ess/component/commands/component.spec.jsx → cypress/component/commands/component.cy.jsx
@@ -11,7 +11,6 @@ import {
   NavLink,
 } from '@appfolio/react-gears';
 
-import mount from '../../support/mount';
 import * as comp from '../../../src/components';
 import { component as rawComponent } from '../../../src/commands/component';
 
@@ -25,7 +24,7 @@ function Timed({ children, init = false, dt = 2000 }) {
 describe('cy.component', () => {
   context('basics', () => {
     beforeEach(() => {
-      mount(
+      cy.mount(
         <>
           <Nav>
             <NavItem>
@@ -50,18 +49,14 @@ describe('cy.component', () => {
     });
 
     it('finds unlabeled components', () => {
-      cy.component(comp.Nav)
-        .contains('Nav 2')
-        .click();
-      cy.component(comp.Nav, { log: false })
-        .contains('Nav 1')
-        .click();
+      cy.component(comp.Nav).contains('Nav 2').click();
+      cy.component(comp.Nav, { log: false }).contains('Nav 1').click();
     });
   });
 
   context('best match', () => {
     beforeEach(() => {
-      mount(
+      cy.mount(
         <>
           <BlockPanel title="A">
             <a href="#a_foobar">foobar</a>
@@ -131,15 +126,15 @@ describe('cy.component', () => {
   context('retry', () => {
     context('top level', () => {
       it('with default assertion', () => {
-        mount(
+        cy.mount(
           <Timed>
             <BlockPanel title="now you see me"></BlockPanel>
           </Timed>
         );
         cy.component(comp.BlockPanel, 'now you see me');
       });
       it('with negative assertion', () => {
-        mount(
+        cy.mount(
           <Timed init={true}>
             <BlockPanel title="now you see me"></BlockPanel>
           </Timed>
@@ -150,7 +145,7 @@ describe('cy.component', () => {
 
     context('within subject', () => {
       it('with default assertion', () => {
-        mount(
+        cy.mount(
           <BlockPanel title="outer subject">
             <Timed>
               <FormLabelGroup label="now you see me">
@@ -167,7 +162,7 @@ describe('cy.component', () => {
         });
       });
       it('with negative assertion', () => {
-        mount(
+        cy.mount(
           <BlockPanel title="outer subject">
             <Timed init={true}>
               <FormLabelGroup label="now you see me">
@@ -203,7 +198,7 @@ describe('cy.component', () => {
 
   context('within outer subject', () => {
     it('BlockPanel', () => {
-      mount(
+      cy.mount(
         <>
           <BlockPanel title="A">
             <Alert>A</Alert>
@@ -236,7 +231,7 @@ describe('cy.component', () => {
 
   context('given all:true', () => {
     beforeEach(() => {
-      mount(
+      cy.mount(
         <>
           <BlockPanel title="A">
             <Button>1</Button>
@@ -265,7 +260,7 @@ describe('cy.component', () => {
 
   context('given timeout:value', () => {
     beforeEach(() => {
-      mount(
+      cy.mount(
         <Timed dt={Cypress.config('defaultCommandTimeout') + 1000}>
           <BlockPanel title="now you see me"></BlockPanel>
         </Timed>

diff --git a/cypress/component/commands/fill.spec.jsx → cypress/component/commands/fill.cy.jsx b/cypress/component/commands/fill.spec.jsx → cypress/component/commands/fill.cy.jsx
@@ -8,22 +8,19 @@ import {
 
 import * as comp from '../../../src/components';
 import eventually from '../../support/eventually';
-import mount from '../../support/mount';
 
 describe('cy.fill', () => {
   context('Input component', () => {
     beforeEach(() => {
-      mount(
+      cy.mount(
         <FormLabelGroup label="some label">
           <Input />
         </FormLabelGroup>
       );
     });
 
     it('types values', () => {
-      cy.component(comp.Input, 'some label')
-        .clear()
-        .type('before');
+      cy.component(comp.Input, 'some label').clear().type('before');
       cy.component(comp.Input, 'some label').should('have.value', 'before');
 
       cy.component(comp.Input, 'some label').fill('after');
@@ -38,7 +35,7 @@ describe('cy.fill', () => {
 
   context('DateInput component', () => {
     beforeEach(() => {
-      mount(
+      cy.mount(
         <FormLabelGroup label="some label">
           <DateInput />
         </FormLabelGroup>
@@ -65,7 +62,7 @@ describe('cy.fill', () => {
 
   context('textarea tag', () => {
     beforeEach(() => {
-      mount(
+      cy.mount(
         <FormLabelGroup label="some label">
           <Input type="textarea" />
         </FormLabelGroup>
@@ -74,9 +71,7 @@ describe('cy.fill', () => {
 
     it('types values', () => {
       // precondition
-      cy.get('textarea')
-        .clear()
-        .type('before');
+      cy.get('textarea').clear().type('before');
       cy.get('textarea').should('have.value', 'before');
 
       // fill with something
@@ -95,17 +90,17 @@ describe('cy.fill', () => {
 
   context('Select component', () => {
     const options = ['steve rogers', 'tony stark', 'natasha romanov'].map(
-      o => ({
+      (o) => ({
         label: o,
         value: o,
       })
     );
 
     it('searches and clicks values', () => {
       let selected;
-      const onChange = o => (selected = o && o.value);
+      const onChange = (o) => (selected = o && o.value);
 
-      mount(
+      cy.mount(
         <FormLabelGroup label="best avenger">
           <Select options={options} onChange={onChange} />
         </FormLabelGroup>
@@ -124,7 +119,7 @@ describe('cy.fill', () => {
     });
 
     it('dismisses popups', () => {
-      mount(
+      cy.mount(
         <>
           <FormLabelGroup label="first">
             <Select clearable={false} options={options} />
@@ -149,7 +144,7 @@ describe('cy.fill', () => {
 
   context('select tag', () => {
     beforeEach(() => {
-      mount(
+      cy.mount(
         <FormLabelGroup label="best avenger">
           <select id="avengers" name="avengers" type="select">
             <option value="">Select</option>