coder
diff --git a/‎.gitignore
Lines changed: 2 additions & 1 deletion b/‎.gitignore
Lines changed: 2 additions & 1 deletion
diff --git a/‎package.json
Lines changed: 6 additions & 1 deletion b/‎package.json
Lines changed: 6 additions & 1 deletion
diff --git a/‎site/src/components/Button/SplitButton.test.tsx
Lines changed: 58 additions & 0 deletions b/‎site/src/components/Button/SplitButton.test.tsx
Lines changed: 58 additions & 0 deletions
diff --git a/‎site/tsconfig.json renamed to ‎tsconfig.json b/‎site/tsconfig.json renamed to ‎tsconfig.json
@@ -15,4 +15,5 @@ vendor
 yarn-error.log
 
 # Front-end ignore
-site/dist/
+site/dist/
+coverage/
@@ -8,12 +8,17 @@
     "build:watch": "webpack build --config site/webpack.config.js --watch",
     "format:check": "prettier --check '**/*.{css,html,js,json,jsx,md,ts,tsx,yaml,yml}'",
     "format:write": "prettier --write '**/*.{css,htmljs,json,jsx,md,ts,tsx,yaml,yml}'",
-    "test": "jest --selectProjects test"
+    "test": "jest --selectProjects test",
+    "test:coverage": "jest --selectProjects test --collectCoverage"
   },
   "devDependencies": {
     "@material-ui/core": "4.9.4",
     "@material-ui/icons": "4.5.1",
     "@material-ui/lab": "4.0.0-alpha.42",
+    "@testing-library/jest-dom": "5.16.1",
+    "@testing-library/react": "12.1.2",
+    "@testing-library/react-hooks": "7.0.2",
+    "@testing-library/user-event": "13.5.0",
     "@types/jest": "27.4.0",
     "@types/node": "14.18.4",
     "@types/react": "17.0.38",
 
@@ -0,0 +1,58 @@
+import { fireEvent, render, screen } from "@testing-library/react"
+import React from "react"
+import { SplitButton, SplitButtonProps } from "./SplitButton"
+
+namespace Helpers {
+  export type SplitButtonOptions = "a" | "b" | "c"
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
+  export const callback = (selectedOption: SplitButtonOptions): void => { }
+
+  export const options: SplitButtonProps<SplitButtonOptions>["options"] = [
+    {
+      label: "test a",
+      value: "a",
+    },
+    {
+      label: "test b",
+      value: "b",
+    },
+    {
+      label: "test c",
+      value: "c",
+    },
+  ]
+}
+
+describe("SplitButton", () => {
+  describe("onClick", () => {
+    it("is called when primary action is clicked", () => {
+      // Given
+      const mockedAndSpyedCallback = jest.fn(Helpers.callback)
+
+      // When
+      render(<SplitButton onClick={mockedAndSpyedCallback} options={Helpers.options} />)
+      fireEvent.click(screen.getByText("test a"))
+
+      // Then
+      expect(mockedAndSpyedCallback.mock.calls.length).toBe(1)
+      expect(mockedAndSpyedCallback.mock.calls[0][0]).toBe("a")
+    })
+
+    it("is called when clicking option in pop-up", () => {
+      // Given
+      const mockedAndSpyedCallback = jest.fn(Helpers.callback)
+
+      // When
+      render(<SplitButton onClick={mockedAndSpyedCallback} options={Helpers.options} />)
+      const buttons = screen.getAllByRole("button")
+      const dropdownButton = buttons[1]
+      fireEvent.click(dropdownButton)
+      fireEvent.click(screen.getByText("test c"))
+
+      // Then
+      expect(mockedAndSpyedCallback.mock.calls.length).toBe(1)
+      expect(mockedAndSpyedCallback.mock.calls[0][0]).toBe("c")
+    })
+  })
+})