Add cypress tests

.eslintrc.cjs

@@ -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

@@ -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

@@ -0,0 +1,8 @@
+{
+ "$schema": "https://on.cypress.io/cypress.schema.json",
+ "baseUrl": "http:https://localhost:3000",
+ "pluginsFile": "./cypress/plugins/index.cjs",
+ "viewportWidth": 1440,
+ "viewportHeight": 768,
+ "snapshotFileName": "./cypress/snapshots.js"
+}

cypress/.eslintrc

@@ -0,0 +1,10 @@
+{
+ "plugins": ["cypress"],
+ "extends": ["plugin:cypress/recommended"],
+ "rules": {
+ "jest/expect-expect": "off"
+ },
+ "env": {
+ "cypress/globals": true
+ }
+}

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+ "name": "Using fixtures to represent data",
+ "email": "[email protected]",
+ "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/integration/diagramUpdate.spec.js

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -0,0 +1,7 @@
+{
+ "compilerOptions": {
+ "allowJs": true,
+ "types": ["cypress"]
+ },
+ "include": ["**/*.*"]
+}

package.json

@@ -11,18 +11,23 @@
  "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",
  "@typescript-eslint/eslint-plugin": "^4.19.0",
  "@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,4 +1,3 @@
-@import '@fontsource/fira-mono';
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

src/lib/components/editor/editor.svelte

@@ -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

@@ -9,14 +9,14 @@ export const initEditor = (monaco) => {
  'sequenceDiagram',
  'classDiagram',
  'pie',
+ 'erDiagram',
  'flowchart',
  'gantt',
  'gitGraph',
  'journey'
  ],
  keywords: ['patricipant', 'as'],
  arrows: ['---', '===', '-->', '==>'],
-
  tokenizer: {
  root: [
  [/[{}]/, 'delimiter.bracket'],

src/lib/util/state.ts

@@ -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

@@ -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

@@ -21,6 +21,5 @@ module.exports = {
  },
  variants: {
  extend: {}
- },
- plugins: [require('@tailwindcss/forms')]
+ }
 };