Fix restore history

.eslintrc.cjs

@@ -1,13 +1,8 @@
 module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
- extends: [
- 'eslint:recommended',
- 'plugin:@typescript-eslint/recommended',
- 'plugin:jest/recommended',
- 'prettier'
- ],
- plugins: ['svelte3', 'jest', 'tailwindcss', '@typescript-eslint'],
+ extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
+ plugins: ['svelte3', 'tailwindcss', '@typescript-eslint'],
  ignorePatterns: ['docs/*', '*.cjs', 'snapshots.js'],
  overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
  settings: {
@@ -20,8 +15,7 @@ module.exports = {
  env: {
  browser: true,
  es2017: true,
- node: true,
- 'jest/globals': true
+ node: true
  },
  rules: {
  '@typescript-eslint/ban-ts-comment': [

cypress/.eslintrc

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

cypress/integration/diagramUpdate.spec.js

@@ -1,15 +1,3 @@
-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();

cypress/integration/history.spec.js

@@ -0,0 +1,44 @@
+describe('Save History', () => {
+ beforeEach(() => {
+ cy.clearLocalStorage();
+ cy.visit('/edit');
+ });
+ xit('should save when clicked', () => {
+ cy.get('#historyList').find('li').should('have.length', 0);
+ cy.get('#historyList').contains('No items in History');
+ cy.get('#saveHistory').click();
+ cy.get('#historyList').find('No items in History').should('not.exist');
+ cy.get('#historyList').find('li').should('have.length', 1);
+ cy.get('#saveHistory').click();
+ cy.on('window:alert', (str) => {
+ expect(str).to.equal('State already saved.');
+ });
+ cy.on('window:confirm', () => true);
+ cy.get('#editor').type(' C --> HistoryTest');
+ cy.get('#saveHistory').click();
+ cy.get('#historyList').find('li').should('have.length', 2);
+ });
+
+ it('should be able to restore and delete', () => {
+ cy.get('#saveHistory').click();
+ cy.get('#editor').type(' C --> HistoryTest');
+ cy.get('#historyList').find('No items in History').should('not.exist');
+ cy.get('#historyList').find('li').should('have.length', 1);
+ cy.contains('HistoryTest');
+ cy.contains('Restore').click();
+ cy.contains('HistoryTest').should('not.exist');
+ });
+
+ // 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();
+ // });
+});

package.json

@@ -18,18 +18,19 @@
  "@typescript-eslint/eslint-plugin": "^4.19.0",
  "@typescript-eslint/parser": "^4.19.0",
  "autoprefixer": "^10.2.5",
+ "chai": "^4.3.4",
  "cssnano": "^5.0.1",
  "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-mocha": "^8.1.0",
  "eslint-plugin-postcss-modules": "^1.2.1",
  "eslint-plugin-svelte3": "^3.2.0",
  "eslint-plugin-tailwindcss": "^1.8.0",
  "husky": "^6.0.0",
- "jest": "^26.6.3",
  "lint-staged": "^11.0.0",
+ "mocha": "^8.4.0",
  "postcss": "^8.2.10",
  "postcss-load-config": "^3.0.1",
  "prettier": "~2.2.1",

src/lib/components/card/card.svelte

@@ -9,7 +9,7 @@
  $: isOpen = isCloseable ? isOpen : true;
 </script>
 
-<div class={`bg-white rounded overflow-hidden shadow m-2 flex-grow flex flex-col `}>
+<div class="bg-white rounded overflow-hidden shadow m-2 flex-grow flex flex-col">
  <div class="bg-indigo-400 border-gray-400 p-2 flex-none" on:click={() => (isOpen = !isOpen)}>
  <div class="flex justify-between">
  <Tabs on:select {tabs} bind:isOpen {title} {isCloseable} />

src/lib/components/editor/editor.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
  import type { EditorEvents } from '$lib/types';
+ import { codeStore } from '$lib/util/state';
  import type monaco from 'monaco-editor';
  import { createEventDispatcher, onMount } from 'svelte';
  import { initEditor } from './util';
@@ -20,9 +21,15 @@
  overviewRulerLanes: 0
  };
  export let errorMarkers: monaco.editor.IMarkerData[] = [];
+ let oldText = text;
  $: Monaco?.editor.setModelLanguage(editor.getModel(), language);
- $: editor?.setValue(text);
  $: {
+ if (text !== oldText) {
+ if ($codeStore.updateEditor) {
+ editor?.setValue(text);
+ }
+ oldText = text;
+ }
  Monaco?.editor.setModelMarkers(editor.getModel(), 'test', errorMarkers);
  }
 
@@ -35,8 +42,9 @@
 
  editor = Monaco.editor.create(divEl, editorOptions);
  editor.onDidChangeModelContent(async () => {
+ text = editor.getValue();
  dispatch('update', {
- text: editor.getValue()
+ text
  });
  });
 

src/lib/components/history/history.svelte

@@ -73,14 +73,18 @@
 
 <Card on:select={tabSelectHandler} bind:isOpen {tabs} title="History">
  <div slot="actions">
- <button class="btn" on:click|stopPropagation={() => saveHistory()} title="Save current state"
- ><i class="far fa-save" /></button>
  <button
+ id="saveHistory"
+ class="btn"
+ on:click|stopPropagation={() => saveHistory()}
+ title="Save current state"><i class="far fa-save" /></button>
+ <button
+ id="clearHistory"
  class="btn text-red-400"
  on:click|stopPropagation={() => clearHistory()}
  title="Delete all saved states"><i class="fas fa-trash-alt" /></button>
  </div>
- <ul class="p-2 space-y-2 overflow-auto h-56">
+ <ul class="p-2 space-y-2 overflow-auto h-56" id="historyList">
  {#if $historyStore.length > 0}
  {#each $historyStore as { state, time, name }}
  <li class="rounded p-2 shadow flex-col">

src/routes/edit.svelte

@@ -13,7 +13,7 @@
  import type monaco from 'monaco-editor';
  import type { Mermaid } from 'mermaid';
  import { goto } from '$app/navigation';
- import type { EditorUpdateEvent, Tab } from '$lib/types';
+ import type { EditorUpdateEvent, State, Tab } from '$lib/types';
 
  const mermaid: Mermaid = (window.mermaid as unknown) as Mermaid;
 
@@ -27,16 +27,20 @@
  let errorMarkers: monaco.editor.IMarkerData[] = [];
  $: language = languageMap[selectedMode];
  $: {
- if ($codeStore.updateEditor) {
- if (selectedMode === 'code') {
- text = $codeStore.code;
- } else {
- text = $codeStore.mermaid;
- }
+ if (selectedMode === 'code') {
+ text = $codeStore.code;
+ } else {
+ text = $codeStore.mermaid;
  }
  }
- onMount(initHandler);
 
+ codeStore.subscribe((state: State) => {
+ console.log(state);
+
+ if (state.updateEditor) {
+ text = selectedMode === 'code' ? state.code : state.mermaid;
+ }
+ });
  const tabSelectHandler = (message: CustomEvent<Tab>) => {
  $codeStore.updateEditor = true;
  selectedMode = message.detail.id;
@@ -97,6 +101,8 @@
  const viewDiagram = async () => {
  await goto(`/view#${$base64State}`, { replaceState: true });
  };
+
+ onMount(initHandler);
 </script>
 
 <div class="h-full flex flex-col overflow-hidden bg-gray-100">
@@ -118,7 +124,7 @@
  </label>
  </div>
 
- <Editor on:update={updateHandler} {language} {text} {errorMarkers} />
+ <Editor on:update={updateHandler} {language} bind:text {errorMarkers} />
  </Card>
 
  <div class="flex-1">