From 46703ab56895b2ac2b6455cc6a88872952eff535 Mon Sep 17 00:00:00 2001
From: Jimmy Holway <jimmy@blockchaintp.com>
Date: Fri, 28 Jul 2023 14:51:01 +0200
Subject: [PATCH] test(domaininput): adds basic tests for DomainInput component

SXT-1023

Signed-off-by: Jimmy Holway <jimmy@blockchaintp.com>
---
 src/components/chronicle/DomainInput.tsx      |  6 +-
 .../components/chronicle/DomainInput.test.tsx | 64 +++++++++++++++++++
 2 files changed, 68 insertions(+), 2 deletions(-)
 create mode 100644 test/components/chronicle/DomainInput.test.tsx

diff --git a/src/components/chronicle/DomainInput.tsx b/src/components/chronicle/DomainInput.tsx
index 267379e0..4533aefd 100644
--- a/src/components/chronicle/DomainInput.tsx
+++ b/src/components/chronicle/DomainInput.tsx
@@ -1,4 +1,5 @@
-import React, { useState } from "react"
+import * as React from "react"
+import { useState } from "react"
 import { styled } from "@mui/system"
 
 import {
@@ -10,6 +11,7 @@ import {
     TextField,
     FormGroup,
 } from "@mui/material"
+
 import { AutocompleteRenderOptionState } from '@mui/material/Autocomplete'
 
 import DeleteIcon from '@mui/icons-material/Delete'
@@ -78,7 +80,7 @@ const DomainInput: React.FC<DomainInputProps> = ({ options, onOptionAdd, onOptio
                             ...params.InputProps,
                             startAdornment: (
                                 <>
-                                    <InputAdornment sx={{ }} position="start">
+                                    <InputAdornment position="start">
                                         <PublicIcon />
                                     </InputAdornment>
                                     {params.InputProps.startAdornment}
diff --git a/test/components/chronicle/DomainInput.test.tsx b/test/components/chronicle/DomainInput.test.tsx
new file mode 100644
index 00000000..dd6d3aa2
--- /dev/null
+++ b/test/components/chronicle/DomainInput.test.tsx
@@ -0,0 +1,64 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from "react"
+import { render, fireEvent, screen } from "@testing-library/react"
+import DomainInput from "../../../src/components/chronicle/DomainInput"
+import '@testing-library/jest-dom'
+
+describe("DomainInput", () => {
+  let options: string[]
+  let onOptionAdd: (newOption: string) => void
+  let onOptionRemove: (optionToRemove: string) => void
+
+  beforeEach(() => {
+    options = ["http://example.com", "http://google.com"]
+    onOptionAdd = jest.fn()
+    onOptionRemove = jest.fn()
+  })
+
+  test("renders without crashing", () => {
+    render(
+      <DomainInput
+        options={options}
+        onOptionAdd={onOptionAdd}
+        onOptionRemove={onOptionRemove}
+      />
+    )
+  })
+
+  test("adds an option when a valid URL is entered and the Add button is clicked", () => {
+    render(
+      <DomainInput
+        options={options}
+        onOptionAdd={onOptionAdd}
+        onOptionRemove={onOptionRemove}
+      />
+    )
+
+    fireEvent.change(screen.getByRole("combobox"), {
+      target: { value: "http://newurl.com" },
+    })
+    fireEvent.click(screen.getByRole("button", { name: "Add" }))
+
+    expect(onOptionAdd).toHaveBeenCalledWith("http://newurl.com")
+  })
+
+  test("does not add an option when an invalid URL is entered and the Add button is clicked", () => {
+    render(
+      <DomainInput
+        options={options}
+        onOptionAdd={onOptionAdd}
+        onOptionRemove={onOptionRemove}
+      />
+    )
+
+    fireEvent.change(screen.getByRole("combobox"), {
+      target: { value: "invalidurl" },
+    })
+    fireEvent.click(screen.getByRole("button", { name: "Add" }))
+
+    expect(onOptionAdd).not.toHaveBeenCalled()
+  })
+})