- Testing: Separate tests into unit/ui; split UI tests by specific domain;

setup browser-bug folder and ui issues folder
- Testing: Create test utilities for selecting English and visiting and
  approving storage
- Testing: Add test for tool selection

CHANGES.md

@@ -15,6 +15,10 @@
 - Testing: Switch to Cypress with code coverage for UI testing;
   use ESM version for faster debugging
 - Testing: Add map file for underscore
+- Testing: Separate tests into unit/ui; split UI tests by specific domain;
+  setup browser-bug folder and ui issues folder
+- Testing: Create test utilities for selecting English and visiting and
+  approving storage
 - npm: Update scripts to reflect removal of `all_tests.html`;
   remove `browser-test` script
 - npm: Update devDeps, peerDeps

badges/coverage-badge.svg

@@ -1,17 +1,17 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="110" height="20">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="116" height="20">
   <linearGradient id="smooth" x2="0" y2="100%">
     <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>
     <stop offset="1" stop-opacity=".1"/>
   </linearGradient>
 
   <clipPath id="round">
-    <rect width="110" height="20" rx="3" fill="#fff"/>
+    <rect width="116" height="20" rx="3" fill="#fff"/>
   </clipPath>
 
   <g clip-path="url(#round)">
     <rect width="63" height="20" fill="#555"/>
-    <rect x="63" width="47" height="20" fill="#fe7d37"/>
-    <rect width="110" height="20" fill="url(#smooth)"/>
+    <rect x="63" width="53" height="20" fill="#fe7d37"/>
+    <rect width="116" height="20" fill="url(#smooth)"/>
   </g>
 
   <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="110">
@@ -20,8 +20,8 @@
         <text x="325" y="150" fill="#010101" fill-opacity=".3" transform="scale(0.1)" textLength="530" lengthAdjust="spacing">Coverage</text>
         <text x="325" y="140" transform="scale(0.1)" textLength="530" lengthAdjust="spacing">Coverage</text>
     
-    <text x="855" y="150" fill="#010101" fill-opacity=".3" transform="scale(0.1)" textLength="370" lengthAdjust="spacing">40.9%</text>
-    <text x="855" y="140" transform="scale(0.1)" textLength="370" lengthAdjust="spacing">40.9%</text>
+    <text x="885" y="150" fill="#010101" fill-opacity=".3" transform="scale(0.1)" textLength="430" lengthAdjust="spacing">22.02%</text>
+    <text x="885" y="140" transform="scale(0.1)" textLength="430" lengthAdjust="spacing">22.02%</text>
   </g>
 
   

cypress/integration/ui/accessibility.js

