feat(component-testing): Component testing runner splash screen (#15091)

* Fix scrollbars * Fix resizer styles * Make no-spec selected filler for splash screen * Create no specs filler for reporter * Fix keyboard navigation when specs are filtered * Add test for filtered search list keyboard navigation * Remove fs-extra * Remove useless code * Update with related tests to the right values WITHOUT SCROLLBARS
cypress-io · Feb 15, 2021 · 1d878d2 · 1d878d2 · cypress-bot · Feb 15, 2021
1 parent 10fdd7b
commit 1d878d2
Show file tree

Hide file tree

Showing 10 changed files with 183 additions and 27 deletions.
diff --git a/packages/runner-ct/cypress/component/RunnerCt.spec.tsx b/packages/runner-ct/cypress/component/RunnerCt.spec.tsx
@@ -107,7 +107,7 @@ describe('RunnerCt', () => {
 
  cy.get('[data-cy=resizer]').trigger('mouseup', 'center')
 
- cy.get('[data-cy=specs-list-resize-box').should('have.css', 'width', '429px')
+ cy.get('[data-cy=specs-list-resize-box').should('have.css', 'width', '435px')
  })
 
  it('restore specs list width after closing and reopen', () => {
@@ -117,14 +117,14 @@ describe('RunnerCt', () => {
  })
 
  cy.get('[data-cy=resizer]').trigger('mouseup', 'center')
- cy.get('[data-cy=specs-list-resize-box').should('have.css', 'width', '479px')
+ cy.get('[data-cy=specs-list-resize-box').should('have.css', 'width', '485px')
 
  cy.get('[aria-label="Open the menu"').click()
  assertSpecsListIs('closed')
 
  cy.get('[aria-label="Open the menu"').click()
 
- cy.get('[data-cy=specs-list-resize-box').should('have.css', 'width', '479px')
+ cy.get('[data-cy=specs-list-resize-box').should('have.css', 'width', '485px')
  })
  })
 })
diff --git a/packages/runner-ct/cypress/component/SpecList/SpecList.spec.tsx b/packages/runner-ct/cypress/component/SpecList/SpecList.spec.tsx
@@ -188,5 +188,16 @@ describe('SpecList', () => {
  .parent()
  .should('be.focused')
  })
+
+ it('Allows to navigate between files when spec list is searched', () => {
+ cy.get('input').type('bar')
+ cy.realPress('ArrowDown')
+
+ cy
+ .get('[role=radio]')
+ .contains('bar.js')
+ .parent()
+ .should('be.focused')
+ })
  })
 })
