diff --git a/.eslintignore b/.eslintignore
index a11511b7ca..9d8891de0f 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,2 +1,3 @@
dist/**
.github/**
+docs/Setup.md
diff --git a/.eslintrc.json b/.eslintrc.json
index 7f25c4ec73..dc5adb6f2e 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -13,17 +13,25 @@
},
"sourceType": "module"
},
- "extends": ["eslint:recommended", "plugin:jsdoc/recommended", "plugin:markdown/recommended", "plugin:prettier/recommended"],
- "plugins": ["html", "jest", "jsdoc", "prettier"],
+ "extends": [
+ "eslint:recommended",
+ //"plugin:jsdoc/recommended",
+ "plugin:json/recommended",
+ // "plugin:markdown/recommended",
+ "plugin:prettier/recommended"
+ ],
+ "plugins": ["html", "jest", "jsdoc", "json", "prettier"],
"rules": {
- "no-prototype-builtins": 0,
- "no-unused-vars": 0,
- "jsdoc/check-indentation": 0,
- "jsdoc/check-alignment": 0,
- "jsdoc/check-line-alignment": 0,
- "jsdoc/multiline-blocks": 0,
- "jsdoc/newline-after-description": 0,
- "jsdoc/tag-lines": 0,
+ "no-prototype-builtins": "off",
+ "no-unused-vars": "off",
+ "jsdoc/check-indentation": "off",
+ "jsdoc/check-alignment": "off",
+ "jsdoc/check-line-alignment": "off",
+ "jsdoc/multiline-blocks": "off",
+ "jsdoc/newline-after-description": "off",
+ "jsdoc/tag-lines": "off",
+ "cypress/no-async-tests": "off",
+ "json/*": ["error", "allowComments"],
"no-empty": ["error", { "allowEmptyCatch": true }]
},
"overrides": [
@@ -33,6 +41,12 @@
"no-undef": "off",
"jsdoc/require-jsdoc": "off"
}
+ },
+ {
+ "files": "./**/*.md/*.html",
+ "rules": {
+ "prettier/prettier": "off"
+ }
}
]
}
diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000000..176a458f94
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1 @@
+* text=auto
diff --git a/.github/codeql/codeql-config.yml b/.github/codeql/codeql-config.yml
new file mode 100644
index 0000000000..66909e1dfe
--- /dev/null
+++ b/.github/codeql/codeql-config.yml
@@ -0,0 +1,4 @@
+name: "CodeQL config"
+paths-ignore:
+ - dist
+ - cypress
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 3f8b998075..72495c4e91 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -1,6 +1,15 @@
name: Build
-on: [push, pull_request]
+on:
+ push: {}
+ pull_request:
+ types:
+ - opened
+ - synchronize
+ - ready_for_review
+
+permissions:
+ contents: read
jobs:
build:
@@ -30,29 +39,7 @@ jobs:
run: yarn build
- name: Upload Build as Artifact
- uses: actions/upload-artifact@v2
+ uses: actions/upload-artifact@v3
with:
name: dist
path: dist
-
- - name: Run Unit Tests
- run: |
- yarn test --coverage
-
- #- name: Upload Test Results
- # uses: coverallsapp/github-action@v1.0.1
- # with:
- # github-token: ${{ secrets.GITHUB_TOKEN }}
- # parallel: true
-
- # - name: Run E2E Tests
- # run: yarn e2e
- # env:
- # PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
- # CYPRESS_CACHE_FOLDER: .cache/Cypress
-
- #- name: Post Upload Test Results
- # uses: coverallsapp/github-action@master
- # with:
- # github-token: ${{ secrets.GITHUB_TOKEN }}
- # parallel-finished: true
diff --git a/.github/workflows/check-readme-in-sync.yml b/.github/workflows/check-readme-in-sync.yml
index 28a82a29a2..13912e5b9f 100644
--- a/.github/workflows/check-readme-in-sync.yml
+++ b/.github/workflows/check-readme-in-sync.yml
@@ -10,6 +10,9 @@ on:
branches:
- gh-pages
+permissions:
+ contents: read
+
jobs:
check:
runs-on: ubuntu-latest
diff --git a/.github/workflows/checks b/.github/workflows/checks.yml
similarity index 65%
rename from .github/workflows/checks
rename to .github/workflows/checks.yml
index 2022118020..e4d82e2d19 100644
--- a/.github/workflows/checks
+++ b/.github/workflows/checks.yml
@@ -1,4 +1,10 @@
-on: [push]
+on:
+ push: {}
+ pull_request:
+ types:
+ - opened
+ - synchronize
+ - ready_for_review
name: Static analysis
@@ -13,7 +19,6 @@ jobs:
- uses: testomatio/check-tests@stable
with:
framework: cypress
- tests: "./cypress/integration/**/**.spec.js"
+ tests: "./cypress/e2e/**/**.spec.js"
token: ${{ secrets.GITHUB_TOKEN }}
has-tests-label: true
-
diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml
new file mode 100644
index 0000000000..2db07ad77a
--- /dev/null
+++ b/.github/workflows/codeql.yml
@@ -0,0 +1,63 @@
+
+name: "CodeQL"
+
+on:
+ push:
+ branches: [ develop ]
+ pull_request:
+ # The branches below must be a subset of the branches above
+ branches: [ develop ]
+ types:
+ - opened
+ - synchronize
+ - ready_for_review
+
+jobs:
+ analyze:
+ name: Analyze
+ runs-on: ubuntu-latest
+ permissions:
+ actions: read
+ contents: read
+ security-events: write
+
+ strategy:
+ fail-fast: false
+ matrix:
+ language: [ 'javascript' ]
+ # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
+ # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
+
+ steps:
+ - name: Checkout repository
+ uses: actions/checkout@v3
+
+ # Initializes the CodeQL tools for scanning.
+ - name: Initialize CodeQL
+ uses: github/codeql-action/init@v2
+ with:
+ config-file: ./.github/codeql/codeql-config.yml
+ languages: ${{ matrix.language }}
+ # If you wish to specify custom queries, you can do so here or in a config file.
+ # By default, queries listed here will override any specified in a config file.
+ # Prefix the list here with "+" to use these queries and those in the config file.
+ # queries: ./path/to/local/query, your-org/your-repo/queries@main
+
+ # Autobuild attempts to build any compiled languages (C/C++, C#, or Java).
+ # If this step fails, then you should remove it and run the build manually (see below)
+ - name: Autobuild
+ uses: github/codeql-action/autobuild@v2
+
+ # ℹ️ Command-line programs to run using the OS shell.
+ # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+
+ # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+ # and modify them (or add more) to build your code if your project
+ # uses a compiled language
+
+ #- run: |
+ # make bootstrap
+ # make release
+
+ - name: Perform CodeQL Analysis
+ uses: github/codeql-action/analyze@v2
diff --git a/.github/workflows/dependency-review.yml b/.github/workflows/dependency-review.yml
new file mode 100644
index 0000000000..0e72a00efc
--- /dev/null
+++ b/.github/workflows/dependency-review.yml
@@ -0,0 +1,20 @@
+# Dependency Review Action
+#
+# This Action will scan dependency manifest files that change as part of a Pull Reqest, surfacing known-vulnerable versions of the packages declared or updated in the PR. Once installed, if the workflow run is marked as required, PRs introducing known-vulnerable packages will be blocked from merging.
+#
+# Source repository: https://github.com/actions/dependency-review-action
+# Public documentation: https://docs.github.com/en/code-security/supply-chain-security/understanding-your-software-supply-chain/about-dependency-review#dependency-review-enforcement
+name: 'Dependency Review'
+on: [pull_request]
+
+permissions:
+ contents: read
+
+jobs:
+ dependency-review:
+ runs-on: ubuntu-latest
+ steps:
+ - name: 'Checkout Repository'
+ uses: actions/checkout@v3
+ - name: 'Dependency Review'
+ uses: actions/dependency-review-action@v1
diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e
similarity index 59%
rename from .github/workflows/e2e.yml
rename to .github/workflows/e2e
index 58f3a6dd87..5b716e429e 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e
@@ -2,6 +2,9 @@ name: E2E
on: [push, pull_request]
+permissions:
+ contents: read
+
jobs:
build:
runs-on: ubuntu-latest
@@ -29,24 +32,7 @@ jobs:
- name: Run Build
run: yarn build
- # - name: Run e2e Tests
- # run: |
- # yarn e2e
-
- #- name: Upload Test Results
- # uses: coverallsapp/github-action@v1.0.1
- # with:
- # github-token: ${{ secrets.GITHUB_TOKEN }}
- # parallel: true
-
- name: Run E2E Tests
run: yarn e2e
env:
- PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
CYPRESS_CACHE_FOLDER: .cache/Cypress
-
- #- name: Post Upload Test Results
- # uses: coverallsapp/github-action@master
- # with:
- # github-token: ${{ secrets.GITHUB_TOKEN }}
- # parallel-finished: true
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
new file mode 100644
index 0000000000..050667a8f8
--- /dev/null
+++ b/.github/workflows/lint.yml
@@ -0,0 +1,39 @@
+name: Lint
+
+on:
+ push: {}
+ pull_request:
+ types:
+ - opened
+ - synchronize
+ - ready_for_review
+
+permissions:
+ contents: read
+
+jobs:
+ lint:
+ runs-on: ubuntu-latest
+ strategy:
+ matrix:
+ node-version: [16.x]
+ steps:
+ - uses: actions/checkout@v3
+
+ - name: Setup Node.js ${{ matrix.node-version }}
+ uses: actions/setup-node@v3
+ with:
+ cache: yarn
+ node-version: ${{ matrix.node-version }}
+
+ - name: Install Yarn
+ run: npm i yarn --global
+
+ - name: Install Packages
+ run: |
+ yarn install --frozen-lockfile
+ env:
+ CYPRESS_CACHE_FOLDER: .cache/Cypress
+
+ - name: Run Linting
+ run: yarn lint
diff --git a/.github/workflows/pr-labeler-config-validator.yml b/.github/workflows/pr-labeler-config-validator.yml
index 2d3df02ff7..af5c477d64 100644
--- a/.github/workflows/pr-labeler-config-validator.yml
+++ b/.github/workflows/pr-labeler-config-validator.yml
@@ -1,5 +1,11 @@
name: Validate PR Labeler Configuration
-on: [push, pull_request]
+on:
+ push: {}
+ pull_request:
+ types:
+ - opened
+ - synchronize
+ - ready_for_review
jobs:
pr-labeler:
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
new file mode 100644
index 0000000000..c91f286bc8
--- /dev/null
+++ b/.github/workflows/test.yml
@@ -0,0 +1,34 @@
+name: Unit Tests
+
+on: [push, pull_request]
+
+permissions:
+ contents: read
+
+jobs:
+ build:
+ runs-on: ubuntu-latest
+ strategy:
+ matrix:
+ node-version: [16.x]
+ steps:
+ - uses: actions/checkout@v3
+
+ - name: Setup Node.js ${{ matrix.node-version }}
+ uses: actions/setup-node@v3
+ with:
+ cache: yarn
+ node-version: ${{ matrix.node-version }}
+
+ - name: Install Yarn
+ run: npm i yarn --global
+
+ - name: Install Packages
+ run: |
+ yarn install --frozen-lockfile
+ env:
+ CYPRESS_CACHE_FOLDER: .cache/Cypress
+
+ - name: Run Unit Tests
+ run: |
+ yarn ci --coverage
diff --git a/.husky/commit-msg b/.husky/commit-msg
old mode 100644
new mode 100755
diff --git a/.husky/pre-commit b/.husky/pre-commit
old mode 100644
new mode 100755
diff --git a/.lintstagedrc.json b/.lintstagedrc.json
index f42adf44f9..555f78ddbb 100644
--- a/.lintstagedrc.json
+++ b/.lintstagedrc.json
@@ -1,5 +1,5 @@
{
- "*.{js,html,md}": [
+ "*.{js,json,html,md}": [
"yarn lint:fix"
]
}
\ No newline at end of file
diff --git a/.tern-project b/.tern-project
index 3245a609c9..a7a55ab0c2 100644
--- a/.tern-project
+++ b/.tern-project
@@ -3,12 +3,9 @@
"libs": [
"browser"
],
- "loadEagerly": [
- "path/to/your/js/**/*.js"
- ],
+ "loadEagerly": [],
"dontLoad": [
- "node_modules/**",
- "path/to/your/js/**/*.js"
+ "node_modules/**"
],
"plugins": {
"modules": {},
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 76496f076f..db6be90649 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,7 +23,7 @@
- Missing fontawesome icon support [\#830](https://github.com/knsv/mermaid/issues/830)
- Docs for integration with wiki.js? [\#829](https://github.com/knsv/mermaid/issues/829)
- Is this project still maintained? [\#826](https://github.com/knsv/mermaid/issues/826)
-- typroa [\#823](https://github.com/knsv/mermaid/issues/823)
+- typora [\#823](https://github.com/knsv/mermaid/issues/823)
- Maintain the order of the nodes in Flowchart [\#815](https://github.com/knsv/mermaid/issues/815)
- Overlap, Overflow and cut titles in flowchart [\#814](https://github.com/knsv/mermaid/issues/814)
- How load mermaidApi notejs electron [\#813](https://github.com/knsv/mermaid/issues/813)
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index e0a5ffde7a..c92f8d5730 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -2,7 +2,7 @@
So you want to help? That's great!
-
+
Here are a few things to know to get you started on the right path.
@@ -76,7 +76,7 @@ This is important so that, if someone else does a change to the grammar that doe
### **Add e2e tests**
-This tests the rendering and visual apearance of the diagram. This ensures that the rendering of that feature in the e2e will be reviewed in the release process going forward. Less chance that it breaks!
+This tests the rendering and visual appearance of the diagram. This ensures that the rendering of that feature in the e2e will be reviewed in the release process going forward. Less chance that it breaks!
To start working with the e2e tests, run `yarn dev` to start the dev server, after that start cypress by running `cypress open` in the mermaid folder. (Make sure you have path to cypress in order, the binary is located in node_modules/.bin).
@@ -114,7 +114,7 @@ Finally, if it is not in the documentation, no one will know about it and then *
The docs are located in the docs folder and are ofc written in markdown. Just pick the right section and start typing. If you want to add to the structure as in adding a new section and new file you do that via the _navbar.md.
-The changes in master is reflected in http://mermaid-js.github.io/mermaid/ once released the updates are committed to https://mermaid-js.github.io/#/
+The changes in master is reflected in https://mermaid-js.github.io/mermaid/ once released the updates are committed to https://mermaid-js.github.io/#/
## Last words
@@ -123,4 +123,4 @@ Don't get daunted if it is hard in the beginning. We have a great community with
[Join our slack community if you want closer contact!](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
-
+
diff --git a/README.md b/README.md
index e9645dcccb..5c2eefa8ce 100644
--- a/README.md
+++ b/README.md
@@ -2,13 +2,15 @@
English | [简体中文](./README.zh-CN.md)
-
+
:trophy: **Mermaid was nominated and won the [JS Open Source Awards (2019)](https://osawards.com/javascript/2019) in the category "The most exciting use of technology"!!!**
+
+
**Thanks to all involved, people committing pull requests, people answering questions! 🙏**
-
+
## About
@@ -21,14 +23,27 @@ Diagramming and documentation costs precious developer time and gets outdated qu
But not having diagrams or docs ruins productivity and hurts organizational learning.
Mermaid addresses this problem by enabling users to create easily modifiable diagrams, it can also be made part of production scripts (and other pieces of code).
-Mermaid allows even non-programmers to easily create detailed and diagrams through the [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor/).
+
+Mermaid allows even non-programmers to easily create detailed diagrams through the [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor/).
[Tutorials](./docs/Tutorials.md) has video tutorials.
Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/integrations.md).
-For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./docs/n00b-overview.md) and [Usage](./docs/usage.md).
+You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) as well many of your other favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/integrations.md).
+
+For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./docs/n00b-overview.md), [Usage](./docs/usage.md) and [Tutorials](./docs/Tutorials.md).
🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | 📜 [Changelog](./docs/CHANGELOG.md)
+
+
+In our release process we rely heavily on visual regression tests using [applitools](https://applitools.com/). Applitools is a great service which has been easy to use and integrate with our tests.
+
+
+
+
+
+
+
## Examples
@@ -36,10 +51,11 @@ For a more detailed introduction to Mermaid and some of its more basic uses, loo
__The following are some examples of the diagrams, charts and graphs that can be made using Mermaid. Click here jump into the [text syntax](https://mermaid-js.github.io/mermaid/#/n00b-syntaxReference).__
-## Flowchart [docs - live editor]
+### Flowchart [docs - live editor]
```
flowchart LR
+
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
@@ -47,6 +63,7 @@ C -->|Two| E[Result 2]
```
```mermaid
flowchart LR
+
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
@@ -54,7 +71,7 @@ C -->|Two| E[Result 2]
```
-## Sequence diagram [docs - live editor]
+### Sequence diagram [docs - live editor]
```
sequenceDiagram
@@ -79,7 +96,7 @@ John->>Bob: How about you?
Bob-->>John: Jolly good!
```
-## Gantt chart [docs - live editor]
+### Gantt chart [docs - live editor]
```
gantt
@@ -102,7 +119,7 @@ gantt
Parallel 4 : des6, after des4, 1d
```
-## Class diagram [docs - live editor]
+### Class diagram [docs - live editor]
```
classDiagram
@@ -141,7 +158,7 @@ class Class10 {
}
```
-## State diagram [docs - live editor]
+### State diagram [docs - live editor]
```
stateDiagram-v2
[*] --> Still
@@ -176,9 +193,9 @@ pie
"Rats" : 15
```
-## Git graph [experimental - live editor]
+### Git graph [experimental - live editor]
-## User Journey diagram [docs - live editor]
+### User Journey diagram [docs - live editor]
```
journey
title My working day
@@ -202,7 +219,7 @@ pie
Sit down: 3: Me
```
-### Release
+## Release
For those who have the permission to do so:
diff --git a/README.zh-CN.md b/README.zh-CN.md
index 33212e3b5b..63a3ee4aa6 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -2,13 +2,13 @@
[English](./README.md) | 简体中文
-
+
:trophy: **Mermaid 被提名并获得了 [JS Open Source Awards (2019)](https://osawards.com/javascript/2019) 的 "The most exciting use of technology" 奖项!!!**
**感谢所有参与进来提交 PR，解答疑问的人们! 🙏**
-
+
## 关于 Mermaid
@@ -23,7 +23,7 @@ Mermaid 通过允许用户创建便于修改的图表来解决这一难题，它
Mermaid 甚至能让非程序员也能通过 [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor/) 轻松创建详细的图表。
你可以访问 [教程](./docs/Tutorials.md) 来查看 Live Editor 的视频教程，也可以查看 [Mermaid 的集成和使用](./docs/integrations.md) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。
-如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看 [入门指引](./docs/n00b-overview.md) and [用法](./docs/usage.md).
+如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看 [入门指引](./docs/n00b-overview.md), [用法](./docs/usage.md) 和 [教程](./docs/Tutorials.md).
🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [文档](https://mermaidjs.github.io) | 🙌 [贡献](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | 📜 [更新日志](./docs/CHANGELOG.md)
@@ -35,7 +35,7 @@ __下面是一些可以使用 Mermaid 创建的图表示例。点击 [语法](ht
-## 流程图 [文档 - live editor]
+### 流程图 [文档 - live editor]
```
flowchart LR
@@ -52,7 +52,7 @@ C -->|One| D[Result 1]
C -->|Two| E[Result 2]
```
-## 时序图 [文档 - live editor]
+### 时序图 [文档 - live editor]
```
sequenceDiagram
@@ -77,7 +77,7 @@ John->>Bob: How about you?
Bob-->>John: Jolly good!
```
-## 甘特图 [文档 - live editor]
+### 甘特图 [文档 - live editor]
```
gantt
@@ -100,7 +100,7 @@ gantt
Parallel 4 : des6, after des4, 1d
```
-## 类图 [文档 - live editor]
+### 类图 [文档 - live editor]
```
classDiagram
@@ -139,7 +139,7 @@ class Class10 {
}
```
-## 状态图 [文档 - live editor]
+### 状态图 [[docs - live editor]
```
stateDiagram-v2
@@ -160,7 +160,7 @@ Moving --> Crash
Crash --> [*]
```
-## 饼图 [文档 - live editor]
+### 饼图 [文档 - live editor]
```
pie
@@ -175,9 +175,9 @@ pie
"Rats" : 15
```
-## Git图 [实验特性 - live editor]
+### Git图 [实验特性 - live editor]
-## 用户体验旅程图 [文档 - live editor]
+### 用户体验旅程图 [文档 - live editor]
```
journey
@@ -202,7 +202,7 @@ pie
Sit down: 3: Me
```
-### 发布
+## 发布
对于有权限的同学来说，你可以通过以下步骤来完成发布操作：
diff --git a/applitools.cnfig.js b/applitools.cnfig.js
new file mode 100644
index 0000000000..900aabf2ea
--- /dev/null
+++ b/applitools.cnfig.js
@@ -0,0 +1,16 @@
+module.exports = {
+ testConcurrency: 1,
+ // browser: [
+ // // Add browsers with different viewports
+ // { width: 800, height: 600, name: 'chrome' },
+ // { width: 700, height: 500, name: 'firefox' },
+ // { width: 1600, height: 1200, name: 'ie11' },
+ // { width: 1024, height: 768, name: 'edgechromium' },
+ // { width: 800, height: 600, name: 'safari' },
+ // // Add mobile emulation devices in Portrait mode
+ // { deviceName: 'iPhone X', screenOrientation: 'portrait' },
+ // { deviceName: 'Pixel 2', screenOrientation: 'portrait' },
+ // ],
+ // // set batch name to the configuration
+ // batchName: 'Ultrafast Batch',
+};
diff --git a/cypress.config.js b/cypress.config.js
new file mode 100644
index 0000000000..044c5d5234
--- /dev/null
+++ b/cypress.config.js
@@ -0,0 +1,20 @@
+const { defineConfig } = require('cypress');
+const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin');
+require('@applitools/eyes-cypress')(module);
+
+module.exports = defineConfig({
+ e2e: {
+ specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
+ setupNodeEvents(on, config) {
+ addMatchImageSnapshotPlugin(on, config);
+ // copy any needed variables from process.env to config.env
+ config.env.useAppli = process.env.USE_APPLI ? true : false;
+ config.env.codeBranch = process.env.APPLI_BRANCH;
+
+ // do not forget to return the changed config object!
+ return config;
+ },
+ supportFile: 'cypress/support/index.js',
+ },
+ video: false,
+});
diff --git a/cypress.json b/cypress.json
deleted file mode 100644
index 5e0725b209..0000000000
--- a/cypress.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "video": false
-}
\ No newline at end of file
diff --git a/cypress/integration/other/configuration.spec.js b/cypress/e2e/other/configuration.spec.js
similarity index 100%
rename from cypress/integration/other/configuration.spec.js
rename to cypress/e2e/other/configuration.spec.js
diff --git a/cypress/integration/other/interaction.spec.js b/cypress/e2e/other/interaction.spec.js
similarity index 100%
rename from cypress/integration/other/interaction.spec.js
rename to cypress/e2e/other/interaction.spec.js
diff --git a/cypress/integration/other/rerender.spec.js b/cypress/e2e/other/rerender.spec.js
similarity index 100%
rename from cypress/integration/other/rerender.spec.js
rename to cypress/e2e/other/rerender.spec.js
diff --git a/cypress/integration/other/webpackUsage.spec.js b/cypress/e2e/other/webpackUsage.spec.js
similarity index 100%
rename from cypress/integration/other/webpackUsage.spec.js
rename to cypress/e2e/other/webpackUsage.spec.js
diff --git a/cypress/integration/other/xss.spec.js b/cypress/e2e/other/xss.spec.js
similarity index 91%
rename from cypress/integration/other/xss.spec.js
rename to cypress/e2e/other/xss.spec.js
index f605e98dc9..6226feaeb9 100644
--- a/cypress/integration/other/xss.spec.js
+++ b/cypress/e2e/other/xss.spec.js
@@ -115,4 +115,18 @@ describe('XSS', () => {
cy.wait(1000);
cy.get('#the-malware').should('not.exist');
});
+ it('should sanitize colons properly', () => {
+ cy.visit('http://localhost:9000/xss20.html');
+ cy.wait(1000);
+ cy.get('a').click('');
+ cy.wait(1000);
+ cy.get('#the-malware').should('not.exist');
+ });
+ it('should sanitize colons properly', () => {
+ cy.visit('http://localhost:9000/xss21.html');
+ cy.wait(1000);
+ cy.get('a').click('');
+ cy.wait(1000);
+ cy.get('#the-malware').should('not.exist');
+ });
});
diff --git a/cypress/e2e/rendering/appli.spec.js b/cypress/e2e/rendering/appli.spec.js
new file mode 100644
index 0000000000..d6a83eb8bb
--- /dev/null
+++ b/cypress/e2e/rendering/appli.spec.js
@@ -0,0 +1,59 @@
+import { imgSnapshotTest } from '../../helpers/util.js';
+
+describe('Git Graph diagram', () => {
+ it('1: should render a simple gitgraph with commit on main branch', () => {
+ imgSnapshotTest(
+ `gitGraph
+ commit id: "1"
+ commit id: "2"
+ commit id: "3"
+ `,
+ {}
+ );
+ });
+ // it(`ultraFastTest`, function () {
+ // // Navigate to the url we want to test
+ // // ⭐️ Note to see visual bugs, run the test using the above URL for the 1st run.
+ // // but then change the above URL to https://demo.applitools.com/index_v2.html
+ // // (for the 2nd run)
+ // cy.visit('https://demo.applitools.com');
+
+ // // Call Open on eyes to initialize a test session
+ // cy.eyesOpen({
+ // appName: 'Demo App',
+ // testName: 'Ultrafast grid demo',
+ // });
+
+ // // check the login page with fluent api, see more info here
+ // // https://applitools.com/docs/topics/sdk/the-eyes-sdk-check-fluent-api.html
+ // cy.eyesCheckWindow({
+ // tag: 'Login Window',
+ // target: 'window',
+ // fully: true,
+ // });
+
+ // cy.get('#log-in').click();
+
+ // // Check the app page
+ // cy.eyesCheckWindow({
+ // tag: 'App Window',
+ // target: 'window',
+ // fully: true,
+ // });
+
+ // // Call Close on eyes to let the server know it should display the results
+ // cy.eyesClose();
+ // });
+ // it('works', () => {
+ // cy.visit('https://applitools.com/helloworld');
+ // cy.eyesOpen({
+ // appName: 'Hello World!',
+ // testName: 'My first JavaScript test!',
+ // browser: { width: 800, height: 600 },
+ // });
+ // cy.eyesCheckWindow('Main Page');
+ // cy.get('button').click();
+ // cy.eyesCheckWindow('Click!');
+ // cy.eyesClose();
+ // });
+});
diff --git a/cypress/integration/rendering/classDiagram-v2.spec.js b/cypress/e2e/rendering/classDiagram-v2.spec.js
similarity index 100%
rename from cypress/integration/rendering/classDiagram-v2.spec.js
rename to cypress/e2e/rendering/classDiagram-v2.spec.js
diff --git a/cypress/integration/rendering/classDiagram.spec.js b/cypress/e2e/rendering/classDiagram.spec.js
similarity index 96%
rename from cypress/integration/rendering/classDiagram.spec.js
rename to cypress/e2e/rendering/classDiagram.spec.js
index 99fd6fb81d..8cf410d052 100644
--- a/cypress/integration/rendering/classDiagram.spec.js
+++ b/cypress/e2e/rendering/classDiagram.spec.js
@@ -1,410 +1,410 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
-
-describe('Class diagram', () => {
- it('1: should render a simple class diagram', () => {
- imgSnapshotTest(
- `
- classDiagram
- Class01 <|-- AveryLongClass : Cool
- <<interface>> Class01
- Class03 *-- Class04
- Class05 o-- Class06
- Class07 .. Class08
- Class09 --> C2 : Where am i?
- Class09 --* C3
- Class09 --|> Class07
- Class12 <|.. Class08
- Class11 ..>Class12
- Class07 : equals()
- Class07 : Object[] elementData
- Class01 : size()
- Class01 : int chimp
- Class01 : int gorilla
- Class01 : -int privateChimp
- Class01 : +int publicGorilla
- Class01 : #int protectedMarmoset
- Class08 <--> C2: Cool label
- class Class10 {
- <<service>>
- int id
- test()
- }
- `,
- { logLevel: 1 }
- );
- cy.get('svg');
- });
-
- it('2: should render a simple class diagrams with cardinality', () => {
- imgSnapshotTest(
- `
- classDiagram
- Class01 "1" <|--|> "*" AveryLongClass : Cool
- <<interface>> Class01
- Class03 "1" *-- "*" Class04
- Class05 "1" o-- "many" Class06
- Class07 "1" .. "*" Class08
- Class09 "1" --> "*" C2 : Where am i?
- Class09 "*" --* "*" C3
- Class09 "1" --|> "1" Class07
- Class07 : equals()
- Class07 : Object[] elementData
- Class01 : size()
- Class01 : int chimp
- Class01 : int gorilla
- Class08 "1" <--> "*" C2: Cool label
- class Class10 {
- <<service>>
- int id
- test()
- }
- `,
- {}
- );
- cy.get('svg');
- });
-
- it('3: should render a simple class diagram with different visibilities', () => {
- imgSnapshotTest(
- `
- classDiagram
- Class01 <|-- AveryLongClass : Cool
- <<interface>> Class01
- Class01 : -privateMethod()
- Class01 : +publicMethod()
- Class01 : #protectedMethod()
- Class01 : -int privateChimp
- Class01 : +int publicGorilla
- Class01 : #int protectedMarmoset
- `,
- {}
- );
- cy.get('svg');
- });
-
- it('4: should render a simple class diagram with comments', () => {
- imgSnapshotTest(
- `
- classDiagram
- %% this is a comment
- Class01 <|-- AveryLongClass : Cool
- <<interface>> Class01
- Class03 *-- Class04
- Class05 o-- Class06
- Class07 .. Class08
- Class09 --> C2 : Where am i?
- Class09 --* C3
- Class09 --|> Class07
- Class07 : equals()
- Class07 : Object[] elementData
- Class01 : size()
- Class01 : int chimp
- Class01 : int gorilla
- Class08 <--> C2: Cool label
- class Class10 {
- <<service>>
- int id
- test()
- }
- `,
- {}
- );
- cy.get('svg');
- });
-
- it('5: should render a simple class diagram with abstract method', () => {
- imgSnapshotTest(
- `
- classDiagram
- Class01 <|-- AveryLongClass : Cool
- Class01 : someMethod()*
- `,
- {}
- );
- cy.get('svg');
- });
-
- it('6: should render a simple class diagram with static method', () => {
- imgSnapshotTest(
- `
- classDiagram
- Class01 <|-- AveryLongClass : Cool
- Class01 : someMethod()$
- `,
- {}
- );
- cy.get('svg');
- });
-
- it('7: should render a simple class diagram with Generic class', () => {
- imgSnapshotTest(
- `
- classDiagram
- class Class01~T~
- Class01 : size()
- Class01 : int chimp
- Class01 : int gorilla
- Class08 <--> C2: Cool label
- class Class10~T~ {
- <<service>>
- int id
- test()
- }
- `,
- {}
- );
- cy.get('svg');
- });
-
- it('8: should render a simple class diagram with Generic class and relations', () => {
- imgSnapshotTest(
- `
- classDiagram
- Class01~T~ <|-- AveryLongClass : Cool
- Class03~T~ *-- Class04~T~
- Class01 : size()
- Class01 : int chimp
- Class01 : int gorilla
- Class08 <--> C2: Cool label
- class Class10~T~ {
- <<service>>
- int id
- test()
- }
- `,
- {}
- );
- cy.get('svg');
- });
-
- it('9: should render a simple class diagram with clickable link', () => {
- imgSnapshotTest(
- `
- classDiagram
- Class01~T~ <|-- AveryLongClass : Cool
- Class03~T~ *-- Class04~T~
- Class01 : size()
- Class01 : int chimp
- Class01 : int gorilla
- Class08 <--> C2: Cool label
- class Class10~T~ {
- <<service>>
- int id
- test()
- }
- link Class01 "google.com" "A Tooltip"
- `,
- {}
- );
- cy.get('svg');
- });
-
- it('10: should render a simple class diagram with clickable callback', () => {
- imgSnapshotTest(
- `
- classDiagram
- Class01~T~ <|-- AveryLongClass : Cool
- Class03~T~ *-- Class04~T~
- Class01 : size()
- Class01 : int chimp
- Class01 : int gorilla
- Class08 <--> C2: Cool label
- class Class10~T~ {
- <<service>>
- int id
- test()
- }
- callback Class01 "functionCall" "A Tooltip"
- `,
- {}
- );
- cy.get('svg');
- });
-
- it('11: should render a simple class diagram with return type on method', () => {
- imgSnapshotTest(
- `
- classDiagram
- class Class10~T~ {
- int[] id
- test(int[] ids) bool
- testArray() bool[]
- }
- `,
- {}
- );
- cy.get('svg');
- });
-
- it('12: should render a simple class diagram with generic types', () => {
- imgSnapshotTest(
- `
- classDiagram
- class Class10~T~ {
- int[] id
- List~int~ ids
- test(List~int~ ids) List~bool~
- testArray() bool[]
- }
- `,
- {}
- );
- cy.get('svg');
- });
-
- it('13: should render a simple class diagram with css classes applied', () => {
- imgSnapshotTest(
- `
- classDiagram
- class Class10 {
- int[] id
- List~int~ ids
- test(List~int~ ids) List~bool~
- testArray() bool[]
- }
-
- class Class10:::exClass2
- `,
- {}
- );
- cy.get('svg');
- });
-
- it('14: should render a simple class diagram with css classes applied directly', () => {
- imgSnapshotTest(
- `
- classDiagram
- class Class10:::exClass2 {
- int[] id
- List~int~ ids
- test(List~int~ ids) List~bool~
- testArray() bool[]
- }
- `,
- {}
- );
- cy.get('svg');
- });
-
- it('15: should render a simple class diagram with css classes applied two multiple classes', () => {
- imgSnapshotTest(
- `
- classDiagram
- class Class10
- class Class20
-
- cssClass "Class10, Class20" exClass2
- class Class20:::exClass2
- `,
- {}
- );
- cy.get('svg');
- });
-
- it('16: should render multiple class diagrams', () => {
- imgSnapshotTest(
- [
- `
- classDiagram
- Class01 "1" <|--|> "*" AveryLongClass : Cool
- <<interface>> Class01
- Class03 "1" *-- "*" Class04
- Class05 "1" o-- "many" Class06
- Class07 "1" .. "*" Class08
- Class09 "1" --> "*" C2 : Where am i?
- Class09 "*" --* "*" C3
- Class09 "1" --|> "1" Class07
- Class07 : equals()
- Class07 : Object[] elementData
- Class01 : size()
- Class01 : int chimp
- Class01 : int gorilla
- Class08 "1" <--> "*" C2: Cool label
- class Class10 {
- <<service>>
- int id
- test()
- }
- `,
- `
- classDiagram
- Class01 "1" <|--|> "*" AveryLongClass : Cool
- <<interface>> Class01
- Class03 "1" *-- "*" Class04
- Class05 "1" o-- "many" Class06
- Class07 "1" .. "*" Class08
- Class09 "1" --> "*" C2 : Where am i?
- Class09 "*" --* "*" C3
- Class09 "1" --|> "1" Class07
- Class07 : equals()
- Class07 : Object[] elementData
- Class01 : size()
- Class01 : int chimp
- Class01 : int gorilla
- Class08 "1" <--> "*" C2: Cool label
- class Class10 {
- <<service>>
- int id
- test()
- }
- `,
- ],
- {}
- );
- cy.get('svg');
- });
-
- // it('17: should render a class diagram when useMaxWidth is true (default)', () => {
- // renderGraph(
- // `
- // classDiagram
- // Class01 <|-- AveryLongClass : Cool
- // Class01 : size()
- // Class01 : int chimp
- // Class01 : int gorilla
- // Class01 : -int privateChimp
- // Class01 : +int publicGorilla
- // Class01 : #int protectedMarmoset
- // `,
- // { class: { useMaxWidth: true } }
- // );
- // cy.get('svg')
- // .should((svg) => {
- // expect(svg).to.have.attr('width', '100%');
- // const height = parseFloat(svg.attr('height'));
- // expect(height).to.be.within(332, 333);
- // // expect(svg).to.have.attr('height', '218');
- // const style = svg.attr('style');
- // expect(style).to.match(/^max-width: [\d.]+px;$/);
- // const maxWidthValue = parseInt(style.match(/[\d.]+/g).join(''));
- // // use within because the absolute value can be slightly different depending on the environment ±5%
- // expect(maxWidthValue).to.be.within(203, 204);
- // });
- // });
-
- // it('18: should render a class diagram when useMaxWidth is false', () => {
- // renderGraph(
- // `
- // classDiagram
- // Class01 <|-- AveryLongClass : Cool
- // Class01 : size()
- // Class01 : int chimp
- // Class01 : int gorilla
- // Class01 : -int privateChimp
- // Class01 : +int publicGorilla
- // Class01 : #int protectedMarmoset
- // `,
- // { class: { useMaxWidth: false } }
- // );
- // cy.get('svg')
- // .should((svg) => {
- // const width = parseFloat(svg.attr('width'));
- // // use within because the absolute value can be slightly different depending on the environment ±5%
- // expect(width).to.be.within(100, 101);
- // const height = parseFloat(svg.attr('height'));
- // expect(height).to.be.within(332, 333);
- // // expect(svg).to.have.attr('height', '332');
- // // expect(svg).to.not.have.attr('style');
- // });
- // });
-});
+import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+
+describe('Class diagram', () => {
+ it('1: should render a simple class diagram', () => {
+ imgSnapshotTest(
+ `
+ classDiagram
+ Class01 <|-- AveryLongClass : Cool
+ <<interface>> Class01
+ Class03 *-- Class04
+ Class05 o-- Class06
+ Class07 .. Class08
+ Class09 --> C2 : Where am i?
+ Class09 --* C3
+ Class09 --|> Class07
+ Class12 <|.. Class08
+ Class11 ..>Class12
+ Class07 : equals()
+ Class07 : Object[] elementData
+ Class01 : size()
+ Class01 : int chimp
+ Class01 : int gorilla
+ Class01 : -int privateChimp
+ Class01 : +int publicGorilla
+ Class01 : #int protectedMarmoset
+ Class08 <--> C2: Cool label
+ class Class10 {
+ <<service>>
+ int id
+ test()
+ }
+ `,
+ { logLevel: 1 }
+ );
+ cy.get('svg');
+ });
+
+ it('2: should render a simple class diagrams with cardinality', () => {
+ imgSnapshotTest(
+ `
+ classDiagram
+ Class01 "1" <|--|> "*" AveryLongClass : Cool
+ <<interface>> Class01
+ Class03 "1" *-- "*" Class04
+ Class05 "1" o-- "many" Class06
+ Class07 "1" .. "*" Class08
+ Class09 "1" --> "*" C2 : Where am i?
+ Class09 "*" --* "*" C3
+ Class09 "1" --|> "1" Class07
+ Class07 : equals()
+ Class07 : Object[] elementData
+ Class01 : size()
+ Class01 : int chimp
+ Class01 : int gorilla
+ Class08 "1" <--> "*" C2: Cool label
+ class Class10 {
+ <<service>>
+ int id
+ test()
+ }
+ `,
+ {}
+ );
+ cy.get('svg');
+ });
+
+ it('3: should render a simple class diagram with different visibilities', () => {
+ imgSnapshotTest(
+ `
+ classDiagram
+ Class01 <|-- AveryLongClass : Cool
+ <<interface>> Class01
+ Class01 : -privateMethod()
+ Class01 : +publicMethod()
+ Class01 : #protectedMethod()
+ Class01 : -int privateChimp
+ Class01 : +int publicGorilla
+ Class01 : #int protectedMarmoset
+ `,
+ {}
+ );
+ cy.get('svg');
+ });
+
+ it('4: should render a simple class diagram with comments', () => {
+ imgSnapshotTest(
+ `
+ classDiagram
+ %% this is a comment
+ Class01 <|-- AveryLongClass : Cool
+ <<interface>> Class01
+ Class03 *-- Class04
+ Class05 o-- Class06
+ Class07 .. Class08
+ Class09 --> C2 : Where am i?
+ Class09 --* C3
+ Class09 --|> Class07
+ Class07 : equals()
+ Class07 : Object[] elementData
+ Class01 : size()
+ Class01 : int chimp
+ Class01 : int gorilla
+ Class08 <--> C2: Cool label
+ class Class10 {
+ <<service>>
+ int id
+ test()
+ }
+ `,
+ {}
+ );
+ cy.get('svg');
+ });
+
+ it('5: should render a simple class diagram with abstract method', () => {
+ imgSnapshotTest(
+ `
+ classDiagram
+ Class01 <|-- AveryLongClass : Cool
+ Class01 : someMethod()*
+ `,
+ {}
+ );
+ cy.get('svg');
+ });
+
+ it('6: should render a simple class diagram with static method', () => {
+ imgSnapshotTest(
+ `
+ classDiagram
+ Class01 <|-- AveryLongClass : Cool
+ Class01 : someMethod()$
+ `,
+ {}
+ );
+ cy.get('svg');
+ });
+
+ it('7: should render a simple class diagram with Generic class', () => {
+ imgSnapshotTest(
+ `
+ classDiagram
+ class Class01~T~
+ Class01 : size()
+ Class01 : int chimp
+ Class01 : int gorilla
+ Class08 <--> C2: Cool label
+ class Class10~T~ {
+ <<service>>
+ int id
+ test()
+ }
+ `,
+ {}
+ );
+ cy.get('svg');
+ });
+
+ it('8: should render a simple class diagram with Generic class and relations', () => {
+ imgSnapshotTest(
+ `
+ classDiagram
+ Class01~T~ <|-- AveryLongClass : Cool
+ Class03~T~ *-- Class04~T~
+ Class01 : size()
+ Class01 : int chimp
+ Class01 : int gorilla
+ Class08 <--> C2: Cool label
+ class Class10~T~ {
+ <<service>>
+ int id
+ test()
+ }
+ `,
+ {}
+ );
+ cy.get('svg');
+ });
+
+ it('9: should render a simple class diagram with clickable link', () => {
+ imgSnapshotTest(
+ `
+ classDiagram
+ Class01~T~ <|-- AveryLongClass : Cool
+ Class03~T~ *-- Class04~T~
+ Class01 : size()
+ Class01 : int chimp
+ Class01 : int gorilla
+ Class08 <--> C2: Cool label
+ class Class10~T~ {
+ <<service>>
+ int id
+ test()
+ }
+ link Class01 "google.com" "A Tooltip"
+ `,
+ {}
+ );
+ cy.get('svg');
+ });
+
+ it('10: should render a simple class diagram with clickable callback', () => {
+ imgSnapshotTest(
+ `
+ classDiagram
+ Class01~T~ <|-- AveryLongClass : Cool
+ Class03~T~ *-- Class04~T~
+ Class01 : size()
+ Class01 : int chimp
+ Class01 : int gorilla
+ Class08 <--> C2: Cool label
+ class Class10~T~ {
+ <<service>>
+ int id
+ test()
+ }
+ callback Class01 "functionCall" "A Tooltip"
+ `,
+ {}
+ );
+ cy.get('svg');
+ });
+
+ it('11: should render a simple class diagram with return type on method', () => {
+ imgSnapshotTest(
+ `
+ classDiagram
+ class Class10~T~ {
+ int[] id
+ test(int[] ids) bool
+ testArray() bool[]
+ }
+ `,
+ {}
+ );
+ cy.get('svg');
+ });
+
+ it('12: should render a simple class diagram with generic types', () => {
+ imgSnapshotTest(
+ `
+ classDiagram
+ class Class10~T~ {
+ int[] id
+ List~int~ ids
+ test(List~int~ ids) List~bool~
+ testArray() bool[]
+ }
+ `,
+ {}
+ );
+ cy.get('svg');
+ });
+
+ it('13: should render a simple class diagram with css classes applied', () => {
+ imgSnapshotTest(
+ `
+ classDiagram
+ class Class10 {
+ int[] id
+ List~int~ ids
+ test(List~int~ ids) List~bool~
+ testArray() bool[]
+ }
+
+ class Class10:::exClass2
+ `,
+ {}
+ );
+ cy.get('svg');
+ });
+
+ it('14: should render a simple class diagram with css classes applied directly', () => {
+ imgSnapshotTest(
+ `
+ classDiagram
+ class Class10:::exClass2 {
+ int[] id
+ List~int~ ids
+ test(List~int~ ids) List~bool~
+ testArray() bool[]
+ }
+ `,
+ {}
+ );
+ cy.get('svg');
+ });
+
+ it('15: should render a simple class diagram with css classes applied two multiple classes', () => {
+ imgSnapshotTest(
+ `
+ classDiagram
+ class Class10
+ class Class20
+
+ cssClass "Class10, Class20" exClass2
+ class Class20:::exClass2
+ `,
+ {}
+ );
+ cy.get('svg');
+ });
+
+ it('16: should render multiple class diagrams', () => {
+ imgSnapshotTest(
+ [
+ `
+ classDiagram
+ Class01 "1" <|--|> "*" AveryLongClass : Cool
+ <<interface>> Class01
+ Class03 "1" *-- "*" Class04
+ Class05 "1" o-- "many" Class06
+ Class07 "1" .. "*" Class08
+ Class09 "1" --> "*" C2 : Where am i?
+ Class09 "*" --* "*" C3
+ Class09 "1" --|> "1" Class07
+ Class07 : equals()
+ Class07 : Object[] elementData
+ Class01 : size()
+ Class01 : int chimp
+ Class01 : int gorilla
+ Class08 "1" <--> "*" C2: Cool label
+ class Class10 {
+ <<service>>
+ int id
+ test()
+ }
+ `,
+ `
+ classDiagram
+ Class01 "1" <|--|> "*" AveryLongClass : Cool
+ <<interface>> Class01
+ Class03 "1" *-- "*" Class04
+ Class05 "1" o-- "many" Class06
+ Class07 "1" .. "*" Class08
+ Class09 "1" --> "*" C2 : Where am i?
+ Class09 "*" --* "*" C3
+ Class09 "1" --|> "1" Class07
+ Class07 : equals()
+ Class07 : Object[] elementData
+ Class01 : size()
+ Class01 : int chimp
+ Class01 : int gorilla
+ Class08 "1" <--> "*" C2: Cool label
+ class Class10 {
+ <<service>>
+ int id
+ test()
+ }
+ `,
+ ],
+ {}
+ );
+ cy.get('svg');
+ });
+
+ // it('17: should render a class diagram when useMaxWidth is true (default)', () => {
+ // renderGraph(
+ // `
+ // classDiagram
+ // Class01 <|-- AveryLongClass : Cool
+ // Class01 : size()
+ // Class01 : int chimp
+ // Class01 : int gorilla
+ // Class01 : -int privateChimp
+ // Class01 : +int publicGorilla
+ // Class01 : #int protectedMarmoset
+ // `,
+ // { class: { useMaxWidth: true } }
+ // );
+ // cy.get('svg')
+ // .should((svg) => {
+ // expect(svg).to.have.attr('width', '100%');
+ // const height = parseFloat(svg.attr('height'));
+ // expect(height).to.be.within(332, 333);
+ // // expect(svg).to.have.attr('height', '218');
+ // const style = svg.attr('style');
+ // expect(style).to.match(/^max-width: [\d.]+px;$/);
+ // const maxWidthValue = parseInt(style.match(/[\d.]+/g).join(''));
+ // // use within because the absolute value can be slightly different depending on the environment ±5%
+ // expect(maxWidthValue).to.be.within(203, 204);
+ // });
+ // });
+
+ // it('18: should render a class diagram when useMaxWidth is false', () => {
+ // renderGraph(
+ // `
+ // classDiagram
+ // Class01 <|-- AveryLongClass : Cool
+ // Class01 : size()
+ // Class01 : int chimp
+ // Class01 : int gorilla
+ // Class01 : -int privateChimp
+ // Class01 : +int publicGorilla
+ // Class01 : #int protectedMarmoset
+ // `,
+ // { class: { useMaxWidth: false } }
+ // );
+ // cy.get('svg')
+ // .should((svg) => {
+ // const width = parseFloat(svg.attr('width'));
+ // // use within because the absolute value can be slightly different depending on the environment ±5%
+ // expect(width).to.be.within(100, 101);
+ // const height = parseFloat(svg.attr('height'));
+ // expect(height).to.be.within(332, 333);
+ // // expect(svg).to.have.attr('height', '332');
+ // // expect(svg).to.not.have.attr('style');
+ // });
+ // });
+});
diff --git a/cypress/integration/rendering/conf-and-directives.spec.js b/cypress/e2e/rendering/conf-and-directives.spec.js
similarity index 100%
rename from cypress/integration/rendering/conf-and-directives.spec.js
rename to cypress/e2e/rendering/conf-and-directives.spec.js
diff --git a/cypress/integration/rendering/current.spec.js b/cypress/e2e/rendering/current.spec.js
similarity index 100%
rename from cypress/integration/rendering/current.spec.js
rename to cypress/e2e/rendering/current.spec.js
diff --git a/cypress/integration/rendering/debug.spec.js b/cypress/e2e/rendering/debug.spec.js
similarity index 100%
rename from cypress/integration/rendering/debug.spec.js
rename to cypress/e2e/rendering/debug.spec.js
diff --git a/cypress/integration/rendering/erDiagram.spec.js b/cypress/e2e/rendering/erDiagram.spec.js
similarity index 100%
rename from cypress/integration/rendering/erDiagram.spec.js
rename to cypress/e2e/rendering/erDiagram.spec.js
diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/e2e/rendering/flowchart-v2.spec.js
similarity index 100%
rename from cypress/integration/rendering/flowchart-v2.spec.js
rename to cypress/e2e/rendering/flowchart-v2.spec.js
diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/e2e/rendering/flowchart.spec.js
similarity index 100%
rename from cypress/integration/rendering/flowchart.spec.js
rename to cypress/e2e/rendering/flowchart.spec.js
diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/e2e/rendering/gantt.spec.js
similarity index 91%
rename from cypress/integration/rendering/gantt.spec.js
rename to cypress/e2e/rendering/gantt.spec.js
index dd521f779e..a941329420 100644
--- a/cypress/integration/rendering/gantt.spec.js
+++ b/cypress/e2e/rendering/gantt.spec.js
@@ -291,4 +291,36 @@ describe('Gantt diagram', () => {
{ gantt: { topAxis: true } }
);
});
+
+ it('should render accessibility tags', function () {
+ const expectedTitle = 'Gantt Diagram';
+ const expectedAccDescription = 'Tasks for Q4';
+ renderGraph(
+ `
+ gantt
+ accTitle: ${expectedTitle}
+ accDescr: ${expectedAccDescription}
+ dateFormat YYYY-MM-DD
+ section Section
+ A task :a1, 2014-01-01, 30d
+ `,
+ {}
+ );
+ cy.get('svg').should((svg) => {
+ const el = svg.get(0);
+ const children = Array.from(el.children);
+
+ const titleEl = children.find(function (node) {
+ return node.tagName === 'title';
+ });
+ const descriptionEl = children.find(function (node) {
+ return node.tagName === 'desc';
+ });
+
+ expect(titleEl).to.exist;
+ expect(titleEl.textContent).to.equal(expectedTitle);
+ expect(descriptionEl).to.exist;
+ expect(descriptionEl.textContent).to.equal(expectedAccDescription);
+ });
+ });
});
diff --git a/cypress/e2e/rendering/gitGraph.spec.js b/cypress/e2e/rendering/gitGraph.spec.js
new file mode 100644
index 0000000000..4dda2c16ed
--- /dev/null
+++ b/cypress/e2e/rendering/gitGraph.spec.js
@@ -0,0 +1,210 @@
+import { imgSnapshotTest } from '../../helpers/util.js';
+
+describe('Git Graph diagram', () => {
+ it('1: should render a simple gitgraph with commit on main branch', () => {
+ imgSnapshotTest(
+ `gitGraph
+ commit id: "1"
+ commit id: "2"
+ commit id: "3"
+ `,
+ {}
+ );
+ });
+ it('2: should render a simple gitgraph with commit on main branch with Id', () => {
+ imgSnapshotTest(
+ `gitGraph
+ commit id: "One"
+ commit id: "Two"
+ commit id: "Three"
+ `,
+ {}
+ );
+ });
+ it('3: should render a simple gitgraph with different commitTypes on main branch ', () => {
+ imgSnapshotTest(
+ `gitGraph
+ commit id: "Normal Commit"
+ commit id: "Reverse Commit" type: REVERSE
+ commit id: "Hightlight Commit" type: HIGHLIGHT
+ `,
+ {}
+ );
+ });
+ it('4: should render a simple gitgraph with tags commitTypes on main branch ', () => {
+ imgSnapshotTest(
+ `gitGraph
+ commit id: "Normal Commit with tag" tag: "v1.0.0"
+ commit id: "Reverse Commit with tag" type: REVERSE tag: "RC_1"
+ commit id: "Hightlight Commit" type: HIGHLIGHT tag: "8.8.4"
+ `,
+ {}
+ );
+ });
+ it('5: should render a simple gitgraph with two branches', () => {
+ imgSnapshotTest(
+ `gitGraph
+ commit id: "1"
+ commit id: "2"
+ branch develop
+ checkout develop
+ commit id: "3"
+ commit id: "4"
+ checkout main
+ commit id: "5"
+ commit id: "6"
+ `,
+ {}
+ );
+ });
+ it('6: should render a simple gitgraph with two branches and merge commit', () => {
+ imgSnapshotTest(
+ `gitGraph
+ commit id: "1"
+ commit id: "2"
+ branch develop
+ checkout develop
+ commit id: "3"
+ commit id: "4"
+ checkout main
+ merge develop
+ commit id: "5"
+ commit id: "6"
+ `,
+ {}
+ );
+ });
+ it('7: should render a simple gitgraph with three branches and merge commit', () => {
+ imgSnapshotTest(
+ `gitGraph
+ commit id: "1"
+ commit id: "2"
+ branch nice_feature
+ checkout nice_feature
+ commit id: "3"
+ checkout main
+ commit id: "4"
+ checkout nice_feature
+ branch very_nice_feature
+ checkout very_nice_feature
+ commit id: "5"
+ checkout main
+ commit id: "6"
+ checkout nice_feature
+ commit id: "7"
+ checkout main
+ merge nice_feature
+ checkout very_nice_feature
+ commit id: "8"
+ checkout main
+ commit id: "9"
+ `,
+ {}
+ );
+ });
+ it('8: should render a simple gitgraph with more than 8 branchs & overriding variables', () => {
+ imgSnapshotTest(
+ `%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
+ 'gitBranchLabel0': '#ffffff',
+ 'gitBranchLabel1': '#ffffff',
+ 'gitBranchLabel2': '#ffffff',
+ 'gitBranchLabel3': '#ffffff',
+ 'gitBranchLabel4': '#ffffff',
+ 'gitBranchLabel5': '#ffffff',
+ 'gitBranchLabel6': '#ffffff',
+ 'gitBranchLabel7': '#ffffff',
+ } } }%%
+ gitGraph
+ checkout main
+ branch branch1
+ branch branch2
+ branch branch3
+ branch branch4
+ branch branch5
+ branch branch6
+ branch branch7
+ branch branch8
+ branch branch9
+ checkout branch1
+ commit id: "1"
+ `,
+ {}
+ );
+ });
+ it('9: should render a simple gitgraph with rotated labels', () => {
+ imgSnapshotTest(
+ `%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'gitGraph': {
+ 'rotateCommitLabel': true
+ } } }%%
+ gitGraph
+ commit id: "75f7219e83b321cd3fdde7dcf83bc7c1000a6828"
+ commit id: "0db4784daf82736dec4569e0dc92980d328c1f2e"
+ commit id: "7067e9973f9eaa6cd4a4b723c506d1eab598e83e"
+ commit id: "66972321ad6c199013b5b31f03b3a86fa3f9817d"
+ `,
+ {}
+ );
+ });
+ it('10: should render a simple gitgraph with horizontal labels', () => {
+ imgSnapshotTest(
+ `%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'gitGraph': {
+ 'rotateCommitLabel': false
+ } } }%%
+ gitGraph
+ commit id: "Alpha"
+ commit id: "Beta"
+ commit id: "Gamma"
+ commit id: "Delta"
+ `,
+ {}
+ );
+ });
+ it('11: should render a simple gitgraph with cherry pick commit', () => {
+ imgSnapshotTest(
+ `
+ gitGraph
+ commit id: "ZERO"
+ branch develop
+ commit id:"A"
+ checkout main
+ commit id:"ONE"
+ checkout develop
+ commit id:"B"
+ checkout main
+ commit id:"TWO"
+ cherry-pick id:"A"
+ commit id:"THREE"
+ checkout develop
+ commit id:"C"
+ `,
+ {}
+ );
+ });
+
+ it('11: should render a simple gitgraph with two cherry pick commit', () => {
+ imgSnapshotTest(
+ `
+ gitGraph
+ commit id: "ZERO"
+ branch develop
+ commit id:"A"
+ checkout main
+ commit id:"ONE"
+ checkout develop
+ commit id:"B"
+ branch featureA
+ commit id:"FIX"
+ commit id: "FIX-2"
+ checkout main
+ commit id:"TWO"
+ cherry-pick id:"A"
+ commit id:"THREE"
+ cherry-pick id:"FIX"
+ checkout develop
+ commit id:"C"
+ merge featureA
+ `,
+ {}
+ );
+ });
+});
diff --git a/cypress/integration/rendering/info.spec.js b/cypress/e2e/rendering/info.spec.js
similarity index 100%
rename from cypress/integration/rendering/info.spec.js
rename to cypress/e2e/rendering/info.spec.js
diff --git a/cypress/integration/rendering/journey.spec.js b/cypress/e2e/rendering/journey.spec.js
similarity index 100%
rename from cypress/integration/rendering/journey.spec.js
rename to cypress/e2e/rendering/journey.spec.js
diff --git a/cypress/integration/rendering/pie.spec.js b/cypress/e2e/rendering/pie.spec.js
similarity index 100%
rename from cypress/integration/rendering/pie.spec.js
rename to cypress/e2e/rendering/pie.spec.js
diff --git a/cypress/e2e/rendering/requirement.spec.js b/cypress/e2e/rendering/requirement.spec.js
new file mode 100644
index 0000000000..be27f39faa
--- /dev/null
+++ b/cypress/e2e/rendering/requirement.spec.js
@@ -0,0 +1,114 @@
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+
+describe('Requirement diagram', () => {
+ it('sample', () => {
+ imgSnapshotTest(
+ `
+ requirementDiagram
+
+ requirement test_req {
+ id: 1
+ text: the test text.
+ risk: high
+ verifymethod: test
+ }
+
+ functionalRequirement test_req2 {
+ id: 1.1
+ text: the second test text.
+ risk: low
+ verifymethod: inspection
+ }
+
+ performanceRequirement test_req3 {
+ id: 1.2
+ text: the third test text.
+ risk: medium
+ verifymethod: demonstration
+ }
+
+ element test_entity {
+ type: simulation
+ }
+
+ element test_entity2 {
+ type: word doc
+ docRef: reqs/test_entity
+ }
+
+
+ test_entity - satisfies -> test_req2
+ test_req - traces -> test_req2
+ test_req - contains -> test_req3
+ test_req <- copies - test_entity2
+ `,
+ {}
+ );
+ cy.get('svg');
+ });
+
+ it('should render accessibility tags', function () {
+ const expectedTitle = 'Gantt Diagram';
+ const expectedAccDescription = 'Tasks for Q4';
+ renderGraph(
+ `
+ requirementDiagram
+ accTitle: ${expectedTitle}
+ accDescr: ${expectedAccDescription}
+
+ requirement test_req {
+ id: 1
+ text: the test text.
+ risk: high
+ verifymethod: test
+ }
+
+ functionalRequirement test_req2 {
+ id: 1.1
+ text: the second test text.
+ risk: low
+ verifymethod: inspection
+ }
+
+ performanceRequirement test_req3 {
+ id: 1.2
+ text: the third test text.
+ risk: medium
+ verifymethod: demonstration
+ }
+
+ element test_entity {
+ type: simulation
+ }
+
+ element test_entity2 {
+ type: word doc
+ docRef: reqs/test_entity
+ }
+
+
+ test_entity - satisfies -> test_req2
+ test_req - traces -> test_req2
+ test_req - contains -> test_req3
+ test_req <- copies - test_entity2
+ `,
+ {}
+ );
+ cy.get('svg').should((svg) => {
+ const el = svg.get(0);
+ const children = Array.from(el.children);
+
+ const titleEl = children.find(function (node) {
+ return node.tagName === 'title';
+ });
+ const descriptionEl = children.find(function (node) {
+ return node.tagName === 'desc';
+ });
+
+ expect(titleEl).to.exist;
+ expect(titleEl.textContent).to.equal(expectedTitle);
+ expect(descriptionEl).to.exist;
+ expect(descriptionEl.textContent).to.equal(expectedAccDescription);
+ });
+ });
+});
diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/e2e/rendering/sequencediagram.spec.js
similarity index 94%
rename from cypress/integration/rendering/sequencediagram.spec.js
rename to cypress/e2e/rendering/sequencediagram.spec.js
index f17ad45a34..1122a30092 100644
--- a/cypress/integration/rendering/sequencediagram.spec.js
+++ b/cypress/e2e/rendering/sequencediagram.spec.js
@@ -452,6 +452,42 @@ context('Sequence diagram', () => {
{}
);
});
+ it('should render rect around and inside criticals', () => {
+ imgSnapshotTest(
+ `
+ sequenceDiagram
+ A ->> B: 1
+ rect rgb(204, 0, 102)
+ critical yes
+ C ->> C: 1
+ option no
+ rect rgb(0, 204, 204)
+ C ->> C: 0
+ end
+ end
+ end
+ B ->> A: Return
+ `,
+ {}
+ );
+ });
+ it('should render rect around and inside breaks', () => {
+ imgSnapshotTest(
+ `
+ sequenceDiagram
+ A ->> B: 1
+ rect rgb(204, 0, 102)
+ break yes
+ rect rgb(0, 204, 204)
+ C ->> C: 0
+ end
+ end
+ end
+ B ->> A: Return
+ `,
+ {}
+ );
+ });
it('should render autonumber when configured with such', () => {
imgSnapshotTest(
`
@@ -610,6 +646,20 @@ context('Sequence diagram', () => {
}
);
});
+ it("shouldn't display unused participants", () => {
+ //Be aware that the syntax for "properties" is likely to be changed.
+ imgSnapshotTest(
+ `
+ %%{init: { "config": { "sequence": {"hideUnusedParticipants": true }}}}%%
+ sequenceDiagram
+ participant a
+ `,
+ {
+ logLevel: 0,
+ sequence: { mirrorActors: false, noteFontSize: 18, noteFontFamily: 'Arial' },
+ }
+ );
+ });
});
context('svg size', () => {
it('should render a sequence diagram when useMaxWidth is true (default)', () => {
@@ -644,7 +694,7 @@ context('Sequence diagram', () => {
expect(svg).to.have.attr('width', '100%');
expect(svg).to.have.attr('height');
const height = parseFloat(svg.attr('height'));
- expect(height).to.be.within(920, 960);
+ expect(height).to.be.within(920, 971);
const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
@@ -683,7 +733,7 @@ context('Sequence diagram', () => {
cy.get('svg').should((svg) => {
const height = parseFloat(svg.attr('height'));
const width = parseFloat(svg.attr('width'));
- expect(height).to.be.within(920, 960);
+ expect(height).to.be.within(920, 971);
// use within because the absolute value can be slightly different depending on the environment ±5%
expect(width).to.be.within(820 * 0.95, 820 * 1.05);
expect(svg).to.not.have.attr('style');
diff --git a/cypress/integration/rendering/stateDiagram-v2.spec.js b/cypress/e2e/rendering/stateDiagram-v2.spec.js
similarity index 97%
rename from cypress/integration/rendering/stateDiagram-v2.spec.js
rename to cypress/e2e/rendering/stateDiagram-v2.spec.js
index afeaa5c6bf..b5ab864400 100644
--- a/cypress/integration/rendering/stateDiagram-v2.spec.js
+++ b/cypress/e2e/rendering/stateDiagram-v2.spec.js
@@ -346,6 +346,21 @@ describe('State diagram', () => {
}
);
});
+ it('v2 A compound state should be able to link to itself', () => {
+ imgSnapshotTest(
+ `
+stateDiagram
+ state Active {
+ Idle
+ }
+ Inactive --> Idle: ACT
+ Active --> Active: LOG
+ `,
+ {
+ logLevel: 0,
+ }
+ );
+ });
it('v2 width of compond state should grow with title if title is wider', () => {
imgSnapshotTest(
`
diff --git a/cypress/integration/rendering/stateDiagram.spec.js b/cypress/e2e/rendering/stateDiagram.spec.js
similarity index 100%
rename from cypress/integration/rendering/stateDiagram.spec.js
rename to cypress/e2e/rendering/stateDiagram.spec.js
diff --git a/cypress/integration/rendering/theme.spec.js b/cypress/e2e/rendering/theme.spec.js
similarity index 91%
rename from cypress/integration/rendering/theme.spec.js
rename to cypress/e2e/rendering/theme.spec.js
index 30a7efb7f9..0eb8d111b0 100644
--- a/cypress/integration/rendering/theme.spec.js
+++ b/cypress/e2e/rendering/theme.spec.js
@@ -36,6 +36,8 @@ describe('Pie Chart', () => {
imgSnapshotTest(
`
pie title Sports in Sweden
+ accTitle: This is a title
+ accDescr: This is a description
"Bandy" : 40
"Ice-Hockey" : 80
"Football" : 90
@@ -49,6 +51,8 @@ describe('Pie Chart', () => {
`
%%{init: { 'logLevel': 0} }%%
graph TD
+ accTitle: This is a title
+ accDescr: This is a description
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
@@ -72,6 +76,9 @@ describe('Pie Chart', () => {
`
%%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
flowchart TD
+ accTitle: This is a title
+ accDescr: This is a description
+
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[Another]
@@ -95,6 +102,9 @@ describe('Pie Chart', () => {
`
%%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
sequenceDiagram
+ accTitle: This is a title
+ accDescr: This is a description
+
autonumber
par Action 1
Alice->>John: Hello John, how are you?
@@ -122,6 +132,9 @@ describe('Pie Chart', () => {
`
%%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
classDiagram
+ accTitle: This is a title
+ accDescr: This is a description
+
Animal "*" <|-- "1" Duck
Animal "1" <|-- "10" Fish
Animal <|-- Zebra
@@ -168,6 +181,9 @@ describe('Pie Chart', () => {
`
%%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
stateDiagram
+ accTitle: This is a title
+ accDescr: This is a description
+
[*] --> Active
state Active {
@@ -200,6 +216,9 @@ stateDiagram
`
%%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
stateDiagram-v2
+ accTitle: This is a title
+ accDescr: This is a description
+
[*] --> Active
state Active {
@@ -231,6 +250,9 @@ stateDiagram-v2
imgSnapshotTest(
`
erDiagram
+ accTitle: This is a title
+ accDescr: This is a description
+
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places
CUSTOMER ||--o{ INVOICE : "liable for"
@@ -250,6 +272,9 @@ erDiagram
`
%%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
journey
+ accTitle: This is a title
+ accDescr: This is a description
+
title My working day
section Go to work
Make tea: 5: Me
@@ -268,6 +293,9 @@ erDiagram
imgSnapshotTest(
`
gantt
+ accTitle: This is a title
+ accDescr: This is a description
+
dateFormat :YYYY-MM-DD
title :Adding GANTT diagram functionality to mermaid
excludes :excludes the named dates/days from being included in a charted task..
diff --git a/cypress/examples/actions.spec.js b/cypress/examples/actions.spec.js
deleted file mode 100644
index 5843547afd..0000000000
--- a/cypress/examples/actions.spec.js
+++ /dev/null
@@ -1,264 +0,0 @@
-///
-
-context('Actions', () => {
- beforeEach(() => {
- cy.visit('https://example.cypress.io/commands/actions');
- });
-
- // https://on.cypress.io/interacting-with-elements
-
- it('.type() - type into a DOM element', () => {
- // https://on.cypress.io/type
- cy.get('.action-email')
- .type('fake@email.com')
- .should('have.value', 'fake@email.com')
-
- // .type() with special character sequences
- .type('{leftarrow}{rightarrow}{uparrow}{downarrow}')
- .type('{del}{selectall}{backspace}')
-
- // .type() with key modifiers
- .type('{alt}{option}') //these are equivalent
- .type('{ctrl}{control}') //these are equivalent
- .type('{meta}{command}{cmd}') //these are equivalent
- .type('{shift}')
-
- // Delay each keypress by 0.1 sec
- .type('slow.typing@email.com', { delay: 100 })
- .should('have.value', 'slow.typing@email.com');
-
- cy.get('.action-disabled')
- // Ignore error checking prior to type
- // like whether the input is visible or disabled
- .type('disabled error checking', { force: true })
- .should('have.value', 'disabled error checking');
- });
-
- it('.focus() - focus on a DOM element', () => {
- // https://on.cypress.io/focus
- cy.get('.action-focus')
- .focus()
- .should('have.class', 'focus')
- .prev()
- .should('have.attr', 'style', 'color: orange;');
- });
-
- it('.blur() - blur off a DOM element', () => {
- // https://on.cypress.io/blur
- cy.get('.action-blur')
- .type('About to blur')
- .blur()
- .should('have.class', 'error')
- .prev()
- .should('have.attr', 'style', 'color: red;');
- });
-
- it('.clear() - clears an input or textarea element', () => {
- // https://on.cypress.io/clear
- cy.get('.action-clear')
- .type('Clear this text')
- .should('have.value', 'Clear this text')
- .clear()
- .should('have.value', '');
- });
-
- it('.submit() - submit a form', () => {
- // https://on.cypress.io/submit
- cy.get('.action-form').find('[type="text"]').type('HALFOFF');
- cy.get('.action-form').submit().next().should('contain', 'Your form has been submitted!');
- });
-
- it('.click() - click on a DOM element', () => {
- // https://on.cypress.io/click
- cy.get('.action-btn').click();
-
- // You can click on 9 specific positions of an element:
- // -----------------------------------
- // | topLeft top topRight |
- // | |
- // | |
- // | |
- // | left center right |
- // | |
- // | |
- // | |
- // | bottomLeft bottom bottomRight |
- // -----------------------------------
-
- // clicking in the center of the element is the default
- cy.get('#action-canvas').click();
-
- cy.get('#action-canvas').click('topLeft');
- cy.get('#action-canvas').click('top');
- cy.get('#action-canvas').click('topRight');
- cy.get('#action-canvas').click('left');
- cy.get('#action-canvas').click('right');
- cy.get('#action-canvas').click('bottomLeft');
- cy.get('#action-canvas').click('bottom');
- cy.get('#action-canvas').click('bottomRight');
-
- // .click() accepts an x and y coordinate
- // that controls where the click occurs :)
-
- cy.get('#action-canvas')
- .click(80, 75) // click 80px on x coord and 75px on y coord
- .click(170, 75)
- .click(80, 165)
- .click(100, 185)
- .click(125, 190)
- .click(150, 185)
- .click(170, 165);
-
- // click multiple elements by passing multiple: true
- cy.get('.action-labels>.label').click({ multiple: true });
-
- // Ignore error checking prior to clicking
- cy.get('.action-opacity>.btn').click({ force: true });
- });
-
- it('.dblclick() - double click on a DOM element', () => {
- // https://on.cypress.io/dblclick
-
- // Our app has a listener on 'dblclick' event in our 'scripts.js'
- // that hides the div and shows an input on double click
- cy.get('.action-div').dblclick().should('not.be.visible');
- cy.get('.action-input-hidden').should('be.visible');
- });
-
- it('.check() - check a checkbox or radio element', () => {
- // https://on.cypress.io/check
-
- // By default, .check() will check all
- // matching checkbox or radio elements in succession, one after another
- cy.get('.action-checkboxes [type="checkbox"]').not('[disabled]').check().should('be.checked');
-
- cy.get('.action-radios [type="radio"]').not('[disabled]').check().should('be.checked');
-
- // .check() accepts a value argument
- cy.get('.action-radios [type="radio"]').check('radio1').should('be.checked');
-
- // .check() accepts an array of values
- cy.get('.action-multiple-checkboxes [type="checkbox"]')
- .check(['checkbox1', 'checkbox2'])
- .should('be.checked');
-
- // Ignore error checking prior to checking
- cy.get('.action-checkboxes [disabled]').check({ force: true }).should('be.checked');
-
- cy.get('.action-radios [type="radio"]').check('radio3', { force: true }).should('be.checked');
- });
-
- it('.uncheck() - uncheck a checkbox element', () => {
- // https://on.cypress.io/uncheck
-
- // By default, .uncheck() will uncheck all matching
- // checkbox elements in succession, one after another
- cy.get('.action-check [type="checkbox"]').not('[disabled]').uncheck().should('not.be.checked');
-
- // .uncheck() accepts a value argument
- cy.get('.action-check [type="checkbox"]')
- .check('checkbox1')
- .uncheck('checkbox1')
- .should('not.be.checked');
-
- // .uncheck() accepts an array of values
- cy.get('.action-check [type="checkbox"]')
- .check(['checkbox1', 'checkbox3'])
- .uncheck(['checkbox1', 'checkbox3'])
- .should('not.be.checked');
-
- // Ignore error checking prior to unchecking
- cy.get('.action-check [disabled]').uncheck({ force: true }).should('not.be.checked');
- });
-
- it('.select() - select an option in a
:trophy: **Mermaid was nominated and won the [JS Open Source Awards (2019)](https://osawards.com/javascript/2019) in the category "The most exciting use of technology"!!!**
+
+
**Thanks to all involved, people committing pull requests, people answering questions! 🙏**
-
+