separate svgcanvas from svgedit

now you can use directlt svgcanvas. see readme.md

* configure workspaces
* move svgcanvas to packages folder
* move utils to common and paint to svgcanvas
* make svgcanvas a dependency of svgedit
* update deps
* workspaces requires npm 7 at least so the ci needs a new node version
* update github actions to V3
* update snapshots using custom svg exports
* remove unmaintained cypress snapshot plugin
* new github action to add coverage in PR
* Update onpushandpullrequest.yml
* svgcanvas v7.1.6

cypress/support/commands.js

@@ -23,3 +23,22 @@
 //
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+Cypress.Commands.add('svgSnapshot', () => {
+  cy.wait(300) // necessary for some animations to complete
+  // console.log(Cypress.spec, Cypress.currentTest)
+  cy.window().then((win) => { // access to the remote Window so we can get the svgEditor variable
+    const svgString = win.svgEditor.svgCanvas.getSvgString()
+    const filename = `cypress/__svgSnapshots__/${Cypress.spec.fileName}-${Cypress.currentTest.title}.svg`
+    //
+    // console.log(filename)
+    cy.task('readFileMaybe', filename).then((text) => {
+      if (text === null) {
+        // file does not exist so we create it
+        cy.writeFile(filename, svgString)
+        cy.log('creating snapshot', filename)
+      } else {
+        expect(text).to.equal(svgString)
+      }
+    })
+  })
+})

cypress/support/e2e.js

@@ -19,27 +19,8 @@ import './commands.js'
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
 
-/**
- * FIDDLE
- * Adds "cy.runExample()" custom command
- * Accets test object property (or array thereof):
- *    Required: `test`
- *    Optional: `html`, `name`, `description`
- *    With `testExamples` only: `skip` and `only`
- * @see https://github.com/cypress-io/cypress-fiddle
- * @example import {testExamples} from '@cypress/fiddle';
- */
-import '@cypress/fiddle'
-
 /**
  * COVERAGE.
  * @see https://docs.cypress.io/guides/tooling/code-coverage.html#Install-the-plugin
  */
 import '@cypress/code-coverage/support.js'
-
-/*****
- * SNAPSHOTS
- * @see https://www.npmjs.com/package/cypress-plugin-snapshots
- */
-
-import 'cypress-plugin-snapshots/commands.js'

cypress/support/ui-test-helper.js

@@ -1,11 +1,6 @@
-export const approveStorage = () => {
-  cy.get('#storage_ok').click()
-}
-
 export const visitAndApproveStorage = () => {
-  cy.viewport(512, 512)
   cy.visit('/instrumented/editor/index.html')
-  approveStorage()
+  cy.get('#storage_ok').click()
 }
 
 export const openMainMenu = () => {
@@ -22,11 +17,3 @@ export const selectEnglish = () => {
   cy.get('#lang_select').select('en')
   cy.get('#tool_prefs_save').click()
 }
-
-export const testSnapshot = () => {
-  cy.window().then((win) => { // access to the remote Window so we can get the svgEditor variable
-    const svgString = win.svgEditor.svgCanvas.getSvgString()
-    const svgDom = new DOMParser().parseFromString(svgString, 'text/html').querySelector('body')
-    cy.wrap(svgDom).toMatchSnapshot()
-  })
-}