Frontend: Unit tests /components directory, convert to svg icons (#8716)

frontend/components/TableContainer/DataTable/PlatformCell/PlatformCell.tests.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { getByTestId, render, screen, within } from "@testing-library/react";
+
+import PlatformCell from "./PlatformCell";
+
+const PLATFORMS = ["windows", "darwin", "linux"];
+
+describe("Platform cell", () => {
+  it("renders platform icons in correct order", () => {
+    render(<PlatformCell value={PLATFORMS} />);
+
+    const icons = screen.queryAllByTestId("icon");
+    const appleIcon = screen.queryByTestId("apple-icon");
+    const linuxIcon = screen.queryByTestId("linux-icon");
+    const windowsIcon = screen.queryByTestId("windows-icon");
+
+    expect(icons).toHaveLength(3);
+    expect(icons[0].firstChild).toBe(appleIcon);
+    expect(icons[1].firstChild).toBe(linuxIcon);
+    expect(icons[2].firstChild).toBe(windowsIcon);
+  });
+  it("renders empty state", () => {
+    render(<PlatformCell value={[]} />);
+
+    const icons = screen.queryAllByTestId("icon");
+    const emptyText = screen.queryByText("---");
+
+    expect(icons).toHaveLength(0);
+    expect(emptyText).toBeInTheDocument();
+  });
+});

frontend/components/TableContainer/DataTable/PlatformCell/PlatformCell.tsx

@@ -36,6 +36,7 @@ const PlatformCell = ({
               className={`${baseClass}__icon`}
               name={ICONS[platform]}
               size="small"
+              key={ICONS[platform]}
             />
           ) : null;
         })