forkless/mermaid-live-editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'tests'

Browse Source 
* tests:
  Add cypress tests
This commit is contained in:
Sidharth Vinod
2021-05-23 16:30:56 +05:30
parent 5399762e9f aaaeac26e9
commit 3ac0e708e3
21 changed files with 4203 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.eslintrc.cjs
+9 -3
View File
@@ -1,8 +1,13 @@
module.exports = {
root: true,
parser: '@typescript-eslint/parser',
extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
plugins: ['svelte3', '@typescript-eslint'],
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:jest/recommended',
'prettier'
],
plugins: ['svelte3', 'jest', '@typescript-eslint'],
ignorePatterns: ['docs/*', '*.cjs'],
overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
settings: {
@@ -15,7 +20,8 @@ module.exports = {
env: {
browser: true,
es2017: true,
node: true
node: true,
'jest/globals': true
},
rules: {
'@typescript-eslint/ban-ts-comment': [
README.md
+1 -1
View File
@@ -49,7 +49,7 @@ registry=https://registry.npmjs.com/
yarn dev -- --open
```
This app is created with Svelte + svelte-spa-router.
This app is created with Svelte Kit.
## Release
cypress.json
+8
View File
@@ -0,0 +1,8 @@
{
"$schema": "https://on.cypress.io/cypress.schema.json",
"baseUrl": "http://localhost:3000",
"pluginsFile": "./cypress/plugins/index.cjs",
"viewportWidth": 1440,
"viewportHeight": 768,
"snapshotFileName": "./cypress/snapshots.js"
}
cypress/.eslintrc
+10
View File
@@ -0,0 +1,10 @@
{
"plugins": ["cypress"],
"extends": ["plugin:cypress/recommended"],
"rules": {
"jest/expect-expect": "off"
},
"env": {
"cypress/globals": true
}
}
cypress/fixtures/example.json
+5
View File
@@ -0,0 +1,5 @@
{
"name": "Using fixtures to represent data",
"email": "hello@cypress.io",
"body": "Fixtures are a great way to mock data for responses to routes"
}
cypress/integration/diagramUpdate.spec.js
+44
View File
@@ -0,0 +1,44 @@
describe('Diagram updates when code is edited', () => {
beforeEach(() => {
cy.clearLocalStorage();
cy.visit('/');
});
it('Editor Test', () => {
cy.get('#editor').type(' C --> Test');
cy.wrap(localStorage).snapshot();
// cy.get('#view > #container > svg').snapshot();
});
});
describe('Auto sync tests', () => {
beforeEach(() => {
cy.clearLocalStorage();
cy.visit('/');
});
it('should dim diagram when code is edited', () => {
cy.contains('Auto sync').click();
cy.get('#view').should('not.have.class', 'outOfSync');
cy.get('#editor').type(' C --> Test');
cy.get('#view').should('have.class', 'outOfSync');
});
it('should show/hide sync button with auto sync', () => {
cy.get('[data-cy=sync]').should('not.exist');
cy.contains('Auto sync').click();
cy.get('[data-cy=sync]').should('exist');
cy.get('#autoSync').check();
cy.get('[data-cy=sync]').should('not.exist');
});
it('should not dim diagram when code is in sync', () => {
cy.contains('Auto sync').click();
cy.get('#view').should('not.have.class', 'outOfSync');
cy.get('#editor').type(' C --> Test');
cy.get('#view').should('have.class', 'outOfSync');
cy.get('[data-cy=sync]').click();
cy.get('#view').should('not.have.class', 'outOfSync');
cy.get('#autoSync').check();
cy.get('#editor').type('ing');
cy.get('#view').should('not.have.class', 'outOfSync');
cy.wrap(localStorage).snapshot();
});
});
cypress/integration/loadSite.spec.js
+24
View File
@@ -0,0 +1,24 @@
describe('Site Loads', () => {
beforeEach(() => {
cy.clearLocalStorage();
});
it('Check Home page load', () => {
cy.visit('/');
cy.url().should('include', '/edit');
cy.contains('History').click();
cy.wrap(localStorage).snapshot();
});
it('Check Redirect from old URL', () => {
cy.visit(
'/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0NocmlzdG1hc10gLS0-fEdldCBtb25leXwgQihHbyBzaG9wcGluZylcbiAgICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgICBDIC0tPnxPbmV8IERbTGFwdG9wXVxuICAgIEMgLS0-fFR3b3wgRVtpUGhvbmVdXG4gICAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9LCJ1cGRhdGVFZGl0b3IiOmZhbHNlfQ'
);
cy.url().should(
'include',
'/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0NocmlzdG1hc10gLS0-fEdldCBtb25leXwgQihHbyBzaG9wcGluZylcbiAgICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgICBDIC0tPnxPbmV8IERbTGFwdG9wXVxuICAgIEMgLS0-fFR3b3wgRVtpUGhvbmVdXG4gICAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9LCJ1cGRhdGVFZGl0b3IiOmZhbHNlfQ'
);
cy.contains('History').click();
cy.wrap(localStorage).snapshot();
});
});
cypress/plugins/index.cjs
+31
View File
@@ -0,0 +1,31 @@
/// <reference types="cypress" />
// ***********************************************************
// This example plugins/index.js can be used to load plugins
//
// You can change the location of this file or turn off loading
// the plugins file with the 'pluginsFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/plugins-guide
// ***********************************************************
// This function is called when a project is opened or re-opened (e.g. due to
// the project's config changing)
/**
* @type {Cypress.PluginConfig}
*/
// eslint-disable-next-line no-unused-vars
import * as fs from 'fs';
module.exports = (on, config) => {
on('task', {
readFileMaybe(filename) {
if (fs.existsSync(filename)) {
return fs.readFileSync(filename, 'utf8');
}
return null;
}
});
};
cypress/snapshots.js
+41
View File
@@ -0,0 +1,41 @@
module.exports = {
"Site Loads": {
"Check Home page load": {
"1": {
"manualHistoryStore": "[]",
"autoHistoryMode": "false",
"codeStore": "{\"code\":\"graph TD\\n A[Christmas] -->|Get money| B(Go shopping)\\n B --> C{Let me think}\\n C -->|One| D[Laptop]\\n C -->|Two| E[iPhone]\\n C -->|Three| F[fa:fa-car Car]\\n \",\"mermaid\":\"{\\n \\\"theme\\\": \\\"default\\\"\\n}\",\"updateEditor\":false,\"autoSync\":true,\"updateDiagram\":false}",
"autoHistoryStore": "[]"
}
},
"Check Redirect from old URL": {
"1": {
"manualHistoryStore": "[]",
"autoHistoryMode": "false",
"codeStore": "{\"code\":\"graph TD\\n A[Christmas] -->|Get money| B(Go shopping)\\n B --> C{Let me think}\\n C -->|One| D[Laptop]\\n C -->|Two| E[iPhone]\\n C -->|Three| F[fa:fa-car Car]\",\"mermaid\":\"{\\n \\\"theme\\\": \\\"default\\\"\\n}\",\"updateEditor\":false,\"autoSync\":true,\"updateDiagram\":false}",
"autoHistoryStore": "[]"
}
}
},
"__version": "7.3.0",
"Diagram updates when code is edited": {
"Editor Test": {
"1": {
"manualHistoryStore": "[]",
"autoHistoryMode": "false",
"codeStore": "{\"code\":\"graph TD\\n A[Christmas] -->|Get money| B(Go shopping)\\n B --> C{Let me think}\\n C -->|One| D[Laptop]\\n C -->|Two| E[iPhone]\\n C -->|Three| F[fa:fa-car Car]\\n C --> Test\",\"mermaid\":\"{\\n \\\"theme\\\": \\\"default\\\"\\n}\",\"updateEditor\":false,\"autoSync\":true,\"updateDiagram\":false}",
"autoHistoryStore": "[]"
}
}
},
"Auto sync tests": {
"should not dim diagram when code is in sync": {
"1": {
"manualHistoryStore": "[]",
"autoHistoryMode": "false",
"codeStore": "{\"code\":\"graph TD\\n A[Christmas] -->|Get money| B(Go shopping)\\n B --> C{Let me think}\\n C -->|One| D[Laptop]\\n C -->|Two| E[iPhone]\\n C -->|Three| F[fa:fa-car Car]\\n C --> Testing\",\"mermaid\":\"{\\n \\\"theme\\\": \\\"default\\\"\\n}\",\"updateEditor\":false,\"autoSync\":true,\"updateDiagram\":false}",
"autoHistoryStore": "[]"
}
}
}
}
cypress/support/commands.js
+27
View File
@@ -0,0 +1,27 @@
// ***********************************************
// This example commands.js shows you how to
// create various custom commands and overwrite
// existing commands.
//
// For more comprehensive examples of custom
// commands please read more here:
// https://on.cypress.io/custom-commands
// ***********************************************
//
//
// -- This is a parent command --
// Cypress.Commands.add('login', (email, password) => { ... })
//
//
// -- This is a child command --
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
//
//
// -- This is a dual command --
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
//
//
// -- This will overwrite an existing command --
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
import * as snapshot from '@cypress/snapshot';
snapshot.register();
cypress/support/index.js
+27
View File
@@ -0,0 +1,27 @@
// ***********************************************************
// This example support/index.js is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************
// Import commands.js using ES2015 syntax:
import './commands';
// Alternatively you can use CommonJS syntax:
// require('./commands')
const resizeObserverLoopErrRe = /^[^(ResizeObserver loop limit exceeded)]/;
Cypress.on('uncaught:exception', (err) => {
/* returning false here prevents Cypress from failing the test */
if (resizeObserverLoopErrRe.test(err.message)) {
return false;
}
});
cypress/tsconfig.json
+7
View File
@@ -0,0 +1,7 @@
{
"compilerOptions": {
"allowJs": true,
"types": ["cypress"]
},
"include": ["**/*.*"]
}
package.json
+7 -7
View File
@@ -11,6 +11,7 @@
"postinstall": "husky install"
},
"devDependencies": {
"@cypress/snapshot": "^2.1.7",
"@sveltejs/adapter-static": "^1.0.0-next.11",
"@sveltejs/kit": "^1.0.0-next.109",
"@types/mermaid": "^8.2.5",
@@ -18,11 +19,15 @@
"@typescript-eslint/parser": "^4.19.0",
"autoprefixer": "^10.2.5",
"cssnano": "^5.0.1",
"eslint": "^7.22.0",
"cypress": "^7.3.0",
"eslint": "^7.27.0",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-cypress": "^2.11.3",
"eslint-plugin-jest": "^24.3.6",
"eslint-plugin-postcss-modules": "^1.2.1",
"eslint-plugin-svelte3": "^3.2.0",
"husky": "^6.0.0",
"jest": "^26.6.3",
"lint-staged": "^11.0.0",
"postcss": "^8.2.10",
"postcss-load-config": "^3.0.1",
@@ -36,17 +41,12 @@
},
"type": "module",
"dependencies": {
"@fontsource/fira-mono": "^4.2.2",
"@lukeed/uuid": "^2.0.0",
"@macfja/svelte-persistent-store": "^1.1.0",
"@tailwindcss/forms": "^0.3.2",
"cookie": "^0.4.1",
"js-base64": "^3.6.1",
"mermaid": "^8.10.1",
"moment": "^2.29.1",
"monaco-editor": "^0.24.0",
"random-word-slugs": "^0.0.2",
"svelte-watch-resize": "^1.0.3"
"random-word-slugs": "^0.0.2"
},
"lint-staged": {
"*.{ts,svelte,js,css,md}": [
src/app.postcss
-1
View File
@@ -1,4 +1,3 @@
@import '@fontsource/fira-mono';
@tailwind base;
@tailwind components;
@tailwind utilities;
src/hooks.ts
-23
View File
@@ -1,23 +0,0 @@
import cookie from 'cookie';
import { v4 as uuid } from '@lukeed/uuid';
import type { Handle } from '@sveltejs/kit';
export const handle: Handle = async ({ request, render }) => {
const cookies = cookie.parse(request.headers.cookie || '');
request.locals.userid = cookies.userid || uuid();
// TODO https://github.com/sveltejs/kit/issues/1046
if (request.query.has('_method')) {
request.method = request.query.get('_method').toUpperCase();
}
const response = await render(request);
if (!cookies.userid) {
// if this is the first time the user has visited this app,
// set a cookie so that we recognise them when they return
response.headers['set-cookie'] = `userid=${request.locals.userid}; Path=/; HttpOnly`;
}
return response;
};
src/lib/components/editor/editor.svelte
+1 -1
View File
@@ -54,4 +54,4 @@
});
</script>
<div bind:this={divEl} class="overflow-hidden" />
<div bind:this={divEl} id="editor" class="overflow-hidden" />
src/lib/components/editor/util.js
+1 -1
View File
@@ -9,6 +9,7 @@ export const initEditor = (monaco) => {
'sequenceDiagram',
'classDiagram',
'pie',
'erDiagram',
'flowchart',
'gantt',
'gitGraph',
@@ -16,7 +17,6 @@ export const initEditor = (monaco) => {
],
keywords: ['patricipant', 'as'],
arrows: ['---', '===', '-->', '==>'],
tokenizer: {
root: [
[/[{}]/, 'delimiter.bracket'],
src/lib/util/state.ts
+3
View File
@@ -34,6 +34,9 @@ export const loadState = (data: string): void => {
const stateStr = fromBase64(data);
console.log(`Tring to load state: ${stateStr}`);
state = JSON.parse(stateStr);
if (typeof state.mermaid !== 'string') {
state.mermaid = JSON.stringify(state.mermaid, null, 2);
}
} catch (e) {
if (data) {
console.error('Init error', e);
src/routes/edit.svelte
+2 -1
View File
@@ -108,10 +108,11 @@
<button
class="bg-indigo-500 hover:bg-indigo-700 rounded px-4 mx-2"
title="Sync Diagram"
data-cy="sync"
on:click={syncDiagram}><i class="fas fa-sync" /></button>
{/if}
<label for="autoSync">
<input type="checkbox" name="autoSync" bind:checked={$codeStore.autoSync} />
<input type="checkbox" id="autoSync" bind:checked={$codeStore.autoSync} />
Auto sync
</label>
</div>
tailwind.config.cjs
+1 -2
View File
@@ -21,6 +21,5 @@ module.exports = {
},
variants: {
extend: {}
},
plugins: [require('@tailwindcss/forms')]
}
};
yarn.lock
+3954 -99
View File
File diff suppressed because it is too large Load Diff