From a3d8e447783627a7845d54d2f9116ca4eb282ae1 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Mon, 4 Apr 2022 15:09:20 +0300
Subject: [PATCH] Add VerticalBar tests

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../VerticalBar/vertical-bar.test.tsx         | 30 +++++++++++++++++++
 .../components/VerticalBar/vertical-bar.tsx   |  2 +-
 2 files changed, 31 insertions(+), 1 deletion(-)
 create mode 100644 src/renderer/components/VerticalBar/vertical-bar.test.tsx

diff --git a/src/renderer/components/VerticalBar/vertical-bar.test.tsx b/src/renderer/components/VerticalBar/vertical-bar.test.tsx
new file mode 100644
index 0000000000..4e6ac47eaf
--- /dev/null
+++ b/src/renderer/components/VerticalBar/vertical-bar.test.tsx
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import React from "react";
+import { render } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+import { VerticalBar } from ".";
+
+describe("<VerticalBar/>", () => {
+  it("renders <VerticalBar /> w/o errors", async () => {
+
+    const { container } = render(<VerticalBar color="red" value={50} />);
+
+    expect(container.querySelector("[data-testid='vertical-bar']")).toBeInTheDocument();
+  });
+
+  it("bar uses provided color", () => {
+    const { container } = render(<VerticalBar color="red" value={50} />);
+
+    expect(container.querySelector("[data-testid='vertical-bar'] div")).toHaveStyle("background-color: red");
+  });
+
+  it("bar uses provided value", () => {
+    const { container } = render(<VerticalBar color="red" value={50} />);
+
+    expect(container.querySelector("[data-testid='vertical-bar'] div")).toHaveStyle("height: 50%");
+  });
+});
diff --git a/src/renderer/components/VerticalBar/vertical-bar.tsx b/src/renderer/components/VerticalBar/vertical-bar.tsx
index 41a1878793..ef9ebd78ee 100644
--- a/src/renderer/components/VerticalBar/vertical-bar.tsx
+++ b/src/renderer/components/VerticalBar/vertical-bar.tsx
@@ -15,7 +15,7 @@ interface BarProps extends HTMLAttributes<HTMLDivElement> {
 
 export function VerticalBar({ color, className, value }: BarProps) {
   return (
-    <div className={styles.verticalBar}>
+    <div className={styles.verticalBar} data-testid="vertical-bar">
       <div className={cssNames(styles.value, className)} style={{ backgroundColor: color, height: `${value}%` }}></div>
     </div>
   );