Merge pull request #14940 from cypress-io/feat/resizeable-specs-list

feat(component-testing): Make specs-list resizeable

circle.yml

@@ -179,6 +179,29 @@ commands:
  path: /tmp/artifacts
  - store-npm-logs
 
+ run-runner-ct-integration-tests:
+ parameters:
+ browser:
+ description: browser shortname to target
+ type: string
+ percy:
+ description: enable percy
+ type: boolean
+ default: false
+ steps:
+ - attach_workspace:
+ at: ~/
+ - check-conditional-ci
+ - run:
+ command: |
+ cmd=$([[ <<parameters.percy>> == 'true' ]] && echo 'yarn percy exec --') || true
+ $cmd yarn workspace @packages/runner-ct run cy:run --browser <<parameters.browser>>
+ - store_test_results:
+ path: /tmp/cypress
+ - store_artifacts:
+ path: /tmp/artifacts
+ - store-npm-logs
+
  run-e2e-tests:
  parameters:
  browser:
@@ -851,6 +874,13 @@ jobs:
  - run-runner-integration-tests:
  browser: firefox
 
+ runner-ct-integration-tests-chrome:
+ <<: *defaults
+ steps:
+ - run-runner-ct-integration-tests:
+ browser: chrome
+ percy: true
+
  driver-integration-tests-chrome:
  <<: *defaults
  parallelism: 5
@@ -1698,6 +1728,9 @@ linux-workflow: &linux-workflow
  - runner-integration-tests-firefox:
  requires:
  - build
+ - runner-ct-integration-tests-chrome:
+ requires:
+ - build
 
  ## TODO: add these back in when flaky tests are fixed
  # - driver-integration-tests-electron:

packages/runner-ct/.eslintrc

@@ -0,0 +1,46 @@
+{
+ "plugins": [
+ "cypress",
+ "@cypress/dev"
+ ],
+ "extends": [
+ "plugin:@cypress/dev/general",
+ "plugin:@cypress/dev/tests",
+ "plugin:@cypress/dev/react"
+ ],
+ "parser": "@typescript-eslint/parser",
+ "env": {
+ "cypress/globals": true
+ },
+ "rules": {
+ "react/jsx-filename-extension": [
+ "warn",
+ {
+ "extensions": [
+ ".js",
+ ".jsx",
+ ".tsx"
+ ]
+ }
+ ]
+ },
+ "overrides": [
+ {
+ "files": [
+ "lib/*"
+ ],
+ "rules": {
+ "no-console": 1
+ }
+ },
+ {
+ "files": [
+ "**/*.json"
+ ],
+ "rules": {
+ "quotes": "off",
+ "comma-dangle": "off"
+ }
+ }
+ ]
+}

packages/runner-ct/cypress/component/App.spec.tsx

