Skip to content

Commit

Permalink
Add playwright for more comprehensive testing (#556)
Browse files Browse the repository at this point in the history
  • Loading branch information
jalal246 authored Jun 11, 2022
1 parent 284614d commit d959d41
Show file tree
Hide file tree
Showing 14 changed files with 813 additions and 913 deletions.
1 change: 1 addition & 0 deletions .github/CODEOWNERS
Validating CODEOWNERS rules …
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
* @jalal246
169 changes: 167 additions & 2 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -281,18 +281,183 @@ jobs:
- name: Testing features for DnD with React APP - Chrome
run: pnpm test-e2e-multi:chrome

e2e-linux:
runs-on: ubuntu-latest
timeout-minutes: 12
if: github.event.pull_request.draft != true
strategy:
matrix:
node-version: [16.8]
browser: ["chromium", "firefox"]
env:
CI: true
steps:
- name: Checkout
uses: actions/checkout@v3

- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}

- uses: pnpm/[email protected]
name: Install pnpm
id: pnpm-install
with:
version: ^7.0.0
run_install: false

- name: Get pnpm store directory
id: pnpm-cache
run: |
echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
- uses: actions/cache@v3
name: Setup pnpm cache
with:
path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-store-
- name: Install dependencies
run: pnpm install

- name: Build packages
run: "pnpm clean && pnpm -r emit && pnpm build --production --release --minify"

- name: Build DnD React App
run: pnpm -F dflex-dnd-playground build

- name: Install Playwright
run: pnpm dlx playwright install --with-deps

- name: Test Playwright
run: pnpm run test-e2e-core-ci:${{ matrix.browser }}

e2e-windows:
runs-on: windows-latest
timeout-minutes: 12
if: github.event.pull_request.draft != true
strategy:
matrix:
node-version: [16.8]
browser: ["chromium", "firefox"]
env:
CI: true
steps:
- name: Checkout
uses: actions/checkout@v3

- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}

- uses: pnpm/[email protected]
name: Install pnpm
id: pnpm-install
with:
version: ^7.0.0
run_install: false

- name: Get pnpm store directory
id: pnpm-cache
run: |
echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
- uses: actions/cache@v3
name: Setup pnpm cache
with:
path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-store-
- name: Install dependencies
run: pnpm install

- name: Build packages
run: "pnpm clean && pnpm -r emit && pnpm build --production --release --minify"

- name: Build DnD React App
run: pnpm -F dflex-dnd-playground build

- name: Install Playwright
run: pnpm dlx playwright install --with-deps

- name: Test Playwright
run: pnpm run test-e2e-core-ci:${{ matrix.browser }}

e2e-mac:
runs-on: macos-latest
timeout-minutes: 12
if: github.event.pull_request.draft != true
strategy:
matrix:
node-version: [16.8]
browser: ["chromium", "firefox", "webkit"]
env:
CI: true
steps:
- name: Checkout
uses: actions/checkout@v3

- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}

- uses: pnpm/[email protected]
name: Install pnpm
id: pnpm-install
with:
version: ^7.0.0
run_install: false

- name: Get pnpm store directory
id: pnpm-cache
run: |
echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
- uses: actions/cache@v3
name: Setup pnpm cache
with:
path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-store-
- name: Install dependencies
run: pnpm install

- name: Build packages
run: "pnpm clean && pnpm -r emit && pnpm build --production --release --minify"

- name: Build DnD React App
run: pnpm -F dflex-dnd-playground build

- name: Install Playwright
run: pnpm dlx playwright install --with-deps

- name: Test Playwright
run: pnpm run test-e2e-core-ci:${{ matrix.browser }}

