From 74ac122787e1ef07a775d73f7cae92d9be00ef82 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Mon, 23 Aug 2021 19:12:41 +0200
Subject: [PATCH] Created EditDomainRedirectsModal test

---
 .../helpers/EditDomainRedirectsModal.tsx      | 13 +--
 src/servers/helpers/ServerForm.tsx            | 17 ++--
 src/utils/FormGroupContainer.tsx              |  2 +-
 .../helpers/EditDomainRedirectsModal.test.tsx | 79 +++++++++++++++++++
 4 files changed, 91 insertions(+), 20 deletions(-)
 create mode 100644 test/domains/helpers/EditDomainRedirectsModal.test.tsx

diff --git a/src/domains/helpers/EditDomainRedirectsModal.tsx b/src/domains/helpers/EditDomainRedirectsModal.tsx
index 568503a5..6734c2c2 100644
--- a/src/domains/helpers/EditDomainRedirectsModal.tsx
+++ b/src/domains/helpers/EditDomainRedirectsModal.tsx
@@ -1,7 +1,7 @@
 import { FC, useState } from 'react';
 import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
 import { ShlinkDomain, ShlinkDomainRedirects } from '../../api/types';
-import { FormGroupContainer } from '../../utils/FormGroupContainer';
+import { FormGroupContainer, FormGroupContainerProps } from '../../utils/FormGroupContainer';
 import { handleEventPreventingDefault, nonEmptyValueOrNull } from '../../utils/utils';
 import { InfoTooltip } from '../../utils/InfoTooltip';
 
@@ -12,19 +12,14 @@ interface EditDomainRedirectsModalProps {
   editDomainRedirects: (domain: string, redirects: Partial<ShlinkDomainRedirects>) => Promise<void>;
 }
 
