From c5327bd5daf027a672d4c9dca84be6d4a1f26134 Mon Sep 17 00:00:00 2001
From: Iuliia Kulagina <v-ikulagina@microsoft.com>
Date: Tue, 12 Sep 2023 10:57:13 +0200
Subject: [PATCH] Add tests for focus styles

---
 test/visualTest.ts | 67 +++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 66 insertions(+), 1 deletion(-)

diff --git a/test/visualTest.ts b/test/visualTest.ts
index 29e2fee..c8e64b5 100644
--- a/test/visualTest.ts
+++ b/test/visualTest.ts
@@ -927,7 +927,7 @@ describe("SankeyDiagram", () => {
     });
 
     describe("Focus elements tests:", () => {
-        it("links should have :focus-visible style", (done: DoneFn) => {
+        it("focused links should have :focus-visible style", (done: DoneFn) => {
             visualBuilder.updateRenderTimeout(dataView, () => {
                 const links: NodeListOf<HTMLElement> = visualBuilder.linkElements;
 
@@ -945,6 +945,41 @@ describe("SankeyDiagram", () => {
             });
         });
 
+        it("focused links should have styled stroke and outline", (done: DoneFn) => {
+            visualBuilder.updateRenderTimeout(dataView, () => {
+                // defaults
+                const focusedStrokeWidth: string = "2px";
+                const focusedStrokeOpacity: string = "1";
+                const focusedOutline: string = "rgb(0, 0, 0) none 0px";
+                const strokeWidth: string = "1px";
+                const strokeOpacity: string = "0.2";
+                const outline: string = "rgb(0, 0, 0) none 0px";
+
+                const links: NodeListOf<HTMLElement> = visualBuilder.linkElements;
+
+                links[0].focus();
+                
+                links.forEach((element: Element, index: number) => {
+                    const linkComputedStyle: CSSStyleDeclaration = getComputedStyle(element);
+                    const linkStrokeWidth: string = linkComputedStyle.getPropertyValue("stroke-width");
+                    const linkStrokeOpacity: string = linkComputedStyle.getPropertyValue("stroke-opacity");
+                    const linkOutline: string = linkComputedStyle.getPropertyValue("outline");
+
+                    if (index === 0){
+                        expect(linkStrokeWidth).toBe(focusedStrokeWidth);
+                        expect(linkStrokeOpacity).toBe(focusedStrokeOpacity);
+                        expect(linkOutline).toBe(focusedOutline);
+                    }
+                    else  {
+                        expect(linkStrokeWidth).toBe(strokeWidth);
+                        expect(linkStrokeOpacity).toBe(strokeOpacity);
+                        expect(linkOutline).toBe(outline);
+                    }
+                });
+                done();
+            });
+        });
+
         it("nodes should have :focus-visible style", (done: DoneFn) => {
             visualBuilder.updateRenderTimeout(dataView, () => {
                 const nodeRects: NodeListOf<HTMLElement> = visualBuilder.nodeRectElements;
@@ -962,6 +997,36 @@ describe("SankeyDiagram", () => {
                 done();
             });
         });
+
+        it("focused nodes should have styled stroke and outline", (done: DoneFn) => {
+            visualBuilder.updateRenderTimeout(dataView, () => {
+                // defaults
+                const focusedStrokeWidth: string = "4px";
+                const focusedOutline: string = "rgb(0, 0, 0) none 0px";
+                const strokeWidth: string = "1px";
+                const outline: string = "rgb(0, 0, 0) none 0px";
+
+                const nodes: NodeListOf<HTMLElement> = visualBuilder.nodeRectElements;
+
+                nodes[0].focus();
+                
+                nodes.forEach((element: Element, index: number) => {
+                    const nodeComputedStyle: CSSStyleDeclaration = getComputedStyle(element);
+                    const nodeStrokeWidth: string = nodeComputedStyle.getPropertyValue("stroke-width");
+                    const nodeOutline: string = nodeComputedStyle.getPropertyValue("outline");
+
+                    if (index === 0){
+                        expect(nodeStrokeWidth).toBe(focusedStrokeWidth);
+                        expect(nodeOutline).toBe(focusedOutline);
+                    }
+                    else  {
+                        expect(nodeStrokeWidth).toBe(strokeWidth);
+                        expect(nodeOutline).toBe(outline);
+                    }
+                });
+                done();
+            });
+        });
     });
 
     describe("high contrast mode test", () => {