@@ -0,0 +1,88 @@
+/// <reference types="@percy/cypress" />
+import React from 'react'
+import { mount } from '@cypress/react'
+import App from '../../src/app/app'
+import State from '../../src/lib/state'
+import '@packages/runner/src/main.scss'
+
+class FakeEventManager {
+ start = () => { }
+ on = () => { }
+ stop = () => {}
+ notifyRunningSpec = () => { }
+}
+
+describe('App', () => {
+ it('renders App', () => {
+ cy.viewport(1000, 500)
+ const state = new State({
+ reporterWidth: 500,
+ spec: null,
+ specs: [{ relative: '/test.js', absolute: 'root/test.js', name: 'test.js' }],
+ })
+
+ mount(
+ <App
+ state={state}
+ // @ts-ignore - this is difficult to stub. Real one breaks things.
+ eventManager={new FakeEventManager()}
+ config={{ projectName: 'Project', env: {} }}
+ />,
+ )
+
+ cy.percySnapshot()
+ })
+
+ context('specs-list resizing', () => {
+ beforeEach(() => {
+ cy.viewport(1000, 500)
+ const state = new State({
+ reporterWidth: 500,
+ spec: null,
+ specs: [{ relative: '/test.js', absolute: 'root/test.js', name: 'test.js' }],
+ })
+
+ mount(
+ <App
+ state={state}
+ // @ts-ignore - this is difficult to stub. Real one breaks things.
+ eventManager={new FakeEventManager()}
+ config={{ projectName: 'Project', env: {} }}
+ />,
+ )
+ })
+
+ it('closes the spec list when selecting a spec', () => {
+ cy.get('[data-cy=specs-list-resize-box').should('have.css', 'width', '300px')
+
+ cy.get('[data-cy=resizer]').trigger('mousedown', 'center')
+ cy.get('[data-cy=resizer]').trigger('mousemove', 'center', {
+ clientX: 450,
+ })
+
+ cy.get('[data-cy=resizer]').trigger('mouseup', 'center')
+
+ cy.get('[data-cy=specs-list-resize-box').should('have.css', 'width', '425px')
+ })
+
+ it('restore specs list width after closing and reopen', () => {
+ cy.get('[data-cy=resizer]').trigger('mousedown', 'center')
+ cy.get('[data-cy=resizer]').trigger('mousemove', 'center', {
+ clientX: 500,
+ })
+
+ cy.get('[data-cy=resizer]').trigger('mouseup', 'center')
+ cy.get('[data-cy=specs-list-resize-box').should('have.css', 'width', '475px')
+
+ cy.get('[aria-label="Open the menu"').click()
+ cy.get('[data-cy=specs-list]').then(([el]) => {
+ // for some reason should("not.be.visible") doesn't work here so ensure that specs list was outside of screen
+ expect(el.getBoundingClientRect().x).to.be.lessThan(0)
+ })
+
+ cy.get('[aria-label="Open the menu"').click()
+
+ cy.get('[data-cy=specs-list-resize-box').should('have.css', 'width', '475px')
+ })
+ })
+})

packages/runner-ct/cypress/component/SpecList/SpecList.spec.tsx

@@ -1,4 +1,3 @@
-/* global cy */
 import React from 'react'
 import { mount } from '@cypress/react'
 import { SpecList } from '../../../src/SpecList'

packages/runner-ct/cypress/plugins/index.js

@@ -1,17 +1,35 @@
 /// <reference types="cypress" />
-const { startDevServer } = require('@cypress/webpack-dev-server')
 const path = require('path')
