Merge pull request #11 from lsky-walt/dev

feat: cypress

.eslintrc

@@ -1,6 +1,7 @@
 {
   "extends": [
-    "airbnb"
+    "airbnb",
+    "plugin:cypress/recommended"
   ],
   "parser": "babel-eslint",
   "env": {
@@ -10,7 +11,8 @@
     "jest": true
   },
   "plugins": [
-    "react"
+    "react",
+    "cypress"
   ],
   "parserOptions": {
     "ecmaVersion": 2019,

cypress.json

@@ -0,0 +1,3 @@
+{
+  "baseUrl": "http://0.0.0.0:9090/#/"
+}

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/integration/v-table.spec.js

@@ -0,0 +1,29 @@
+const rowHeight = 40
+const rowCount = 1000
+const columnWidth = 100
+const columnCount = 100
+
+describe('VTable', () => {
+  describe('Base', () => {
+    beforeEach(() => {
+      cy.visit('/#/base')
+      cy.get('.vTable-container').as('container')
+    })
+
+    it('have container', () => {
+      cy.get('@container').should('exist')
+    })
+
+    it('check attr', () => {
+      cy.get('@container')
+        .should('have.css', 'width', '860px')
+        .should('have.css', 'height', '600px')
+    })
+
+    it('check row and column count', () => {
+      cy.get('@container').get('.vTable-inner')
+        .should('have.css', 'width', `${columnWidth * columnCount}px`)
+        .should('have.css', 'height', `${rowHeight * rowCount}px`)
+    })
+  })
+})

cypress/plugins/index.js

@@ -0,0 +1,21 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

cypress/support/index.js

@@ -0,0 +1,19 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

index.d.ts

@@ -0,0 +1,75 @@
+import * as React from 'react'
+
+interface VTableRenderParams {
+  columnIndex: number,
+  rowIndex: number,
+  style: object,
+  key: string
+}
+
+interface ScrollParams {
+  scrollTop: number,
+  scrollLeft: number
+}
+
+interface AdaptiveChildrenParams {
+  width: number,
+  height: number
+}
+
+interface WindowScrollerChildrenParams extends ScrollParams { }
+
+export interface VTableProps {
+  columnWidth: number | ((index: number) => number),
+  columnCount: number,
+  rowHeight: number | ((index: number) => number),
+  rowCount: number,
+  width: number,
+  height: number,
+  scrollTop?: number,
+  scrollLeft?: number,
+  render: ((renderParams: VTableRenderParams) => React.ReactNode),
+  onScroll?: ((scrollParams: ScrollParams) => void),
+  isWindowScroller?: boolean
+}
+
+interface VTableState {
+  tableConfig: any,
+  scrollTop: number | void,
+  scrollLeft: number | void
+}
+
+export interface AdaptiveProps {
+  defaultWidth?: number,
+  defaultHeight?: number,
+  children?: ((adaptiveChildrenParams: AdaptiveChildrenParams) => React.ReactNode)
+}
+
+interface AdaptiveState {
+  width: number | 0,
+  height: number | 0
+}
+
+export interface WindowScrollerProps {
+  scrollLeft?: number,
+  scrollTop?: number,
+  scrollElement?: HTMLElement,
+  children: ((windowScrollerChildrenParams: WindowScrollerChildrenParams) => React.ReactNode)
+}
+
+interface WindowScrollerState {
+  scrollLeft: number | 0,
+  scrollTop: number | 0
+}
+
+declare class VTable extends React.Component<VTableProps, VTableState> {
+  render(): JSX.Element
+}
+
+declare class Adaptive extends React.Component<AdaptiveProps, AdaptiveState>  {
+  render(): JSX.Element
+}
+
+declare class WindowScroller extends React.Component<WindowScrollerProps, WindowScrollerState> {
+  render(): JSX.Element
+}

package.json

@@ -1,16 +1,18 @@
 {
   "name": "@lsky/v-table",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "main": "./lib/index.js",
   "license": "MIT",
   "repository": "https://github.com/lsky-walt/table-virtualized",
   "author": "lsky_walt <[email protected]>",
   "scripts": {
     "start": "webpack-dev-server --config ./webpack/webpack.dev.config.js",
-    "build": "webpack --config ./webpack/webpack.prod.config.js"
+    "build": "webpack --config ./webpack/webpack.prod.config.js",
+    "e2e": "cypress open"
   },
   "files": [
-    "lib"
+    "lib",
+    "index.d.ts"
   ],
   "keywords": [
     "react-component",
@@ -30,10 +32,12 @@
     "babel-loader": "^8.1.0",
     "clean-webpack-plugin": "^3.0.0",
     "css-loader": "^3.6.0",
+    "cypress": "^5.6.0",
     "ejs-loader": "^0.5.0",
     "eslint": "^7.7.0",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-import-resolver-webpack": "^0.12.2",
+    "eslint-plugin-cypress": "^2.11.2",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-react": "^7.20.6",

src/components/adaptive.jsx

@@ -82,4 +82,6 @@ Index.propTypes = {
   children: PropTypes.func,
 }
 
+Index.displayName = 'Adaptive'
+
 export default Index

src/components/table.jsx

@@ -118,7 +118,7 @@ class Index extends React.Component {
     return (
       <div
         ref={this.bindContainer}
-        className={clsx('vTable-containner', styles['table-container'], !isWindowScroller && styles['table-container-auto'])}
+        className={clsx('vTable-container', styles['table-container'], !isWindowScroller && styles['table-container-auto'])}
         style={tableConfig.getContainerStyle()}
       >
         <div className="vTable-inner" style={innerContainerStyle}>{this.calcRenderChildren()}</div>
@@ -181,4 +181,6 @@ Index.propTypes = {
   isWindowScroller: PropTypes.bool,
 }
 
+Index.displayName = 'VTable'
+
 export default Index

src/components/window-scroller.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import {
-  registerScrollListener, unregisterScrollListener, getPostion, reRegister,
+  registerScrollListener, unregisterScrollListener, getPostion,
 } from 'src/tools/window-scroller'
 import { shortID } from 'src/tools/is'
 import clsx from 'clsx'