add e2e

.github/workflows/e2e.yaml

@@ -1,56 +1,40 @@
 name: e2e
 on:
   push:
-    # pending
-    branches-ignore:
-      - '**'
 
 jobs:
-  build-storybook:
+  run-e2e-tests:
     runs-on: ubuntu-latest
-
+    
     steps:
       - uses: actions/checkout@v3
-      - name: setup
+      - name: setup python
+        uses: actions/setup-python@v4
+        with:
+          python-version: "3.12"
+      - name: setup node
         uses: actions/setup-node@v3
         with:
           node-version: "16"
+
       - name: cache
         uses: actions/cache@v3
         with:
           path: |
             node_modules
           key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
-      - name: build
+
+      - name: install
         run: |
           yarn install
-          yarn run build-storybook
-      - name: upload storybook
-        uses: actions/upload-artifact@v3
-        with:
-          name: storybook
-          path: ${{ github.workspace }}/storybook-static
-          retention-days: 1
+          npx playwright install --with-deps
+
+      - name: build
+        run: yarn run build-storybook
+
+      - name: run server
+        run: |
+          python -m http.server 5233 --directory "${{ github.workspace }}/storybook-static" &
 
-  run-e2e-tests:
-    needs: [build-storybook]
-    runs-on: ubuntu-latest
-    services:
-      nginx:
-        image: nginx:1.23.2
-        ports:
-          - 5233:80
-        volumes:
-          - ${{ github.workspace }}/storybook-static:/usr/share/nginx/html/
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/download-artifact@v3
-        id: storybook
-        with:
-          name: storybook
-          path: ${{ github.workspace }}/storybook-static
-      - run: chmod -R 777 ${{ github.workspace }}/storybook-static/
       - name: test
-        run: ls -l storybook-static
-      - name: test2
-        run: curl http://localhost:5233/?path=/story/basic--small
+        run: yarn e2e

.github/workflows/unittest.yaml

@@ -22,4 +22,4 @@ jobs:
           yarn install
       - name: test
         run: |
-          yarn test
+          yarn jest

.gitignore

@@ -107,3 +107,6 @@ typings/
 stories/
 storybook-static/
 .idea
+
+# Playwright
+test-results/

.npmignore

@@ -0,0 +1 @@
+*.spec.ts

.storybook/examples/basic/sheets.stories.tsx

@@ -40,7 +40,7 @@ const Sheets = ({ numRows, numCols, defaultWidth }: Props) => {
           ensured: { numRows, numCols },
         })}
       />
-      <input value={sheet1} onChange={(e) => setSheet1(e.target.value)} />
+      <input id="input1" value={sheet1} onChange={(e) => setSheet1(e.target.value)} />
       <hr />
       <GridSheet
         sheetName={sheet2}
@@ -53,7 +53,7 @@ const Sheets = ({ numRows, numCols, defaultWidth }: Props) => {
           ensured: { numRows, numCols },
         })}
       />
-      <input value={sheet2} onChange={(e) => setSheet2(e.target.value)} />
+      <input id="input2" value={sheet2} onChange={(e) => setSheet2(e.target.value)} />
       <hr />
 
       <GridSheet
@@ -65,7 +65,7 @@ const Sheets = ({ numRows, numCols, defaultWidth }: Props) => {
           ensured: { numRows, numCols },
         })}
       />
-      <input value={sheet3} onChange={(e) => setSheet3(e.target.value)} />
+      <input id="input3" value={sheet3} onChange={(e) => setSheet3(e.target.value)} />
 
 
     </SheetProvider>

.storybook/examples/basic/size.stories.tsx