@@ -1,4 +1,4 @@
-describe('Accessibility', function () {
+describe('UI - Accessibility', function () {
   beforeEach(() => {
     cy.visit('/instrumented/svg-editor-es.html');
     cy.injectAxe();

cypress/integration/ui/control-points.js

@@ -1,27 +1,10 @@
 import {
-  approveStorage, openMainMenu,
-  openEditorPreferences
-} from '../support/ui-test-helper.js';
+  visitAndApproveStorage
+} from '../../support/ui-test-helper.js';
 
-describe('UI tests', function () {
+describe('UI - Control Points', function () {
   beforeEach(() => {
-    cy.visit('/instrumented/svg-editor-es.html');
-    // Ensure we test against English regardless of the original locale
-    approveStorage();
-    openEditorPreferences();
-    cy.get('#lang_select').select('en');
-    cy.get('#tool_prefs_save').click();
-  });
-
-  it('Editor - No parameters: Has export button', () => {
-    openMainMenu();
-    cy.get('#tool_export');
-  });
-
-  it('Editor - No parameters: Export button clicking; dialog opens', () => {
-    openMainMenu();
-    cy.get('#tool_export').click();
-    cy.get('#dialog_content select');
+    visitAndApproveStorage();
   });
 
   it('Editor - No parameters: Drag control point of arc path', () => {

cypress/integration/ui/export.js

@@ -0,0 +1,20 @@
+import {
+  visitAndApproveStorage, openMainMenu
+} from '../../support/ui-test-helper.js';
+
+describe('UI - Export tests', function () {
+  beforeEach(() => {
+    visitAndApproveStorage();
+  });
+
+  it('Editor - No parameters: Has export button', () => {
+    openMainMenu();
+    cy.get('#tool_export');
+  });
+
+  it('Editor - No parameters: Export button clicking; dialog opens', () => {
+    openMainMenu();
+    cy.get('#tool_export').click();
+    cy.get('#dialog_content select');
+  });
+});

cypress/integration/ui/issues/issue-364.js

@@ -0,0 +1,19 @@
+import {
+  visitAndApproveStorage
+} from '../../../support/ui-test-helper.js';
+
+// See https://github.com/SVG-Edit/svgedit/issues/364
+describe('Issue 364; IE errorwith rectangle selection by click', function () {
+  beforeEach(() => {
+    visitAndApproveStorage();
+  });
+
+  it('should set rectangle selection after click', function () {
+    cy.get('#tools_rect_show')
+      .trigger('mousedown', {force: true})
+      .trigger('mouseup', {force: true})
+      .should((button) => {
+        expect(button).to.have.class('tool_button_current');
+      });
+  });
+});

cypress/integration/ui/tool-selection.js

@@ -0,0 +1,18 @@
+import {
+  visitAndApproveStorage
+} from '../../support/ui-test-helper.js';
+
+describe('UI - Tool selection', function () {
+  beforeEach(() => {
+    visitAndApproveStorage();
+  });
+
+  it('should set rectangle selection by click', function () {
+    cy.get('#tools_rect_show')
+      .trigger('mousedown', {force: true})
+      .trigger('mouseup', {force: true})
+      .should((button) => {
+        expect(button).to.have.class('tool_button_current');
+      });
+  });
+});

cypress/integration/unit/contextmenu.js

@@ -1,5 +1,5 @@
-import '../../instrumented/jquery.min.js';
-import * as contextmenu from '../../instrumented/contextmenu.js';
+import '../../../instrumented/jquery.min.js';
+import * as contextmenu from '../../../instrumented/contextmenu.js';
 
 describe('contextmenu', function () {
   /**

cypress/integration/unit/coords.js

@@ -1,8 +1,8 @@
-import '../../instrumented/jquery.min.js';
+import '../../../instrumented/jquery.min.js';
 
-import {NS} from '../../instrumented/namespaces.js';
-import * as utilities from '../../instrumented/utilities.js';
-import * as coords from '../../instrumented/coords.js';
+import {NS} from '../../../instrumented/namespaces.js';
+import * as utilities from '../../../instrumented/utilities.js';
+import * as coords from '../../../instrumented/coords.js';
 
 describe('coords', function () {
   let elemId = 1;

cypress/integration/unit/draw.js

@@ -1,8 +1,8 @@
-import '../../instrumented/jquery.min.js';
+import '../../../instrumented/jquery.min.js';
 
-import {NS} from '../../instrumented/namespaces.js';
-import * as draw from '../../instrumented/draw.js';
-import * as units from '../../instrumented/units.js';
+import {NS} from '../../../instrumented/namespaces.js';
+import * as draw from '../../../instrumented/draw.js';
+import * as units from '../../../instrumented/units.js';
 
 describe('draw.Drawing', function () {
   const addOwnSpies = (obj) => {

cypress/integration/unit/history.js

@@ -1,9 +1,9 @@
-import '../../instrumented/jquery.min.js';
+import '../../../instrumented/jquery.min.js';
 
-import {NS} from '../../instrumented/namespaces.js';
-import * as transformlist from '../../instrumented/svgtransformlist.js';
-import * as utilities from '../../instrumented/utilities.js';
-import * as hstory from '../../instrumented/history.js';
+import {NS} from '../../../instrumented/namespaces.js';
+import * as transformlist from '../../../instrumented/svgtransformlist.js';
+import * as utilities from '../../../instrumented/utilities.js';
+import * as hstory from '../../../instrumented/history.js';
 
 describe('history', function () {
   // TODO(codedread): Write tests for handling history events.

cypress/integration/unit/math.js

@@ -1,7 +1,7 @@
-import '../../instrumented/jquery.min.js';
+import '../../../instrumented/jquery.min.js';
 
-import {NS} from '../../instrumented/namespaces.js';
-import * as math from '../../instrumented/math.js';
+import {NS} from '../../../instrumented/namespaces.js';
+import * as math from '../../../instrumented/math.js';
 
 describe('math', function () {
   const svg = document.createElementNS(NS.SVG, 'svg');

cypress/integration/unit/path.js

@@ -1,10 +1,10 @@
 /* globals SVGPathSeg */
-import '../../instrumented/jquery.min.js';
+import '../../../instrumented/jquery.min.js';
 
-import '../../instrumented/svgpathseg.js';
-import {NS} from '../../instrumented/namespaces.js';
-import * as utilities from '../../instrumented/utilities.js';
-import * as pathModule from '../../instrumented/path.js';
+import '../../../instrumented/svgpathseg.js';
+import {NS} from '../../../instrumented/namespaces.js';
+import * as utilities from '../../../instrumented/utilities.js';
+import * as pathModule from '../../../instrumented/path.js';
 
 describe('path', function () {
   /**

cypress/integration/unit/recalculate.js

@@ -1,9 +1,9 @@
-import '../../instrumented/jquery.min.js';
+import '../../../instrumented/jquery.min.js';
 
-import {NS} from '../../instrumented/namespaces.js';
-import * as utilities from '../../instrumented/utilities.js';
-import * as coords from '../../instrumented/coords.js';
-import * as recalculate from '../../instrumented/recalculate.js';
+import {NS} from '../../../instrumented/namespaces.js';
+import * as utilities from '../../../instrumented/utilities.js';
+import * as coords from '../../../instrumented/coords.js';
+import * as recalculate from '../../../instrumented/recalculate.js';
 
 describe('recalculate', function () {
   // eslint-disable-next-line no-shadow

cypress/integration/unit/sanitize.js

@@ -1,7 +1,7 @@
-import '../../instrumented/jquery.min.js';
+import '../../../instrumented/jquery.min.js';
 
-import {NS} from '../../instrumented/namespaces.js';
-import * as sanitize from '../../instrumented/sanitize.js';
+import {NS} from '../../../instrumented/namespaces.js';
+import * as sanitize from '../../../instrumented/sanitize.js';
 
 describe('sanitize', function () {
   const svg = document.createElementNS(NS.SVG, 'svg');

cypress/integration/unit/select.js

@@ -1,7 +1,7 @@
-import '../../instrumented/jquery.min.js';
+import '../../../instrumented/jquery.min.js';
 
-import * as select from '../../instrumented/select.js';
-import {NS} from '../../instrumented/namespaces.js';
+import * as select from '../../../instrumented/select.js';
+import {NS} from '../../../instrumented/namespaces.js';
 
 describe('select', function () {
   const sandbox = document.createElement('div');

cypress/integration/unit/svgtransformlist.js

@@ -1,11 +1,11 @@
-import '../../instrumented/jquery.min.js';
+import '../../../instrumented/jquery.min.js';
 
-import {NS} from '../../instrumented/namespaces.js';
-import * as transformlist from '../../instrumented/svgtransformlist.js';
-import {disableSupportsNativeTransformLists} from '../../instrumented/browser.js';
+import {NS} from '../../../instrumented/namespaces.js';
+import * as transformlist from '../../../instrumented/svgtransformlist.js';
+import {disableSupportsNativeTransformLists} from '../../../instrumented/browser.js';
 
-import almostEqualsPlugin from '../support/assert-almostEquals.js';
-import expectOutOfBoundsExceptionPlugin from '../support/assert-expectOutOfBoundsException.js';
+import almostEqualsPlugin from '../../support/assert-almostEquals.js';
+import expectOutOfBoundsExceptionPlugin from '../../support/assert-expectOutOfBoundsException.js';
 
 chai.use(almostEqualsPlugin);
 chai.use(expectOutOfBoundsExceptionPlugin);

cypress/integration/unit/test1.js

@@ -1,8 +1,8 @@
-import '../../instrumented/jquery.min.js';
-import '../../instrumented/jquery-ui/jquery-ui-1.8.17.custom.min.js';
+import '../../../instrumented/jquery.min.js';
+import '../../../instrumented/jquery-ui/jquery-ui-1.8.17.custom.min.js';
 
-import '../../instrumented/svgpathseg.js';
-import SvgCanvas from '../../instrumented/svgcanvas.js';
+import '../../../instrumented/svgpathseg.js';
+import SvgCanvas from '../../../instrumented/svgcanvas.js';
 
 describe('Basic Module', function () {
   // helper functions

cypress/integration/unit/units.js

@@ -1,6 +1,6 @@
-import '../../instrumented/jquery.min.js';
+import '../../../instrumented/jquery.min.js';
 
-import * as units from '../../instrumented/units.js';
+import * as units from '../../../instrumented/units.js';
 
 describe('units', function () {
   /**

cypress/integration/unit/utilities-bbox.js

@@ -1,12 +1,12 @@
-import '../../instrumented/jquery.min.js';
+import '../../../instrumented/jquery.min.js';
 
-import '../../instrumented/svgpathseg.js';
-import {NS} from '../../instrumented/namespaces.js';
-import * as utilities from '../../instrumented/utilities.js';
-import * as transformlist from '../../instrumented/svgtransformlist.js';
-import * as math from '../../instrumented/math.js';
-import * as path from '../../instrumented/path.js';
-import setAssertionMethods from '../support/assert-close.js';
+import '../../../instrumented/svgpathseg.js';
+import {NS} from '../../../instrumented/namespaces.js';
+import * as utilities from '../../../instrumented/utilities.js';
+import * as transformlist from '../../../instrumented/svgtransformlist.js';
+import * as math from '../../../instrumented/math.js';
+import * as path from '../../../instrumented/path.js';
+import setAssertionMethods from '../../support/assert-close.js';
 
 chai.use(setAssertionMethods);
 

cypress/integration/unit/utilities-performance.js

@@ -1,10 +1,10 @@
-import '../../instrumented/jquery.min.js';
+import '../../../instrumented/jquery.min.js';
 
-import '../../instrumented/svgpathseg.js';
-import {NS} from '../../instrumented/namespaces.js';
-import * as utilities from '../../instrumented/utilities.js';
-import * as transformlist from '../../instrumented/svgtransformlist.js';
-import * as math from '../../instrumented/math.js';
+import '../../../instrumented/svgpathseg.js';
+import {NS} from '../../../instrumented/namespaces.js';
+import * as utilities from '../../../instrumented/utilities.js';
+import * as transformlist from '../../../instrumented/svgtransformlist.js';
+import * as math from '../../../instrumented/math.js';
 
 describe('utilities performance', function () {
   let currentLayer, groupWithMatrixTransform, textWithMatrixTransform;

cypress/integration/unit/utilities.js

@@ -1,8 +1,8 @@
-import '../../instrumented/jquery.min.js';
+import '../../../instrumented/jquery.min.js';
 
-import * as browser from '../../instrumented/browser.js';
-import * as utilities from '../../instrumented/utilities.js';
-import {NS} from '../../instrumented/namespaces.js';
+import * as browser from '../../../instrumented/browser.js';
+import * as utilities from '../../../instrumented/utilities.js';
+import {NS} from '../../../instrumented/namespaces.js';
 
 describe('utilities', function () {
   /**

cypress/support/ui-test-helper.js

@@ -3,6 +3,11 @@ export const approveStorage = () => {
     .click();
 };
 
+export const visitAndApproveStorage = () => {
+  cy.visit('/instrumented/svg-editor-es.html');
+  approveStorage();
+};
+
 export const openMainMenu = () => {
   return cy.get('#main_icon').click();
 };
@@ -11,3 +16,9 @@ export const openEditorPreferences = () => {
   openMainMenu();
   return cy.get('#tool_prefs_option').click();
 };
+
+export const selectEnglish = () => {
+  openEditorPreferences();
+  cy.get('#lang_select').select('en');
+  cy.get('#tool_prefs_save').click();
+};