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