feat: part 2

- add saveTabbable - update interfaces - update current UT's - add docs
wswebcreation · Feb 23, 2020 · c5a8732 · c5a8732
1 parent 482caad
commit c5a8732
Show file tree

Hide file tree

Showing 21 changed files with 500 additions and 173 deletions.
diff --git a/docs/OPTIONS.md b/docs/OPTIONS.md
@@ -137,6 +137,99 @@ accepts an option object can also be used to set the screenshotPath value:
 
 The padding that needs to be added to the toolbar bar on iOS and Android to do a proper cutout of the the viewport.
 
+### `tabbableOptions`
+- **Type:** `object`
+- **Mandatory:** No
+- **Default:** See [here](../lib/helpers/constants.ts#L140) for all default values
+
+The options that can be changed for the lines and dots if you use the `{save|check}Tabbable`-methods. The options are explained below.
+
+#### `tabbableOptions.circle`
+- **Type:** `object`
+- **Mandatory:** No
+- **Default:** See [here](../lib/helpers/constants.ts#L140) for all default values
+
+The options to change the circle.
+
+##### `tabbableOptions.circle.backgroundColor`
+- **Type:** `string`
+- **Mandatory:** No
+- **Default:** See [here](../lib/helpers/constants.ts#L140) for all default values
+
+The background color of the circle.
+
+##### `tabbableOptions.circle.borderColor`
+- **Type:** `string`
+- **Mandatory:** No
+- **Default:** See [here](../lib/helpers/constants.ts#L140) for all default values
+
+The border color of the circle.
+
+##### `tabbableOptions.circle.borderWidth`
+- **Type:** `number`
+- **Mandatory:** No
+- **Default:** See [here](../lib/helpers/constants.ts#L140) for all default values
+
+The border width of the circle.
+
+##### `tabbableOptions.circle.fontColor`
+- **Type:** `string`
+- **Mandatory:** No
+- **Default:** See [here](../lib/helpers/constants.ts#L140) for all default values
+
+The color of the font of the text in the circle. This will only be shown if [`showNumber`](./OPTIONS.md#tabbableoptionscircleshownumber) is set to `true`.
+
+##### `tabbableOptions.circle.fontFamily`
+- **Type:** `string`
+- **Mandatory:** No
+- **Default:** See [here](../lib/helpers/constants.ts#L140) for all default values
+
+The family of the font of the text in the circle. This will only be shown if [`showNumber`](./OPTIONS.md#tabbableoptionscircleshownumber) is set to `true`.
+
+Make sure to set fonts that are supported by the browsers.
+
+##### `tabbableOptions.circle.fontSize`
+- **Type:** `number`
+- **Mandatory:** No
+- **Default:** See [here](../lib/helpers/constants.ts#L140) for all default values
+
+The size of the font of the text in the circle. This will only be shown if [`showNumber`](./OPTIONS.md#tabbableoptionscircleshownumber) is set to `true`.
+
+##### `tabbableOptions.circle.size`
+- **Type:** `number`
+- **Mandatory:** No
+- **Default:** See [here](../lib/helpers/constants.ts#L140) for all default values
+
+The size of the circle.
+
+##### `tabbableOptions.circle.showNumber`
+- **Type:** `showNumber`
+- **Mandatory:** No
+- **Default:** See [here](../lib/helpers/constants.ts#L140) for all default values
+
+Show the tab sequence number in the circle.
+
+#### `tabbableOptions.line`
+- **Type:** `object`
+- **Mandatory:** No
+- **Default:** See [here](../lib/helpers/constants.ts#L140) for all default values
+
+The options to change the line.
+
+##### `tabbableOptions.line.color`
+- **Type:** `string`
+- **Mandatory:** No
+- **Default:** See [here](../lib/helpers/constants.ts#L140) for all default values
+
+The color of the line.
+
+##### `tabbableOptions.line.width`
+- **Type:** `number`
+- **Mandatory:** No
+- **Default:** See [here](../lib/helpers/constants.ts#L140) for all default values
+
+The width of the line.
+
 ### Plugin compare options 
 The compare options can be set as plugin options, see [Compare options](./OPTIONS.md#compare-options)
 

diff --git a/lib/clientSideScripts/__snapshots__/removeCustomCss.spec.ts.snap b/lib/clientSideScripts/__snapshots__/removeCustomCss.spec.ts.snap
diff --git a/lib/clientSideScripts/__snapshots__/removeElementFromDom.spec.ts.snap b/lib/clientSideScripts/__snapshots__/removeElementFromDom.spec.ts.snap
@@ -0,0 +1,74 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`removeElementFromDom should be able to remove an element from the body 1`] = `
+<body>
+  <div>
+       
+    <span
+      id="id-1"
+    >
+      Hello
+    </span>
+       
+    <span
+      id="id-2"
+    >
+      Hello
+    </span>
+       
+    <div>
+           
+      <span
+        id="id-3"
+      >
+        Hello
+      </span>
+           
+      <span
+        id="id-4"
+      >
+        Hello
+      </span>
+        
+    </div>
+  </div>
+</body>
+`;
+
+exports[`removeElementFromDom should be able to remove an element from the body 2`] = `
+<body>
+  <div>
+       
+       
+    <span
+      id="id-2"
+    >
+      Hello
+    </span>
+       
+    <div>
+           
+      <span
+        id="id-3"
+      >
+        Hello
+      </span>
+           
+      <span
+        id="id-4"
+      >
+        Hello
+      </span>
+        
+    </div>
+  </div>
+</body>
+`;
+
+exports[`removeElementFromDom should be able to remove the custom css 1`] = `"body:{width:100%}"`;
+
+exports[`removeElementFromDom should be able to remove the custom css 2`] = `""`;
+
+exports[`removeElementFromDom should do nothing if custom css is not present 1`] = `""`;
+
+exports[`removeElementFromDom should do nothing if custom css is not present 2`] = `""`;
diff --git a/lib/clientSideScripts/drawTabbableOnCanvas.interfaces.ts b/lib/clientSideScripts/drawTabbableOnCanvas.interfaces.ts
@@ -0,0 +1,4 @@
+export interface ElementCoordinate {
+  x: number;
+  y: number;
+}
diff --git a/lib/clientSideScripts/createTabbableLines.ts → ...clientSideScripts/drawTabbableOnCanvas.ts b/lib/clientSideScripts/createTabbableLines.ts → ...clientSideScripts/drawTabbableOnCanvas.ts
@@ -1,32 +1,19 @@
-import {CircleOptions, ElementCoordinate, LineOptions, TabbableOptions} from "./tabbableOptions.interfaces";
-
-// based on this https://vivrichards.co.uk/accessibility/automating-page-tab-flows-using-visual-testing-and-javascript
-export default function drawTabbableOnCanvas(options: TabbableOptions) {
-  const defaultOptions: TabbableOptions = {
-    circle: {
-      backgroundColor: '#ff0000',
-      borderColor: '#000',
-      borderWidth: 1,
-      fontColor: '#fff',
-      fontFamily: 'Arial',
-      fontSize: 10,
-      size: 10,
-      showNumber: true,
-    },
-    line: {
-      color: '#000',
-      width: 1,
-    },
-  };
-  const drawOptions = {...defaultOptions, ...options};
-
+import {ElementCoordinate} from './drawTabbableOnCanvas.interfaces';
+import {CircleOptions, LineOptions, TabbableOptions} from '../commands/tabbable.interfaces';
+
+/**
+ * This method is based on this blog post
+ * https://vivrichards.co.uk/accessibility/automating-page-tab-flows-using-visual-testing-and-javascript
+ * by Viv Richards and optimized for using Canvas
+ */
+export default function drawTabbableOnCanvas(drawOptions: TabbableOptions) {
   // 1. Scroll to top of page
   window.scrollTo(0, 0);
 
   // 2. Insert canvas
   const width = window.innerWidth;
   const height = getDocumentScrollHeight();
-  const canvasNode = `<canvas id="tabCanvas" width="${width}" height="${height}" style="position:absolute;top:0;left:0;z-index:999999;">`;
+  const canvasNode = `<canvas id="wic-tabbable-canvas" width="${width}" height="${height}" style="position:absolute;top:0;left:0;z-index:999999;">`;
   document.body.insertAdjacentHTML('afterbegin', canvasNode);
 
   // 3. Get all the elements
@@ -39,7 +26,7 @@ export default function drawTabbableOnCanvas(options: TabbableOptions) {
     return {
       x: currentElement.left + (currentElement.width / 2),
       y: currentElement.top + (currentElement.height / 2),
-    }
+    };
   });
   // 4b. Add the starting coordinates
   elementCoordinates.unshift({x: 0, y: 0});
@@ -57,7 +44,7 @@ export default function drawTabbableOnCanvas(options: TabbableOptions) {
    * Draw a line
    */
   function drawLine(options: LineOptions, start: ElementCoordinate, end: ElementCoordinate): void {
-    const tabbableCanvasContext = (<HTMLCanvasElement>document.getElementById("tabCanvas")).getContext("2d");
+    const tabbableCanvasContext = (<HTMLCanvasElement>document.getElementById('wic-tabbable-canvas')).getContext('2d');
 
     // Draw the line
     tabbableCanvasContext.beginPath();
@@ -73,7 +60,7 @@ export default function drawTabbableOnCanvas(options: TabbableOptions) {
    * Draw a circle
    */
   function drawCircleAndNumber(options: CircleOptions, position: ElementCoordinate, i: number): void {
-    const tabbableCanvasContext = (<HTMLCanvasElement>document.getElementById("tabCanvas")).getContext("2d");
+    const tabbableCanvasContext = (<HTMLCanvasElement>document.getElementById('wic-tabbable-canvas')).getContext('2d');
 
     // Draw circle
     tabbableCanvasContext.beginPath();
@@ -97,9 +84,9 @@ export default function drawTabbableOnCanvas(options: TabbableOptions) {
   }
 
   /**
-   * This is coming from https://github.com/davidtheclark/tabbable
+   * Below code is coming from https://github.com/davidtheclark/tabbable
    * and is modified a bit to work inside the browser.
-   * The original module couldn't be used for injection
+   * The original module couldn't be used for injection and didn't support TypeScript
    */
 
   /**
@@ -141,8 +128,7 @@ export default function drawTabbableOnCanvas(options: TabbableOptions) {
       }
     }
 
-    // This is so bad :(, fix typings!!!
-    return [...(orderedTabbables.sort(<any>sortOrderedTabbables).map(a => a.node).concat(regularTabbables))];
+    return Array.prototype.slice.call(orderedTabbables.sort(<any>sortOrderedTabbables).map(a => a.node).concat(regularTabbables));
   }
 
   /**
@@ -253,7 +239,7 @@ export default function drawTabbableOnCanvas(options: TabbableOptions) {
     // in separate forms on the same page.
     // This is bad :(, but don't know how to fix this typing
     let radioSet = (<any>node.ownerDocument).querySelectorAll(
-      'input[type="radio"][name="' + node.name + '"]'
+      `input[type="radio"][name="${node.name}"]`
     );
     let checked = getCheckedRadio(radioSet);
 

diff --git a/lib/clientSideScripts/removeCustomCss.ts b/lib/clientSideScripts/removeCustomCss.ts
diff --git a/...clientSideScripts/removeCustomCss.spec.ts → ...tSideScripts/removeElementFromDom.spec.ts b/...clientSideScripts/removeCustomCss.spec.ts → ...tSideScripts/removeElementFromDom.spec.ts
@@ -1,6 +1,6 @@
-import removeCustomCss from './removeCustomCss';
+import removeElementFromDom from './removeElementFromDom';
 
-describe('removeCustomCss', ()=>{
+describe('removeElementFromDom', ()=>{
   it('should be able to remove the custom css', ()=>{
     // Set up our document body
     const id = 'test';
@@ -14,7 +14,7 @@ describe('removeCustomCss', ()=>{
 
     expect(document.head.textContent).toMatchSnapshot();
 
-    removeCustomCss(id);
+    removeElementFromDom(id);
 
     expect(document.head.textContent).toMatchSnapshot();
   });
@@ -25,17 +25,35 @@ describe('removeCustomCss', ()=>{
 
     expect(document.head.textContent).toMatchSnapshot();
 
-    removeCustomCss(id);
+    removeElementFromDom(id);
 
     expect(document.head.textContent).toMatchSnapshot();
   });
-  
+
   it('should do nothing if document.head is null', () => {
     const id = 'test';
-    Object.defineProperty(document, 'head', {value: null});    
+    Object.defineProperty(document, 'head', {value: null});
 
-    removeCustomCss(id);
+    removeElementFromDom(id);
 
     expect(document.head).toBe(null);
   });
+
+  it('should be able to remove an element from the body', () => {
+    document.body.innerHTML =
+      '<div>' +
+      '   <span id="id-1">Hello</span>' +
+      '   <span id="id-2">Hello</span>' +
+      '   <div>' +
+      '     <span id="id-3">Hello</span>' +
+      '     <span id="id-4">Hello</span>' +
+      '  </div>' +
+      '</div>';
+
+    expect(document.body).toMatchSnapshot();
+
+    removeElementFromDom('id-1');
+
+    expect(document.body).toMatchSnapshot();
+  });
 });
diff --git a/lib/clientSideScripts/removeElementFromDom.ts b/lib/clientSideScripts/removeElementFromDom.ts
@@ -0,0 +1,9 @@
+/**
+ * Remove a DOM element from the DOM
+ */
+export default function removeElementFromDom(id: string): void {
+  const elem = document.querySelector(`#${id}`);
+  if (elem != null) {
+    elem.parentNode.removeChild(elem);
+  }
+}
diff --git a/lib/commands/checkFullPageScreen.ts b/lib/commands/checkFullPageScreen.ts
@@ -19,7 +19,7 @@ export default async function checkFullPageScreen(
   checkFullPageOptions: CheckFullPageOptions,
 ): Promise<ImageCompareResult | number> {
 
-  // 1. Take the actual element screenshot and retrieve the needed data
+  // 1. Take the actual full page screenshot and retrieve the needed data
   const saveFullPageOptions: SaveFullPageOptions = {
     wic: checkFullPageOptions.wic,
     method: {