add unit tests for delete component

package.json

@@ -23,6 +23,7 @@
         "autoprefixer": "^10.2.4",
         "axios": "^0.21",
         "babel-jest": "^27.5.1",
+        "intersection-observer": "^0.12.0",
         "jest": "^27.5.1",
         "laravel-mix": "^6.0.6",
         "lodash": "^4.17.19",

public/mix-manifest.json

@@ -1,4 +1,4 @@
 {
-    "/js/app.js": "/js/app.js?id=d568a6eec836e363b080",
-    "/css/app.css": "/css/app.css?id=cc6bd40c496f6f04d2c0"
+    "/js/app.js": "/js/app.js",
+    "/css/app.css": "/css/app.css"
 }

resources/js/Components/Global/Delete.js

@@ -3,7 +3,7 @@ import { Dialog, Transition } from '@headlessui/react'
 import { ExclamationIcon } from '@heroicons/react/outline'
 
 export default function Delete({item, resource, onClose, onDelete}) {
-  const cancelButtonRef = useRef(null)
+  const cancelButtonRef = useRef()
 
   const deleteItem = () => {
     Api.delete({id: item.id, resource: resource})
@@ -50,7 +50,7 @@ export default function Delete({item, resource, onClose, onDelete}) {
                       Delete Resource
                     </Dialog.Title>
                     <div className="mt-2">
-                      <p className="text-sm text-gray-500">
+                      <p data-testid="delete-warning" className="text-sm text-gray-500">
                         Are you sure you want to delete this resource?
                       </p>
                     </div>

resources/js/Components/Global/__tests__/Delete.test.js

@@ -0,0 +1,31 @@
+import * as React from 'react'
+import { cleanup, screen, render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import 'intersection-observer';
+
+import Delete from '../Delete';
+
+afterEach(cleanup);
+
+it('If item not passed then delete popup will not be shown', () => {
+  render(<Delete />);
+
+  expect(screen.queryByTestId('delete-warning')).toBeNull
+});
+
+it('If item passed then delete popup will be shown', () => {
+    render(<Delete item={{id: 1}} onClose={() => {}} />);
+
+    expect(screen.getByTestId('delete-warning')).toBeVisible()
+    expect(screen.getByText('Delete')).toBeVisible()
+    expect(screen.getByText('Cancel')).toBeVisible()
+});
+
+it('If cancel is pressed then onClose is triggered', () => {
+    const callback = jest.fn();
+    render(<Delete item={{id: 1}} onClose={callback} />);
+
+    fireEvent.click(screen.getByText('Cancel'))
+
+    expect(callback).toHaveBeenCalled()
+});

resources/js/Pages/Brand/Edit.js

@@ -78,7 +78,6 @@ export default function Edit({categories, brand, onClose, onUpdate}) {
                             Update
                         </button>
                         }
-
                     </div>
                 </div>
             }