Reapply "Create traffic sign component (#848)"

This reverts commit 617f0fd.

src/Figure/Figure.spec.tsx

@@ -29,15 +29,22 @@ test("should render figure with a rotated virto", async ({ page }) => {
   await page.goto(
     "http://localhost:6006/?path=/story/roadview-figure--default"
   );
-  await page.locator("#set-angle").click();
   // set imageLoaded to false
   await page.frame("storybook-preview-iframe")?.evaluate(() => {
     (window as any).imageLoaded = "false";
   });
+  await page
+    .getByRole("row", { name: "angle" })
+    .getByPlaceholder("Edit number...")
+    .click();
   await page
     .getByRole("row", { name: "angle" })
     .getByPlaceholder("Edit number...")
     .fill("90");
+  await page
+    .getByRole("row", { name: "angle" })
+    .getByPlaceholder("Edit number...")
+    .press("Enter");
   // wait till component loads and sets imageLoaded to `true`
   await page
     .frame("storybook-preview-iframe")
@@ -57,16 +64,22 @@ test("should render figure with a scaled virto", async ({ page }) => {
   await page.goto(
     "http://localhost:6006/?path=/story/roadview-figure--default"
   );
-  await page.locator("#set-scale").click();
   // set imageLoaded to false
   await page.frame("storybook-preview-iframe")?.evaluate(() => {
     (window as any).imageLoaded = "false";
   });
+  await page
+    .getByRole("row", { name: "scale" })
+    .getByPlaceholder("Edit number...")
+    .click();
   await page
     .getByRole("row", { name: "scale" })
     .getByPlaceholder("Edit number...")
     .fill("2");
-
+  await page
+    .getByRole("row", { name: "scale" })
+    .getByPlaceholder("Edit number...")
+    .press("Enter");
   // wait till component loads and sets imageLoaded to `true`
   await page
     .frame("storybook-preview-iframe")
@@ -87,26 +100,22 @@ test("should render figure with a differently positioned virto", async ({
   await page.goto(
     "http://localhost:6006/?path=/story/roadview-figure--default"
   );
-  await page
-    .getByRole("row", { name: "x*" })
-    .getByPlaceholder("Edit number...")
-    .click();
+  // set imageLoaded to false
+  await page.frame("storybook-preview-iframe")?.evaluate(() => {
+    (window as any).imageLoaded = "false";
+  });
   await page
     .getByRole("row", { name: "x*" })
     .getByPlaceholder("Edit number...")
     .fill("1");
   await page
     .getByRole("row", { name: "y*" })
     .getByPlaceholder("Edit number...")
-    .click();
-  // set imageLoaded to false
-  await page.frame("storybook-preview-iframe")?.evaluate(() => {
-    (window as any).imageLoaded = "false";
-  });
+    .fill("2");
   await page
     .getByRole("row", { name: "y*" })
     .getByPlaceholder("Edit number...")
-    .fill("2");
+    .press("Enter");
   // wait till component loads and sets imageLoaded to `true`
   await page
     .frame("storybook-preview-iframe")
@@ -125,16 +134,22 @@ test("should render figure with a sized virto", async ({ page }) => {
   await page.goto(
     "http://localhost:6006/?path=/story/roadview-figure--default"
   );
-  await page.getByRole("button", { name: "Set object" }).click();
-  await page
-    .getByPlaceholder("Edit JSON string...")
-    .fill('{\n  "x": 3,\n  "y": 2\n}');
   // set imageLoaded to false
   await page.frame("storybook-preview-iframe")?.evaluate(() => {
     (window as any).imageLoaded = "false";
   });
-  // click away to submit changes
-  await page.getByRole("cell", { name: "size" }).click();
+  await page
+    .getByRole("row", { name: "height" })
+    .getByPlaceholder("Edit number...")
+    .fill("2");
+  await page
+    .getByRole("row", { name: "width" })
+    .getByPlaceholder("Edit number...")
+    .fill("3");
+  await page
+    .getByRole("row", { name: "width" })
+    .getByPlaceholder("Edit number...")
+    .press("Enter");
   // wait till component loads and sets imageLoaded to `true`
   await page
     .frame("storybook-preview-iframe")

src/Figure/Figure.stories.tsx

@@ -31,8 +31,12 @@ const Template: StoryFn<FigureProps> = args => {
 // Default
 export const Default = {
   args: {
-    onImageLoad: () => ((window as any).imageLoaded = true),
+    angle: 0,
+    height: 3,
+    onImageLoaded: () => ((window as any).imageLoaded = true),
+    scale: 1,
     url: ImageURL,
+    width: 3,
     x: 0,
     y: 0
   },
@@ -42,11 +46,12 @@ export const Default = {
 // Variable size (x and y independent)
 export const VariableSize = {
   args: {
-    size: {
-      x: 10,
-      y: 10
-    },
+    angle: 0,
+    height: 10,
+    onImageLoaded: () => ((window as any).imageLoaded = true),
+    scale: 1,
     url: ImageURL,
+    width: 10,
     x: 0,
     y: 0
   },
@@ -56,8 +61,12 @@ export const VariableSize = {
 // Variable scale (aspect ratio fixed)
 export const VariableScale = {
   args: {
+    angle: 0,
+    height: 3,
+    onImageLoaded: () => ((window as any).imageLoaded = true),
     scale: 10,
     url: ImageURL,
+    width: 3,
     x: 0,
     y: 0
   },

src/Figure/Figure.tsx

@@ -6,36 +6,37 @@ import useImage from "use-image";
 
 /**
  * A UI component that displays an SVG of the road sign on a canvas.
- * @param {IFigureProps} data
+ * @param FigureProps Object defining all necessary props for an image to be rendered
  * @returns React Konva Image component
  */
-const Figure: React.FC<FigureProps> = ({
+const Figure = ({
   angle = 0,
   url,
   x,
   y,
-  size = { x: 3, y: 3 },
+  height = 3,
+  width = 3,
   scale = 1,
-  onImageLoad
-}) => {
+  onImageLoaded
+}: FigureProps) => {
   const [image, status] = useImage(url);
 
   useEffect(() => {
-    if (image && status === "loaded" && onImageLoad) {
-      onImageLoad(true);
+    if (image && status === "loaded" && onImageLoaded) {
+      onImageLoaded(true);
     }
   });
 
   return (
     <Image
       scaleY={scale}
       scaleX={scale}
-      offsetX={size.x / 2}
-      offsetY={size.y / 2}
+      offsetX={width / 2}
+      offsetY={height / 2}
       x={x}
       y={y}
-      width={size.x}
-      height={size.y}
+      width={width}
+      height={height}
       image={image}
       rotation={angle}
     />

src/Figure/Figure.types.ts

@@ -16,18 +16,19 @@ export type FigureProps = {
    */
   angle?: number;
   /**
-   * The size of the image in x and in y
+   * The width of the image
    */
-  size?: {
-    x: number;
-    y: number;
-  };
+  width?: number;
+  /**
+   * The height of the image
+   */
+  height?: number;
   /**
    * The scale of the image, similar to size, but can't affect the aspect ratio
    */
   scale?: number;
   /**
    * Resolves on image loaded
    */
-  onImageLoad?: (loaded: boolean) => void;
+  onImageLoaded?: (loaded: boolean) => void;
 };

src/Figure/index.ts

@@ -1 +1,2 @@
 export { default } from "./Figure";
+export type { FigureProps } from "./Figure.types";

src/TrafficSign/TrafficSign.spec.tsx

@@ -0,0 +1,141 @@
+import { expect, test } from "@playwright/test";
+
+/**
+ * Test to check that the default version of the component renders correct
+ */
+test("should render default highway sign", async ({ page }) => {
+  await page.goto(
+    "http://localhost:6006/?path=/story/roadview-trafficsign--default"
+  );
+  // set imageLoaded to false
+  await page.frame("storybook-preview-iframe")?.evaluate(() => {
+    (window as any).imageLoaded = "false";
+  });
+  // wait till component loads and sets imageLoaded to `true`
+  await page
+    .frame("storybook-preview-iframe")
+    ?.waitForFunction(() => (window as any).imageLoaded === true);
+  await expect(
+    page
+      .frameLocator('iframe[title="storybook-preview-iframe"]')
+      .locator("canvas")
+  ).toHaveScreenshot("default.png", { maxDiffPixels: 100 });
+});
+
+/**
+ * Test to check that the rotated version of the component renders correct
+ */
+test("should render rotated highway sign", async ({ page }) => {
+  await page.goto(
+    "http://localhost:6006/?path=/story/roadview-trafficsign--rotated"
+  );
+
+  // set imageLoaded to false
+  await page.frame("storybook-preview-iframe")?.evaluate(() => {
+    (window as any).imageLoaded = "false";
+  });
+  // wait till component loads and sets imageLoaded to `true`
+  await page
+    .frame("storybook-preview-iframe")
+    ?.waitForFunction(() => (window as any).imageLoaded === true);
+
+  await expect(
+    page
+      .frameLocator('iframe[title="storybook-preview-iframe"]')
+      .locator("canvas")
+  ).toHaveScreenshot("rotated.png", { maxDiffPixels: 100 });
+});
+
+/**
+ * Test to check that the with value version of the component renders correct
+ */
+test("should render speed limit sign with value", async ({ page }) => {
+  await page.goto(
+    "http://localhost:6006/?path=/story/roadview-trafficsign--with-value"
+  );
+
+  // set imageLoaded to false
+  await page.frame("storybook-preview-iframe")?.evaluate(() => {
+    (window as any).imageLoaded = "false";
+  });
+  // wait till component loads and sets imageLoaded to `true`
+  await page
+    .frame("storybook-preview-iframe")
+    ?.waitForFunction(() => (window as any).imageLoaded === true);
+
+  await expect(
+    page
+      .frameLocator('iframe[title="storybook-preview-iframe"]')
+      .locator("canvas")
+  ).toHaveScreenshot("with-value.png", { maxDiffPixels: 100 });
+});
+
+/**
+ * Test to check that the speed limit can be changed
+ */
+test("should change the speed limit value of the string", async ({ page }) => {
+  await page.goto(
+    "http://localhost:6006/?path=/story/roadview-trafficsign--with-value"
+  );
+
+  // set imageLoaded to false
+  await page.frame("storybook-preview-iframe")?.evaluate(() => {
+    (window as any).imageLoaded = "false";
+  });
+  await page.locator("#control-type").selectOption("speedLimit50");
+  // wait till component loads and sets imageLoaded to `true`
+  await page
+    .frame("storybook-preview-iframe")
+    ?.waitForFunction(() => (window as any).imageLoaded === true);
+
+  await expect(
+    page
+      .frameLocator('iframe[title="storybook-preview-iframe"]')
+      .locator("canvas")
+  ).toHaveScreenshot("speedLimit50.png", { maxDiffPixels: 100 });
+});
+
+/**
+ * Test to check that the sized version of the component renders correct
+ */
+test("should render sized version of the highway sign", async ({ page }) => {
+  await page.goto(
+    "http://localhost:6006/?path=/story/roadview-trafficsign--sized"
+  );
+  // set imageLoaded to false
+  await page.frame("storybook-preview-iframe")?.evaluate(() => {
+    (window as any).imageLoaded = "false";
+  });
+  // wait till component loads and sets imageLoaded to `true`
+  await page
+    .frame("storybook-preview-iframe")
+    ?.waitForFunction(() => (window as any).imageLoaded === true);
+  await expect(
+    page
+      .frameLocator('iframe[title="storybook-preview-iframe"]')
+      .locator("canvas")
+  ).toHaveScreenshot("sized.png", { maxDiffPixels: 100 });
+});
+
+/**
+ * Test to check that the scaled version of the component renders correct
+ */
+test("should render scaled version of the highway sign", async ({ page }) => {
+  await page.goto(
+    "http://localhost:6006/?path=/story/roadview-trafficsign--scaled"
+  );
+
+  // set imageLoaded to false
+  await page.frame("storybook-preview-iframe")?.evaluate(() => {
+    (window as any).imageLoaded = "false";
+  });
+  // wait till component loads and sets imageLoaded to `true`
+  await page
+    .frame("storybook-preview-iframe")
+    ?.waitForFunction(() => (window as any).imageLoaded === true);
+  await expect(
+    page
+      .frameLocator('iframe[title="storybook-preview-iframe"]')
+      .locator("canvas")
+  ).toHaveScreenshot("scaled.png", { maxDiffPixels: 100 });
+});