Correct tests

guardian · Jan 21, 2021 · 058fb33 · 058fb33
1 parent c27d71f
commit 058fb33
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 24 deletions.
diff --git a/src/ts/components/SidebarMatch.tsx b/src/ts/components/SidebarMatch.tsx
@@ -12,7 +12,7 @@ import SidebarMatchContainer from "./SidebarMatchContainer";
 import { createScrollToRangeHandler } from "../utils/component";
 import Markdown from "./Markdown";
 import { css, SerializedStyles } from "@emotion/react";
-import { getSquiggleAsUri } from "./icons";
+import { getSquiggleAsUri } from "../utils/squiggle";
 
 interface IProps {
   match: IMatch;

diff --git a/src/ts/components/icons.tsx b/src/ts/components/icons.tsx
@@ -1,18 +1,3 @@
-const squiggleMap = {
-  VERTICAL: (colour: string) =>
-    `<svg width="4" height="20" fill="none" transform="scale(-1,1)" xmlns="http://www.w3.org/2000/svg"><path stroke="${colour}" stroke-width="2" d="m2.08695,-2.80434c1.33333,1.72222 1.33333,3.44444 0,5.16667c-1.33333,1.72222 -1.33333,3.44444 0,5.16663c1.33333,1.7223 1.33333,3.4445 0,5.1667c-1.33333,1.7222 -1.33333,3.4444 0,5.1667c1.33333,1.7222 1.33333,3.4444 0,5.1666c-1.33333,1.7223 -1.33333,3.4445 0,5.1667"/></svg>`,
-  HORIZONTAL: (colour: string) =>
-    `<svg width="16" height="4" fill="none" xmlns="http://www.w3.org/2000/svg"><path stroke="${colour}" stroke-width="2" d="m22.65517,2c-1.37161,1.33333 -2.74333,1.33333 -4.11494,0c-1.37161,-1.33333 -2.74333,-1.33333 -4.11494,0c-1.37161,1.33333 -2.74333,1.33333 -4.11494,0c-1.37161,-1.33333 -2.74333,-1.33333 -4.11494,0c-1.37164,1.33333 -2.7433,1.33333 -4.11494,0c-1.37164,-1.33333 -2.7433,-1.33333 -4.11494,0"/></svg>`
-};
-
-export const getSquiggleAsUri = (
-  colour: string,
-  orientation: "HORIZONTAL" | "VERTICAL" = "HORIZONTAL"
-) => {
-  const svg = squiggleMap[orientation](colour);
-  return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
-};
-
 export const warningIcon = (colour: string) => (
   <svg
     width="20"

diff --git a/src/ts/utils/decoration.ts b/src/ts/utils/decoration.ts
@@ -2,7 +2,7 @@ import flatten from "lodash/flatten";
 import { Node } from "prosemirror-model";
 import { Decoration, DecorationSet } from "prosemirror-view";
 import { IRange, IMatch } from "../interfaces/IMatch";
-import { getSquiggleAsUri } from '../components/icons';
+import { getSquiggleAsUri } from "./squiggle";
 
 export enum MatchType {
   HAS_REPLACEMENT = "HAS_REPLACEMENT",

diff --git a/src/ts/utils/squiggle.ts b/src/ts/utils/squiggle.ts
@@ -0,0 +1,14 @@
+const squiggleMap = {
+  VERTICAL: (colour: string) =>
+    `<svg width="4" height="20" fill="none" transform="scale(-1,1)" xmlns="http://www.w3.org/2000/svg"><path stroke="${colour}" stroke-width="2" d="m2.08695,-2.80434c1.33333,1.72222 1.33333,3.44444 0,5.16667c-1.33333,1.72222 -1.33333,3.44444 0,5.16663c1.33333,1.7223 1.33333,3.4445 0,5.1667c-1.33333,1.7222 -1.33333,3.4444 0,5.1667c1.33333,1.7222 1.33333,3.4444 0,5.1666c-1.33333,1.7223 -1.33333,3.4445 0,5.1667"/></svg>`,
+  HORIZONTAL: (colour: string) =>
+    `<svg width="16" height="4" fill="none" xmlns="http://www.w3.org/2000/svg"><path stroke="${colour}" stroke-width="2" d="m22.65517,2c-1.37161,1.33333 -2.74333,1.33333 -4.11494,0c-1.37161,-1.33333 -2.74333,-1.33333 -4.11494,0c-1.37161,1.33333 -2.74333,1.33333 -4.11494,0c-1.37161,-1.33333 -2.74333,-1.33333 -4.11494,0c-1.37164,1.33333 -2.7433,1.33333 -4.11494,0c-1.37164,-1.33333 -2.7433,-1.33333 -4.11494,0"/></svg>`
+};
+
+export const getSquiggleAsUri = (
+  colour: string,
+  orientation: "HORIZONTAL" | "VERTICAL" = "HORIZONTAL"
+) => {
+  const svg = squiggleMap[orientation](colour);
+  return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
+};
diff --git a/src/ts/utils/test/decoration.spec.ts b/src/ts/utils/test/decoration.spec.ts
@@ -1,6 +1,5 @@
 import {
   createDecorationsForMatch,
-  defaultMatchColours,
   getMatchType,
   MatchType
 } from "../decoration";
@@ -20,9 +19,8 @@ describe("Decoration utils", () => {
           to: 5,
           type: {
             attrs: {
-              class: "MatchDecoration",
-              "data-match-id": "0-from:0-to:5--match-0",
-              style: `background-color: ${defaultMatchColours.default}07; border-bottom: 2px solid ${defaultMatchColours.default}${defaultMatchColours.defaultOpacity}`
+              class: "MatchDecoration MatchDecoration--default",
+              "data-match-id": "0-from:0-to:5--match-0"
             },
             spec: {
               categoryId: "1",
@@ -43,9 +41,8 @@ describe("Decoration utils", () => {
           to: 5,
           type: {
             attrs: {
-              class: "MatchDecoration",
-              "data-match-id": "0-from:0-to:5--match-0",
-              style: `background-color: ${defaultMatchColours.correct}07; border-bottom: 2px solid ${defaultMatchColours.correct}${defaultMatchColours.correctOpacity}`
+              class: "MatchDecoration MatchDecoration--is-correct",
+              "data-match-id": "0-from:0-to:5--match-0"
             },
             spec: {
               categoryId: "1",