Merge branch 'develop' into marktnoonan/percy-content-flake

Author: marktnoonan

packages/app/cypress/e2e/subscriptions/specChange-subscription.cy.ts

@@ -230,9 +230,10 @@ e2e: {
 
     it('handles removing the last file', () => {
       cy.contains('dom-content.spec').click()
+      cy.get('button[aria-controls="reporter-inline-specs-list"]').click({ force: true })
+      cy.get('[data-cy=specs-list-panel]').should('be.visible')
       cy.waitForSpecToFinish()
       cy.get('[data-model-state="passed"]').should('contain', 'renders the test content')
-
       cy.withCtx(async (ctx, o) => {
         await Promise.all(o.paths.map((path) => ctx.actions.file.removeFileInProject(path)))
       }, {

packages/reporter/cypress/e2e/agents.cy.ts

@@ -36,12 +36,12 @@ describe('agents', () => {
     }
   })
 
-  it('does not display agents if there are no agents', () => {
+  it('does not render agents if there are no agents', () => {
     // @ts-ignore
     runnables.tests[0].agents = []
     start()
 
-    cy.contains('Spies / Stubs').should('not.be.visible')
+    cy.contains('Spies / Stubs').should('not.exist')
   })
 
   describe('when there are agents', () => {
@@ -52,7 +52,7 @@ describe('agents', () => {
 
     it('collapses agents by default', () => {
       start()
-      cy.get('.runnable-agents-region .instrument-content').should('not.be.visible')
+      cy.get('.runnable-agents-region .instrument-content').should('not.exist')
     })
 
     it('shows agents after expanding', () => {

packages/reporter/cypress/e2e/hooks.cy.ts

@@ -72,10 +72,10 @@ describe('hooks', () => {
       .should('be.visible')
     })
 
-    it('does not display (failed) next to name for passed hooks', () => {
+    it('does not render (failed) next to name for passed hooks', () => {
       cy.contains('test 1').closest('.runnable').contains('before each')
       .find('.hook-failed-message')
-      .should('not.be.visible')
+      .should('not.exist')
     })
 
     describe('expanding/collapsing', () => {

packages/reporter/cypress/e2e/routes.cy.ts

@@ -36,10 +36,10 @@ describe('routes', () => {
     }
   })
 
-  it('does not display if there are no routes', () => {
+  it('does not render if there are no routes', () => {
     runnables.tests![0].routes = []
     start()
-    cy.get('.runnable-routes-region').should('not.be.visible')
+    cy.get('.runnable-routes-region').should('not.exist')
   })
 
   describe('when there are routes', () => {

packages/reporter/cypress/e2e/runnables.cy.ts

@@ -31,7 +31,6 @@ describe('runnables', () => {
               relative: 'foo/bar',
             },
           },
-          experimentalStudioEnabled: true,
         }, renderProps))
       })
     }
@@ -146,7 +145,7 @@ describe('runnables', () => {
       cy.contains('No tests found.').should('be.visible')
       cy.contains('Cypress could not detect tests in this file.').should('be.visible')
       cy.contains('Open file in IDE').should('be.visible')
-      cy.contains('Create test with Cypress Studio').should('be.visible')
+      cy.contains('Create test with Cypress Studio').should('not.exist')
       cy.get('.help-link').should('have.attr', 'href', 'https://on.cypress.io/intro')
       cy.get('.help-link').should('have.attr', 'target', '_blank')
       cy.percySnapshot()
@@ -171,7 +170,8 @@ describe('runnables', () => {
       cy.get('.help-link').should('have.attr', 'target', '_blank')
     })
 
-    it('can launch studio', () => {
+    // FIXME: When studio support is re-introduced we can enable these tests.
+    it.skip('can launch studio', () => {
       start().then(() => {
         cy.stub(runner, 'emit')
 

packages/reporter/cypress/e2e/suites.cy.ts

@@ -22,7 +22,6 @@ describe('suites', () => {
             absolute: '/absolute/path/to/foo.js',
           },
         },
-        experimentalStudioEnabled: true,
       })
     })
 
@@ -76,8 +75,8 @@ describe('suites', () => {
 
         cy.get('@suiteWrapper')
         .should('not.have.class', 'is-open')
-        .find('.collapsible-content').eq(0)
-        .should('not.be.visible')
+        .find('.collapsible-content')
+        .should('not.exist')
 
         cy.contains('suite 1')
         .click()
@@ -95,8 +94,8 @@ describe('suites', () => {
 
         cy.get('@suiteWrapper')
         .should('not.have.class', 'is-open')
-        .find('.collapsible-content').eq(0)
-        .should('not.be.visible')
+        .find('.collapsible-content')
+        .should('not.exist')
 
         cy.contains('suite 1')
         .parents('.collapsible-header')
@@ -115,8 +114,8 @@ describe('suites', () => {
 
         cy.get('@suiteWrapper')
         .should('not.have.class', 'is-open')
-        .find('.collapsible-content').eq(0)
-        .should('not.be.visible')
+        .find('.collapsible-content')
+        .should('not.exist')
 
         cy.contains('suite 1')
         .parents('.collapsible-header')
@@ -130,7 +129,8 @@ describe('suites', () => {
     })
   })
 
-  describe('studio button', () => {
+  // FIXME: When studio support is re-introduced we can enable these tests.
+  describe.skip('studio button', () => {
     it('displays studio icon with half transparency when hovering over test title', () => {
       cy.contains('nested suite 1')
       .closest('.runnable-wrapper')

packages/reporter/cypress/e2e/test_errors.cy.ts

@@ -69,7 +69,7 @@ describe('test errors', () => {
 
     it('does not expand or collapse stack trace when clicking', () => {
       cy.get('.runnable-err-print').click()
-      cy.get('.runnable-err-stack-trace').should('not.be.visible')
+      cy.get('.runnable-err-stack-trace').should('not.exist')
       cy.contains('View stack trace').click()
       cy.get('.runnable-err-stack-trace').should('be.visible')
       cy.get('.runnable-err-print').click()
@@ -82,8 +82,8 @@ describe('test errors', () => {
       setError(commandErr)
     })
 
-    it('hides stack trace by default', () => {
-      cy.get('.runnable-err-stack-trace').should('not.be.visible')
+    it('does not render stack trace by default', () => {
+      cy.get('.runnable-err-stack-trace').should('not.exist')
     })
 
     it('opens stack trace on click', () => {

packages/reporter/cypress/e2e/tests.cy.ts

@@ -33,7 +33,6 @@ describe('tests', () => {
             absolute: '/absolute/path/to/foo.js',
           },
         },
-        experimentalStudioEnabled: true,
       })
     })
 
@@ -70,7 +69,7 @@ describe('tests', () => {
       .parents('.collapsible').first()
       .should('not.have.class', 'is-open')
       .find('.collapsible-content')
-      .should('not.be.visible')
+      .should('not.exist')
     })
 
     it('failed tests expands automatically', () => {
@@ -94,7 +93,7 @@ describe('tests', () => {
 
       cy.get('@testWrapper')
       .should('not.have.class', 'is-open')
-      .find('.collapsible-content').should('not.be.visible')
+      .find('.collapsible-content').should('not.exist')
     })
 
     it('expands/collapses on enter', () => {
@@ -112,7 +111,7 @@ describe('tests', () => {
 
       cy.get('@testWrapper')
       .should('not.have.class', 'is-open')
-      .find('.collapsible-content').should('not.be.visible')
+      .find('.collapsible-content').should('not.exist')
     })
 
     it('expands/collapses on space', () => {
@@ -130,7 +129,7 @@ describe('tests', () => {
 
       cy.get('@testWrapper')
       .should('not.have.class', 'is-open')
-      .find('.collapsible-content').should('not.be.visible')
+      .find('.collapsible-content').should('not.exist')
     })
   })
 

packages/reporter/src/agents/agents.tsx

@@ -34,37 +34,38 @@ const AgentsList = observer(({ model }: AgentsProps) => (
   </tbody>
 ))
 
-const Agents = observer(({ model }: AgentsProps) => (
-  <div
-    className={cs('runnable-agents-region', {
-      'no-agents': !model.agents.length,
-    })}
-  >
-    <div className='instruments-container'>
-      <ul className='hooks-container'>
-        <li className='hook-item'>
-          <Collapsible
-            header={`Spies / Stubs (${model.agents.length})`}
-            headerClass='hook-header'
-            contentClass='instrument-content'
-          >
-            <table>
-              <thead>
-                <tr>
-                  <th>Type</th>{/* the spy/stub's name provided by the driver */}
-                  <th>Function</th>
-                  <th>Alias(es)</th>
-                  <th className='call-count'># Calls</th>
-                </tr>
-              </thead>
-              <AgentsList model={model} />
-            </table>
-          </Collapsible>
-        </li>
-      </ul>
-    </div>
-  </div>
-))
+const Agents = observer(({ model }: AgentsProps) => {
+  if (!model.agents.length) {
+    return null
+  }
+
+  return (
+    <div className='runnable-agents-region'>
+      <div className='instruments-container'>
+        <ul className='hooks-container'>
+          <li className='hook-item'>
+            <Collapsible
+              header={`Spies / Stubs (${model.agents.length})`}
+              headerClass='hook-header'
+              contentClass='instrument-content'
+            >
+              <table>
+                <thead>
+                  <tr>
+                    <th>Type</th>{/* the spy/stub's name provided by the driver */}
+                    <th>Function</th>
+                    <th>Alias(es)</th>
+                    <th className='call-count'># Calls</th>
+                  </tr>
+                </thead>
+                <AgentsList model={model} />
+              </table>
+            </Collapsible>
+          </li>
+        </ul>
+      </div>
+    </div>)
+})
 
 export { Agent, AgentsList }
 

packages/reporter/src/collapsible/collapsible.scss

@@ -1,12 +1,4 @@
 .reporter {
-  .collapsible-content {
-    display: none;
-  }
-
-  .is-open > .collapsible-content {
-    display: block;
-  }
-
   .collapsible-indicator {
     margin-right: 8px;
     transform: rotate(-90deg);

packages/reporter/src/collapsible/collapsible.tsx

@@ -13,6 +13,7 @@ interface Props {
   headerExtras?: ReactNode
   containerRef?: RefObject<HTMLDivElement>
   contentClass?: string
+  hideExpander: boolean
 }
 
 interface State {
@@ -25,6 +26,7 @@ class Collapsible extends Component<Props, State> {
     headerClass: '',
     headerStyle: {},
     contentClass: '',
+    hideExpander: false,
   }
 
   constructor (props: Props) {
@@ -56,17 +58,19 @@ class Collapsible extends Component<Props, State> {
               style={this.props.headerStyle}
               tabIndex={-1}
             >
-              <ChevronIcon className='collapsible-indicator' />
+              {!this.props.hideExpander && <ChevronIcon className='collapsible-indicator' />}
               <span className='collapsible-header-text'>
                 {this.props.header}
               </span>
             </div>
           </div>
           {this.props.headerExtras}
         </div>
-        <div className={cs('collapsible-content', this.props.contentClass)}>
-          {this.state.isOpen && this.props.children}
-        </div>
+        {this.state.isOpen && (
+          <div className={cs('collapsible-content', this.props.contentClass)}>
+            {this.props.children}
+          </div>
+        )}
       </div>
     )
   }

packages/reporter/src/errors/errors.scss

@@ -56,14 +56,9 @@ $code-border-radius: 4px;
   }
 
   .studio-err-wrapper {
-    display: none;
     text-align: center;
   }
 
-  &.studio-active .attempt-failed .studio-err-wrapper {
-    display: block;
-  }
-
   .runnable-err {
     border-left: 2px solid $fail;
     background-color: $err-background;

packages/reporter/src/hooks/hooks.scss

@@ -42,7 +42,6 @@
 
       .hook-failed-message {
         color: $red-400;
-        display: none;
       }
 
       .hook-open-in-ide {
@@ -66,9 +65,5 @@
         }
       }
     }
-
-    .hook-failed .hook-failed-message {
-      display: inline;
-    }
   }
 }

packages/reporter/src/hooks/hooks.tsx

@@ -20,7 +20,8 @@ export interface HookHeaderProps {
 
 const HookHeader = ({ model, number }: HookHeaderProps) => (
   <span className='hook-name'>
-    {model.hookName} {number && `(${number})`} <span className='hook-failed-message'>(failed)</span>
+    {model.hookName} {number && `(${number})`}
+    {model.failed && <span className='hook-failed-message'> (failed)</span>}
   </span>
 )
 
@@ -66,7 +67,7 @@ const Hook = observer(({ model, showNumber }: HookProps) => (
       header={<HookHeader model={model} number={showNumber ? model.hookNumber : undefined} />}
       headerClass='hook-header'
       headerExtras={model.invocationDetails && <HookOpenInIDE invocationDetails={model.invocationDetails} />}
-      isOpen={true}
+      isOpen
     >
       <ul className='commands-container'>
         {_.map(model.commands, (command) => <Command key={command.id} model={command} aliasesWithDuplicates={model.aliasesWithDuplicates} />)}

packages/reporter/src/instruments/instruments.scss

@@ -34,9 +34,4 @@
       color: $fail;
     }
   }
-
-  .no-agents .instruments-container,
-  .no-routes .instruments-container {
-    display: none;
-  }
 }