+const percyHealthCheck = require('@percy/cypress/task')
+const { startDevServer } = require('@cypress/webpack-dev-server')
+
+function injectStylesInlineForPercyInPlace (webpackConfig) {
+ webpackConfig.module.rules = webpackConfig.module.rules.map((rule) => {
+ if (rule?.use[0]?.loader.includes('mini-css-extract-plugin')) {
+ return {
+ ...rule,
+ use: [{
+ loader: 'style-loader',
+ }],
+ }
+ }
 
+ return rule
+ })
+}
 /**
  * @type {Cypress.PluginConfig}
  */
 module.exports = (on, config) => {
+ on('task', percyHealthCheck)
  on('dev-server:start', (options) => {
- // yarn tsc webpack.config.ts --esModuleInterop
- const config = path.resolve(__dirname, '../../webpack.config.js')
+ /** @type {import('webpack').Configuration} */
+ const { default: webpackConfig } = require(path.resolve(__dirname, '..', '..', 'webpack.config.ts'))
+
+ injectStylesInlineForPercyInPlace(webpackConfig)
 
  return startDevServer({
- webpackConfig: require(config).default,
+ webpackConfig,
  options,
  })
  })

packages/runner-ct/cypress/support/index.js

@@ -15,6 +15,7 @@
 
 // Import commands.js using ES2015 syntax:
 import './commands'
+import '@percy/cypress'
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

packages/runner-ct/package.json

@@ -8,6 +8,8 @@
  "build": "webpack",
  "build-prod": "cross-env NODE_ENV=production yarn build && tsc",
  "clean-deps": "rm -rf node_modules",
+ "cy:open": "node ../../scripts/cypress.js open-ct --project ${PWD}",
+ "cy:run": "node ../../scripts/cypress.js run-ct --project ${PWD}",
  "postinstall": "echo '@packages/runner needs: yarn build'",
  "test-unit": "ts-mocha --config ./test/.mocharc.js --require './test/setup.js'",
  "watch": "webpack --watch --progress --config webpack.config.ts"
@@ -40,6 +42,7 @@
  "@babel/core": "^7.12.3",
  "@babel/preset-env": "^7.12.1",
  "@packages/driver": "0.0.0-development",
+ "@percy/cypress": "2.3.4",
  "@types/sockjs-client": "1.1.0",
  "babel-loader": "8.1.0",
  "clean-webpack-plugin": "^3.0.0",

packages/runner-ct/render-target.js

@@ -1,4 +1,3 @@
-/* globals document */
 import $ from 'cash-dom'
 
 function appendTargetIfNotExists (id, tag = 'div', parent = document.body) {

packages/runner-ct/src/SpecList/SpecList.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 
+import cs from 'classnames'
 import { SpecItem } from './SpecItem'
 import { OnSelectSpec } from './SpecFileItem'
 import { SearchSpec } from './components/SearchSpec'
@@ -10,6 +11,7 @@ interface SpecsListProps {
  selectedSpecs: string[]
  specs: Cypress.Cypress['spec'][]
  onSelectSpec: OnSelectSpec
+ disableTextSelection: boolean
 }
 
 export const SpecList: React.FC<SpecsListProps> = (props) => {
@@ -23,7 +25,10 @@ export const SpecList: React.FC<SpecsListProps> = (props) => {
  value={search}
  onSearch={setSearch}
  />
- <ul className="specs-list">
+ <ul
+ data-cy="specs-list"
+ className={cs('specs-list', { 'specs-list_text-selection-disabled': props.disableTextSelection })}
+ >
  {
  hierarchy.map((item) => (
  <SpecItem

packages/runner-ct/src/SpecList/spec-list.scss

@@ -5,4 +5,8 @@
  width: calc(100% - 40px);
  height: calc(100% - 10px);
  overflow-y: auto;
+
+ &.specs-list_text-selection-disabled {
+ user-select: none;
+ }
 }

packages/runner-ct/src/app/app.scss

@@ -12,57 +12,51 @@ main.app-ct {
 }
 
 .menu-toggle {
- padding-top: $specs-list-padding;
  z-index: 2;
  :hover {
  cursor: pointer;
  }
 }
 
-.specs-list-container {
- $width: 300px;
- $header-height: 61px;
- display: grid;
- grid-template-rows: min-content;
- grid-gap: $specs-list-padding;
- padding-left: $specs-list-padding;
- padding-top: $specs-list-padding;
- z-index: 9999;
- position: absolute; // TODO: Make sure global styles are properly handled
- box-shadow: $box-shadow-closest;
+.specs-list-drawer {
+ $header-height: 40px;
 
+ will-change: transform;
  background: #f6f6f6;
- width: $width;
+ width: auto;
  top: 0;
- left: calc(-1 * (#{$width} - #{$specs-list-padding}));
- height: calc(100vh - 20px);
+ left: 0;
+ z-index: 9999;
+ position: absolute; // TODO: Make sure global styles are properly handled
+ box-shadow: $box-shadow-closest;
  transition: ease-in-out 0.2s;
- transform: translateX(0px);
-
- nav {
-
- position: absolute;
- height: $header-height;
- right: $font-size;
- transform: translateX(0px);
+ padding-left: $specs-list-padding;
+ padding-top: $specs-list-padding;
 
- display: flex;
- align-items: center;
- justify-content: center;
+ .specs-list-container {
+ display: grid;
+ grid-template-rows: min-content;
+ grid-gap: $specs-list-padding;
+ height: calc(100vh - 20px);
+
+ nav {
+ position: absolute;
+ height: $header-height;
+ right: $font-size;
+ transform: translateX(0px);
+ display: flex;
+ align-items: center;
+ justify-content: center;
 
- a {
- color: unset;
+  a {
+  color: unset;
 
- :hover, :active {
- color: gray;
+ :hover, :active {
+ color: gray;
+ }
  }
-
  }
  }
-
- &__open {
- transform: translateX(calc(#{$width} - 20px));
- }
 }
 
 .app-wrapper {