@@ -27,6 +27,9 @@ const Sheet = ({ numRows, numCols, defaultWidth }: Props) => {
         initial={generateInitial({
           cells: {
             default: { width: defaultWidth, labeler: "raw" },
+            A1: {
+              value: "A1",
+            },
             B2: {
               value: "b2",
             }

e2e/basic.spec.ts

@@ -0,0 +1,66 @@
+import { test, expect } from '@playwright/test';
+
+test('cell value', async ({ page }) => {
+  await page.goto('http://localhost:5233/iframe.html?id=basic--small&viewMode=story');
+  const b2 = page.locator("[data-address='B2']");
+  expect(await b2.locator('.gs-cell-rendered').textContent()).toContain('b2');
+
+  const b3 = page.locator("[data-address='B3']");
+  expect(await b3.locator('.gs-cell-rendered').textContent()).toBe('');
+
+  await b3.dblclick();
+  const editor = page.locator('.gs-editor textarea');
+  await editor.fill('b3');
+  await editor.blur();
+  expect(await b3.locator('.gs-cell-rendered').textContent()).toBe('b3');
+});
+
+test('pointing', async ({ page }) => {
+  await page.goto('http://localhost:5233/iframe.html?id=basic--small&viewMode=story');
+  const b2 = page.locator("[data-address='B2']");
+  await b2.click();
+
+  const address = page.locator('.gs-selecting-address');
+  expect(await address.textContent()).toBe('B2');
+
+  const largeEditor = page.locator('.gs-formula-bar textarea');
+  expect(await largeEditor.inputValue()).toBe('b2');
+
+  expect(await b2.getAttribute('class')).toContain('gs-pointed');
+
+  const hor = page.locator(".gs-header-horizontal[data-x='2']");
+  expect(await hor.getAttribute('class')).toContain('gs-pointed');
+
+  const ver = page.locator(".gs-header-vertical[data-y='2']");
+  expect(await ver.getAttribute('class')).toContain('gs-pointed');
+
+  const b3 = page.locator("[data-address='B3']");
+  expect(await b3.getAttribute('class')).not.toContain('gs-pointed');
+
+});
+
+test('walk', async ({ page }) => {
+  await page.goto('http://localhost:5233/iframe.html?id=basic--small&viewMode=story');
+  const a1 = page.locator("[data-address='A1']");
+  await a1.click();
+
+  const address = page.locator('.gs-selecting-address');
+  expect(await address.textContent()).toBe('A1');
+  const editor = page.locator('.gs-editor textarea');
+  await editor.press('ArrowDown');
+  expect(await address.textContent()).toBe('A2');
+  await editor.press('Enter'); // editing
+  await editor.press('Enter'); // commit
+  expect(await address.textContent()).toBe('A3');
+  await editor.press('Tab');
+  expect(await address.textContent()).toBe('B3');
+  await editor.press('ArrowRight');
+  expect(await address.textContent()).toBe('C3');
+  await editor.press('ArrowRight');
+  expect(await address.textContent()).toBe('C3');
+  await editor.press('ArrowUp');
+  expect(await address.textContent()).toBe('C2');
+  await editor.press('ArrowLeft');
+  expect(await address.textContent()).toBe('B2');
+});
+

e2e/formula.spec.ts

@@ -0,0 +1,43 @@
+import { test, expect } from '@playwright/test';
+
+test('render', async ({ page }) => {
+  await page.goto('http://localhost:5233/iframe.html?id=sheets--multiple-sheet&viewMode=story');
+  const sheet1 = page.locator('[data-sheet-name="Sheet1"]');
+  const a11 = sheet1.locator("[data-address='A1']");
+  const a21 = sheet1.locator("[data-address='A2']");
+  const a31 = sheet1.locator("[data-address='A3']");
+  const b11 = sheet1.locator("[data-address='B1']");
+
+  expect(await a11.locator('.gs-cell-rendered').textContent()).toBe('150');
+  expect(await a21.locator('.gs-cell-rendered').textContent()).toBe('1230');
+  expect(await a31.locator('.gs-cell-rendered').textContent()).toBe('1555');
+  expect(await b11.locator('.gs-cell-rendered').textContent()).toBe('#REF!');
+
+  // raw A1
+  const largeEditor1 = sheet1.locator('.gs-formula-bar textarea');
+  expect(await largeEditor1.inputValue()).toBe('=Sheet2!A1+100');
+
+  // update sheet2
+  const sheet2 = page.locator('[data-sheet-name="Sheet2"]');
+  const editor2 = sheet2.locator('.gs-editor textarea');
+  const a12 = sheet2.locator("[data-address='A1']");
+  await a12.dblclick();
+  await editor2.fill('500');
+  await editor2.blur();
+  expect(await a11.locator('.gs-cell-rendered').textContent()).toBe('600');
+
+  // update sheet3
+  const sheet3 = page.locator('[data-sheet-name="Sheet 3"]');
+  const editor3 = sheet3.locator('.gs-editor textarea');
+  const a13 = sheet3.locator("[data-address='A1']");
+  await a13.dblclick();
+  await editor3.fill('777');
+  await editor3.blur();
+  expect(await a31.locator('.gs-cell-rendered').textContent()).toBe('1777');
+
+  const input3 = page.locator('#input3');
+  await input3.fill('Sheet 3a');
+
+  await a31.click();
+  expect(await largeEditor1.inputValue()).toBe("='Sheet 3a'!A1 + 1000");
+});

e2e/playwright.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  use: {
+    trace: 'on-first-retry',
+    video: 'on',
+    launchOptions: {
+      slowMo: 200,
+    },
+  },
+  timeout: 100000,
+});

package.json

@@ -5,13 +5,16 @@
   "main": "dist/index.js",
   "module": "dist/index.js",
   "scripts": {
-    "test": "jest",
     "build": "rm -rf ./dist || true && tsc --project ./src/index.ts -p ./tsconfig.json",
     "audit-fix": "yarn-audit-fix --force",
     "storybook": "start-storybook -p 5233",
     "build-storybook": "build-storybook",
     "less": "lessc --clean-css ./src/styles/root.less ./src/styles/root.min.css",
-    "generate-style": "node ./generate-style.js"
+    "generate-style": "node ./generate-style.js",
+    "playwright": "npx playwright test --ui",
+    "e2e": "cd e2e && npx playwright test -c playwright.config.ts",
+    "jest": "jest",
+    "test": "yarn jest && yarn e2e"
   },
   "repository": {
     "type": "git",
@@ -35,12 +38,12 @@
   },
   "homepage": "https://docs.walkframe.com/products/gridsheet/react",
   "devDependencies": {
-    "babel-loader": "^8.2.2",
     "@babel/cli": "^7.14.3",
     "@babel/core": "^7.14.3",
     "@babel/preset-env": "^7.14.4",
     "@babel/preset-react": "^7.13.13",
     "@babel/preset-typescript": "^7.13.0",
+    "@playwright/test": "^1.41.1",
     "@storybook/addon-essentials": "^6.5.12",
     "@storybook/addon-links": "^6.5.12",
     "@storybook/react": "^6.5.12",
@@ -49,13 +52,15 @@
     "@types/storybook__react": "^5.2.1",
     "@typescript-eslint/eslint-plugin": "^4.14.2",
     "@typescript-eslint/parser": "^4.14.2",
+    "babel-loader": "^8.2.2",
     "eslint": "^7.19.0",
     "eslint-config-prettier": "^7.2.0",
     "eslint-plugin-prettier": "^3.3.1",
     "jest": "^29.4.3",
     "jest-environment-jsdom": "^29.4.3",
     "less": "^4.1.3",
     "less-plugin-clean-css": "^1.5.1",
+    "playwright": "^1.41.1",
     "prettier": "2.2.1",
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0",
@@ -65,8 +70,8 @@
     "ts-jest": "^29.0.5",
     "ts-node": "^10.9.1",
     "typescript": "^4.0.3",
-    "yarn-audit-fix": "^9.3.6",
-    "webpack-cli": "^4.7.0"
+    "webpack-cli": "^4.7.0",
+    "yarn-audit-fix": "^9.3.6"
   },
   "peerDependencies": {
     "react": ">=16.9.0",

src/components/FormulaBar.tsx

@@ -35,7 +35,7 @@ export const FormulaBar: React.FC<Props> = ({width}) => {
     editorRef.current!.focus();
   }
 
-  return <label className="gs-large-editor" style={{width}}>
+  return <label className="gs-formula-bar" style={{width}}>
     <div className="gs-selecting-address">{address}</div>
     <div className="gs-fx" style={{
       height: largeEditorRef.current?.scrollHeight || 0,

src/components/GridSheet.tsx

@@ -172,6 +172,7 @@ export const GridSheet: React.FC<Props> = ({
       <div 
         className={`gridsheet-1 ${mode || "light"}`}
         style={{width: sheetWidth}}
+        data-sheet-name={sheetName}
       >
         {showFormulaBar && <FormulaBar width={sheetWidth}/> }
         <div

src/components/HorizontalHeaderCell.tsx

@@ -37,7 +37,8 @@ export const HorizontalHeaderCell: React.FC<Props> = React.memo(
 
     return (
       <th
-        className={`gs-header gs-header-horizontal gs-header-top ${choosing.x === x ? "gs-choosing" : ""
+        data-x={x}
+        className={`gs-header gs-header-horizontal gs-header-top ${choosing.x === x ? "gs-pointed" : ""
         } ${
         between({ start: selectingZone.startX, end: selectingZone.endX }, x)
           ? verticalHeaderSelecting

src/components/VerticalHeaderCell.tsx

@@ -37,7 +37,8 @@ export const VerticalHeaderCell: React.FC<Props> = React.memo(
 
     return (
       <th
-        className={`gs-header gs-header-vertical gs-header-left ${choosing.y === y ? "gs-choosing" : ""
+        data-y={y}
+        className={`gs-header gs-header-vertical gs-header-left ${choosing.y === y ? "gs-pointed" : ""
         } ${
           between({ start: selectingZone.startY, end: selectingZone.endY }, y)
             ? horizontalheaderSelecting

src/formula/evaluator.ts

@@ -80,8 +80,7 @@ export class Ref extends Entity {
     if (this.value.indexOf("!") !== -1) {
       const [rawSheetName, ref] = this.value.split("!");
       const sheetName = stripSheetName(rawSheetName);
-      const sheetId = table.sheets[sheetName];
-      return { table: table.tables[sheetId], ref: ref.toUpperCase(), sheetName };
+      return { table: table.getTableBySheetName(sheetName), ref: ref.toUpperCase(), sheetName };
     }
     return { table, ref: this.value.toUpperCase(), sheetName: stripSheetName(table.sheetName) };
   }
@@ -123,8 +122,7 @@ export class Range extends Entity<string> {
         refs.push(rawRef.toUpperCase());
         if (i === 0) {
           sheetName = stripSheetName(rawSheetName);
-          const sheetId = table.sheets[sheetName];
-          table = table.tables[sheetId];
+          table = table.getTableBySheetName(sheetName);
         }
         if (table == null) {
           return { table, refs, sheetName };

src/lib/table.ts

@@ -110,6 +110,7 @@ export interface UserTable {
   getObject(args?: GetProps): CellsByAddressType;
   getRows(args?: GetProps): CellsByAddressType[];
   getCols(args?: GetProps): CellsByAddressType[];
+  getTableBySheetName(sheetName: string): UserTable;
   move(args: MoveProps): UserTable;
   copy(args: MoveProps): UserTable;
   update(args: {
@@ -251,6 +252,11 @@ export class Table implements UserTable {
     this.idsToBeAbsoluted = [];
   }
 
+  public getTableBySheetName(sheetName: string) {
+    const sheetId = this.sheets[sheetName];
+    return this.tables[sheetId];
+  }
+
   public initialize(cells: CellsByAddressType) {
     const auto = getMaxSizesFromCells(cells);
     this.area = { top: 0, left: 0, bottom: auto.numRows || 0, right: auto.numCols || 0 };

src/styles/editor.less

@@ -51,7 +51,7 @@
   }
 }
 
-.gs-large-editor {
+.gs-formula-bar {
   display: flex;
   align-items: center;
   justify-content: center;