-const FormGroup: FC<{ value: string; onChange: (newValue: string) => void; isLast?: boolean }> = (
-  { value, onChange, isLast, children },
-) => (
+const FormGroup: FC<FormGroupContainerProps & { isLast?: boolean }> = ({ isLast, ...rest }) => (
   <FormGroupContainer
-    value={value}
+    {...rest}
     required={false}
     type="url"
     placeholder="No redirect"
     className={isLast ? 'mb-0' : ''}
-    onChange={onChange}
-  >
-    {children}
-  </FormGroupContainer>
+  />
 );
 
 export const EditDomainRedirectsModal: FC<EditDomainRedirectsModalProps> = (
diff --git a/src/servers/helpers/ServerForm.tsx b/src/servers/helpers/ServerForm.tsx
index 05684577..3d30b926 100644
--- a/src/servers/helpers/ServerForm.tsx
+++ b/src/servers/helpers/ServerForm.tsx
@@ -1,5 +1,5 @@
 import { FC, ReactNode, useEffect, useState } from 'react';
-import { FormGroupContainer } from '../../utils/FormGroupContainer';
+import { FormGroupContainer, FormGroupContainerProps } from '../../utils/FormGroupContainer';
 import { handleEventPreventingDefault } from '../../utils/utils';
 import { ServerData } from '../data';
 import { SimpleCard } from '../../utils/SimpleCard';
@@ -11,6 +11,9 @@ interface ServerFormProps {
   title?: ReactNode;
 }
 
+const FormGroup: FC<FormGroupContainerProps> = (props) =>
+  <FormGroupContainer {...props} labelClassName="create-server__label" />;
+
 export const ServerForm: FC<ServerFormProps> = ({ onSubmit, initialValues, children, title }) => {
   const [ name, setName ] = useState('');
   const [ url, setUrl ] = useState('');
@@ -26,15 +29,9 @@ export const ServerForm: FC<ServerFormProps> = ({ onSubmit, initialValues, child
   return (
     <form className="server-form" onSubmit={handleSubmit}>
       <SimpleCard className="mb-3" title={title}>
-        <FormGroupContainer labelClassName="create-server__label" value={name} onChange={setName}>
-          Name
-        </FormGroupContainer>
-        <FormGroupContainer labelClassName="create-server__label" type="url" value={url} onChange={setUrl}>
-          URL
-        </FormGroupContainer>
-        <FormGroupContainer labelClassName="create-server__label" value={apiKey} onChange={setApiKey}>API
-          key
-        </FormGroupContainer>
+        <FormGroup value={name} onChange={setName}>Name</FormGroup>
+        <FormGroup type="url" value={url} onChange={setUrl}>URL</FormGroup>
+        <FormGroup value={apiKey} onChange={setApiKey}>APIkey</FormGroup>
       </SimpleCard>
 
       <div className="text-right">{children}</div>
diff --git a/src/utils/FormGroupContainer.tsx b/src/utils/FormGroupContainer.tsx
index c34e1a92..d522ebfb 100644
--- a/src/utils/FormGroupContainer.tsx
+++ b/src/utils/FormGroupContainer.tsx
@@ -2,7 +2,7 @@ import { FC, useRef } from 'react';
 import { v4 as uuid } from 'uuid';
 import { InputType } from 'reactstrap/lib/Input';
 
-interface FormGroupContainerProps {
+export interface FormGroupContainerProps {
   value: string;
   onChange: (newValue: string) => void;
   id?: string;
diff --git a/test/domains/helpers/EditDomainRedirectsModal.test.tsx b/test/domains/helpers/EditDomainRedirectsModal.test.tsx
new file mode 100644
index 00000000..23cdf46f
--- /dev/null
+++ b/test/domains/helpers/EditDomainRedirectsModal.test.tsx
@@ -0,0 +1,79 @@
+import { shallow, ShallowWrapper } from 'enzyme';
+import { Mock } from 'ts-mockery';
+import { Button, ModalHeader } from 'reactstrap';
+import { ShlinkDomain } from '../../../src/api/types';
+import { EditDomainRedirectsModal } from '../../../src/domains/helpers/EditDomainRedirectsModal';
+import { InfoTooltip } from '../../../src/utils/InfoTooltip';
+
+describe('<EditDomainRedirectsModal />', () => {
+  let wrapper: ShallowWrapper;
+  const editDomainRedirects = jest.fn().mockResolvedValue(undefined);
+  const toggle = jest.fn();
+  const domain = Mock.of<ShlinkDomain>({ domain: 'foo.com' });
+
+  beforeEach(() => {
+    wrapper = shallow(
+      <EditDomainRedirectsModal domain={domain} isOpen toggle={toggle} editDomainRedirects={editDomainRedirects} />,
+    );
+  });
+
+  afterEach(jest.clearAllMocks);
+  afterEach(() => wrapper?.unmount());
+
+  it('renders domain in header', () => {
+    const header = wrapper.find(ModalHeader);
+
+    expect(header.html()).toContain('foo.com');
+  });
+
+  it('expected amount of form groups and tooltips', () => {
+    const formGroups = wrapper.find('FormGroup');
+    const tooltips = wrapper.find(InfoTooltip);
+
+    expect(formGroups).toHaveLength(3);
+    expect(tooltips).toHaveLength(3);
+  });
+
+  it('has different handlers to toggle the modal', () => {
+    expect(toggle).not.toHaveBeenCalled();
+
+    (wrapper.prop('toggle') as Function)(); // eslint-disable-line @typescript-eslint/no-unnecessary-type-assertion
+    (wrapper.find(ModalHeader).prop('toggle') as Function)();
+    wrapper.find(Button).first().simulate('click');
+
+    expect(toggle).toHaveBeenCalledTimes(3);
+  });
+
+  it('saves expected values when form is submitted', () => {
+    const formGroups = wrapper.find('FormGroup');
+
+    expect(editDomainRedirects).not.toHaveBeenCalled();
+
+    wrapper.find('form').simulate('submit', { preventDefault: jest.fn() });
+    expect(editDomainRedirects).toHaveBeenCalledWith('foo.com', {
+      baseUrlRedirect: null,
+      regular404Redirect: null,
+      invalidShortUrlRedirect: null,
+    });
+
+    formGroups.at(0).simulate('change', 'new_base_url');
+    formGroups.at(2).simulate('change', 'new_invalid_short_url');
+
+    wrapper.find('form').simulate('submit', { preventDefault: jest.fn() });
+    expect(editDomainRedirects).toHaveBeenCalledWith('foo.com', {
+      baseUrlRedirect: 'new_base_url',
+      regular404Redirect: null,
+      invalidShortUrlRedirect: 'new_invalid_short_url',
+    });
+
+    formGroups.at(1).simulate('change', 'new_regular_404');
+    formGroups.at(2).simulate('change', '');
+
+    wrapper.find('form').simulate('submit', { preventDefault: jest.fn() });
+    expect(editDomainRedirects).toHaveBeenCalledWith('foo.com', {
+      baseUrlRedirect: 'new_base_url',
+      regular404Redirect: 'new_regular_404',
+      invalidShortUrlRedirect: null,
+    });
+  });
+});