diff --git a/.commitlintrc.json b/.commitlintrc.json
new file mode 100644
index 0000000000..67b3aa1856
--- /dev/null
+++ b/.commitlintrc.json
@@ -0,0 +1,5 @@
+{
+ "extends": [
+ "@commitlint/config-conventional"
+ ]
+}
\ No newline at end of file
diff --git a/.eslintignore b/.eslintignore
index 7e54e3631c..9d8891de0f 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1 +1,3 @@
-**/*.spec.js
\ No newline at end of file
+dist/**
+.github/**
+docs/Setup.md
diff --git a/.eslintrc.json b/.eslintrc.json
index b223ac86ce..9c755a0e2b 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -2,19 +2,51 @@
"env": {
"browser": true,
"es6": true,
+ "jest/globals": true,
"node": true
},
"parser": "@babel/eslint-parser",
"parserOptions": {
- "ecmaFeatures": {
- "experimentalObjectRestSpread": true,
- "jsx": true
- },
- "sourceType": "module"
+ "ecmaFeatures": {
+ "experimentalObjectRestSpread": true,
+ "jsx": true
+ },
+ "sourceType": "module"
},
- "extends": ["prettier", "eslint:recommended"],
- "plugins": ["prettier"],
+ "extends": [
+ "eslint:recommended",
+ "plugin:jsdoc/recommended",
+ "plugin:json/recommended",
+ "plugin:markdown/recommended",
+ "plugin:prettier/recommended"
+ ],
+ "plugins": ["html", "jest", "jsdoc", "json", "prettier"],
"rules": {
- "prettier/prettier": ["error"]
- }
+ "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": [
+ {
+ "files": "./**/*.html",
+ "rules": {
+ "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/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
index 74e02e6cb8..f8e453bd3a 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -24,7 +24,7 @@ A clear and concise description of what you expected to happen.
If applicable, add screenshots to help explain your problem.
**Code Sample**
-If applicable, add the code sample or a link to the [live editor](https://mermaid-js.github.io/mermaid-live-editor).
+If applicable, add the code sample or a link to the [live editor](https://mermaid.live).
**Desktop (please complete the following information):**
- OS: [e.g. iOS]
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/dependabot.yml b/.github/dependabot.yml
index c5b27177d4..9de58cc4f9 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -1,12 +1,17 @@
version: 2
updates:
- package-ecosystem: npm
+ open-pull-requests-limit: 10
directory: /
target-branch: develop
schedule:
interval: weekly
+ day: monday
+ time: "07:00"
- package-ecosystem: github-actions
directory: /
target-branch: develop
schedule:
interval: weekly
+ day: monday
+ time: "07:00"
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index d1ae7edec7..2514aac48f 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -8,6 +8,6 @@ Describe the way your implementation works or what design decisions you made if
### :clipboard: Tasks
Make sure you
-- [ ] :book: have read the [contribution guidelines](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md)
-- [ ] :computer: have added unit/e2e tests (if appropriate)
-- [ ] :bookmark: targeted `develop` branch
+- [ ] :book: have read the [contribution guidelines](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md)
+- [ ] :computer: have added unit/e2e tests (if appropriate)
+- [ ] :bookmark: targeted `develop` branch
diff --git a/.github/stale.yml b/.github/stale.yml
index 761f26cb99..0a784cd769 100644
--- a/.github/stale.yml
+++ b/.github/stale.yml
@@ -15,5 +15,5 @@ markComment: >
If you are still interested in this issue and it is still relevant you can comment to revive it.
# Comment to post when closing a stale issue. Set to `false` to disable
closeComment: >
- This issue has been been automatically closed due to a lack of activity.
- This is done to maintain a clean list of issues that the community is interested in developing.
+ This issue has been been automatically closed due to a lack of activity.
+ This is done to maintain a clean list of issues that the community is interested in developing.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index a530e188ce..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:
@@ -9,10 +18,10 @@ jobs:
matrix:
node-version: [16.x]
steps:
- - uses: actions/checkout@v2
+ - uses: actions/checkout@v3
- name: Setup Node.js ${{ matrix.node-version }}
- uses: actions/setup-node@v2
+ uses: actions/setup-node@v3
with:
cache: yarn
node-version: ${{ matrix.node-version }}
@@ -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
new file mode 100644
index 0000000000..13912e5b9f
--- /dev/null
+++ b/.github/workflows/check-readme-in-sync.yml
@@ -0,0 +1,35 @@
+# Reference: https://github.com/Yash-Singh1/eslint-plugin-userscripts/blob/main/.github/workflows/readme-in-sync.yml
+
+name: Check if README and docs/README are in sync
+
+on:
+ push:
+ branches:
+ - gh-pages
+ pull_request:
+ branches:
+ - gh-pages
+
+permissions:
+ contents: read
+
+jobs:
+ check:
+ runs-on: ubuntu-latest
+ steps:
+ - name: Checkout repository
+ uses: actions/checkout@v3
+
+ - name: Check for difference in README.md and docs/README.md
+ run: |
+ if [ -z "$(diff README.md docs/README.md --brief)" ]
+ then
+ echo "README.md and docs/README.md are in sync"
+ else
+ echo "Make sure that README.md and docs/README.md are in sync"
+ echo
+ echo "Difference:"
+ echo
+ diff README.md docs/README.md -u
+ exit 1
+ fi
diff --git a/.github/workflows/checks b/.github/workflows/checks.yml
similarity index 62%
rename from .github/workflows/checks
rename to .github/workflows/checks.yml
index bc60f59777..c434e03a67 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
@@ -6,6 +12,7 @@ jobs:
test:
runs-on: ubuntu-latest
name: check tests
+ if: github.repository_owner == 'mermaid'
steps:
- uses: actions/checkout@v2
with:
@@ -13,7 +20,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..845c763e8c
--- /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@v2
diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e
similarity index 54%
rename from .github/workflows/e2e.yml
rename to .github/workflows/e2e
index 0a01f30390..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
@@ -9,10 +12,10 @@ jobs:
matrix:
node-version: [16.x]
steps:
- - uses: actions/checkout@v2.3.4
+ - uses: actions/checkout@v3
- name: Setup Node.js ${{ matrix.node-version }}
- uses: actions/setup-node@v2
+ uses: actions/setup-node@v3
with:
cache: yarn
node-version: ${{ matrix.node-version }}
@@ -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/issue-triage.yml b/.github/workflows/issue-triage.yml
index 46cbd91b8c..3dbcf94b06 100644
--- a/.github/workflows/issue-triage.yml
+++ b/.github/workflows/issue-triage.yml
@@ -8,7 +8,7 @@ jobs:
triage:
runs-on: ubuntu-latest
steps:
- - uses: andymckay/labeler@1.0.3
+ - uses: andymckay/labeler@1.0.4
with:
repo-token: "${{ secrets.GITHUB_TOKEN }}"
add-labels: "Status: Triage"
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/lock-closed-issue.yml b/.github/workflows/lock-closed-issue.yml
deleted file mode 100644
index 11c3f35ddc..0000000000
--- a/.github/workflows/lock-closed-issue.yml
+++ /dev/null
@@ -1,13 +0,0 @@
-name: Lock closed issue
-
-on:
- issues:
- types: [closed]
-
-jobs:
- triage:
- runs-on: ubuntu-latest
- steps:
- - uses: Dunning-Kruger/lock-issues@v1.1
- with:
- repo-token: "${{ secrets.GITHUB_TOKEN }}"
diff --git a/.github/workflows/pr-labeler-config-validator.yml b/.github/workflows/pr-labeler-config-validator.yml
new file mode 100644
index 0000000000..af5c477d64
--- /dev/null
+++ b/.github/workflows/pr-labeler-config-validator.yml
@@ -0,0 +1,19 @@
+name: Validate PR Labeler Configuration
+on:
+ push: {}
+ pull_request:
+ types:
+ - opened
+ - synchronize
+ - ready_for_review
+
+jobs:
+ pr-labeler:
+ runs-on: ubuntu-latest
+ steps:
+ - name: Checkout Repository
+ uses: actions/checkout@v3
+ - name: Validate Configuration
+ uses: Yash-Singh1/pr-labeler-config-validator@releases/v0.0.3
+ with:
+ configuration-path: .github/pr-labeler.yml
diff --git a/.github/workflows/release-preview-publish.yml b/.github/workflows/release-preview-publish.yml
index 8136ff8bd8..70e9b42c08 100644
--- a/.github/workflows/release-preview-publish.yml
+++ b/.github/workflows/release-preview-publish.yml
@@ -9,9 +9,9 @@ jobs:
publish:
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v2
+ - uses: actions/checkout@v3
- name: Setup Node.js
- uses: actions/setup-node@v2
+ uses: actions/setup-node@v3
with:
node-version: 16.x
- name: Install Yarn
diff --git a/.github/workflows/release-publish.yml b/.github/workflows/release-publish.yml
index 62382a882a..4a14ee74eb 100644
--- a/.github/workflows/release-publish.yml
+++ b/.github/workflows/release-publish.yml
@@ -8,11 +8,11 @@ jobs:
publish:
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v2.3.4
+ - uses: actions/checkout@v3
- uses: fregante/setup-git-user@v1
- name: Setup Node.js
- uses: actions/setup-node@v2
+ uses: actions/setup-node@v3
with:
node-version: 16.x
- name: Install Yarn
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/.github/workflows/unlock-reopened-issues.yml b/.github/workflows/unlock-reopened-issues.yml
index 09469ed8bb..346cd51a6b 100644
--- a/.github/workflows/unlock-reopened-issues.yml
+++ b/.github/workflows/unlock-reopened-issues.yml
@@ -1,6 +1,6 @@
name: Unlock reopened issue
-on:
+on:
issues:
types: [reopened]
diff --git a/.github/workflows/update-browserlist.yml b/.github/workflows/update-browserlist.yml
new file mode 100644
index 0000000000..4155ec988e
--- /dev/null
+++ b/.github/workflows/update-browserlist.yml
@@ -0,0 +1,18 @@
+name: Update Browserslist
+on:
+ schedule:
+ - cron: '0 7 * * 1'
+ workflow_dispatch:
+
+jobs:
+ build:
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v3
+ - run: npx browserslist@latest --update-db
+ - name: Commit changes
+ uses: EndBug/add-and-commit@v9
+ with:
+ author_name: ${{ github.actor }}
+ author_email: ${{ github.actor }}@users.noreply.github.com
+ message: 'chore: update browsers list'
diff --git a/.gitignore b/.gitignore
index efe4e39ac4..8ce4bf724c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,8 +4,7 @@ node_modules/
coverage/
.idea/
-dist/*.js
-dist/*.map
+dist
yarn-error.log
.npmrc
@@ -13,10 +12,6 @@ token
package-lock.json
-dist/classTest.html
-
-dist/sequenceTest.html
-
.vscode/
cypress/platform/current.html
cypress/platform/experimental.html
@@ -25,3 +20,6 @@ local/
_site
Gemfile.lock
/.vs
+
+cypress/screenshots/
+cypress/snapshots/
\ No newline at end of file
diff --git a/.husky/commit-msg b/.husky/commit-msg
new file mode 100755
index 0000000000..59f6536e22
--- /dev/null
+++ b/.husky/commit-msg
@@ -0,0 +1,4 @@
+#!/bin/sh
+# . "$(dirname "$0")/_/husky.sh"
+
+# npx --no-install commitlint --edit $1
diff --git a/.husky/pre-commit b/.husky/pre-commit
new file mode 100755
index 0000000000..025779ed2b
--- /dev/null
+++ b/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn pre-commit
diff --git a/.lintstagedrc.json b/.lintstagedrc.json
new file mode 100644
index 0000000000..41d79218a8
--- /dev/null
+++ b/.lintstagedrc.json
@@ -0,0 +1,5 @@
+{
+ "*.{js,json,html,md}": [
+ "yarn lint:fix"
+ ]
+}
\ No newline at end of file
diff --git a/.percy.old.yml b/.percy.old.yml
deleted file mode 100644
index 5499b41f20..0000000000
--- a/.percy.old.yml
+++ /dev/null
@@ -1,3 +0,0 @@
-version: 1
-snapshot:
- widths: [1280]
\ No newline at end of file
diff --git a/.prettierrc b/.prettierrc
deleted file mode 100644
index e9eb8060dd..0000000000
--- a/.prettierrc
+++ /dev/null
@@ -1,5 +0,0 @@
-{
- "printWidth": 100,
- "singleQuote": true,
- "endOfLine": "auto"
-}
diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 0000000000..8cadfefaf7
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,8 @@
+{
+ "endOfLine": "auto",
+ "plugins": [
+ "prettier-plugin-jsdoc"
+ ],
+ "printWidth": 100,
+ "singleQuote": true
+}
\ No newline at end of file
diff --git a/.tern-project b/.tern-project
index cf97514117..d8b9e54f9d 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/.travis.yml b/.travis.yml
deleted file mode 100644
index 98c9666a96..0000000000
--- a/.travis.yml
+++ /dev/null
@@ -1,12 +0,0 @@
-dist: trusty
-language: node_js
-node_js:
- - "10"
-cache:
- npm: false
-script:
- - yarn build
- - yarn test --coverage
- - yarn e2e
-after_success:
- - cat ./coverage/lcov.info | ./node_modules/.bin/coveralls
diff --git a/.webpack/loaders/jison.js b/.webpack/loaders/jison.js
new file mode 100644
index 0000000000..0d5ebc7e5b
--- /dev/null
+++ b/.webpack/loaders/jison.js
@@ -0,0 +1,25 @@
+const { Generator } = require('jison');
+const validate = require('schema-utils');
+
+const schema = {
+ title: 'Jison Parser options',
+ type: 'object',
+ properties: {
+ 'token-stack': {
+ type: 'boolean',
+ },
+ debug: {
+ type: 'boolean',
+ },
+ },
+ additionalProperties: false,
+};
+
+module.exports = function jisonLoader(source) {
+ const options = this.getOptions();
+ (validate.validate || validate)(schema, options, {
+ name: 'Jison Loader',
+ baseDataPath: 'options',
+ });
+ return new Generator(source, options).generate();
+};
diff --git a/.webpack/webpack.config.babel.js b/.webpack/webpack.config.babel.js
new file mode 100644
index 0000000000..9dfd834b7e
--- /dev/null
+++ b/.webpack/webpack.config.babel.js
@@ -0,0 +1,45 @@
+import { merge, mergeWithCustomize, customizeObject } from 'webpack-merge';
+import nodeExternals from 'webpack-node-externals';
+import baseConfig from './webpack.config.base';
+
+export default (_env, args) => {
+ switch (args.mode) {
+ case 'development':
+ return [
+ baseConfig,
+ merge(baseConfig, {
+ externals: [nodeExternals()],
+ output: {
+ filename: '[name].core.js',
+ },
+ }),
+ ];
+ case 'production':
+ return [
+ // umd
+ merge(baseConfig, {
+ output: {
+ filename: '[name].min.js',
+ },
+ }),
+ // esm
+ mergeWithCustomize({
+ customizeObject: customizeObject({
+ 'output.library': 'replace',
+ }),
+ })(baseConfig, {
+ experiments: {
+ outputModule: true,
+ },
+ output: {
+ library: {
+ type: 'module',
+ },
+ filename: '[name].esm.min.mjs',
+ },
+ }),
+ ];
+ default:
+ throw new Error('No matching configuration was found!');
+ }
+};
diff --git a/.webpack/webpack.config.base.js b/.webpack/webpack.config.base.js
new file mode 100644
index 0000000000..055f59dfc9
--- /dev/null
+++ b/.webpack/webpack.config.base.js
@@ -0,0 +1,54 @@
+import path from 'path';
+
+export const resolveRoot = (...relativePath) => path.resolve(__dirname, '..', ...relativePath);
+
+export default {
+ amd: false, // https://github.com/lodash/lodash/issues/3052
+ target: 'web',
+ entry: {
+ mermaid: './src/mermaid.js',
+ },
+ resolve: {
+ extensions: ['.wasm', '.mjs', '.js', '.json', '.jison'],
+ fallback: {
+ fs: false, // jison generated code requires 'fs'
+ path: require.resolve('path-browserify'),
+ },
+ },
+ output: {
+ path: resolveRoot('./dist'),
+ filename: '[name].js',
+ library: {
+ name: 'mermaid',
+ type: 'umd',
+ export: 'default',
+ },
+ globalObject: 'typeof self !== "undefined" ? self : this',
+ },
+ module: {
+ rules: [
+ {
+ test: /\.js$/,
+ include: [resolveRoot('./src'), resolveRoot('./node_modules/dagre-d3-renderer/lib')],
+ use: {
+ loader: 'babel-loader',
+ },
+ },
+ {
+ // load scss to string
+ test: /\.scss$/,
+ use: ['css-to-string-loader', 'css-loader', 'sass-loader'],
+ },
+ {
+ test: /\.jison$/,
+ use: {
+ loader: path.resolve(__dirname, './loaders/jison.js'),
+ options: {
+ 'token-stack': true,
+ },
+ },
+ },
+ ],
+ },
+ devtool: 'source-map',
+};
diff --git a/.webpack/webpack.config.e2e.babel.js b/.webpack/webpack.config.e2e.babel.js
new file mode 100644
index 0000000000..3ec2bdcd78
--- /dev/null
+++ b/.webpack/webpack.config.e2e.babel.js
@@ -0,0 +1,37 @@
+import baseConfig, { resolveRoot } from './webpack.config.base';
+import { merge } from 'webpack-merge';
+
+export default merge(baseConfig, {
+ mode: 'development',
+ entry: {
+ mermaid: './src/mermaid.js',
+ e2e: './cypress/platform/viewer.js',
+ 'bundle-test': './cypress/platform/bundle-test.js',
+ },
+ output: {
+ globalObject: 'window',
+ },
+ devServer: {
+ compress: true,
+ port: 9000,
+ static: [
+ { directory: resolveRoot('cypress', 'platform') },
+ { directory: resolveRoot('dist') },
+ { directory: resolveRoot('demos') },
+ ],
+ },
+ externals: {
+ mermaid: 'mermaid',
+ },
+ module: {
+ rules: [
+ {
+ test: /\.js$/,
+ exclude: /node_modules/,
+ use: {
+ loader: 'babel-loader',
+ },
+ },
+ ],
+ },
+});
diff --git a/CHANGELOG.md b/CHANGELOG.md
index dede59be01..e7385b9b77 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 d719b9523e..9ed0a7eddf 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -2,16 +2,24 @@
So you want to help? That's great!
-
+
Here are a few things to know to get you started on the right path.
+## Development Installation
+```bash
+git clone git@github.com:mermaid-js/mermaid.git
+cd mermaid
+yarn
+yarn test
+```
+
## Committing code
We make all changes via pull requests. As we have many pull requests from developers new to mermaid, the current approach is to have *knsv, Knut Sveidqvist* as a main reviewer of changes and merging pull requests. More precisely like this:
* Large changes reviewed by knsv or other developer asked to review by knsv
-* Smaller low-risk changes like dependecies, documentation etc can be merged by active collaborators
+* Smaller low-risk changes like dependencies, documentation etc can be merged by active collaborators
* documentation (updates to the docs folder is also allowed via direct commits)
To commit code, create a branch, let it start with the type like feature or bug followed by the issue number for reference and some describing text.
@@ -35,13 +43,13 @@ The documentation is written in Markdown, for more information about Markdown [s
If you want to preview the documentation site on your machine, you need to install `docsify-cli`:
-```
+```sh
$ npm i docsify-cli -g
-````
+```
If you are more familiar with Yarn, you can use the following command:
-```
+```sh
$ yarn global add docsify-cli
```
@@ -50,7 +58,7 @@ If the installation is successful, the command `docsify` will be available in yo
You can now run the following command to serve the documentation site:
-```
+```sh
$ docsify serve docs
```
@@ -76,7 +84,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).
@@ -85,7 +93,7 @@ The rendering tests are very straightforward to create. There is a function imgS
When running in ci it will take a snapshot of the rendered diagram and compare it with the snapshot from last build and flag for review it if it differs.
This is what a rendering test looks like:
-```
+```javascript
it('should render forks and joins', () => {
imgSnapshotTest(
`
@@ -114,7 +122,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 commited 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 +131,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 5868e0bb36..0e49ea4dae 100644
--- a/README.md
+++ b/README.md
@@ -1,64 +1,79 @@
-# mermaid [](https://travis-ci.org/mermaid-js/mermaid) [](https://www.npmjs.com/package/mermaid) [](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [](https://percy.io/Mermaid/mermaid)
+# mermaid [](https://travis-ci.org/mermaid-js/mermaid) [](https://www.npmjs.com/package/mermaid) [](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
-
+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
-Mermaid is a Javascript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development.
+Mermaid is a JavaScript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development.
> Doc-Rot is a Catch-22 that Mermaid helps to solve.
Diagramming and documentation costs precious developer time and gets outdated quickly.
-But not having diagrams or docs ruins productivity and hurts organizational learning.
-Mermaid addresses this problem by cutting the time, effort and tooling that is required to create modifiable diagrams and charts, for smarter and more reusable content.
-The text definitions for Mermaid diagrams allows for it to be updated easily, it can also be made part of production scripts (and other pieces of code).
-So less time needs to be spent on documenting, as a separate and laborious task.
-Even non-programmers can create diagrams through the [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor/).
+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 diagrams through the [Mermaid Live Editor](https://mermaid.live/).
[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
-__The following are some examples of the diagrams, charts and graphs that can be made using Mermaid and the Markdown-inspired text specific to it. Click here jump into the [text syntax](https://mermaid-js.github.io/mermaid/#/n00b-syntaxReference).__
-
+__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).__
-
+```
+
+### Git graph [experimental - live editor]
+
+### User Journey diagram [docs - live editor]
+```
journey
title My working day
section Go to work
@@ -187,14 +206,101 @@ pie
section Go home
Go downstairs: 5: Me
Sit down: 3: Me
-
-
-
-
-
-
+```
+```mermaid
+ journey
+ title My working day
+ section Go to work
+ Make tea: 5: Me
+ Go upstairs: 3: Me
+ Do work: 1: Me, Cat
+ section Go home
+ Go downstairs: 5: Me
+ Sit down: 3: Me
+```
+
+### C4 diagram [docs]
+
+```
+C4Context
+title System Context diagram for Internet Banking System
+
+Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
+Person(customerB, "Banking Customer B")
+Person_Ext(customerC, "Banking Customer C")
+System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
+
+Person(customerD, "Banking Customer D", "A customer of the bank, with personal bank accounts.")
-
+Enterprise_Boundary(b1, "BankBoundary") {
+
+ SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
+
+ System_Boundary(b2, "BankBoundary2") {
+ System(SystemA, "Banking System A")
+ System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")
+ }
+
+ System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
+ SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
+
+ Boundary(b3, "BankBoundary3", "boundary") {
+ SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")
+ SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
+ }
+}
+
+BiRel(customerA, SystemAA, "Uses")
+BiRel(SystemAA, SystemE, "Uses")
+Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
+Rel(SystemC, customerA, "Sends e-mails to")
+```
+```mermaid
+C4Context
+title System Context diagram for Internet Banking System
+
+Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
+Person(customerB, "Banking Customer B")
+Person_Ext(customerC, "Banking Customer C")
+System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
+
+Person(customerD, "Banking Customer D", "A customer of the bank, with personal bank accounts.")
+
+Enterprise_Boundary(b1, "BankBoundary") {
+
+ SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
+
+ System_Boundary(b2, "BankBoundary2") {
+ System(SystemA, "Banking System A")
+ System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")
+ }
+
+ System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
+ SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
+
+ Boundary(b3, "BankBoundary3", "boundary") {
+ SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")
+ SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
+ }
+}
+
+BiRel(customerA, SystemAA, "Uses")
+BiRel(SystemAA, SystemE, "Uses")
+Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
+Rel(SystemC, customerA, "Sends e-mails to")
+```
+
+## Release
+
+For those who have the permission to do so:
+
+Update version number in `package.json`.
+
+```sh
+npm publish
+```
+
+The above command generates files into the `dist` folder and publishes them to npmjs.org.
## Related projects
@@ -202,16 +308,27 @@ pie
- [Live Editor](https://github.com/mermaid-js/mermaid-live-editor)
- [HTTP Server](https://github.com/TomWright/mermaid-server)
-## Contributors [](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Help+wanted%21%22) [](https://github.com/mermaid-js/mermaid/graphs/contributors) [](https://github.com/mermaid-js/mermaid/graphs/contributors)
+## Contributors [](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Good+first+issue%21%22) [](https://github.com/mermaid-js/mermaid/graphs/contributors) [](https://github.com/mermaid-js/mermaid/graphs/contributors)
Mermaid is a growing community and is always accepting new contributors. There's a lot of different ways to help out and we're always looking for extra hands! Look at [this issue](https://github.com/mermaid-js/mermaid/issues/866) if you want to know where to start helping out.
Detailed information about how to contribute can be found in the [contribution guide](CONTRIBUTING.md)
+## Security and safe diagrams
+
+For public sites, it can be precarious to retrieve text from users on the internet, storing that content for presentation in a browser at a later stage. The reason is that the user content can contain embedded malicious scripts that will run when the data is presented. For Mermaid this is a risk, specially as mermaid diagrams contain many characters that are used in html which makes the standard sanitation unusable as it also breaks the diagrams. We still make an effort to sanitise the incoming code and keep refining the process but it is hard to guarantee that there are no loop holes.
+
+As an extra level of security for sites with external users we are happy to introduce a new security level in which the diagram is rendered in a sandboxed iframe preventing javascript in the code from being executed. This is a great step forward for better security.
+
+*Unfortunately you can not have a cake and eat it at the same time which in this case means that some of the interactive functionality gets blocked along with the possible malicious code.*
+
+## Reporting vulnerabilities
+To report a vulnerability, please e-mail security@mermaid.live with a description of the issue, the steps you took to create the issue, affected versions, and if known, mitigations for the issue.
+
## Appreciation
A quick note from Knut Sveidqvist:
->*Many thanks to the [d3](http://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!*
->*Thanks also to the [js-sequence-diagram](http://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering.*
+>*Many thanks to the [d3](https://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!*
+>*Thanks also to the [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering.*
>*Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017.*
>
>*Thank you to the ever-growing list of [contributors](https://github.com/knsv/mermaid/graphs/contributors) that brought the project this far!*
diff --git a/README.zh-CN.md b/README.zh-CN.md
new file mode 100644
index 0000000000..3042304d90
--- /dev/null
+++ b/README.zh-CN.md
@@ -0,0 +1,322 @@
+# mermaid [](https://travis-ci.org/mermaid-js/mermaid) [](https://www.npmjs.com/package/mermaid) [](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
+
+[English](./README.md) | įŽäŊä¸æ
+
+
+
+:trophy: **Mermaid čĸĢæååšļčˇåžäē [JS Open Source Awards (2019)](https://osawards.com/javascript/2019) į "The most exciting use of technology" åĨ饚!!!**
+
+**æč°ĸææåä¸čŋæĨæäē¤ PRīŧč§ŖįįéŽįäēēäģŦ! đ**
+
+
+
+## å ŗäē Mermaid
+
+
+Mermaid æ¯ä¸ä¸Ēåēäē Javascript įåžčĄ¨įģåļåˇĨå ˇīŧéčŋč§Ŗæįąģ Markdown įææŦč¯æŗæĨåŽį°åžčĄ¨įååģēåå¨æäŋŽæšãMermaid č¯įįä¸ģčĻįŽįæ¯čŽŠææĄŖįæ´æ°čŊå¤åæļčˇä¸åŧåčŋåēĻã
+
+> Doc-Rot æ¯ Mermaid č´åäēč§Ŗåŗįä¸ä¸Ēéžéĸã
+
+įģåžåįŧåææĄŖčąč´šäēåŧåč åŽč´ĩįåŧåæļé´īŧčä¸éįä¸åĄįåæ´īŧåŽåžåŋĢå°ąäŧčŋæã äŊæ¯åĻæįŧēå°äēåžčĄ¨æææĄŖīŧ寚äēįäē§åååĸéæ°äēēįä¸åĄåĻäš éŊäŧäē§įåˇ¨å¤§įéģįĸã
+Mermaid éčŋå 莸į¨æˇååģēäžŋäēäŋŽæšįåžčĄ¨æĨč§Ŗåŗčŋä¸éžéĸīŧåŽäšå¯äģĨäŊä¸ēįäē§čæŦīŧæå ļäģäģŖį īŧįä¸é¨åã
+
+Mermaid įčŗčŊ莊éį¨åēåäščŊéčŋ [Mermaid Live Editor](https://mermaid.live/) čŊģæžååģēč¯ĻįģįåžčĄ¨ã
+äŊ å¯äģĨčŽŋéŽ [æį¨](./docs/Tutorials.md) æĨæĨį Live Editor įč§éĸæį¨īŧäšå¯äģĨæĨį [Mermaid įéæåäŊŋį¨](./docs/integrations.md) čŋä¸Ēæ¸ åæĨæŖæĨäŊ įææĄŖåˇĨå ˇæ¯åĻåˇ˛įģéæäē Mermaid æ¯æã
+
+åĻææŗčĻæĨįå ŗäē 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)
+
+
+
+## į¤ēäž
+
+__ä¸éĸæ¯ä¸äēå¯äģĨäŊŋį¨ Mermaid ååģēįåžčĄ¨į¤ēäžãįšåģ [č¯æŗ](https://mermaid-js.github.io/mermaid/#/n00b-syntaxReference) æĨįč¯Ļæ ã__
+
+
+
+### æĩį¨åž [ææĄŖ - live editor]
+
+```
+flowchart LR
+A[Hard] -->|Text| B(Round)
+B --> C{Decision}
+C -->|One| D[Result 1]
+C -->|Two| E[Result 2]
+```
+```mermaid
+flowchart LR
+A[Hard] -->|Text| B(Round)
+B --> C{Decision}
+C -->|One| D[Result 1]
+C -->|Two| E[Result 2]
+```
+
+### æļåēåž [ææĄŖ - live editor]
+
+```
+sequenceDiagram
+Alice->>John: Hello John, how are you?
+loop Healthcheck
+ John->>John: Fight against hypochondria
+end
+Note right of John: Rational thoughts!
+John-->>Alice: Great!
+John->>Bob: How about you?
+Bob-->>John: Jolly good!
+```
+```mermaid
+sequenceDiagram
+Alice->>John: Hello John, how are you?
+loop Healthcheck
+ John->>John: Fight against hypochondria
+end
+Note right of John: Rational thoughts!
+John-->>Alice: Great!
+John->>Bob: How about you?
+Bob-->>John: Jolly good!
+```
+
+### įįšåž [ææĄŖ - live editor]
+
+```
+gantt
+ section Section
+ Completed :done, des1, 2014-01-06,2014-01-08
+ Active :active, des2, 2014-01-07, 3d
+ Parallel 1 : des3, after des1, 1d
+ Parallel 2 : des4, after des1, 1d
+ Parallel 3 : des5, after des3, 1d
+ Parallel 4 : des6, after des4, 1d
+```
+```mermaid
+gantt
+ section Section
+ Completed :done, des1, 2014-01-06,2014-01-08
+ Active :active, des2, 2014-01-07, 3d
+ Parallel 1 : des3, after des1, 1d
+ Parallel 2 : des4, after des1, 1d
+ Parallel 3 : des5, after des3, 1d
+ Parallel 4 : des6, after des4, 1d
+```
+
+### įąģåž [ææĄŖ - live editor]
+
+```
+classDiagram
+Class01 <|-- AveryLongClass : Cool
+<> Class01
+Class09 --> C2 : Where am i?
+Class09 --* C3
+Class09 --|> Class07
+Class07 : equals()
+Class07 : Object[] elementData
+Class01 : size()
+Class01 : int chimp
+Class01 : int gorilla
+class Class10 {
+ <>
+ int id
+ size()
+}
+```
+```mermaid
+classDiagram
+Class01 <|-- AveryLongClass : Cool
+<> Class01
+Class09 --> C2 : Where am i?
+Class09 --* C3
+Class09 --|> Class07
+Class07 : equals()
+Class07 : Object[] elementData
+Class01 : size()
+Class01 : int chimp
+Class01 : int gorilla
+class Class10 {
+ <>
+ int id
+ size()
+}
+```
+
+### įļæåž [[docs - live editor]
+
+```
+stateDiagram-v2
+[*] --> Still
+Still --> [*]
+Still --> Moving
+Moving --> Still
+Moving --> Crash
+Crash --> [*]
+```
+```mermaid
+stateDiagram-v2
+[*] --> Still
+Still --> [*]
+Still --> Moving
+Moving --> Still
+Moving --> Crash
+Crash --> [*]
+```
+
+### éĨŧåž [ææĄŖ - live editor]
+
+```
+pie
+"Dogs" : 386
+"Cats" : 85
+"Rats" : 15
+```
+```mermaid
+pie
+"Dogs" : 386
+"Cats" : 85
+"Rats" : 15
+```
+
+### Gitåž [åŽéĒįšæ§ - live editor]
+
+### į¨æˇäŊéĒæ į¨åž [ææĄŖ - live editor]
+
+```
+ journey
+ title My working day
+ section Go to work
+ Make tea: 5: Me
+ Go upstairs: 3: Me
+ Do work: 1: Me, Cat
+ section Go home
+ Go downstairs: 5: Me
+ Sit down: 3: Me
+```
+```mermaid
+ journey
+ title My working day
+ section Go to work
+ Make tea: 5: Me
+ Go upstairs: 3: Me
+ Do work: 1: Me, Cat
+ section Go home
+ Go downstairs: 5: Me
+ Sit down: 3: Me
+```
+
+### C4 åž [ææĄŖ]
+
+```
+C4Context
+title System Context diagram for Internet Banking System
+
+Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
+Person(customerB, "Banking Customer B")
+Person_Ext(customerC, "Banking Customer C")
+System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
+
+Person(customerD, "Banking Customer D", "A customer of the bank, with personal bank accounts.")
+
+Enterprise_Boundary(b1, "BankBoundary") {
+
+ SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
+
+ System_Boundary(b2, "BankBoundary2") {
+ System(SystemA, "Banking System A")
+ System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")
+ }
+
+ System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
+ SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
+
+ Boundary(b3, "BankBoundary3", "boundary") {
+ SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")
+ SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
+ }
+}
+
+BiRel(customerA, SystemAA, "Uses")
+BiRel(SystemAA, SystemE, "Uses")
+Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
+Rel(SystemC, customerA, "Sends e-mails to")
+```
+```mermaid
+C4Context
+title System Context diagram for Internet Banking System
+
+Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
+Person(customerB, "Banking Customer B")
+Person_Ext(customerC, "Banking Customer C")
+System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
+
+Person(customerD, "Banking Customer D", "A customer of the bank, with personal bank accounts.")
+
+Enterprise_Boundary(b1, "BankBoundary") {
+
+ SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
+
+ System_Boundary(b2, "BankBoundary2") {
+ System(SystemA, "Banking System A")
+ System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")
+ }
+
+ System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
+ SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
+
+ Boundary(b3, "BankBoundary3", "boundary") {
+ SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")
+ SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
+ }
+}
+
+BiRel(customerA, SystemAA, "Uses")
+BiRel(SystemAA, SystemE, "Uses")
+Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
+Rel(SystemC, customerA, "Sends e-mails to")
+```
+
+## åå¸
+
+寚äēææéįååĻæĨč¯´īŧäŊ å¯äģĨéčŋäģĨä¸æĨéĒ¤æĨåŽæåå¸æäŊīŧ
+
+æ´æ° `package.json` ä¸įįæŦåˇīŧįļåæ§čĄåĻä¸åŊäģ¤īŧ
+
+```sh
+npm publish
+```
+
+äģĨä¸įåŊäģ¤äŧå°æäģļæå å° `dist` įŽåŊåšļåå¸čŗ npmjs.org.
+
+## į¸å ŗ饚įŽ
+
+- [Command Line Interface](https://github.com/mermaid-js/mermaid-cli)
+- [Live Editor](https://github.com/mermaid-js/mermaid-live-editor)
+- [HTTP Server](https://github.com/TomWright/mermaid-server)
+
+## č´ĄįŽč [](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Good+first+issue%21%22) [](https://github.com/mermaid-js/mermaid/graphs/contributors) [](https://github.com/mermaid-js/mermaid/graphs/contributors)
+
+Mermaid æ¯ä¸ä¸Ēä¸æååąä¸įį¤žåēīŧåšļä¸čŋå¨æĨæļæ°įč´ĄįŽč ãæåžå¤ä¸åįæšåŧå¯äģĨåä¸čŋæĨīŧčä¸æäģŦčŋå¨å¯ģæžéĸå¤į帎åŠãåĻæäŊ æŗįĨéåĻäŊåŧå§č´ĄįŽīŧč¯ˇæĨį [čŋä¸Ē issue](https://github.com/mermaid-js/mermaid/issues/866)ã
+
+å ŗäēåĻäŊč´ĄįŽįč¯ĻįģäŋĄæ¯å¯äģĨå¨ [č´ĄįŽæå](CONTRIBUTING.md) ä¸æžå°ã
+
+## åŽå ¨
+
+寚äēå ŦåŧįŊįĢæĨč¯´īŧäģäēčįŊä¸įį¨æˇå¤æŖį´ĸææŦãåå¨äžåįģå¨æĩč§å¨ä¸åąį¤ēįå 厚å¯čŊæ¯ä¸åŽå ¨įīŧįįąæ¯į¨æˇįå 厚å¯čŊåĩå Ĩä¸äēæ°æŽå čŊŊåŽæäšåå°ąäŧčŋčĄįæļæčæŦīŧčŋäē寚äē Mermaid æĨč¯´æ¯Ģæ įéŽæ¯ä¸ä¸ĒéŖéŠīŧå°¤å ļæ¯ mermaid åžčĄ¨čŋå åĢäē莸å¤å¨ html ä¸äŊŋį¨įåįŦĻīŧčŋæåŗįæäģŦéžäģĨäŊŋį¨å¸¸č§įææŽĩæĨčŋæģ¤ä¸åŽå ¨äģŖį īŧå ä¸ēčŋäē常č§ææŽĩäŧé æåžčĄ¨æåãæäģŦäģįļå¨åĒå寚čˇåå°įäģŖį čŋčĄåŽå ¨čŋæģ¤åšļä¸æåŽåæäģŦįį¨åēīŧäŊåžéžäŋč¯æ˛Ąææŧæ´ã
+
+äŊä¸ēæĨæå¤é¨į¨æˇįįŊįĢįéĸå¤åŽå ¨įē§åĢīŧæäģŦåžéĢå ´æ¨åēä¸ä¸Ēæ°įåŽå ¨įē§åĢīŧå ļä¸įåžčĄ¨å¨æ˛į iframe ä¸æ¸˛æīŧé˛æĸäģŖį ä¸į javascript čĸĢæ§čĄīŧčŋæ¯å¨åŽå ¨æ§æšéĸčŋåēįä¸å¤§æĨã
+
+*åžä¸åš¸įæ¯īŧéąŧä¸įæä¸å¯å ŧåžīŧå¨čŋä¸Ēåēæ¯ä¸åŽæåŗįå¨å¯čŊįæļæäģŖį čĸĢéģæĸæļīŧäšäŧæå¤ąé¨åäē¤äēčŊå*ã
+
+## æĨåæŧæ´
+
+åĻææŗčĻæĨåæŧæ´īŧč¯ˇåééŽäģļå° security@mermaid.live, åšļéä¸éŽéĸįæčŋ°ãå¤į°éŽéĸįæĨéĒ¤ãååŊąåįįæŦīŧäģĨåč§ŖåŗéŽéĸįæšæĄīŧåĻææįč¯īŧã
+
+## é¸Ŗč°ĸ
+æĨčĒ Knut Sveidqvist:
+>*įšåĢæč°ĸ [d3](https://d3js.org/) å [dagre-d3](https://github.com/cpettitt/dagre-d3) čŋ两ä¸Ēäŧį§į饚įŽīŧåŽäģŦæäžäēåžåŊĸå¸åąåįģåžåˇĨå ˇåē! *
+>*åæ ˇæč°ĸ [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) æäžäēæļåēåžč¯æŗįäŊŋį¨ã æč°ĸ Jessica Peter æäžäēįįšåžæ¸˛æįįĩæã*
+>*æč°ĸ [Tyler Long](https://github.com/tylerlong) äģ 2017åš´åæåŧå§æä¸ēäē饚įŽįåäŊč ã*
+>
+>*æč°ĸčļæĨčļå¤į [č´ĄįŽč äģŦ](https://github.com/knsv/mermaid/graphs/contributors)īŧæ˛ĄæäŊ äģŦīŧå°ąæ˛Ąæčŋä¸Ē饚įŽįäģ夊īŧ*
+
+---
+
+*Mermaid æ¯įą Knut Sveidqvist ååģēīŧåŽä¸ēäēæ´įŽåįææĄŖįŧåčįã*
diff --git a/Renfay.md b/Renfay.md
deleted file mode 100644
index 2028f9cfb3..0000000000
--- a/Renfay.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Renfay project
-
-A note system!
diff --git a/__mocks__/MERMAID.js b/__mocks__/MERMAID.js
index f844f1c557..58e31037a2 100644
--- a/__mocks__/MERMAID.js
+++ b/__mocks__/MERMAID.js
@@ -1,3 +1,3 @@
-export const curveBasis = 'basis'
-export const curveLinear = 'linear'
-export const curveCardinal = 'cardinal'
+export const curveBasis = 'basis';
+export const curveLinear = 'linear';
+export const curveCardinal = 'cardinal';
diff --git a/__mocks__/d3.js b/__mocks__/d3.js
index caee810ad9..c5c7deed82 100644
--- a/__mocks__/d3.js
+++ b/__mocks__/d3.js
@@ -1,11 +1,10 @@
-/* eslint-env jest */
let NewD3 = function () {
- function returnThis () {
- return this
+ function returnThis() {
+ return this;
}
return {
append: function () {
- return NewD3()
+ return NewD3();
},
lower: returnThis,
attr: returnThis,
@@ -16,41 +15,47 @@ let NewD3 = function () {
getBBox: function () {
return {
height: 10,
- width: 20
- }
- }
- }
- }
- }
-}
+ width: 20,
+ };
+ },
+ },
+ },
+ };
+};
export const select = function () {
- return new NewD3()
-}
+ return new NewD3();
+};
export const selectAll = function () {
- return new NewD3()
-}
+ return new NewD3();
+};
-export const curveBasis = 'basis'
-export const curveLinear = 'linear'
-export const curveCardinal = 'cardinal'
+export const curveBasis = 'basis';
+export const curveLinear = 'linear';
+export const curveCardinal = 'cardinal';
export const MockD3 = (name, parent) => {
- const children = []
+ const children = [];
const elem = {
- get __children () { return children },
- get __name () { return name },
- get __parent () { return parent }
- }
+ get __children() {
+ return children;
+ },
+ get __name() {
+ return name;
+ },
+ get __parent() {
+ return parent;
+ },
+ };
elem.append = (name) => {
- const mockElem = MockD3(name, elem)
- children.push(mockElem)
- return mockElem
- }
- elem.lower = jest.fn(() => elem)
- elem.attr = jest.fn(() => elem)
- elem.text = jest.fn(() => elem)
- elem.style = jest.fn(() => elem)
- return elem
-}
+ const mockElem = MockD3(name, elem);
+ children.push(mockElem);
+ return mockElem;
+ };
+ elem.lower = jest.fn(() => elem);
+ elem.attr = jest.fn(() => elem);
+ elem.text = jest.fn(() => elem);
+ elem.style = jest.fn(() => elem);
+ return elem;
+};
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 a56d1ac68e..0000000000
--- a/cypress.json
+++ /dev/null
@@ -1 +0,0 @@
-{ "video": false }
diff --git a/cypress/.eslintrc.json b/cypress/.eslintrc.json
new file mode 100644
index 0000000000..0ee09b6e02
--- /dev/null
+++ b/cypress/.eslintrc.json
@@ -0,0 +1,10 @@
+{
+ "env": {
+ "cypress/globals": true
+ },
+ "extends": ["plugin:cypress/recommended"],
+ "plugins": ["cypress"],
+ "rules":{
+ "cypress/no-unnecessary-waiting": 0
+ }
+}
diff --git a/cypress/integration/other/configuration.spec.js b/cypress/e2e/other/configuration.spec.js
similarity index 74%
rename from cypress/integration/other/configuration.spec.js
rename to cypress/e2e/other/configuration.spec.js
index 8563a1120d..a67758d9cf 100644
--- a/cypress/integration/other/configuration.spec.js
+++ b/cypress/e2e/other/configuration.spec.js
@@ -1,5 +1,4 @@
import { renderGraph } from '../../helpers/util';
-/* eslint-env jest */
describe('Configuration', () => {
describe('arrowMarkerAbsolute', () => {
it('should handle default value false of arrowMarkerAbsolute', () => {
@@ -11,12 +10,14 @@ describe('Configuration', () => {
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
`,
- { }
+ {}
);
// Check the marker-end property to make sure it is properly set to
// start with #
- cy.get('.edgePath path').first().should('have.attr', 'marker-end')
+ cy.get('.edgePath path')
+ .first()
+ .should('have.attr', 'marker-end')
.should('exist')
.and('include', 'url(#');
});
@@ -29,16 +30,18 @@ describe('Configuration', () => {
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
`,
- { }
+ {}
);
// Check the marker-end property to make sure it is properly set to
// start with #
- cy.get('.edgePath path').first().should('have.attr', 'marker-end')
+ cy.get('.edgePath path')
+ .first()
+ .should('have.attr', 'marker-end')
.should('exist')
.and('include', 'url(#');
});
- it('should handle arrowMarkerAbsolute excplicitly set to false', () => {
+ it('should handle arrowMarkerAbsolute explicitly set to false', () => {
renderGraph(
`graph TD
A[Christmas] -->|Get money| B(Go shopping)
@@ -48,17 +51,19 @@ describe('Configuration', () => {
C -->|Three| F[fa:fa-car Car]
`,
{
- arrowMarkerAbsolute: false
+ arrowMarkerAbsolute: false,
}
);
// Check the marker-end property to make sure it is properly set to
// start with #
- cy.get('.edgePath path').first().should('have.attr', 'marker-end')
+ cy.get('.edgePath path')
+ .first()
+ .should('have.attr', 'marker-end')
.should('exist')
.and('include', 'url(#');
});
- it('should handle arrowMarkerAbsolute excplicitly set to "false" as false', () => {
+ it('should handle arrowMarkerAbsolute explicitly set to "false" as false', () => {
renderGraph(
`graph TD
A[Christmas] -->|Get money| B(Go shopping)
@@ -68,13 +73,15 @@ describe('Configuration', () => {
C -->|Three| F[fa:fa-car Car]
`,
{
- arrowMarkerAbsolute: "false"
+ arrowMarkerAbsolute: 'false',
}
);
// Check the marker-end property to make sure it is properly set to
// start with #
- cy.get('.edgePath path').first().should('have.attr', 'marker-end')
+ cy.get('.edgePath path')
+ .first()
+ .should('have.attr', 'marker-end')
.should('exist')
.and('include', 'url(#');
});
@@ -88,11 +95,13 @@ describe('Configuration', () => {
C -->|Three| F[fa:fa-car Car]
`,
{
- arrowMarkerAbsolute: true
+ arrowMarkerAbsolute: true,
}
);
- cy.get('.edgePath path').first().should('have.attr', 'marker-end')
+ cy.get('.edgePath path')
+ .first()
+ .should('have.attr', 'marker-end')
.should('exist')
.and('include', 'url(http://localhost');
});
@@ -102,7 +111,9 @@ describe('Configuration', () => {
cy.visit(url);
cy.get('svg');
- cy.percySnapshot();
+ cy.matchImageSnapshot(
+ 'configuration.spec-should-not-taint-initial-configuration-when-using-multiple-directives'
+ );
});
});
});
diff --git a/cypress/e2e/other/ghsa.spec.js b/cypress/e2e/other/ghsa.spec.js
new file mode 100644
index 0000000000..5b168a8a8f
--- /dev/null
+++ b/cypress/e2e/other/ghsa.spec.js
@@ -0,0 +1,10 @@
+import { urlSnapshotTest } from '../../helpers/util';
+
+describe('CSS injections', () => {
+ it('should not allow CSS injections outside of the diagram', () => {
+ urlSnapshotTest('http://localhost:9000/ghsa1.html', {
+ logLevel: 1,
+ flowchart: { htmlLabels: false },
+ });
+ });
+});
diff --git a/cypress/integration/other/interaction.spec.js b/cypress/e2e/other/interaction.spec.js
similarity index 75%
rename from cypress/integration/other/interaction.spec.js
rename to cypress/e2e/other/interaction.spec.js
index 6a873107de..692a078809 100644
--- a/cypress/integration/other/interaction.spec.js
+++ b/cypress/e2e/other/interaction.spec.js
@@ -1,13 +1,10 @@
-/* eslint-env jest */
describe('Interaction', () => {
describe('Interaction - security level loose', () => {
it('Graph: should handle a click on a node with a bound function', () => {
const url = 'http://localhost:9000/click_security_loose.html';
cy.viewport(1440, 1024);
cy.visit(url);
- cy.get('body')
- .find('g#flowchart-Function-2')
- .click();
+ cy.get('body').find('g#flowchart-Function-2').click();
cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
});
@@ -15,9 +12,7 @@ describe('Interaction', () => {
const url = 'http://localhost:9000/click_security_loose.html';
cy.viewport(1440, 1024);
cy.visit(url);
- cy.get('body')
- .find('g#flowchart-FunctionArg-18')
- .click();
+ cy.get('body').find('g#flowchart-FunctionArg-18').click();
cy.get('.created-by-click-2').should('have.text', 'Clicked By Flow: ARGUMENT');
});
@@ -25,9 +20,7 @@ describe('Interaction', () => {
const url = 'http://localhost:9000/click_security_loose.html';
cy.viewport(1440, 1024);
cy.visit(url);
- cy.get('body')
- .find('g[id="flowchart-FunctionArg-22"]')
- .click();
+ cy.get('body').find('g[id="flowchart-FunctionArg-22"]').click();
cy.get('.created-by-click-2').should('have.text', 'Clicked By Flow: ARGUMENT');
});
@@ -35,11 +28,9 @@ describe('Interaction', () => {
const url = 'http://localhost:9000/click_security_loose.html';
cy.viewport(1440, 1024);
cy.visit(url);
- cy.get('body')
- .find('#flowchart-URL-3')
- .click();
+ cy.get('body').find('#flowchart-URL-3').click();
- cy.location().should(location => {
+ cy.location().should((location) => {
expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
});
});
@@ -47,11 +38,9 @@ describe('Interaction', () => {
const url = 'http://localhost:9000/click_security_loose.html';
cy.viewport(1440, 1024);
cy.visit(url);
- cy.get('body')
- .find('g[id="flowchart-2URL-7"]')
- .click();
+ cy.get('body').find('g[id="flowchart-2URL-7"]').click();
- cy.location().should(location => {
+ cy.location().should((location) => {
expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
});
});
@@ -60,9 +49,7 @@ describe('Interaction', () => {
const url = 'http://localhost:9000/click_security_loose.html';
cy.viewport(1440, 1024);
cy.visit(url);
- cy.get('body')
- .find('g#flowchart-Function-10')
- .click();
+ cy.get('body').find('g#flowchart-Function-10').click();
cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
});
@@ -70,9 +57,7 @@ describe('Interaction', () => {
const url = 'http://localhost:9000/click_security_loose.html';
cy.viewport(1440, 1024);
cy.visit(url);
- cy.get('body')
- .find('g[id="flowchart-1Function-14"]')
- .click();
+ cy.get('body').find('g[id="flowchart-1Function-14"]').click();
cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
});
@@ -80,11 +65,9 @@ describe('Interaction', () => {
const url = 'http://localhost:9000/click_security_loose.html';
cy.viewport(1440, 1024);
cy.visit(url);
- cy.get('body')
- .find('#flowchart-URL-11')
- .click();
+ cy.get('body').find('#flowchart-URL-11').click();
- cy.location().should(location => {
+ cy.location().should((location) => {
expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
});
});
@@ -92,11 +75,9 @@ describe('Interaction', () => {
const url = 'http://localhost:9000/click_security_loose.html';
cy.viewport(1440, 1024);
cy.visit(url);
- cy.get('body')
- .find('g[id="flowchart-2URL-15"]')
- .click();
+ cy.get('body').find('g[id="flowchart-2URL-15"]').click();
- cy.location().should(location => {
+ cy.location().should((location) => {
expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
});
});
@@ -105,11 +86,9 @@ describe('Interaction', () => {
const url = 'http://localhost:9000/click_security_loose.html';
cy.viewport(1440, 1024);
cy.visit(url);
- cy.get('body')
- .find('rect#cl1')
- .click({ force: true });
+ cy.get('body').find('rect#cl1').click({ force: true });
- cy.location().should(location => {
+ cy.location().should((location) => {
expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
});
});
@@ -117,11 +96,9 @@ describe('Interaction', () => {
const url = 'http://localhost:9000/click_security_loose.html';
cy.viewport(1440, 1024);
cy.visit(url);
- cy.get('body')
- .find('text#cl1-text')
- .click({ force: true });
+ cy.get('body').find('text#cl1-text').click({ force: true });
- cy.location().should(location => {
+ cy.location().should((location) => {
expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
});
});
@@ -129,9 +106,7 @@ describe('Interaction', () => {
const url = 'http://localhost:9000/click_security_loose.html';
cy.viewport(1440, 1024);
cy.visit(url);
- cy.get('body')
- .find('rect#cl2')
- .click({ force: true });
+ cy.get('body').find('rect#cl2').click({ force: true });
cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant cl2');
});
@@ -139,9 +114,7 @@ describe('Interaction', () => {
const url = 'http://localhost:9000/click_security_loose.html';
cy.viewport(1440, 1024);
cy.visit(url);
- cy.get('body')
- .find('rect#cl3')
- .click({ force: true });
+ cy.get('body').find('rect#cl3').click({ force: true });
cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant test1 test2 test3');
});
@@ -150,9 +123,7 @@ describe('Interaction', () => {
const url = 'http://localhost:9000/click_security_loose.html';
cy.viewport(1440, 1024);
cy.visit(url);
- cy.get('body')
- .find('text#cl2-text')
- .click({ force: true });
+ cy.get('body').find('text#cl2-text').click({ force: true });
cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant cl2');
});
@@ -160,13 +131,10 @@ describe('Interaction', () => {
const url = 'http://localhost:9000/click_security_loose.html';
cy.viewport(1440, 1024);
cy.visit(url);
- cy.get('body')
- .find('text#cl3-text')
- .click({ force: true });
+ cy.get('body').find('text#cl3-text').click({ force: true });
cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant test1 test2 test3');
});
-
});
describe('Interaction - security level tight', () => {
@@ -174,9 +142,7 @@ describe('Interaction', () => {
const url = 'http://localhost:9000/click_security_strict.html';
cy.viewport(1440, 1024);
cy.visit(url);
- cy.get('body')
- .find('g#flowchart-Function-2')
- .click();
+ cy.get('body').find('g#flowchart-Function-2').click();
cy.get('.created-by-click').should('not.exist');
// cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
@@ -185,9 +151,7 @@ describe('Interaction', () => {
const url = 'http://localhost:9000/click_security_strict.html';
cy.viewport(1440, 1024);
cy.visit(url);
- cy.get('body')
- .find('g[id="flowchart-1Function-6"]')
- .click();
+ cy.get('body').find('g[id="flowchart-1Function-6"]').click();
// cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
cy.get('.created-by-click').should('not.exist');
@@ -196,11 +160,9 @@ describe('Interaction', () => {
const url = 'http://localhost:9000/click_security_strict.html';
cy.viewport(1440, 1024);
cy.visit(url);
- cy.get('body')
- .find('g#flowchart-URL-3')
- .click();
+ cy.get('body').find('g#flowchart-URL-3').click();
- cy.location().should(location => {
+ cy.location().should((location) => {
expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
});
});
@@ -208,11 +170,9 @@ describe('Interaction', () => {
const url = 'http://localhost:9000/click_security_strict.html';
cy.viewport(1440, 1024);
cy.visit(url);
- cy.get('body')
- .find('g[id="flowchart-2URL-7"]')
- .click();
+ cy.get('body').find('g[id="flowchart-2URL-7"]').click();
- cy.location().should(location => {
+ cy.location().should((location) => {
expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
});
});
@@ -221,11 +181,9 @@ describe('Interaction', () => {
const url = 'http://localhost:9000/click_security_strict.html';
cy.viewport(1440, 1024);
cy.visit(url);
- cy.get('body')
- .find('rect#cl1')
- .click({ force: true });
+ cy.get('body').find('rect#cl1').click({ force: true });
- cy.location().should(location => {
+ cy.location().should((location) => {
expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
});
});
@@ -233,11 +191,9 @@ describe('Interaction', () => {
const url = 'http://localhost:9000/click_security_strict.html';
cy.viewport(1440, 1024);
cy.visit(url);
- cy.get('body')
- .find('text#cl1-text')
- .click({ force: true });
+ cy.get('body').find('text#cl1-text').click({ force: true });
- cy.location().should(location => {
+ cy.location().should((location) => {
expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
});
});
@@ -245,23 +201,19 @@ describe('Interaction', () => {
const url = 'http://localhost:9000/click_security_strict.html';
cy.viewport(1440, 1024);
cy.visit(url);
- cy.get('body')
- .find('rect#cl2')
- .click({ force: true });
+ cy.get('body').find('rect#cl2').click({ force: true });
// cy.get('.created-by-gant-click').should('not.have.text', 'Clicked By Gant cl2');
- cy.get('.created-by-gant-click').should('not.exist')
+ cy.get('.created-by-gant-click').should('not.exist');
});
it('should handle a click on a task with a bound function', () => {
const url = 'http://localhost:9000/click_security_strict.html';
cy.viewport(1440, 1024);
cy.visit(url);
- cy.get('body')
- .find('text#cl2-text')
- .click({ force: true });
+ cy.get('body').find('text#cl2-text').click({ force: true });
// cy.get('.created-by-gant-click').should('not.have.text', 'Clicked By Gant cl2');
- cy.get('.created-by-gant-click').should('not.exist')
+ cy.get('.created-by-gant-click').should('not.exist');
});
});
@@ -270,9 +222,7 @@ describe('Interaction', () => {
const url = 'http://localhost:9000/click_security_other.html';
cy.viewport(1440, 1024);
cy.visit(url);
- cy.get('body')
- .find('g#flowchart-Function-2')
- .click();
+ cy.get('body').find('g#flowchart-Function-2').click();
// cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
cy.get('.created-by-click').should('not.exist');
@@ -281,9 +231,7 @@ describe('Interaction', () => {
const url = 'http://localhost:9000/click_security_other.html';
cy.viewport(1440, 1024);
cy.visit(url);
- cy.get('body')
- .find('g[id="flowchart-1Function-6"]')
- .click();
+ cy.get('body').find('g[id="flowchart-1Function-6"]').click();
cy.get('.created-by-click').should('not.exist');
cy.get('.created-by-click').should('not.exist');
@@ -292,11 +240,9 @@ describe('Interaction', () => {
const url = 'http://localhost:9000/click_security_other.html';
cy.viewport(1440, 1024);
cy.visit(url);
- cy.get('body')
- .find('g#flowchart-URL-3')
- .click();
+ cy.get('body').find('g#flowchart-URL-3').click();
- cy.location().should(location => {
+ cy.location().should((location) => {
expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
});
});
@@ -305,9 +251,7 @@ describe('Interaction', () => {
const url = 'http://localhost:9000/click_security_other.html';
cy.viewport(1440, 1024);
cy.visit(url);
- cy.get('body')
- .find('rect#cl2')
- .click({ force: true });
+ cy.get('body').find('rect#cl2').click({ force: true });
cy.get('.created-by-gant-click').should('not.exist');
});
@@ -315,9 +259,7 @@ describe('Interaction', () => {
const url = 'http://localhost:9000/click_security_other.html';
cy.viewport(1440, 1024);
cy.visit(url);
- cy.get('body')
- .find('text#cl2-text')
- .click({ force: true });
+ cy.get('body').find('text#cl2-text').click({ force: true });
cy.get('.created-by-gant-click').should('not.exist');
});
diff --git a/cypress/e2e/other/rerender.spec.js b/cypress/e2e/other/rerender.spec.js
new file mode 100644
index 0000000000..f160a2e273
--- /dev/null
+++ b/cypress/e2e/other/rerender.spec.js
@@ -0,0 +1,19 @@
+describe('Rerendering', () => {
+ it('should be able to render after an error has occurred', () => {
+ const url = 'http://localhost:9000/render-after-error.html';
+ cy.viewport(1440, 1024);
+ cy.visit(url);
+ cy.get('#graphDiv').should('exist');
+ });
+
+ it('should be able to render and rerender a graph via API', () => {
+ const url = 'http://localhost:9000/rerender.html';
+ cy.viewport(1440, 1024);
+ cy.visit(url);
+ cy.get('#graph [id^=flowchart-A]').should('have.text', 'XMas');
+
+ cy.get('body').find('#rerender').click({ force: true });
+
+ cy.get('#graph [id^=flowchart-A]').should('have.text', 'Saturday');
+ });
+});
diff --git a/cypress/integration/other/webpackUsage.spec.js b/cypress/e2e/other/webpackUsage.spec.js
similarity index 72%
rename from cypress/integration/other/webpackUsage.spec.js
rename to cypress/e2e/other/webpackUsage.spec.js
index b5c4856725..727fb5ac74 100644
--- a/cypress/integration/other/webpackUsage.spec.js
+++ b/cypress/e2e/other/webpackUsage.spec.js
@@ -1,20 +1,15 @@
-/* eslint-env jest */
describe('Sequencediagram', () => {
it('should render a simple sequence diagrams', () => {
const url = 'http://localhost:9000/webpackUsage.html';
cy.visit(url);
- cy.get('body')
- .find('svg')
- .should('have.length', 1);
+ cy.get('body').find('svg').should('have.length', 1);
});
it('should handle html escapings properly', () => {
const url = 'http://localhost:9000/webpackUsage.html?test-html-escaping=true';
cy.visit(url);
- cy.get('body')
- .find('svg')
- .should('have.length', 1);
+ cy.get('body').find('svg').should('have.length', 1);
cy.get('g.label > foreignobject > div').should('not.contain.text', '');
});
diff --git a/cypress/e2e/other/xss.spec.js b/cypress/e2e/other/xss.spec.js
new file mode 100644
index 0000000000..912354f7de
--- /dev/null
+++ b/cypress/e2e/other/xss.spec.js
@@ -0,0 +1,132 @@
+import { mermaidUrl } from '../../helpers/util.js';
+describe('XSS', () => {
+ it('should handle xss in tags', () => {
+ const str =
+ 'eyJjb2RlIjoiXG5ncmFwaCBMUlxuICAgICAgQi0tPkQoPGltZyBvbmVycm9yPWxvY2F0aW9uPWBqYXZhc2NyaXB0XFx1MDAzYXhzc0F0dGFja1xcdTAwMjhkb2N1bWVudC5kb21haW5cXHUwMDI5YCBzcmM9eD4pOyIsIm1lcm1haWQiOnsidGhlbWUiOiJkZWZhdWx0In19';
+
+ const url = mermaidUrl(str, {}, true);
+
+ cy.visit(url);
+ cy.wait(1000).then(() => {
+ cy.get('.mermaid').should('exist');
+ });
+ cy.get('svg');
+ });
+
+ it('should not allow tags in the css', () => {
+ const str =
+ 'eyJjb2RlIjoiJSV7aW5pdDogeyAnZm9udEZhbWlseSc6ICdcXFwiPjwvc3R5bGU-PGltZyBzcmM9eCBvbmVycm9yPXhzc0F0dGFjaygpPid9IH0lJVxuZ3JhcGggTFJcbiAgICAgQSAtLT4gQiIsIm1lcm1haWQiOnsidGhlbWUiOiJkZWZhdWx0IiwiZmxvd2NoYXJ0Ijp7Imh0bWxMYWJlbHMiOmZhbHNlfX0sInVwZGF0ZUVkaXRvciI6ZmFsc2V9';
+
+ const url = mermaidUrl(
+ str,
+ {
+ theme: 'default',
+ flowchart: {
+ htmlMode: false,
+ },
+ },
+ true
+ );
+
+ cy.visit(url);
+ cy.wait(1000).then(() => {
+ cy.get('#the-malware').should('not.exist');
+ });
+ });
+
+ it('should handle xss in tags in non-html mode', () => {
+ const str =
+ 'eyJjb2RlIjoiXG5ncmFwaCBMUlxuICAgICAgQi0tPkQoPGltZyBvbmVycm9yPWxvY2F0aW9uPWBqYXZhc2NyaXB0XFx1MDAzYXhzc0F0dGFja1xcdTAwMjhkb2N1bWVudC5kb21haW5cXHUwMDI5YCBzcmM9eD4pOyIsIm1lcm1haWQiOnsidGhlbWUiOiJkZWZhdWx0IiwiZmxvd2NoYXJ0Ijp7Imh0bWxMYWJlbHMiOmZhbHNlfX19';
+
+ const url = mermaidUrl(
+ str,
+ {
+ theme: 'default',
+ flowchart: {
+ htmlMode: false,
+ },
+ },
+ true
+ );
+
+ cy.visit(url);
+ cy.wait(1000);
+
+ cy.get('#the-malware').should('not.exist');
+ });
+
+ it('should not allow changing the __proto__ attribute using config', () => {
+ cy.visit('http://localhost:9000/xss2.html');
+ cy.wait(1000);
+ cy.get('#the-malware').should('not.exist');
+ });
+ it('should not allow manipulating htmlLabels into a false positive', () => {
+ cy.visit('http://localhost:9000/xss4.html');
+ cy.wait(1000);
+ cy.get('#the-malware').should('not.exist');
+ });
+ it('should not allow manipulating antiscript to run javascript', () => {
+ cy.visit('http://localhost:9000/xss5.html');
+ cy.wait(1000);
+ cy.get('#the-malware').should('not.exist');
+ });
+ it('should not allow manipulating antiscript to run javascript using onerror', () => {
+ cy.visit('http://localhost:9000/xss6.html');
+ cy.wait(1000);
+ cy.get('#the-malware').should('not.exist');
+ });
+ it('should not allow manipulating antiscript to run javascript using onerror in state diagrams with dagre wrapper', () => {
+ cy.visit('http://localhost:9000/xss8.html');
+ cy.wait(1000);
+ cy.get('#the-malware').should('not.exist');
+ });
+ it('should not allow manipulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => {
+ cy.visit('http://localhost:9000/xss9.html');
+ cy.wait(1000);
+ cy.get('#the-malware').should('not.exist');
+ });
+ it('should not allow manipulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => {
+ cy.visit('http://localhost:9000/xss10.html');
+ cy.wait(1000);
+ cy.get('#the-malware').should('not.exist');
+ });
+ it('should not allow manipulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => {
+ cy.visit('http://localhost:9000/xss11.html');
+ cy.wait(1000);
+ cy.get('#the-malware').should('not.exist');
+ });
+ it('should not allow manipulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => {
+ cy.visit('http://localhost:9000/xss12.html');
+ cy.wait(1000);
+ cy.get('#the-malware').should('not.exist');
+ });
+ it('should not allow manipulating antiscript to run javascript using onerror in state diagrams with dagre d3', () => {
+ cy.visit('http://localhost:9000/xss13.html');
+ cy.wait(1000);
+ cy.get('#the-malware').should('not.exist');
+ });
+ it('should not allow manipulating antiscript to run javascript iframes in class diagrams', () => {
+ cy.visit('http://localhost:9000/xss14.html');
+ cy.wait(1000);
+ cy.get('#the-malware').should('not.exist');
+ });
+ it('should sanitize cardinalities properly in class diagrams', () => {
+ cy.visit('http://localhost:9000/xss18.html');
+ 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 85%
rename from cypress/integration/rendering/classDiagram-v2.spec.js
rename to cypress/e2e/rendering/classDiagram-v2.spec.js
index eea11aaf37..d285a92374 100644
--- a/cypress/integration/rendering/classDiagram-v2.spec.js
+++ b/cypress/e2e/rendering/classDiagram-v2.spec.js
@@ -1,10 +1,8 @@
-/* eslint-env jest */
import { imgSnapshotTest } from '../../helpers/util';
describe('Class diagram V2', () => {
-
- it('0: should render a simple class diagram', () => {
- imgSnapshotTest(
- `
+ it('0: should render a simple class diagram', () => {
+ imgSnapshotTest(
+ `
classDiagram-v2
classA -- classB : Inheritance
@@ -13,10 +11,10 @@ describe('Class diagram V2', () => {
classB -- classD
`,
- {logLevel : 1, flowchart: { "htmlLabels": false },}
- );
- cy.get('svg');
- });
+ { logLevel: 1, flowchart: { htmlLabels: false } }
+ );
+ cy.get('svg');
+ });
it('1: should render a simple class diagram', () => {
imgSnapshotTest(
@@ -47,7 +45,7 @@ describe('Class diagram V2', () => {
test()
}
`,
- {logLevel : 1, flowchart: { "htmlLabels": false },}
+ { logLevel: 1, flowchart: { htmlLabels: false } }
);
cy.get('svg');
});
@@ -76,8 +74,7 @@ describe('Class diagram V2', () => {
test()
}
`,
- {logLevel : 1, flowchart: { "htmlLabels": false },}
-
+ { logLevel: 1, flowchart: { htmlLabels: false } }
);
cy.get('svg');
});
@@ -95,7 +92,7 @@ describe('Class diagram V2', () => {
Class01 : +int publicGorilla
Class01 : #int protectedMarmoset
`,
- {logLevel : 1, flowchart: { "htmlLabels": false },}
+ { logLevel: 1, flowchart: { htmlLabels: false } }
);
cy.get('svg');
});
@@ -103,7 +100,7 @@ describe('Class diagram V2', () => {
it('should render multiple class diagrams', () => {
imgSnapshotTest(
[
- `
+ `
classDiagram-v2
Class01 "1" <|--|> "*" AveryLongClass : Cool
<<interface>> Class01
@@ -125,7 +122,7 @@ describe('Class diagram V2', () => {
test()
}
`,
- `
+ `
classDiagram-v2
Class01 "1" <|--|> "*" AveryLongClass : Cool
<<interface>> Class01
@@ -148,7 +145,7 @@ describe('Class diagram V2', () => {
}
`,
],
- {logLevel : 1, flowchart: { "htmlLabels": false },}
+ { logLevel: 1, flowchart: { htmlLabels: false } }
);
cy.get('svg');
});
@@ -178,7 +175,7 @@ describe('Class diagram V2', () => {
test()
}
`,
- {logLevel : 1, flowchart: { "htmlLabels": false },}
+ { logLevel: 1, flowchart: { htmlLabels: false } }
);
cy.get('svg');
});
@@ -190,7 +187,7 @@ describe('Class diagram V2', () => {
Class01 <|-- AveryLongClass : Cool
Class01 : someMethod()*
`,
- {logLevel : 1, flowchart: { "htmlLabels": false },}
+ { logLevel: 1, flowchart: { htmlLabels: false } }
);
cy.get('svg');
});
@@ -202,7 +199,7 @@ describe('Class diagram V2', () => {
Class01 <|-- AveryLongClass : Cool
Class01 : someMethod()$
`,
- {logLevel : 1, flowchart: { "htmlLabels": false },}
+ { logLevel: 1, flowchart: { htmlLabels: false } }
);
cy.get('svg');
});
@@ -222,7 +219,7 @@ describe('Class diagram V2', () => {
test()
}
`,
- {logLevel : 1, flowchart: { "htmlLabels": false },}
+ { logLevel: 1, flowchart: { htmlLabels: false } }
);
cy.get('svg');
});
@@ -243,7 +240,7 @@ describe('Class diagram V2', () => {
test()
}
`,
- {logLevel : 1, flowchart: { "htmlLabels": false },}
+ { logLevel: 1, flowchart: { htmlLabels: false } }
);
cy.get('svg');
});
@@ -265,7 +262,7 @@ describe('Class diagram V2', () => {
}
link Class01 "google.com" "A Tooltip"
`,
- {logLevel : 1, flowchart: { "htmlLabels": false },}
+ { logLevel: 1, flowchart: { htmlLabels: false } }
);
cy.get('svg');
});
@@ -287,7 +284,7 @@ describe('Class diagram V2', () => {
}
callback Class01 "functionCall" "A Tooltip"
`,
- {logLevel : 1, flowchart: { "htmlLabels": false },}
+ { logLevel: 1, flowchart: { htmlLabels: false } }
);
cy.get('svg');
});
@@ -302,7 +299,7 @@ describe('Class diagram V2', () => {
testArray() bool[]
}
`,
- {logLevel : 1, flowchart: { "htmlLabels": false },}
+ { logLevel: 1, flowchart: { htmlLabels: false } }
);
cy.get('svg');
});
@@ -318,7 +315,7 @@ describe('Class diagram V2', () => {
testArray() bool[]
}
`,
- {logLevel : 1, flowchart: { "htmlLabels": false },}
+ { logLevel: 1, flowchart: { htmlLabels: false } }
);
cy.get('svg');
});
@@ -336,7 +333,7 @@ describe('Class diagram V2', () => {
cssClass "Class10" exClass2
`,
- {logLevel : 1, flowchart: { "htmlLabels": false },}
+ { logLevel: 1, flowchart: { htmlLabels: false } }
);
cy.get('svg');
});
@@ -352,7 +349,7 @@ describe('Class diagram V2', () => {
testArray() bool[]
}
`,
- {logLevel : 1, flowchart: { "htmlLabels": false },}
+ { logLevel: 1, flowchart: { htmlLabels: false } }
);
cy.get('svg');
});
@@ -366,7 +363,7 @@ describe('Class diagram V2', () => {
cssClass "Class10, class20" exClass2
`,
- {logLevel : 1, flowchart: { "htmlLabels": false },}
+ { logLevel: 1, flowchart: { htmlLabels: false } }
);
cy.get('svg');
});
@@ -375,16 +372,16 @@ describe('Class diagram V2', () => {
imgSnapshotTest(
`
classDiagram-v2
- Foo {
+ class Foo {
+String bar$
}
`,
- {logLevel : 1, flowchart: { "htmlLabels": false },}
+ { logLevel: 1, flowchart: { htmlLabels: false } }
);
cy.get('svg');
});
- it('16b: should handle the direction statemnent with TB', () => {
+ it('16b: should handle the direction statement with TB', () => {
imgSnapshotTest(
`
classDiagram
@@ -404,12 +401,12 @@ describe('Class diagram V2', () => {
Student "1" --o "1" Bike : rides
`,
- {logLevel : 1, flowchart: { "htmlLabels": false },}
+ { logLevel: 1, flowchart: { htmlLabels: false } }
);
cy.get('svg');
});
-
- it('18: should handle the direction statemnent with LR', () => {
+
+ it('18: should handle the direction statement with LR', () => {
imgSnapshotTest(
`
classDiagram
@@ -429,11 +426,11 @@ describe('Class diagram V2', () => {
Student "1" --o "1" Bike : rides
`,
- {logLevel : 1, flowchart: { "htmlLabels": false },}
+ { logLevel: 1, flowchart: { htmlLabels: false } }
);
cy.get('svg');
});
- it('17a: should handle the direction statemnent with BT', () => {
+ it('17a: should handle the direction statement with BT', () => {
imgSnapshotTest(
`
classDiagram
@@ -453,11 +450,11 @@ describe('Class diagram V2', () => {
Student "1" --o "1" Bike : rides
`,
- {logLevel : 1, flowchart: { "htmlLabels": false },}
+ { logLevel: 1, flowchart: { htmlLabels: false } }
);
cy.get('svg');
});
- it('17b: should handle the direction statemment with RL', () => {
+ it('17b: should handle the direction statement with RL', () => {
imgSnapshotTest(
`
classDiagram
@@ -477,7 +474,7 @@ describe('Class diagram V2', () => {
Student "1" --o "1" Bike : rides
`,
- {logLevel : 1, flowchart: { "htmlLabels": false },}
+ { logLevel: 1, flowchart: { htmlLabels: false } }
);
cy.get('svg');
});
diff --git a/cypress/integration/rendering/classDiagram.spec.js b/cypress/e2e/rendering/classDiagram.spec.js
similarity index 95%
rename from cypress/integration/rendering/classDiagram.spec.js
rename to cypress/e2e/rendering/classDiagram.spec.js
index b50f4f5770..8cf410d052 100644
--- a/cypress/integration/rendering/classDiagram.spec.js
+++ b/cypress/e2e/rendering/classDiagram.spec.js
@@ -1,411 +1,410 @@
-/* eslint-env jest */
-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 52%
rename from cypress/integration/rendering/conf-and-directives.spec.js
rename to cypress/e2e/rendering/conf-and-directives.spec.js
index 7d11ec86ef..3fc0f7f02f 100644
--- a/cypress/integration/rendering/conf-and-directives.spec.js
+++ b/cypress/e2e/rendering/conf-and-directives.spec.js
@@ -1,10 +1,9 @@
-/* eslint-env jest */
import { imgSnapshotTest } from '../../helpers/util.js';
describe('Configuration and directives - nodes should be light blue', () => {
- it('No config - use default', () => {
- imgSnapshotTest(
- `
+ it('No config - use default', () => {
+ imgSnapshotTest(
+ `
graph TD
A(Default) --> B[/Another/]
A --> C[End]
@@ -13,13 +12,13 @@ describe('Configuration and directives - nodes should be light blue', () => {
C
end
`,
- {}
- );
- cy.get('svg');
- });
- it('Settigns from intitialize - nodes should be green', () => {
- imgSnapshotTest(
- `
+ {}
+ );
+ cy.get('svg');
+ });
+ it('Settings from initialize - nodes should be green', () => {
+ imgSnapshotTest(
+ `
graph TD
A(Forest) --> B[/Another/]
A --> C[End]
@@ -27,13 +26,13 @@ graph TD
B
C
end `,
- {theme:'forest'}
- );
- cy.get('svg');
- });
- it('Settings from initialize overriding themeVariable - nodes shold be red', () => {
- imgSnapshotTest(
- `
+ { theme: 'forest' }
+ );
+ cy.get('svg');
+ });
+ it('Settings from initialize overriding themeVariable - nodes should be red', () => {
+ imgSnapshotTest(
+ `
%%{init: { 'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%%
@@ -45,13 +44,13 @@ graph TD
C
end
`,
- {theme:'base', themeVariables:{ primaryColor: '#ff0000'}, logLevel: 0}
- );
- cy.get('svg');
- });
- it('Settings from directive - nodes should be grey', () => {
- imgSnapshotTest(
- `
+ { theme: 'base', themeVariables: { primaryColor: '#ff0000' }, logLevel: 0 }
+ );
+ cy.get('svg');
+ });
+ it('Settings from directive - nodes should be grey', () => {
+ imgSnapshotTest(
+ `
%%{init: { 'logLevel': 0, 'theme': 'neutral'} }%%
graph TD
A(Start) --> B[/Another/]
@@ -61,14 +60,14 @@ graph TD
C
end
`,
- {}
- );
- cy.get('svg');
- });
+ {}
+ );
+ cy.get('svg');
+ });
- it('Settings from directive overriding theme variable - nodes should be red', () => {
- imgSnapshotTest(
- `
+ it('Settings from directive overriding theme variable - nodes should be red', () => {
+ imgSnapshotTest(
+ `
%%{init: {'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%%
graph TD
A(Start) --> B[/Another/]
@@ -78,13 +77,13 @@ graph TD
C
end
`,
- {}
- );
- cy.get('svg');
+ {}
+ );
+ cy.get('svg');
});
- it('Settings from initialize and directive - nodes should be grey', () => {
- imgSnapshotTest(
- `
+ it('Settings from initialize and directive - nodes should be grey', () => {
+ imgSnapshotTest(
+ `
%%{init: { 'logLevel': 0, 'theme': 'neutral'} }%%
graph TD
A(Start) --> B[/Another/]
@@ -94,13 +93,13 @@ graph TD
C
end
`,
- {theme:'forest'}
- );
- cy.get('svg');
- });
- it('Theme from initialize, directive overriding theme variable - nodes should be red', () => {
- imgSnapshotTest(
- `
+ { theme: 'forest' }
+ );
+ cy.get('svg');
+ });
+ it('Theme from initialize, directive overriding theme variable - nodes should be red', () => {
+ imgSnapshotTest(
+ `
%%{init: {'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%%
graph TD
A(Start) --> B[/Another/]
@@ -110,13 +109,13 @@ graph TD
C
end
`,
- {theme:'base'}
- );
- cy.get('svg');
- });
- it('Theme variable from initialize, theme from directive - nodes should be red', () => {
- imgSnapshotTest(
- `
+ { theme: 'base' }
+ );
+ cy.get('svg');
+ });
+ it('Theme variable from initialize, theme from directive - nodes should be red', () => {
+ imgSnapshotTest(
+ `
%%{init: { 'logLevel': 0, 'theme': 'base'} }%%
graph TD
A(Start) --> B[/Another/]
@@ -126,16 +125,16 @@ graph TD
C
end
`,
- {themeVariables:{primaryColor: '#ff0000'}}
- );
+ { themeVariables: { primaryColor: '#ff0000' } }
+ );
+ cy.get('svg');
+ });
+ describe('when rendering several diagrams', () => {
+ it('diagrams should not taint later diagrams', () => {
+ const url = 'http://localhost:9000/theme-directives.html';
+ cy.visit(url);
cy.get('svg');
- });
- describe('when rendering several diagrams', () => {
- it('diagrams should not taint later diagrams', () => {
- const url = 'http://localhost:9000/theme-directives.html';
- cy.visit(url);
- cy.get('svg');
- cy.percySnapshot();
- });
+ cy.matchImageSnapshot('conf-and-directives.spec-when-rendering-several-diagrams-diagram-1');
});
});
+});
diff --git a/cypress/integration/rendering/current.spec.js b/cypress/e2e/rendering/current.spec.js
similarity index 94%
rename from cypress/integration/rendering/current.spec.js
rename to cypress/e2e/rendering/current.spec.js
index bd4eb888b5..56b5f774b3 100644
--- a/cypress/integration/rendering/current.spec.js
+++ b/cypress/e2e/rendering/current.spec.js
@@ -1,4 +1,3 @@
-/* eslint-env jest */
import { imgSnapshotTest } from '../../helpers/util';
describe('State diagram', () => {
diff --git a/cypress/integration/rendering/debug.spec.js b/cypress/e2e/rendering/debug.spec.js
similarity index 70%
rename from cypress/integration/rendering/debug.spec.js
rename to cypress/e2e/rendering/debug.spec.js
index d3123906ff..673cadf3ed 100644
--- a/cypress/integration/rendering/debug.spec.js
+++ b/cypress/e2e/rendering/debug.spec.js
@@ -1,14 +1,12 @@
-/* eslint-env jest */
import { imgSnapshotTest } from '../../helpers/util';
describe('Flowchart', () => {
-
it('34: testing the label width in percy', () => {
imgSnapshotTest(
`graph TD
A[Christmas]
`,
- { theme: 'forest' , fontFamily: '"Noto Sans SC", sans-serif' }
+ { theme: 'forest', fontFamily: '"Noto Sans SC", sans-serif' }
);
});
});
diff --git a/cypress/integration/rendering/erDiagram.spec.js b/cypress/e2e/rendering/erDiagram.spec.js
similarity index 63%
rename from cypress/integration/rendering/erDiagram.spec.js
rename to cypress/e2e/rendering/erDiagram.spec.js
index fc93fb5bb8..d6e2af7172 100644
--- a/cypress/integration/rendering/erDiagram.spec.js
+++ b/cypress/e2e/rendering/erDiagram.spec.js
@@ -1,4 +1,3 @@
-/* eslint-env jest */
import { imgSnapshotTest, renderGraph } from '../../helpers/util';
describe('Entity Relationship Diagram', () => {
@@ -9,7 +8,7 @@ describe('Entity Relationship Diagram', () => {
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
`,
- {logLevel : 1}
+ { logLevel: 1 }
);
cy.get('svg');
});
@@ -22,7 +21,7 @@ describe('Entity Relationship Diagram', () => {
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
`,
- {logLevel : 1}
+ { logLevel: 1 }
);
cy.get('svg');
});
@@ -34,7 +33,7 @@ describe('Entity Relationship Diagram', () => {
CUSTOMER ||--|{ ADDRESS : "invoiced at"
CUSTOMER ||--|{ ADDRESS : "receives goods at"
`,
- {logLevel : 1}
+ { logLevel: 1 }
);
cy.get('svg');
});
@@ -47,7 +46,7 @@ describe('Entity Relationship Diagram', () => {
B ||--|{ C : likes
C ||--|{ A : likes
`,
- {logLevel : 1}
+ { logLevel: 1 }
);
cy.get('svg');
});
@@ -65,7 +64,7 @@ describe('Entity Relationship Diagram', () => {
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
`,
- {logLevel : 1}
+ { logLevel: 1 }
);
cy.get('svg');
});
@@ -73,18 +72,18 @@ describe('Entity Relationship Diagram', () => {
it('should render multiple ER diagrams', () => {
imgSnapshotTest(
[
- `
+ `
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
`,
- `
+ `
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
- `
+ `,
],
- {logLevel : 1}
+ { logLevel: 1 }
);
cy.get('svg');
});
@@ -97,7 +96,7 @@ describe('Entity Relationship Diagram', () => {
BOOK }|..|{ GENRE : " "
AUTHOR }|..|{ GENRE : " "
`,
- {logLevel : 1}
+ { logLevel: 1 }
);
cy.get('svg');
});
@@ -111,16 +110,15 @@ describe('Entity Relationship Diagram', () => {
`,
{ er: { useMaxWidth: true } }
);
- cy.get('svg')
- .should((svg) => {
- expect(svg).to.have.attr('width', '100%');
- expect(svg).to.have.attr('height', '465');
- const style = svg.attr('style');
- expect(style).to.match(/^max-width: [\d.]+px;$/);
- const maxWidthValue = parseFloat(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(140 * .95, 140 * 1.05);
- });
+ cy.get('svg').should((svg) => {
+ expect(svg).to.have.attr('width', '100%');
+ expect(svg).to.have.attr('height', '465');
+ const style = svg.attr('style');
+ expect(style).to.match(/^max-width: [\d.]+px;$/);
+ const maxWidthValue = parseFloat(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(140 * 0.95, 140 * 1.05);
+ });
});
it('should render an ER when useMaxWidth is false', () => {
@@ -132,14 +130,13 @@ describe('Entity Relationship Diagram', () => {
`,
{ er: { 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(140 * .95, 140 * 1.05);
- expect(svg).to.have.attr('height', '465');
- expect(svg).to.not.have.attr('style');
- });
+ 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(140 * 0.95, 140 * 1.05);
+ expect(svg).to.have.attr('height', '465');
+ expect(svg).to.not.have.attr('style');
+ });
});
it('should render entities that have no relationships', () => {
@@ -165,7 +162,7 @@ describe('Entity Relationship Diagram', () => {
AUTHOR }|..|{ BOOK : writes
BOOK { float price }
`,
- { logLevel : 1 }
+ { logLevel: 1 }
);
cy.get('svg');
});
@@ -174,27 +171,73 @@ describe('Entity Relationship Diagram', () => {
renderGraph(
`
erDiagram
- PRIVATE_FINANCIAL_INSTITUTION {
+ PRIVATE_FINANCIAL_INSTITUTION {
string name
int turnover
}
PRIVATE_FINANCIAL_INSTITUTION ||..|{ EMPLOYEE : employs
EMPLOYEE { bool officer_of_firm }
`,
- { logLevel : 1 }
+ { logLevel: 1 }
);
cy.get('svg');
});
- it('should render entities with keys and comments', () => {
+ it('should render entities with keys', () => {
+ renderGraph(
+ `
+ erDiagram
+ AUTHOR_WITH_LONG_ENTITY_NAME {
+ string name PK
+ }
+ AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
+ BOOK {
+ float price
+ string author FK
+ string title PK
+ }
+ `,
+ { logLevel: 1 }
+ );
+ cy.get('svg');
+ });
+
+ it('should render entities with comments', () => {
renderGraph(
`
erDiagram
- BOOK { string title PK "comment"}
+ AUTHOR_WITH_LONG_ENTITY_NAME {
+ string name "comment"
+ }
+ AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
+ BOOK {
+ string author
+ string title "author comment"
+ float price "price comment"
+ }
`,
- { logLevel : 1 }
+ { logLevel: 1 }
);
cy.get('svg');
});
+ it('should render entities with keys and comments', () => {
+ renderGraph(
+ `
+ erDiagram
+ AUTHOR_WITH_LONG_ENTITY_NAME {
+ string name PK "comment"
+ }
+ AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
+ BOOK {
+ string description
+ float price "price comment"
+ string title PK "title comment"
+ string author FK
+ }
+ `,
+ { logLevel: 1 }
+ );
+ cy.get('svg');
+ });
});
diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/e2e/rendering/flowchart-v2.spec.js
similarity index 71%
rename from cypress/integration/rendering/flowchart-v2.spec.js
rename to cypress/e2e/rendering/flowchart-v2.spec.js
index af83eb5553..10731de059 100644
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/e2e/rendering/flowchart-v2.spec.js
@@ -1,4 +1,3 @@
-/* eslint-env jest */
import { imgSnapshotTest, renderGraph } from '../../helpers/util';
describe('Flowchart v2', () => {
@@ -29,7 +28,7 @@ describe('Flowchart v2', () => {
);
});
- it('3: a link with correct arrowhead to a subgraph', () => {
+ it('3: a link with correct arrowhead to a subgraph', () => {
imgSnapshotTest(
`flowchart TD
P1
@@ -69,7 +68,7 @@ describe('Flowchart v2', () => {
`flowchart TD
a["Haiya"]---->b
`,
- {htmlLabels: false, flowchart: {htmlLabels: false}}
+ { htmlLabels: false, flowchart: { htmlLabels: false } }
);
});
it('6: should render non-escaped with html labels', () => {
@@ -77,7 +76,7 @@ describe('Flowchart v2', () => {
`flowchart TD
a["Haiya"]===>b
`,
- {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+ { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
it('7: should render a flowchart when useMaxWidth is true (default)', () => {
@@ -91,18 +90,17 @@ describe('Flowchart v2', () => {
`,
{ flowchart: { useMaxWidth: true } }
);
- cy.get('svg')
- .should((svg) => {
- expect(svg).to.have.attr('width', '100%');
- expect(svg).to.have.attr('height');
- // use within because the absolute value can be slightly different depending on the environment Âą5%
- const height = parseFloat(svg.attr('height'));
- expect(height).to.be.within(446 * .95, 446 * 1.05);
- const style = svg.attr('style');
- expect(style).to.match(/^max-width: [\d.]+px;$/);
- const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
- expect(maxWidthValue).to.be.within(290 * .95-1, 290 * 1.05);
- });
+ cy.get('svg').should((svg) => {
+ expect(svg).to.have.attr('width', '100%');
+ expect(svg).to.have.attr('height');
+ // use within because the absolute value can be slightly different depending on the environment Âą5%
+ const height = parseFloat(svg.attr('height'));
+ expect(height).to.be.within(446 * 0.95, 446 * 1.05);
+ const style = svg.attr('style');
+ expect(style).to.match(/^max-width: [\d.]+px;$/);
+ const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
+ expect(maxWidthValue).to.be.within(290 * 0.95 - 1, 290 * 1.05);
+ });
});
it('8: should render a flowchart when useMaxWidth is false', () => {
renderGraph(
@@ -115,15 +113,14 @@ describe('Flowchart v2', () => {
`,
{ flowchart: { useMaxWidth: false } }
);
- cy.get('svg')
- .should((svg) => {
- const height = parseFloat(svg.attr('height'));
- const width = parseFloat(svg.attr('width'));
- // use within because the absolute value can be slightly different depending on the environment Âą5%
- expect(height).to.be.within(446 * .95, 446 * 1.05);
- expect(width).to.be.within(290 * .95-1, 290 * 1.05);
- expect(svg).to.not.have.attr('style');
- });
+ cy.get('svg').should((svg) => {
+ const height = parseFloat(svg.attr('height'));
+ const width = parseFloat(svg.attr('width'));
+ // use within because the absolute value can be slightly different depending on the environment Âą5%
+ expect(height).to.be.within(446 * 0.95, 446 * 1.05);
+ expect(width).to.be.within(290 * 0.95 - 1, 290 * 1.05);
+ expect(svg).to.not.have.attr('style');
+ });
});
it('V2 - 16: Render Stadium shape', () => {
@@ -141,7 +138,7 @@ describe('Flowchart v2', () => {
class A someclass;
class C someclass;
`,
- { flowchart: { htmlLabels: false } , fontFamily: 'courier'}
+ { flowchart: { htmlLabels: false }, fontFamily: 'courier' }
);
});
@@ -156,7 +153,7 @@ describe('Flowchart v2', () => {
b
end
`,
- {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+ { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
@@ -171,7 +168,7 @@ describe('Flowchart v2', () => {
b
end
`,
- {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+ { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
@@ -192,7 +189,7 @@ describe('Flowchart v2', () => {
B
end
`,
- {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+ { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
@@ -222,7 +219,7 @@ describe('Flowchart v2', () => {
routeur --> subnet1 & subnet2
subnet1 & subnet2 --> nat --> internet
`,
- {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+ { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
@@ -236,7 +233,7 @@ describe('Flowchart v2', () => {
subcontainer-child--> subcontainer-sibling
end
`,
- {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+ { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
@@ -258,11 +255,10 @@ end
sub_one --> sub_two
_one --> b
`,
- {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+ { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
-
it('56: handle nested subgraphs with outgoing links 3', () => {
imgSnapshotTest(
`flowchart TB
@@ -275,7 +271,7 @@ _one --> b
end
process_B-->|via_AWSBatch|container_Beta
`,
- {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+ { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
it('57: handle nested subgraphs with outgoing links 4', () => {
@@ -288,11 +284,10 @@ subgraph B
b
end
`,
- {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+ { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
-
it('57: handle nested subgraphs with outgoing links 2', () => {
imgSnapshotTest(
`flowchart TB
@@ -310,7 +305,7 @@ end
three --> two
two --> c2
`,
- {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+ { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
it('57.x: handle nested subgraphs with outgoing links 5', () => {
@@ -326,7 +321,7 @@ flowchart TB
process_A-->|messages|process_C
end
`,
- {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+ { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
it('58: handle styling with style expressions', () => {
@@ -337,7 +332,7 @@ flowchart TB
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
`,
- {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+ { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
it('59: handle styling of subgraphs and links', () => {
@@ -359,7 +354,7 @@ flowchart TD
class T TestSub
linkStyle 0,1 color:orange, stroke: orange;
`,
- {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+ { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
it('60: handle styling for all node shapes - v2', () => {
@@ -373,6 +368,7 @@ flowchart TD
I{{red text}} -->|default style| J[/blue text/]
K[\\ red text\\] -->|default style| L[/blue text\\]
M[\\ red text/] -->|default style| N[blue text];
+ O(((red text))) -->|default style| P(((blue text)));
linkStyle default color:Sienna;
style A stroke:#ff0000,fill:#ffcccc,color:#ff0000;
style B stroke:#0000ff,fill:#ccccff,color:#0000ff;
@@ -388,8 +384,10 @@ flowchart TD
style L stroke:#0000ff,fill:#ccccff,color:#0000ff;
style M stroke:#ff0000,fill:#ffcccc,color:#ff0000;
style N stroke:#0000ff,fill:#ccccff,color:#0000ff;
+ style O stroke:#ff0000,fill:#ffcccc,color:#ff0000;
+ style P stroke:#0000ff,fill:#ccccff,color:#0000ff;
`,
- {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose', logLevel:2}
+ { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose', logLevel: 2 }
);
});
it('61: fontawesome icons in edge labels', () => {
@@ -398,7 +396,7 @@ flowchart TD
flowchart TD
C -->|fa:fa-car Car| F[fa:fa-car Car]
`,
- {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+ { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
it('62: should render styled subgraphs', () => {
@@ -432,7 +430,7 @@ flowchart TD
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
`,
- {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+ { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
it('63: title on subgraphs should be themable', () => {
@@ -448,7 +446,7 @@ flowchart TD
end
A --> B
`,
- {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+ { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
it('65: text-color from classes', () => {
@@ -459,7 +457,7 @@ flowchart TD
Lorem --> Ipsum --> Dolor
class Lorem,Dolor dark
`,
- {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+ { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
it('66: More nested subgraph cases (TB)', () => {
@@ -477,7 +475,7 @@ flowchart TB
two --> c2
`,
- {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+ { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
it('67: More nested subgraph cases (RL)', () => {
@@ -495,7 +493,7 @@ flowchart RL
two --> c2
`,
- {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+ { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
it('68: More nested subgraph cases (BT)', () => {
@@ -513,7 +511,7 @@ flowchart BT
two --> c2
`,
- {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+ { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
it('69: More nested subgraph cases (LR)', () => {
@@ -531,7 +529,7 @@ flowchart LR
two --> c2
`,
- {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+ { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
it('70: Handle nested subgraph cases (TB) link out and link between subgraphs', () => {
@@ -547,7 +545,7 @@ flowchart TB
S1 --> S2
sub1 --> sub4
`,
- {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+ { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
it('71: Handle nested subgraph cases (RL) link out and link between subgraphs', () => {
@@ -563,7 +561,7 @@ flowchart RL
S1 --> S2
sub1 --> sub4
`,
- {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+ { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
it('72: Handle nested subgraph cases (BT) link out and link between subgraphs', () => {
@@ -579,7 +577,7 @@ flowchart BT
S1 --> S2
sub1 --> sub4
`,
- {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+ { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
it('74: Handle nested subgraph cases (RL) link out and link between subgraphs', () => {
@@ -595,10 +593,10 @@ flowchart RL
S1 --> S2
sub1 --> sub4
`,
- {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+ { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
- it('74: Handle labels for multiple edges from and to the same couple of nodes', () => {
+ it('74: Handle labels for multiple edges from and to the same couple of nodes', () => {
imgSnapshotTest(
`
flowchart RL
@@ -607,11 +605,21 @@ flowchart RL
a1 -- l2 --> a2
end
`,
- {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+ { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+ );
+ });
+
+ it('76: handle unicode encoded character with HTML labels true', () => {
+ imgSnapshotTest(
+ `flowchart TB
+ a{{"Lorem 'ipsum' dolor 'sit' amet, 'consectetur' adipiscing 'elit'."}}
+ --> b{{"Lorem #quot;ipsum#quot; dolor #quot;sit#quot; amet,#quot;consectetur#quot; adipiscing #quot;elit#quot;."}}
+ `,
+ { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
- it('2050: handling of different rendering direction in subgraphs', () => {
+ it('2050: handling of different rendering direction in subgraphs', () => {
imgSnapshotTest(
`
flowchart LR
@@ -630,7 +638,18 @@ flowchart RL
A --> TOP --> B
B1 --> B2
`,
- {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+ { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+ );
+ });
+
+ it('2388: handling default in the node name', () => {
+ imgSnapshotTest(
+ `
+ flowchart LR
+ default-index.js --> dot.template.js
+ index.js --> module-utl.js
+ `,
+ { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
});
diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/e2e/rendering/flowchart.spec.js
similarity index 90%
rename from cypress/integration/rendering/flowchart.spec.js
rename to cypress/e2e/rendering/flowchart.spec.js
index 4c90567118..cbdcc4ebd3 100644
--- a/cypress/integration/rendering/flowchart.spec.js
+++ b/cypress/e2e/rendering/flowchart.spec.js
@@ -1,4 +1,3 @@
-/* eslint-env jest */
import { imgSnapshotTest, renderGraph } from '../../helpers/util';
describe('Graph', () => {
@@ -38,7 +37,7 @@ describe('Graph', () => {
C -->|Two| E[iPhone]
C -->|Three| F[Car]
`,
- {fontFamily: 'courier'}
+ { fontFamily: 'courier' }
);
});
@@ -53,7 +52,7 @@ describe('Graph', () => {
C -->|Two| E[\\iPhone\\]
C -->|Three| F[Car]
`,
- { fontFamily: 'courier'}
+ { fontFamily: 'courier' }
);
});
@@ -69,7 +68,7 @@ describe('Graph', () => {
classDef processHead fill:#888888,color:white,font-weight:bold,stroke-width:3px,stroke:#001f3f
class 1A,1B,D,E processHead
`,
- {fontFamily: 'courier'}
+ { fontFamily: 'courier' }
);
});
@@ -98,7 +97,7 @@ describe('Graph', () => {
35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
`,
- { fontFamily: 'courier' }
+ { fontFamily: 'courier' }
);
});
@@ -169,7 +168,7 @@ describe('Graph', () => {
9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
`,
- { fontFamily: 'courier' }
+ { fontFamily: 'courier' }
);
});
@@ -178,7 +177,7 @@ describe('Graph', () => {
`
graph TB;subgraph "number as labels";1;end;
`,
- { fontFamily: 'courier' }
+ { fontFamily: 'courier' }
);
});
@@ -190,7 +189,7 @@ describe('Graph', () => {
a1-->a2
end
`,
- { fontFamily: 'courier' }
+ { fontFamily: 'courier' }
);
});
@@ -202,7 +201,7 @@ describe('Graph', () => {
a1-->a2
end
`,
- { fontFamily: 'courier' }
+ { fontFamily: 'courier' }
);
});
@@ -237,7 +236,7 @@ describe('Graph', () => {
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
`,
- { fontFamily: 'courier' }
+ { fontFamily: 'courier' }
);
});
@@ -339,7 +338,7 @@ describe('Graph', () => {
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
`,
- { fontFamily: 'courier' }
+ { fontFamily: 'courier' }
);
});
@@ -357,7 +356,7 @@ describe('Graph', () => {
listUrl: false,
listId: 'color styling',
fontFamily: 'courier',
- logLevel: 0
+ logLevel: 0,
}
);
});
@@ -379,8 +378,9 @@ describe('Graph', () => {
`,
{
listUrl: false,
- listId: 'color styling', fontFamily: 'courier',
- logLevel: 0
+ listId: 'color styling',
+ fontFamily: 'courier',
+ logLevel: 0,
}
);
});
@@ -395,7 +395,7 @@ describe('Graph', () => {
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
`,
- { flowchart: { htmlLabels: false } , fontFamily: 'courier'}
+ { flowchart: { htmlLabels: false }, fontFamily: 'courier' }
);
});
@@ -414,7 +414,7 @@ describe('Graph', () => {
class A someclass;
class C someclass;
`,
- { flowchart: { htmlLabels: false } , fontFamily: 'courier'}
+ { flowchart: { htmlLabels: false }, fontFamily: 'courier' }
);
});
@@ -431,7 +431,7 @@ describe('Graph', () => {
linkStyle 1 stroke:DarkGray,stroke-width:2px
linkStyle 2 stroke:DarkGray,stroke-width:2px
`,
- { flowchart: { htmlLabels: false } , fontFamily: 'courier'}
+ { flowchart: { htmlLabels: false }, fontFamily: 'courier' }
);
});
@@ -440,7 +440,7 @@ describe('Graph', () => {
`graph LR
a --> b --> c
`,
- { flowchart: { htmlLabels: false } , fontFamily: 'courier'}
+ { flowchart: { htmlLabels: false }, fontFamily: 'courier' }
);
});
@@ -449,7 +449,7 @@ describe('Graph', () => {
`graph LR
a --> b & c--> d
`,
- { flowchart: { htmlLabels: false } , fontFamily: 'courier'}
+ { flowchart: { htmlLabels: false }, fontFamily: 'courier' }
);
});
@@ -459,7 +459,7 @@ describe('Graph', () => {
A[ h ] -- hello --> B[" test "]:::exClass & C --> D;
classDef exClass background:#bbb,border:1px solid red;
`,
- { flowchart: { htmlLabels: false } , fontFamily: 'courier'}
+ { flowchart: { htmlLabels: false }, fontFamily: 'courier' }
);
});
@@ -481,7 +481,7 @@ describe('Graph', () => {
click B testClick "click test"
classDef someclass fill:#f96;
class A someclass;`,
- { flowchart: { htmlLabels: false } , fontFamily: 'courier'}
+ { flowchart: { htmlLabels: false }, fontFamily: 'courier' }
);
});
@@ -522,7 +522,7 @@ describe('Graph', () => {
linkStyle 1 stroke:greenyellow,stroke-width:2px
style C fill:greenyellow,stroke:green,stroke-width:4px
`,
- { flowchart: { htmlLabels: false } , fontFamily: 'courier'}
+ { flowchart: { htmlLabels: false }, fontFamily: 'courier' }
);
});
@@ -545,7 +545,7 @@ describe('Graph', () => {
click F "javascript:alert('test')" "script test"
`,
{ securityLevel: 'loose', fontFamily: 'courier' }
- );
+ );
});
it('26: Set text color of nodes and links according to styles when html labels are enabled', () => {
@@ -584,7 +584,7 @@ describe('Graph', () => {
click B "index.html#link-clicked" "link test"
click D testClick "click test"
`,
- { flowchart: { htmlLabels: false } , fontFamily: 'courier'}
+ { flowchart: { htmlLabels: false }, fontFamily: 'courier' }
);
});
@@ -616,7 +616,7 @@ describe('Graph', () => {
class A myClass1
class D myClass2
`,
- { flowchart: { htmlLabels: false } , fontFamily: 'courier'}
+ { flowchart: { htmlLabels: false }, fontFamily: 'courier' }
);
});
@@ -640,7 +640,7 @@ describe('Graph', () => {
classDef redBg fill:#622;
classDef whiteTxt color: white;
`,
- { flowchart: { htmlLabels: false } , fontFamily: 'courier'}
+ { flowchart: { htmlLabels: false }, fontFamily: 'courier' }
);
});
@@ -652,7 +652,7 @@ describe('Graph', () => {
eat --> sleep
work --> eat
`,
- { flowchart: { htmlLabels: false } , fontFamily: 'courier'}
+ { flowchart: { htmlLabels: false }, fontFamily: 'courier' }
);
});
@@ -671,7 +671,7 @@ describe('Graph', () => {
class A someclass;
class C someclass;
`,
- { flowchart: { htmlLabels: false } , fontFamily: 'courier'}
+ { flowchart: { htmlLabels: false }, fontFamily: 'courier' }
);
});
@@ -694,7 +694,7 @@ describe('Graph', () => {
`graph TD
A[Christmas]
`,
- { }
+ {}
);
});
@@ -712,7 +712,7 @@ describe('Graph', () => {
C -----> E4
C ======> E5
`,
- { }
+ {}
);
});
it('36: should render escaped without html labels', () => {
@@ -720,7 +720,7 @@ describe('Graph', () => {
`graph TD
a["Haiya"]-->b
`,
- {htmlLabels: false, flowchart: {htmlLabels: false}}
+ { htmlLabels: false, flowchart: { htmlLabels: false } }
);
});
it('37: should render non-escaped with html labels', () => {
@@ -728,7 +728,7 @@ describe('Graph', () => {
`graph TD
a["Haiya"]-->b
`,
- {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+ { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
it('38: should render a flowchart when useMaxWidth is true (default)', () => {
@@ -742,18 +742,17 @@ describe('Graph', () => {
`,
{ flowchart: { useMaxWidth: true } }
);
- cy.get('svg')
- .should((svg) => {
- expect(svg).to.have.attr('width', '100%');
- expect(svg).to.have.attr('height');
- // use within because the absolute value can be slightly different depending on the environment Âą5%
- const height = parseFloat(svg.attr('height'));
- expect(height).to.be.within(446 * .95, 446 * 1.05);
- const style = svg.attr('style');
- expect(style).to.match(/^max-width: [\d.]+px;$/);
- const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
- expect(maxWidthValue).to.be.within(300 * .95, 300 * 1.05);
- });
+ cy.get('svg').should((svg) => {
+ expect(svg).to.have.attr('width', '100%');
+ expect(svg).to.have.attr('height');
+ // use within because the absolute value can be slightly different depending on the environment Âą5%
+ const height = parseFloat(svg.attr('height'));
+ expect(height).to.be.within(446 * 0.95, 446 * 1.05);
+ const style = svg.attr('style');
+ expect(style).to.match(/^max-width: [\d.]+px;$/);
+ const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
+ expect(maxWidthValue).to.be.within(300 * 0.95, 300 * 1.05);
+ });
});
it('39: should render a flowchart when useMaxWidth is false', () => {
renderGraph(
@@ -766,15 +765,14 @@ describe('Graph', () => {
`,
{ flowchart: { useMaxWidth: false } }
);
- cy.get('svg')
- .should((svg) => {
- const height = parseFloat(svg.attr('height'));
- const width = parseFloat(svg.attr('width'));
- // use within because the absolute value can be slightly different depending on the environment Âą5%
- expect(height).to.be.within(446 * .95, 446 * 1.05);
- expect(width).to.be.within(300 * .95, 300 * 1.05);
- expect(svg).to.not.have.attr('style');
- });
+ cy.get('svg').should((svg) => {
+ const height = parseFloat(svg.attr('height'));
+ const width = parseFloat(svg.attr('width'));
+ // use within because the absolute value can be slightly different depending on the environment Âą5%
+ expect(height).to.be.within(446 * 0.95, 446 * 1.05);
+ expect(width).to.be.within(300 * 0.95, 300 * 1.05);
+ expect(svg).to.not.have.attr('style');
+ });
});
it('58: handle styling with style expressions', () => {
imgSnapshotTest(
@@ -784,7 +782,7 @@ describe('Graph', () => {
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
`,
- {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+ { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
it('60: handle styling for all node shapes', () => {
@@ -808,7 +806,7 @@ describe('Graph', () => {
style I stroke:#ff0000,fill:#ffcccc,color:#ff0000
style J stroke:#0000ff,fill:#ccccff,color:#0000ff
`,
- {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+ { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
it('61: fontawesome icons in edge labels', () => {
@@ -817,7 +815,7 @@ describe('Graph', () => {
graph TD
C -->|fa:fa-car Car| F[fa:fa-car Car]
`,
- {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+ { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
it('62: fontawesome icons in edge labels', () => {
@@ -829,7 +827,7 @@ graph TD
end
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
`,
- {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+ { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
it('63: fontawesome icons in edge labels', () => {
@@ -863,7 +861,7 @@ graph TD
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
`,
- {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+ { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
it('64: fontawesome icons in edge labels', () => {
@@ -879,7 +877,7 @@ graph TD
end
A --> B
`,
- {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+ { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
it('65: text-color from classes', () => {
@@ -890,7 +888,7 @@ graph TD
Lorem --> Ipsum --> Dolor
class Lorem,Dolor dark
`,
- {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+ { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
});
diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/e2e/rendering/gantt.spec.js
similarity index 81%
rename from cypress/integration/rendering/gantt.spec.js
rename to cypress/e2e/rendering/gantt.spec.js
index 0ac1e0f1f7..a941329420 100644
--- a/cypress/integration/rendering/gantt.spec.js
+++ b/cypress/e2e/rendering/gantt.spec.js
@@ -1,10 +1,9 @@
-/* eslint-env jest */
import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
describe('Gantt diagram', () => {
- beforeEach(()=>{
- cy.clock((new Date('1010-10-10')).getTime())
- })
+ beforeEach(() => {
+ cy.clock(new Date('1010-10-10').getTime());
+ });
it('should render a gantt chart', () => {
imgSnapshotTest(
`
@@ -199,18 +198,17 @@ describe('Gantt diagram', () => {
`,
{ gantt: { useMaxWidth: true } }
);
- cy.get('svg')
- .should((svg) => {
- expect(svg).to.have.attr('width', '100%');
- expect(svg).to.have.attr('height');
- // use within because the absolute value can be slightly different depending on the environment Âą5%
- const height = parseFloat(svg.attr('height'));
- expect(height).to.be.within(484 * .95, 484 * 1.05);
- const style = svg.attr('style');
- expect(style).to.match(/^max-width: [\d.]+px;$/);
- const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
- expect(maxWidthValue).to.be.within(984 * .95, 984 * 1.05);
- });
+ cy.get('svg').should((svg) => {
+ expect(svg).to.have.attr('width', '100%');
+ expect(svg).to.have.attr('height');
+ // use within because the absolute value can be slightly different depending on the environment Âą5%
+ const height = parseFloat(svg.attr('height'));
+ expect(height).to.be.within(484 * 0.95, 484 * 1.05);
+ const style = svg.attr('style');
+ expect(style).to.match(/^max-width: [\d.]+px;$/);
+ const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
+ expect(maxWidthValue).to.be.within(984 * 0.95, 984 * 1.05);
+ });
});
it('should render a gantt diagram when useMaxWidth is false', () => {
@@ -248,17 +246,16 @@ describe('Gantt diagram', () => {
`,
{ gantt: { useMaxWidth: false } }
);
- cy.get('svg')
- .should((svg) => {
- const height = parseFloat(svg.attr('height'));
- const width = parseFloat(svg.attr('width'));
- // use within because the absolute value can be slightly different depending on the environment Âą5%
- expect(height).to.be.within(484 * .95, 484 * 1.05);
- expect(width).to.be.within(984 * .95, 984 * 1.05);
- expect(svg).to.not.have.attr('style');
- });
+ cy.get('svg').should((svg) => {
+ const height = parseFloat(svg.attr('height'));
+ const width = parseFloat(svg.attr('width'));
+ // use within because the absolute value can be slightly different depending on the environment Âą5%
+ expect(height).to.be.within(484 * 0.95, 484 * 1.05);
+ expect(width).to.be.within(984 * 0.95, 984 * 1.05);
+ expect(svg).to.not.have.attr('style');
+ });
});
- it('should render a gantt diagram with data labels at the top when topAxis is true', () => {
+ it('should render a gantt diagram with data labels at the top when topAxis is true', () => {
imgSnapshotTest(
`
gantt
@@ -294,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 91%
rename from cypress/integration/rendering/info.spec.js
rename to cypress/e2e/rendering/info.spec.js
index 943f2357e7..bcfce30e3f 100644
--- a/cypress/integration/rendering/info.spec.js
+++ b/cypress/e2e/rendering/info.spec.js
@@ -1,4 +1,3 @@
-/* eslint-env jest */
import { imgSnapshotTest } from '../../helpers/util.js';
describe('Sequencediagram', () => {
diff --git a/cypress/integration/rendering/journey.spec.js b/cypress/e2e/rendering/journey.spec.js
similarity index 71%
rename from cypress/integration/rendering/journey.spec.js
rename to cypress/e2e/rendering/journey.spec.js
index 3a25071f5e..5f13e5b89a 100644
--- a/cypress/integration/rendering/journey.spec.js
+++ b/cypress/e2e/rendering/journey.spec.js
@@ -1,4 +1,3 @@
-/* eslint-env jest */
import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
describe('User journey diagram', () => {
@@ -40,17 +39,16 @@ section Checkout from website
`,
{ journey: { useMaxWidth: true } }
);
- cy.get('svg')
- .should((svg) => {
- expect(svg).to.have.attr('width', '100%');
- expect(svg).to.have.attr('height');
- const height = parseFloat(svg.attr('height'));
- expect(height).to.eq(565);
- const style = svg.attr('style');
- expect(style).to.match(/^max-width: [\d.]+px;$/);
- const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
- expect(maxWidthValue).to.eq(700);
- });
+ cy.get('svg').should((svg) => {
+ expect(svg).to.have.attr('width', '100%');
+ expect(svg).to.have.attr('height');
+ const height = parseFloat(svg.attr('height'));
+ expect(height).to.eq(565);
+ const style = svg.attr('style');
+ expect(style).to.match(/^max-width: [\d.]+px;$/);
+ const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
+ expect(maxWidthValue).to.eq(700);
+ });
});
it('should render a user journey diagram when useMaxWidth is false', () => {
diff --git a/cypress/integration/rendering/pie.spec.js b/cypress/e2e/rendering/pie.spec.js
similarity index 64%
rename from cypress/integration/rendering/pie.spec.js
rename to cypress/e2e/rendering/pie.spec.js
index bbedb9ebdd..233e716ed2 100644
--- a/cypress/integration/rendering/pie.spec.js
+++ b/cypress/e2e/rendering/pie.spec.js
@@ -1,4 +1,3 @@
-/* eslint-env jest */
import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
describe('Pie Chart', () => {
@@ -47,17 +46,16 @@ describe('Pie Chart', () => {
`,
{ pie: { useMaxWidth: true } }
);
- cy.get('svg')
- .should((svg) => {
- expect(svg).to.have.attr('width', '100%');
- expect(svg).to.have.attr('height');
- const height = parseFloat(svg.attr('height'));
- expect(height).to.eq(450);
- const style = svg.attr('style');
- expect(style).to.match(/^max-width: [\d.]+px;$/);
- const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
- expect(maxWidthValue).to.eq(984);
- });
+ cy.get('svg').should((svg) => {
+ expect(svg).to.have.attr('width', '100%');
+ expect(svg).to.have.attr('height');
+ const height = parseFloat(svg.attr('height'));
+ expect(height).to.eq(450);
+ const style = svg.attr('style');
+ expect(style).to.match(/^max-width: [\d.]+px;$/);
+ const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
+ expect(maxWidthValue).to.eq(984);
+ });
});
it('should render a pie diagram when useMaxWidth is false', () => {
renderGraph(
@@ -69,13 +67,12 @@ describe('Pie Chart', () => {
`,
{ pie: { useMaxWidth: false } }
);
- cy.get('svg')
- .should((svg) => {
- const height = parseFloat(svg.attr('height'));
- const width = parseFloat(svg.attr('width'));
- expect(height).to.eq(450);
- expect(width).to.eq(984);
- expect(svg).to.not.have.attr('style');
- });
+ cy.get('svg').should((svg) => {
+ const height = parseFloat(svg.attr('height'));
+ const width = parseFloat(svg.attr('width'));
+ expect(height).to.eq(450);
+ expect(width).to.eq(984);
+ expect(svg).to.not.have.attr('style');
+ });
});
});
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 82%
rename from cypress/integration/rendering/sequencediagram.spec.js
rename to cypress/e2e/rendering/sequencediagram.spec.js
index 5cc2cfcd9c..c110f05ada 100644
--- a/cypress/integration/rendering/sequencediagram.spec.js
+++ b/cypress/e2e/rendering/sequencediagram.spec.js
@@ -29,7 +29,7 @@ context('Sequence diagram', () => {
Alice -->> John: Parallel message 2
end
`,
- {sequence:{actorFontFamily:'courier'}}
+ { sequence: { actorFontFamily: 'courier' } }
);
});
it('should handle different line breaks', () => {
@@ -71,12 +71,12 @@ context('Sequence diagram', () => {
`,
{}
);
- })
+ });
it('should render loops with a slight margin', () => {
imgSnapshotTest(
`
sequenceDiagram
- Alice->>Bob: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+ Alice->>Bob: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
loop Loopy
Bob->>Alice: Pasten
end `,
@@ -143,22 +143,22 @@ context('Sequence diagram', () => {
imgSnapshotTest(
`
sequenceDiagram
- participant A as Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+ participant A as Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
A->>Bob: Hola
Bob-->A: Pasten !
`,
- {logLevel: 0}
+ { logLevel: 0 }
);
});
it('should wrap (inline) long actor descriptions', () => {
imgSnapshotTest(
`
sequenceDiagram
- participant A as wrap:Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+ participant A as wrap:Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
A->>Bob: Hola
Bob-->A: Pasten !
`,
- {logLevel: 0}
+ { logLevel: 0 }
);
});
it('should wrap (directive) long actor descriptions', () => {
@@ -166,7 +166,7 @@ context('Sequence diagram', () => {
`
%%{init: {'config': {'wrap': true }}}%%
sequenceDiagram
- participant A as Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+ participant A as Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
A->>Bob: Hola
Bob-->A: Pasten !
`,
@@ -190,7 +190,7 @@ context('Sequence diagram', () => {
`
sequenceDiagram
Alice->>Bob: Hola
- Note left of Alice: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+ Note left of Alice: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
Bob->>Alice: I'm short though
`,
{}
@@ -201,7 +201,7 @@ context('Sequence diagram', () => {
`
sequenceDiagram
Alice->>Bob: Hola
- Note left of Alice:wrap: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+ Note left of Alice:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
Bob->>Alice: I'm short though
`,
{}
@@ -212,7 +212,7 @@ context('Sequence diagram', () => {
`
sequenceDiagram
Alice->>Bob: Hola
- Note right of Alice: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+ Note right of Alice: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
Bob->>Alice: I'm short though
`,
{}
@@ -223,7 +223,7 @@ context('Sequence diagram', () => {
`
sequenceDiagram
Alice->>Bob: Hola
- Note right of Alice:wrap: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+ Note right of Alice:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
Bob->>Alice: I'm short though
`,
{}
@@ -234,7 +234,7 @@ context('Sequence diagram', () => {
`
sequenceDiagram
Alice->>Bob: Hola
- Note over Alice: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+ Note over Alice: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
Bob->>Alice: I'm short though
`,
{}
@@ -245,7 +245,7 @@ context('Sequence diagram', () => {
`
sequenceDiagram
Alice->>Bob: Hola
- Note over Alice:wrap: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+ Note over Alice:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
Bob->>Alice: I'm short though
`,
{}
@@ -255,7 +255,7 @@ context('Sequence diagram', () => {
imgSnapshotTest(
`
sequenceDiagram
- Alice->>Bob: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+ Alice->>Bob: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
Bob->>Alice: I'm short though
`,
{}
@@ -265,7 +265,7 @@ context('Sequence diagram', () => {
imgSnapshotTest(
`
sequenceDiagram
- Alice->>Bob:wrap:Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+ Alice->>Bob:wrap:Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
Bob->>Alice: I'm short though
`,
{}
@@ -276,7 +276,7 @@ context('Sequence diagram', () => {
`
sequenceDiagram
Alice->>Bob: I'm short
- Bob->>Alice: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+ Bob->>Alice: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
`,
{}
);
@@ -286,7 +286,7 @@ context('Sequence diagram', () => {
`
sequenceDiagram
Alice->>Bob: I'm short
- Bob->>Alice:wrap: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+ Bob->>Alice:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
`,
{}
);
@@ -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(
`
@@ -527,17 +563,17 @@ context('Sequence diagram', () => {
});
it('should render with an init directive', () => {
imgSnapshotTest(
-`%%{init: { "theme": "dark", 'config': { "fontFamily": "Menlo", "fontSize": 18, "fontWeight": 400, "wrap": true }}}%%
+ `%%{init: { "theme": "dark", 'config': { "fontFamily": "Menlo", "fontSize": 18, "fontWeight": 400, "wrap": true }}}%%
sequenceDiagram
Alice->>Bob: Hello Bob, how are you? If you are not available right now, I can leave you a message. Please get back to me as soon as you can!
Note left of Alice: Bob thinks
Bob->>Alice: Fine!`,
{}
- )
+ );
});
});
context('directives', () => {
- it('should override config with directive settings', () => {
+ it('should override config with directive settings', () => {
imgSnapshotTest(
`
%%{init: { "config": { "mirrorActors": true }}}%%
@@ -546,10 +582,13 @@ context('Sequence diagram', () => {
note left of Alice: config set to mirrorActors: false directive set to mirrorActors: true
Bob->>Alice: Short as well
`,
- { logLevel:0, sequence: { mirrorActors: false, noteFontSize: 18, noteFontFamily: 'Arial' } }
+ {
+ logLevel: 0,
+ sequence: { mirrorActors: false, noteFontSize: 18, noteFontFamily: 'Arial' },
+ }
);
});
- it('should override config with directive settings', () => {
+ it('should override config with directive settings 2', () => {
imgSnapshotTest(
`
%%{init: { "config": { "mirrorActors": false, "wrap": true }}}%%
@@ -558,12 +597,13 @@ context('Sequence diagram', () => {
note left of Alice: config: mirrorActors=true directive: mirrorActors=false
Bob->>Alice: Short as well
`,
- { logLevel:0, sequence: { mirrorActors: true, noteFontSize: 18, noteFontFamily: 'Arial' } }
+ { logLevel: 0, sequence: { mirrorActors: true, noteFontSize: 18, noteFontFamily: 'Arial' } }
);
});
});
context('links', () => {
- it('should support actor links and properties', () => {
+ it('should support actor links and properties EXPERIMENTAL: USE WITH CAUTION', () => {
+ //Be aware that the syntax for "properties" is likely to be changed.
imgSnapshotTest(
`
%%{init: { "config": { "mirrorActors": true, "forceMenus": true }}}%%
@@ -583,7 +623,8 @@ context('Sequence diagram', () => {
{ logLevel: 0, sequence: { mirrorActors: true, noteFontSize: 18, noteFontFamily: 'Arial' } }
);
});
- it('should support actor links and properties when not mirrored', () => {
+ it('should support actor links and properties when not mirrored EXPERIMENTAL: USE WITH CAUTION', () => {
+ //Be aware that the syntax for "properties" is likely to be changed.
imgSnapshotTest(
`
%%{init: { "config": { "mirrorActors": false, "forceMenus": true, "wrap": true }}}%%
@@ -599,7 +640,24 @@ context('Sequence diagram', () => {
a->>j: Hello John, how are you?
j-->>a: Great!
`,
- { logLevel: 0, sequence: { mirrorActors: false, noteFontSize: 18, noteFontFamily: 'Arial' } }
+ {
+ logLevel: 0,
+ sequence: { mirrorActors: false, noteFontSize: 18, noteFontFamily: 'Arial' },
+ }
+ );
+ });
+ 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' },
+ }
);
});
});
@@ -632,18 +690,17 @@ context('Sequence diagram', () => {
`,
{ sequence: { useMaxWidth: true } }
);
- cy.get('svg')
- .should((svg) => {
- 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);
- const style = svg.attr('style');
- expect(style).to.match(/^max-width: [\d.]+px;$/);
- const maxWidthValue = parseFloat(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(820 * .95, 820 * 1.05);
- });
+ cy.get('svg').should((svg) => {
+ 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, 971);
+ const style = svg.attr('style');
+ expect(style).to.match(/^max-width: [\d.]+px;$/);
+ const maxWidthValue = parseFloat(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(820 * 0.95, 820 * 1.05);
+ });
});
it('should render a sequence diagram when useMaxWidth is false', () => {
renderGraph(
@@ -673,15 +730,14 @@ context('Sequence diagram', () => {
`,
{ sequence: { useMaxWidth: false } }
);
- cy.get('svg')
- .should((svg) => {
- const height = parseFloat(svg.attr('height'));
- const width = parseFloat(svg.attr('width'));
- expect(height).to.be.within(920, 960);
- // use within because the absolute value can be slightly different depending on the environment Âą5%
- expect(width).to.be.within(820 * .95, 820 * 1.05);
- expect(svg).to.not.have.attr('style');
- });
+ cy.get('svg').should((svg) => {
+ const height = parseFloat(svg.attr('height'));
+ const width = parseFloat(svg.attr('width'));
+ 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 84%
rename from cypress/integration/rendering/stateDiagram-v2.spec.js
rename to cypress/e2e/rendering/stateDiagram-v2.spec.js
index d72ca0b904..b5ab864400 100644
--- a/cypress/integration/rendering/stateDiagram-v2.spec.js
+++ b/cypress/e2e/rendering/stateDiagram-v2.spec.js
@@ -1,4 +1,3 @@
-/* eslint-env jest */
import { imgSnapshotTest, renderGraph } from '../../helpers/util';
describe('State diagram', () => {
@@ -159,7 +158,7 @@ describe('State diagram', () => {
);
cy.get('svg');
});
- it('v2 should render a simple state diagrams', () => {
+ it('v2 should render a simple state diagrams 2', () => {
imgSnapshotTest(
`
stateDiagram-v2
@@ -347,11 +346,26 @@ 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(
`
stateDiagram-v2
- state "Long state name" as NotShooting {
+ state "Long state name 2" as NotShooting {
a-->b
}
`,
@@ -360,6 +374,18 @@ stateDiagram-v2
}
);
});
+ it('v2 state label with names in it', () => {
+ imgSnapshotTest(
+ `
+ stateDiagram-v2
+ Yswsii: Your state with spaces in it
+ [*] --> Yswsii
+ `,
+ {
+ logLevel: 0,
+ }
+ );
+ });
it('v2 Simplest composite state', () => {
imgSnapshotTest(
`
@@ -369,7 +395,8 @@ stateDiagram-v2
}
`,
{
- logLevel: 0, fontFamily: 'courier'
+ logLevel: 0,
+ fontFamily: 'courier',
}
);
});
@@ -381,7 +408,8 @@ stateDiagram-v2
a --> b: Stop
`,
{
- logLevel: 0, fontFamily: 'courier',
+ logLevel: 0,
+ fontFamily: 'courier',
}
);
});
@@ -394,7 +422,8 @@ stateDiagram-v2
note right of MyState : I am a rightie
`,
{
- logLevel: 0, fontFamily: 'courier',
+ logLevel: 0,
+ fontFamily: 'courier',
}
);
});
@@ -414,7 +443,8 @@ stateDiagram-v2
A --> C
`,
{
- logLevel: 0, fontFamily: 'courier',
+ logLevel: 0,
+ fontFamily: 'courier',
}
);
});
@@ -433,7 +463,8 @@ stateDiagram-v2
sub1 --> sub4
`,
{
- logLevel: 0, fontFamily: 'courier',
+ logLevel: 0,
+ fontFamily: 'courier',
}
);
});
@@ -447,18 +478,17 @@ stateDiagram-v2
`,
{ state: { useMaxWidth: true } }
);
- cy.get('svg')
- .should((svg) => {
- expect(svg).to.have.attr('width', '100%');
- expect(svg).to.have.attr('height');
- const height = parseFloat(svg.attr('height'));
- expect(height).to.be.within(177, 178);
- const style = svg.attr('style');
- expect(style).to.match(/^max-width: [\d.]+px;$/);
- const maxWidthValue = parseFloat(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(135 * .95, 135 * 1.05);
- });
+ cy.get('svg').should((svg) => {
+ expect(svg).to.have.attr('width', '100%');
+ expect(svg).to.have.attr('height');
+ const height = parseFloat(svg.attr('height'));
+ expect(height).to.be.within(177, 178);
+ const style = svg.attr('style');
+ expect(style).to.match(/^max-width: [\d.]+px;$/);
+ const maxWidthValue = parseFloat(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(135 * 0.95, 135 * 1.05);
+ });
});
it('v2 should render a state diagram when useMaxWidth is false', () => {
renderGraph(
@@ -470,14 +500,13 @@ stateDiagram-v2
`,
{ state: { useMaxWidth: false } }
);
- cy.get('svg')
- .should((svg) => {
- const height = parseFloat(svg.attr('height'));
- const width = parseFloat(svg.attr('width'));
- expect(height).to.be.within(177, 178);
- // use within because the absolute value can be slightly different depending on the environment Âą5%
- expect(width).to.be.within(135 * .95, 135 * 1.05);
- expect(svg).to.not.have.attr('style');
- });
+ cy.get('svg').should((svg) => {
+ const height = parseFloat(svg.attr('height'));
+ const width = parseFloat(svg.attr('width'));
+ expect(height).to.be.within(177, 178);
+ // use within because the absolute value can be slightly different depending on the environment Âą5%
+ expect(width).to.be.within(135 * 0.95, 135 * 1.05);
+ expect(svg).to.not.have.attr('style');
+ });
});
});
diff --git a/cypress/integration/rendering/stateDiagram.spec.js b/cypress/e2e/rendering/stateDiagram.spec.js
similarity index 86%
rename from cypress/integration/rendering/stateDiagram.spec.js
rename to cypress/e2e/rendering/stateDiagram.spec.js
index 971470a757..4e538f2194 100644
--- a/cypress/integration/rendering/stateDiagram.spec.js
+++ b/cypress/e2e/rendering/stateDiagram.spec.js
@@ -1,4 +1,3 @@
-/* eslint-env jest */
import { imgSnapshotTest, renderGraph } from '../../helpers/util';
describe('State diagram', () => {
@@ -149,7 +148,7 @@ describe('State diagram', () => {
);
cy.get('svg');
});
- it('should render a simple state diagrams', () => {
+ it('should render a simple state diagrams 2', () => {
imgSnapshotTest(
`
stateDiagram
@@ -315,7 +314,8 @@ describe('State diagram', () => {
}
`,
{
- logLevel: 0, fontFamily: 'courier'
+ logLevel: 0,
+ fontFamily: 'courier',
}
);
});
@@ -328,7 +328,8 @@ describe('State diagram', () => {
}
`,
{
- logLevel: 0, fontFamily: 'courier'
+ logLevel: 0,
+ fontFamily: 'courier',
}
);
});
@@ -340,7 +341,8 @@ describe('State diagram', () => {
a --> b: Stop
`,
{
- logLevel: 0, fontFamily: 'courier'
+ logLevel: 0,
+ fontFamily: 'courier',
}
);
});
@@ -353,20 +355,19 @@ describe('State diagram', () => {
`,
{ state: { useMaxWidth: true } }
);
- cy.get('svg')
- .should((svg) => {
- expect(svg).to.have.attr('width', '100%');
- expect(svg).to.have.attr('height');
- const height = parseFloat(svg.attr('height'));
- expect(height).to.be.within(176,178);
- const style = svg.attr('style');
- expect(style).to.match(/^max-width: [\d.]+px;$/);
- const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
- // use within because the absolute value can be slightly different depending on the environment Âą5%
- // Todo investigate difference
- // expect(maxWidthValue).to.be.within(112 * .95, 112 * 1.05);
- expect(maxWidthValue).to.be.within(130, 140);
- });
+ cy.get('svg').should((svg) => {
+ expect(svg).to.have.attr('width', '100%');
+ expect(svg).to.have.attr('height');
+ const height = parseFloat(svg.attr('height'));
+ expect(height).to.be.within(176, 178);
+ const style = svg.attr('style');
+ expect(style).to.match(/^max-width: [\d.]+px;$/);
+ const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
+ // use within because the absolute value can be slightly different depending on the environment Âą5%
+ // Todo investigate difference
+ // expect(maxWidthValue).to.be.within(112 * .95, 112 * 1.05);
+ expect(maxWidthValue).to.be.within(130, 140);
+ });
});
it('should render a state diagram when useMaxWidth is false', () => {
renderGraph(
@@ -377,17 +378,16 @@ describe('State diagram', () => {
`,
{ state: { useMaxWidth: false } }
);
- cy.get('svg')
- .should((svg) => {
- const height = parseFloat(svg.attr('height'));
- const width = parseFloat(svg.attr('width'));
- expect(height).to.be.within(176,178);
- // use within because the absolute value can be slightly different depending on the environment Âą5%
- // Todo investigate difference
- // expect(width).to.be.within(112 * .95, 112 * 1.05);
- expect(width).to.be.within(130, 140);
+ cy.get('svg').should((svg) => {
+ const height = parseFloat(svg.attr('height'));
+ const width = parseFloat(svg.attr('width'));
+ expect(height).to.be.within(176, 178);
+ // use within because the absolute value can be slightly different depending on the environment Âą5%
+ // Todo investigate difference
+ // expect(width).to.be.within(112 * .95, 112 * 1.05);
+ expect(width).to.be.within(130, 140);
- expect(svg).to.not.have.attr('style');
- });
+ expect(svg).to.not.have.attr('style');
+ });
});
});
diff --git a/cypress/integration/rendering/theme.spec.js b/cypress/e2e/rendering/theme.spec.js
similarity index 81%
rename from cypress/integration/rendering/theme.spec.js
rename to cypress/e2e/rendering/theme.spec.js
index b4b19b4198..0eb8d111b0 100644
--- a/cypress/integration/rendering/theme.spec.js
+++ b/cypress/e2e/rendering/theme.spec.js
@@ -1,22 +1,48 @@
-/* eslint-env jest */
import { imgSnapshotTest } from '../../helpers/util.js';
+describe('themeCSS balancing, it', () => {
+ it('should not allow unbalanced CSS definitions', () => {
+ imgSnapshotTest(
+ `
+ %%{init: { 'themeCSS': '} * { background: red }' } }%%
+ flowchart TD
+ a --> b
+ `,
+ {}
+ );
+ cy.get('svg');
+ });
+ it('should not allow unbalanced CSS definitions 2', () => {
+ imgSnapshotTest(
+ `
+ %%{init: { 'themeCSS': '\u007D * { background: red }' } }%%
+ flowchart TD
+ a2 --> b2
+ `,
+ {}
+ );
+ cy.get('svg');
+ });
+});
+
describe('Pie Chart', () => {
- // beforeEach(()=>{
- // cy.clock((new Date('2014-06-09')).getTime());
- // });
+ // beforeEach(()=>{
+ // cy.clock((new Date('2014-06-09')).getTime());
+ // });
- ['default', 'forest', 'dark', 'neutral'].forEach(theme=>{
+ ['default', 'forest', 'dark', 'neutral'].forEach((theme) => {
describe(theme, () => {
it('should render a pie diagram', () => {
imgSnapshotTest(
`
pie title Sports in Sweden
+ accTitle: This is a title
+ accDescr: This is a description
"Bandy" : 40
"Ice-Hockey" : 80
"Football" : 90
`,
- {theme}
+ { theme }
);
cy.get('svg');
});
@@ -25,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/]
@@ -39,7 +67,7 @@ describe('Pie Chart', () => {
G
end
`,
- {theme}
+ { theme }
);
cy.get('svg');
});
@@ -48,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]
@@ -62,7 +93,7 @@ describe('Pie Chart', () => {
G
end
`,
- {theme}
+ { theme }
);
cy.get('svg');
});
@@ -71,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?
@@ -88,7 +122,7 @@ describe('Pie Chart', () => {
`,
- {theme}
+ { theme }
);
cy.get('svg');
});
@@ -98,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
@@ -135,15 +172,18 @@ describe('Pie Chart', () => {
classM ..|> classN : Realization
classO .. classP : Link(Dashed)
`,
- {theme}
+ { theme }
);
cy.get('svg');
- });
+ });
it('should render a state diagram', () => {
imgSnapshotTest(
`
%%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
stateDiagram
+ accTitle: This is a title
+ accDescr: This is a description
+
[*] --> Active
state Active {
@@ -167,15 +207,18 @@ stateDiagram
Active --> SomethingElse
note right of SomethingElse : This is the note to the right.
`,
- {theme}
+ { theme }
);
cy.get('svg');
- });
+ });
it('should render a state diagram (v2)', () => {
imgSnapshotTest(
`
%%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
stateDiagram-v2
+ accTitle: This is a title
+ accDescr: This is a description
+
[*] --> Active
state Active {
@@ -199,14 +242,17 @@ stateDiagram-v2
Active --> SomethingElse2
note right of SomethingElse2 : This is the note to the right.
`,
- {theme}
+ { theme }
);
cy.get('svg');
- });
+ });
it('should render a er diagram', () => {
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"
@@ -217,15 +263,18 @@ erDiagram
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
`,
- {theme}
+ { theme }
);
cy.get('svg');
- });
+ });
it('should render a user journey diagram', () => {
imgSnapshotTest(
`
%%{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
@@ -235,15 +284,18 @@ erDiagram
Go downstairs: 5: Me
Sit down: 5: Me
`,
- {theme}
+ { theme }
);
cy.get('svg');
- });
+ });
it('should render a gantt diagram', () => {
- cy.clock((new Date('2014-01-06')).getTime());
+ cy.clock(new Date('2014-01-06').getTime());
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..
@@ -271,10 +323,10 @@ erDiagram
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
`,
- {theme}
+ { theme }
);
cy.get('svg');
- });
+ });
});
});
});
diff --git a/cypress/examples/actions.spec.js b/cypress/examples/actions.spec.js
deleted file mode 100644
index 20e12cc6df..0000000000
--- a/cypress/examples/actions.spec.js
+++ /dev/null
@@ -1,272 +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! đ**
-
## About
-Mermaid is a Javascript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development.
+Mermaid is a JavaScript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development.
> Doc-Rot is a Catch-22 that Mermaid helps to solve.
Diagramming and documentation costs precious developer time and gets outdated quickly.
-But not having diagrams or docs ruins productivity and hurts organizational learning. 
- 
- 
- 
- 
- 
- 
-