diff --git a/packages/runner-ct/src/SpecList/SpecList.tsx b/packages/runner-ct/src/SpecList/SpecList.tsx
@@ -24,8 +24,8 @@ export const SpecList: React.FC<SpecsListProps> = observer((props) => {
  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
  const selectSpecByIndex = (index: number) => {
  const spec = typeof index !== 'number' || index < 0
- ? props.specs[0]
- : props.specs[index]
+ ? filteredSpecs[0]
+ : filteredSpecs[index]
 
  const specElement = document.querySelector(`[data-spec="${spec.relative}"]`) as HTMLDivElement
 
@@ -34,7 +34,7 @@ export const SpecList: React.FC<SpecsListProps> = observer((props) => {
  }
  }
 
- const selectedSpecIndex = props.specs.findIndex((spec) =>
+ const selectedSpecIndex = filteredSpecs.findIndex((spec) =>
  spec.relative === (document.activeElement as HTMLElement)?.dataset?.spec)
 
  if (e.key === 'ArrowUp') {

diff --git a/packages/runner-ct/src/SpecList/components/SearchSpec.tsx b/packages/runner-ct/src/SpecList/components/SearchSpec.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react'
-import hotkeys from 'hotkeys-js'
 import './SearchSpec.scss'
 
 interface SearchSpecProps extends React.RefAttributes<HTMLInputElement> {
@@ -8,12 +7,6 @@ interface SearchSpecProps extends React.RefAttributes<HTMLInputElement> {
 }
 
 export const SearchSpec: React.FC<SearchSpecProps> = React.forwardRef((props, ref) => {
- // const ignoreSlashInput
-
- React.useEffect(() => {
- return () => hotkeys.unbind('/')
- }, [])
-
  return (
  <div className="specs-list-search-input-container">
  <input

diff --git a/packages/runner-ct/src/app/NoSpecSelected.scss b/packages/runner-ct/src/app/NoSpecSelected.scss
@@ -0,0 +1,65 @@
+.no-spec { 
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100%;
+ flex-direction: column;
+ color: #555;
+ font-family: "Muli", "Helvetica Neue", "Arial", sans-serif;
+ font-size: 13px;
+
+ .no-spec-content-container { 
+ display: flex;
+ flex-basis: 45%;
+ flex-direction: column;
+ align-items: center;
+
+ a { 
+ color: #3386D4;
+ cursor: pointer;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+
+ .no-spec-title { 
+ margin-top: 16px;
+ margin-bottom: 8px;
+ }
+
+ .no-spec-custom-children { 
+ margin-top: 32px;
+ }
+ }
+
+ .keyboard-helper { 
+ width: 224px;
+ .keyboard-shortcut {
+ display: flex;
+ margin-top: 8px;
+ height: 23px;
+ justify-content: space-between;
+
+ .shortcut { 
+ display: flex;
+
+ .key {
+ display: flex;
+ font-family: sans-serif; // display keys symbols correctly
+ justify-content: center;
+ align-items: center;
+ border: 1px solid rgba(255, 255, 255, 0.4);
+ height: 23px;
+ min-width: 23px;
+ margin-right: 4px;
+ padding: 0px 4px;
+ font-size: 0.8125rem;
+ border-radius: 4px;
+ pointer-events: none;
+ background-color: #ddd;
+ }
+ }
+ }
+ }
+}
diff --git a/packages/runner-ct/src/app/NoSpecSelected.tsx b/packages/runner-ct/src/app/NoSpecSelected.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react'
+import './NoSpecSelected.scss'
+
+const KeyboardShortcut: React.FC<{ shortcut: string[], description: string }> = ({
+ shortcut,
+ description,
+}) => {
+ const metaSymbol = window.navigator.platform.includes('Mac') ? '⌘' : 'Ctrl'
+
+ return (
+ <li className="keyboard-shortcut">
+ <p> {description} </p>
+ <div className="shortcut">
+ {shortcut.map((key) => (
+ <div className="key"> {key === 'Meta' ? metaSymbol : key} </div>
+ ))}
+ </div>
+ </li>
+ )
+}
+
+export const KeyboardHelper = () => {
+ return (
+ <ul className="keyboard-helper">
+ <KeyboardShortcut shortcut={['/']} description="Search spec" />
+ <KeyboardShortcut shortcut={['Meta', 'B']} description="Toggle specs list" />
+ </ul>
+ )
+}
+
+interface NoSpecSelectedProps {
+ onSelectSpecRequest: () => void;
+}
+
+export const NoSpecSelected: React.FC<NoSpecSelectedProps> = ({ onSelectSpecRequest, children }) => {
+ return (
+ <div className="no-spec">
+ <div className="no-spec-content-container">
+ <svg width="40" height="50" viewBox="0 0 40 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M33.3333 49H6.66659C5.2521 49 3.89554 48.4381 2.89535 47.4379C1.89515 46.4377 1.33325 45.0812 1.33325 43.6667V6.33333C1.33325 4.91885 1.89515 3.56229 2.89535 2.5621C3.89554 1.5619 5.2521 1 6.66659 1H21.5626C22.2698 1.00015 22.9479 1.2812 23.4479 1.78133L37.8853 16.2187C38.3854 16.7186 38.6664 17.3968 38.6666 18.104V43.6667C38.6666 45.0812 38.1047 46.4377 37.1045 47.4379C36.1043 48.4381 34.7477 49 33.3333 49Z" stroke="#B4B5BC" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+ </svg>
+ <h2 className="no-spec-title"> No spec selected. </h2>
+ <a onClick={onSelectSpecRequest}> Select Spec </a>
+
+ {children && (
+ <div className="no-spec-custom-children">
+ {children}
+ </div>
+ )}
+ </div>
+ </div>
+ )
+}
diff --git a/packages/runner-ct/src/app/ReporterHeader.tsx b/packages/runner-ct/src/app/ReporterHeader.tsx
@@ -3,6 +3,15 @@ import { observer } from 'mobx-react'
 import { ReporterHeaderProps } from '@packages/reporter/src/header/header'
 import Stats from '@packages/reporter/src/header/stats'
 import Controls from '@packages/reporter/src/header/controls'
+import { StatsStore } from '@packages/reporter/src/header/stats-store'
+
+export const EmptyReporterHeader: React.FC = () => {
+ return (
+ <header>
+ <Stats stats={{ numPassed: 0, numFailed: 0, numPending: 0, duration: 0 } as StatsStore} />
+ </header>
+ )
+}
 
 export const ReporterHeader: React.FC<ReporterHeaderProps> = observer(
  function ReporterHeader ({ statsStore, appState }) {

diff --git a/packages/runner-ct/src/app/RunnerCt.scss b/packages/runner-ct/src/app/RunnerCt.scss
@@ -32,11 +32,13 @@ main.app-ct {
  box-shadow: $box-shadow-closest;
  transition: ease-in-out 0.2s;
  padding-left: $specs-list-padding;
-
+ overflow: hidden;
+
  .specs-list-container {
  display: flex;
- height: calc(100vh - 20px);
+ height: calc(100vh);
  padding-top: $specs-list-padding;
+ box-sizing: border-box;
 
  .specs-list-focus-container {
  width: 100%;
@@ -136,14 +138,13 @@ main.app-ct {
  }
 }
 
-
 // styles for react-split-pane and custom ResizableBox
 .Resizer {
- $resize-thickness: 12px;
+ $resize-thickness: 11px;
  border: 5px solid transparent;
  margin: -5px;
 
- background: transparent;
+ background: #ddd;
  transition: background-color .3s ease-in-out;
  z-index: 1;
  box-sizing: border-box;

diff --git a/packages/runner-ct/src/app/RunnerCt.tsx b/packages/runner-ct/src/app/RunnerCt.tsx
@@ -10,7 +10,7 @@ import SplitPane from 'react-split-pane'
 import Header from '../header/header'
 import Iframes from '../iframe/iframes'
 import Message from '../message/message'
-import { ReporterHeader } from './ReporterHeader'
+import { EmptyReporterHeader, ReporterHeader } from './ReporterHeader'
 import EventManager from '../lib/event-manager'
 import { Hidden } from '../lib/Hidden'
 import { SpecList } from '../SpecList'
@@ -20,6 +20,7 @@ import { useWindowSize } from '../lib/useWindowSize'
 import { useGlobalHotKey } from '../lib/useHotKey'
 
 import './RunnerCt.scss'
+import { KeyboardHelper, NoSpecSelected } from './NoSpecSelected'
 
 // Cypress.ConfigOptions only appears to have internal options.
 // TODO: figure out where the "source of truth" should be for
@@ -85,20 +86,22 @@ const App: React.FC<AppProps> = observer(
  monitorWindowResize()
  }, [])
 
- useGlobalHotKey('ctrl+b,command+b', () => {
- setIsSpecsListOpen((isOpenNow) => !isOpenNow)
- })
-
- useGlobalHotKey('/', () => {
+ function focusSpecsList () {
  setIsSpecsListOpen(true)
 
  // a little trick to focus field on the next tick of event loop
  // to prevent the handled keydown/keyup event to fill input with "/"
  setTimeout(() => {
  searchRef.current?.focus()
  }, 0)
+ }
+
+ useGlobalHotKey('ctrl+b,command+b', () => {
+ setIsSpecsListOpen((isOpenNow) => !isOpenNow)
  })
 
+ useGlobalHotKey('/', focusSpecsList)
+
  function onSplitPaneChange (newWidth: number) {
  setLeftSideOfSplitPaneWidth(newWidth)
  state.updateWindowDimensions({
@@ -158,10 +161,13 @@ const App: React.FC<AppProps> = observer(
  onDragStarted={() => setIsResizing(true)}
  onDragFinished={() => setIsResizing(false)}
  onChange={onSplitPaneChange}
+ // For some reason on each dom snapshot restoring the viewport is jumping up to 4 pixels
+ // It causes a weird white line in the bottom, so here is a fix which is not ideal
+ paneStyle={{ height: 'calc(100vh + 4px)' }}
  className={cs('reporter-pane', { 'is-reporter-resizing': isResizing })}
  >
- <div>
- {state.spec && (
+ <div style={{ height: '100%' }}>
+ {state.spec ? (
  <Reporter
  runMode={state.runMode}
  runner={eventManager.reporterBus}
@@ -175,6 +181,11 @@ const App: React.FC<AppProps> = observer(
  renderReporterHeader={(props) => <ReporterHeader {...props} />}
  experimentalStudioEnabled={false}
  />
+ ) : (
+ <div className="reporter">
+ <EmptyReporterHeader />
+ <NoSpecSelected onSelectSpecRequest={focusSpecsList} />
+ </div>
  )}
  </div>
  <SplitPane
@@ -193,7 +204,13 @@ const App: React.FC<AppProps> = observer(
  >
  <div className="runner runner-ct container">
  <Header {...props} ref={headerRef}/>
- <Iframes {...props} />
+ {!state.spec ? (
+ <NoSpecSelected onSelectSpecRequest={focusSpecsList}>
+ <KeyboardHelper />
+ </NoSpecSelected>
+ ) : (
+ <Iframes {...props} />
+ )}
  <Message state={state}/>
  </div>
 

diff --git a/yarn.lock b/yarn.lock
@@ -29583,6 +29583,13 @@ rollup@^2.35.1:
  optionalDependencies:
  fsevents "~2.1.2"
 
+rollup@^2.38.5:
+ version "2.39.0"
+ resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.39.0.tgz#be4f98c9e421793a8fec82c854fb567c35e22ab6"
+ integrity sha512-+WR3bttcq7zE+BntH09UxaW3bQo3vItuYeLsyk4dL2tuwbeSKJuvwiawyhEnvRdRgrII0Uzk00FpctHO/zB1kw==
+ optionalDependencies:
+ fsevents "~2.3.1"
+
 rst-selector-parser@^2.2.3:
  version "2.2.3"
  resolved "https://registry.yarnpkg.com/rst-selector-parser/-/rst-selector-parser-2.2.3.tgz#81b230ea2fcc6066c89e3472de794285d9b03d91"