Merge pull request #2 from TheTechCompany/feat/testing

Feat/testing
TheTechCompany · Mar 28, 2022 · 4b517bf · 4b517bf
2 parents e42a914 + dd47977
commit 4b517bf
Show file tree

Hide file tree

Showing 7 changed files with 321 additions and 256 deletions.
diff --git a/src/__tests__/AvatarList.test.tsx b/src/__tests__/AvatarList.test.tsx
@@ -0,0 +1,15 @@
+// __tests__/Kanban.test.ts
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import { AvatarList } from "../components";
+
+describe("AvatarList", () => {
+  test("check if avatar initials render", () => {
+    render(<AvatarList users={[{ name: "John Doe", color: "red" }]} />);
+
+    const element = screen.getByText("JD");
+    expect(element).toBeInTheDocument();
+  });
+});
diff --git a/src/__tests__/ColorDot.test.tsx b/src/__tests__/ColorDot.test.tsx
@@ -1,21 +1,16 @@
 // __tests__/ColorDot.test.ts
-import React from 'react'
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { ColorDot } from "..";
 
-import {render, fireEvent, waitFor, screen} from '@testing-library/react'
-import { ColorDot } from '..'
+describe("ColorDot", () => {
+  test("renders at specified size", () => {
+    render(<ColorDot size={5} color={"red"} />);
 
-import '@testing-library/jest-dom'
+    const element = screen.getByRole("color-dot");
 
-describe('ColorDot', () => {
-    test('renders at specified size', () => {
-        const { container } = render(<ColorDot size={5} color={'red'} />);
-
-        const element = container.querySelector('.hive-color-dot');
-
-        expect(element).toHaveStyle({
-            background: 'red',
-            width: '5px',
-            height: '5px'
-        });
-    })
-})
+    expect(element.style.width).toBe("5px");
+    expect(element.style.height).toBe("5px");
+  });
+});
diff --git a/src/__tests__/GraphGrid.test.tsx b/src/__tests__/GraphGrid.test.tsx
@@ -0,0 +1,29 @@
+// GraphGrid Tests
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { Box } from "grommet";
+
+import { GraphGrid } from "../components";
+
+describe("GraphGrid", () => {
+  test("TO DO - THIS TESTS NOTHING YET", () => {
+    render(
+      <GraphGrid
+        onLayoutChange={() => void 0}
+        layout={[
+          {
+            id: "1",
+            label: "label 1",
+            total: "total 1",
+            x: 0,
+            y: 0,
+            w: 2,
+            h: 2,
+          },
+        ]}
+        children={(item: any) => <Box>{item.id}</Box>}
+      />
+    );
+  });
+});
diff --git a/src/__tests__/Kanban.test.tsx b/src/__tests__/Kanban.test.tsx
@@ -1,9 +1,11 @@
-import React from 'react';
-import { Kanban } from '../components/Kanban/Kanban'
+// __tests__/Kanban.test.ts
+import React from "react";
+import { Kanban } from "../components/Kanban/Kanban";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
 
-describe('Kanban', () => {
-
-    test('Can add card', () => {
-
-    })
-})
+describe("KanBan", () => {
+  test("Tests to come when component is working", () => {
+    render(<Kanban columns={[]} />);
+  });
+});
diff --git a/src/components/AvatarList/AvatarList.stories.tsx b/src/components/AvatarList/AvatarList.stories.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { AvatarList } from "./index";
+
+export default {
+  title: "Components/AvatarList",
+  component: AvatarList,
+} as ComponentMeta<typeof AvatarList>;
+
+const Template: ComponentStory<typeof AvatarList> = (args) => (
+  <AvatarList {...args} />
+);
+
+export const Primary = Template.bind({});
+Primary.args = {
+  users: [
+    { name: "John Doe", color: "red" },
+    { name: "Bob Jones", color: "blue" },
+  ],
+  size: 48,
+};
diff --git a/src/components/ColorDot/ColorDot.tsx b/src/components/ColorDot/ColorDot.tsx
@@ -1,25 +1,22 @@
-import React, {
-  Component
-} from 'react';
-
+import React, { Component } from "react";
 
 export interface ColorDotProps {
-  size: number,
-  color: string,
+  size: number;
+  color: string;
 }
 
-export const ColorDot : React.FC<ColorDotProps> = ({size, color}) => {
-
-    return (
-      <div 
-        className="hive-color-dot"  
+export const ColorDot: React.FC<ColorDotProps> = ({ size, color }) => {
+  return (
+    <div
+      className="hive-color-dot"
+      role="color-dot"
       style={{
         marginRight: 8,
         background: color,
         borderRadius: size * 2,
         height: size,
-        width: size
-      }}/>
-    );
-
-}
+        width: size,
+      }}
+    />
+  );
+};