Merge branch 'master' into add-choice-widget

DiamondLightSource · Apr 11, 2024 · 14aa292 · 14aa292
2 parents 662b808 + 609b4cc
commit 14aa292
Show file tree

Hide file tree

Showing 19 changed files with 798 additions and 395 deletions.
diff --git a/src/ui/widgets/ActionButton/actionButton.tsx b/src/ui/widgets/ActionButton/actionButton.tsx
@@ -64,7 +64,7 @@ export const ActionButtonComponent = (
           <figcaption>{props.text}</figcaption>
         </figure>
       ) : (
-        <span style={{ whiteSpace: "normal" }}>{props.text}</span>
+        <span style={{ whiteSpace: "normal" }}>{props.text || ""}</span>
       )}
     </button>
   );

diff --git a/src/ui/widgets/Arc/arc.test.tsx b/src/ui/widgets/Arc/arc.test.tsx
@@ -1,6 +1,11 @@
 import React from "react";
 import renderer, { ReactTestRendererJSON } from "react-test-renderer";
-import { ArcComponent, circumPointFromAngle } from "./arc";
+import {
+  ArcComponent,
+  circumPointFromAngle,
+  findFillOption,
+  findLineColor
+} from "./arc";
 import { Color } from "../../../types/color";
 
 const ArcRenderer = (arcProps: any): ReactTestRendererJSON => {
@@ -14,30 +19,37 @@ describe("<ArcComponent />", (): void => {
     const arcProps = {
       height: 100,
       width: 100,
-      foregroundColor: Color.fromRgba(0, 1, 255),
       backgroundColor: Color.fromRgba(200, 1, 60)
     };
 
     const svg = ArcRenderer(arcProps);
     expect(svg.props.viewBox).toEqual("0 0 100 100");
 
     const pathArray = svg.children as Array<ReactTestRendererJSON>;
-    // Default doesn't fill, expect just border paths of arc
-    expect(pathArray.length).toEqual(1);
+    // Default fills, expect border path and fill of arc
+    expect(pathArray.length).toEqual(2);
     // Filled arc
-    expect(pathArray[0].props.d).toEqual("M 100 50\nA 50 50 0 0 1 50 100");
-    expect(pathArray[0].props.fill).toEqual("transparent");
-    expect(pathArray[0].props.stroke).toEqual("rgba(0,1,255,255)");
+    expect(pathArray[0].props.d).toEqual(
+      "M 50 50\nL 100 50\nA 50 50 0 0 1 50 100\nZ"
+    );
+    expect(pathArray[0].props.fill).toEqual("rgba(200,1,60,255)");
+    expect(pathArray[0].props.stroke).toEqual("rgba(200,1,60,255)");
+    // BOrder
+    expect(pathArray[1].props.d).toEqual(
+      "M 100 50\nA 50 50 0 0 1 50 100\nL 50 50\nL 100 50"
+    );
+    expect(pathArray[1].props.fill).toEqual("transparent");
+    expect(pathArray[1].props.stroke).toEqual("rgba(0,0,255,255)");
   });
 
-  test("create arc of angle > 180 degrees", (): void => {
+  test("create arc of angle > 180 degrees with fill (phoebus)", (): void => {
     const arcProps = {
       height: 100,
       width: 100,
       startAngle: 34,
       totalAngle: 201,
-      fill: true,
-      foregroundColor: Color.fromRgba(0, 100, 200),
+      transparent: false,
+      lineColor: Color.fromRgba(0, 100, 200),
       backgroundColor: Color.fromRgba(45, 1, 180)
     };
 
@@ -62,7 +74,7 @@ describe("<ArcComponent />", (): void => {
     }
   });
 
-  test("create arc with negative start angle", (): void => {
+  test("create arc with negative start angle, with fill (css)", (): void => {
     const arcProps = {
       height: 100,
       width: 100,
@@ -84,48 +96,46 @@ describe("<ArcComponent />", (): void => {
     );
   });
 
-  test("create arc with negative start and total angle", (): void => {
+  test("create arc with negative start and total angle, no fill (phoebus)", (): void => {
     const arcProps = {
       height: 100,
       width: 100,
       startAngle: -100,
       totalAngle: -90,
-      fill: true,
-      foregroundColor: Color.fromRgba(0, 100, 200),
+      transparent: true,
+      lineColor: Color.fromRgba(0, 101, 200),
       backgroundColor: Color.fromRgba(45, 1, 180)
     };
 
     const svg = ArcRenderer(arcProps);
 
     const pathArray = svg.children as Array<ReactTestRendererJSON>;
-    // Fill and border paths of arc
-    expect(pathArray.length).toEqual(2);
-    // Filled arc
+    // Border paths of arc
+    expect(pathArray.length).toEqual(1);
+    // Arc
     expect(pathArray[0].props.d).toEqual(
-      "M 50 50\nL 41 1\nA 50 50 -100 0 0 1 59\nZ"
+      "M 41 1\nA 50 50 -100 0 0 1 59\nL 50 50\nL 41 1"
     );
   });
 
-  test("create arc with negative total angle", (): void => {
+  test("create arc with negative total angle, no fill (css)", (): void => {
     const arcProps = {
       height: 100,
       width: 100,
       startAngle: 40,
       totalAngle: -120,
-      fill: true,
+      fill: false,
       foregroundColor: Color.fromRgba(0, 100, 200),
       backgroundColor: Color.fromRgba(45, 1, 180)
     };
 
     const svg = ArcRenderer(arcProps);
 
     const pathArray = svg.children as Array<ReactTestRendererJSON>;
-    // Fill and border paths of arc
-    expect(pathArray.length).toEqual(4);
+    // Border paths of arc
+    expect(pathArray.length).toEqual(2);
     // Filled arc
-    expect(pathArray[0].props.d).toEqual(
-      "M 50 50\nL 88 82\nA 50 50 40 0 0 82 12\nZ"
-    );
+    expect(pathArray[0].props.d).toEqual("M 88 82\nA 50 50 40 0 0 82 12");
   });
 });
 
@@ -135,3 +145,33 @@ describe("circumPointFromAngle()", (): void => {
     expect(coords).toEqual([11, 17]);
   });
 });
+
+describe("findFillOption()", (): void => {
+  test("Use Phoebus fill option", (): void => {
+    const fillOpt = findFillOption(false, undefined);
+    expect(fillOpt).toEqual(true);
+  });
+  test("Use CSStudio fill option", (): void => {
+    const fillOpt = findFillOption(undefined, true);
+    expect(fillOpt).toEqual(true);
+  });
+  test("Use default fill option", (): void => {
+    const fillOpt = findFillOption(undefined, undefined);
+    expect(fillOpt).toEqual(true);
+  });
+});
+
+describe("findLineColor()", (): void => {
+  test("Use Phoebus line color", (): void => {
+    const lineColor = findLineColor(Color.fromRgba(20, 15, 100), undefined);
+    expect(lineColor).toEqual(Color.fromRgba(20, 15, 100));
+  });
+  test("Use CSStudio foreground color", (): void => {
+    const lineColor = findLineColor(undefined, Color.fromRgba(40, 250, 100));
+    expect(lineColor).toEqual(Color.fromRgba(40, 250, 100));
+  });
+  test("Use default line color", (): void => {
+    const lineColor = findLineColor(undefined, undefined);
+    expect(lineColor).toEqual(Color.fromRgba(0, 0, 255, 255));
+  });
+});