release:
name: Publish to NPM
if: ${{ github.ref_name == 'main' && github.repository_owner == 'dflex-js' }}
runs-on: ubuntu-latest
needs: [
needs:
[
lint,
unit-test,
types,
install-build,
e2e-same-container-vertical,
# e2e-same-container-horizontal,
e2e-multi-containers,
e2e-mac,
e2e-windows,
e2e-linux,
]
steps:
- name: Check out repository
Expand Down
37 changes: 16 additions & 21 deletions docs/drag-drop/api.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
---
title: Drag and Drop API
description: "DFlex drag and drop installation and API."
title: DFlex Drag and Drop API
description: "DFlex Drag and Drop API."
---

> A Simple, lightweight Solution for a Drag & Drop interactive App.
## Installation

```bash
Expand All @@ -13,7 +11,7 @@ npm install @dflex/dnd

## API

You can achieve a drag and drop with three steps only:
DFlex depends on three principles to achieve DOM interactivity:

- Register element in the store.
- Start dragging when mouse is down.
Expand All @@ -25,29 +23,25 @@ import { store, DnD } from "@dflex/dnd";

### Register element

Each element should be registered in DnD store in order to be active for Drag
Each element should be registered in DnD store in order to be active for drag
and drop later.

```ts
store.register(RegisterInput);
store.register(RegisterInputOpts);
```

Where `RegisterInput` is an object with the following properties:
Where `RegisterInputOpts` is an object with the following properties:

- `id?: string` is a unique identifier for an element in the registry. Duplicate
ids will cause confusion and prevent DnD from working properly.
- `parentID?: string` is the parent element id. If you have multiple lists in
the same layout you should provide the parent id so the registry can
distinguish between elements.
- `ref?: HTMLElement` targeted DOM element. Should be provided if you haven't
provided the id.
- `depth?: number` Element depth in tree. Start from bottom up. So the child is `0`
by default. Depth is necessary for nested elements.
- `id: string` Targeted element-id.
- `parentID: string` Parent element-id. Pass empty string if there's none.
- `depth?: number` The depth of targeted element starting from zero (The default value is zero).
- `readonly?: boolean` True for elements that won't be transformed during DnD
but belongs to the same interactive container.

### Create responsive DnD event

The responsive drag and drop event should be created when `onmousedown` is fired. So you
initialized the element and its siblings before start dragging.
The responsive drag and drop event should be created when `onmousedown` is
fired. So it can initialize the element and its siblings before start dragging.

```ts
const dndEvent = new DnD(id, clickCoordinates, opts);
Expand All @@ -56,7 +50,7 @@ const dndEvent = new DnD(id, clickCoordinates, opts);
- `id: string` registered element-id in the store.
- `clickCoordinates` is an object with `{x: number, y: number}` contains the coordinates of the
mouse/touch click.
- `opts` is DnD options object. You can see [options full documentation by
- `opts?` is DnD options object. You can see [options full documentation by
clicking here.](/docs/drag-drop/api/#options)

### Start responsive dragging
Expand Down Expand Up @@ -87,7 +81,8 @@ store.unregister(id);

## Options

You can pass options when creating DnD event that controls each element individually.
You can pass options when creating DnD event that controls each element
individually. So your options can be different for each element.

### Dragging Threshold

Expand Down
36 changes: 23 additions & 13 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,26 @@
"author": "Jalal Maskoun",
"scripts": {
"start": "cross-env NODE_ENV=development pnpm -F dflex-dnd-playground dev",
"start:draggable-only": "cross-env NODE_ENV=development pnpm -F dflex-draggable-playground dev",
"dev-cypress": "cross-env NODE_ENV=development && pnpm start-server-and-test 'pnpm run start' http-get://localhost:3001 'cypress open --env extended=true --project packages/dflex-dnd-playground'",
"serve:dnd": "pnpm -F dflex-dnd-playground preview",
"build-app": "pnpm -F dflex-dnd-playground build",
"start:cy": "cross-env NODE_ENV=development && pnpm start-server-and-test 'pnpm run start' http-get://localhost:3001 'cypress open --env extended=true --project packages/dflex-dnd-playground'",
"cy:run:vertical:chrome": "cypress run --env extended=true --project packages/dflex-dnd-playground --headless --spec 'packages/dflex-dnd-playground/cypress/e2e/same-container-vertical/**/*.cy.ts' --config-file cypress.config.ts --browser chrome",
"cy:run:multi:chrome": "cypress run --project packages/dflex-dnd-playground --headless --spec 'packages/dflex-dnd-playground/cypress/e2e/multiple-containers/**/*.cy.ts' --config-file cypress.config.ts --browser chrome",
"test-e2e-vertical:chrome": "start-server-and-test 'pnpm -F dflex-dnd-playground dev' http-get://localhost:3001 'pnpm cy:run:vertical:chrome'",
"test-e2e-multi:chrome": "start-server-and-test 'pnpm -F dflex-dnd-playground preview' http-get://localhost:3001 'pnpm cy:run:multi:chrome'",
"test-e2e-all": "pnpm build && pnpm -F dflex-dnd-playground build:app && start-server-and-test 'pnpm -F dflex-dnd-playground preview' http-get://localhost:3001 'cypress run --env extended=true --project packages/dflex-dnd-playground'",
"test-unit": "jest",
"test-e2e-core:chromium": "playwright test --project=\"chromium\"",
"test-e2e-core:firefox": "playwright test --project=\"firefox\"",
"test-e2e-core:webkit": "playwright test --project=\"webkit\"",
"test-e2e-core-ci:chromium": "start-server-and-test serve:dnd 3001 test-e2e-core:chromium",
"test-e2e-core-ci:firefox": "start-server-and-test serve:dnd 3001 test-e2e-core:firefox",
"test-e2e-core-ci:webkit": "start-server-and-test serve:dnd 3001 test-e2e-core:webkit",
"debug-test-e2e:chromium": "playwright test --debug --project=\"chromium\"",
"debug-test-e2e:firefox": "playwright test --debug --project=\"firefox\"",
"debug-test-e2e:webkit": "playwright test --debug --project=\"webkit\"",
"clean": "pnpm -r --parallel clean",
"build": "node scripts/build/index.js",
"build-app": "pnpm -F dflex-dnd-playground build",
"build-prod": "pnpm clean && pnpm -r emit && pnpm build -- --production --release --minify",
"check-types": "tsc --noEmit",
"emit-types": "pnpm -r emit",
Expand All @@ -30,29 +39,30 @@
"update-version": "pnpm changeset version && pnpm install"
},
"devDependencies": {
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-router-dom": "^6.3.0",
"@changesets/cli": "^2.22.0",
"@playwright/test": "^1.22.2",
"@types/jest": "^28.1.0",
"@types/node": "^17.0.39",
"@types/react": "^18.0.10",
"@types/react-dom": "^18.0.5",
"@types/react-router-dom": "^5.3.3",
"@types/jest": "^28.1.0",
"@types/node": "^17.0.39",
"ts-jest": "^28.0.4",
"@changesets/cli": "^2.22.0",
"@vitejs/plugin-react": "^1.3.2",
"cross-env": "^7.0.3",
"cypress": "^10.0.2",
"eslint-config-dflex": "workspace:*",
"istanbul-lib-instrument": "^5.2.0",
"jest": "^28.1.0",
"jest-environment-jsdom": "^28.1.0",
"prettier": "^2.6.2",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-router-dom": "^6.3.0",
"rimraf": "^3.0.2",
"start-server-and-test": "^1.14.0",
"ts-jest": "^28.0.4",
"ts-node": "^10.8.1",
"typescript": "^4.7.3",
"@vitejs/plugin-react": "^1.3.2",
"vite-plugin-replace": "^0.1.1",
"vite": "^2.9.9"
"vite": "^2.9.9",
"vite-plugin-replace": "^0.1.1"
}
}
Loading

0 comments on commit d959d41

Please sign in to comment.