Added header to EditShortUrl and created EditSHortUrl test

src/short-urls/EditShortUrl.tsx

@@ -1,5 +1,9 @@
 import { FC, useEffect } from 'react';
 import { RouteComponentProps } from 'react-router';
+import { Button, Card } from 'reactstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
+import { ExternalLink } from 'react-external-link';
 import { SelectedServer } from '../servers/data';
 import { Settings, ShortUrlCreationSettings } from '../settings/reducers/settings';
 import { OptionalString } from '../utils/utils';
@@ -41,6 +45,7 @@ const getInitialState = (shortUrl?: ShortUrl, settings?: ShortUrlCreationSetting
 };
 
 export const EditShortUrl = (ShortUrlForm: FC<ShortUrlFormProps>) => ({
+  history: { goBack },
   match: { params },
   location: { search },
   settings: { shortUrlCreation: shortUrlCreationSettings },
@@ -70,8 +75,21 @@ export const EditShortUrl = (ShortUrlForm: FC<ShortUrlFormProps>) => ({
     );
   }
 
+  const title = <small>Edit <ExternalLink href={shortUrl?.shortUrl ?? ''} /></small>;
+
   return (
     <>
+      <header className="mb-3">
+        <Card body>
+          <h2 className="d-sm-flex justify-content-between align-items-center mb-0">
+            <Button color="link" size="lg" className="p-0 mr-3" onClick={goBack}>
+              <FontAwesomeIcon icon={faArrowLeft} />
+            </Button>
+            <span className="text-center">{title}</span>
+            <span />
+          </h2>
+        </Card>
+      </header>
       <ShortUrlForm
         initialState={getInitialState(shortUrl, shortUrlCreationSettings)}
         saving={saving}

test/short-urls/EditShortUrl.test.tsx

@@ -0,0 +1,105 @@
+import { shallow, ShallowWrapper } from 'enzyme';
+import { Mock } from 'ts-mockery';
+import { History, Location } from 'history';
+import { match } from 'react-router'; // eslint-disable-line @typescript-eslint/no-unused-vars
+import { EditShortUrl as createEditShortUrl } from '../../src/short-urls/EditShortUrl';
+import { Settings } from '../../src/settings/reducers/settings';
+import { ShortUrlDetail } from '../../src/short-urls/reducers/shortUrlDetail';
+import { ShortUrlEdition } from '../../src/short-urls/reducers/shortUrlEdition';
+import { ShlinkApiError } from '../../src/api/ShlinkApiError';
+import { ShortUrl } from '../../src/short-urls/data';
+
+describe('<EditShortUrl />', () => {
+  let wrapper: ShallowWrapper;
+  const ShortUrlForm = () => null;
+  const goBack = jest.fn();
+  const getShortUrlDetail = jest.fn();
+  const editShortUrl = jest.fn();
+  const shortUrlCreation = { validateUrls: true };
+  const createWrapper = (detail: Partial<ShortUrlDetail> = {}, edition: Partial<ShortUrlEdition> = {}) => {
+    const EditSHortUrl = createEditShortUrl(ShortUrlForm);
+
+    wrapper = shallow(
+      <EditSHortUrl
+        settings={Mock.of<Settings>({ shortUrlCreation })}
+        selectedServer={null}
+        shortUrlDetail={Mock.of<ShortUrlDetail>(detail)}
+        shortUrlEdition={Mock.of<ShortUrlEdition>(edition)}
+        getShortUrlDetail={getShortUrlDetail}
+        editShortUrl={editShortUrl}
+        history={Mock.of<History>({ goBack })}
+        location={Mock.all<Location>()}
+        match={Mock.of<match<{ shortCode: string }>>({
+          params: { shortCode: 'the_base_url' },
+        })}
+      />,
+    );
+
+    return wrapper;
+  };
+
+  beforeEach(jest.clearAllMocks);
+  afterEach(() => wrapper?.unmount());
+
+  it('renders loading message while loading detail', () => {
+    const wrapper = createWrapper({ loading: true });
+
+    expect(wrapper.prop('loading')).toEqual(true);
+  });
+
+  it('renders error when loading detail fails', () => {
+    const wrapper = createWrapper({ error: true });
+    const form = wrapper.find(ShortUrlForm);
+    const apiError = wrapper.find(ShlinkApiError);
+
+    expect(form).toHaveLength(0);
+    expect(apiError).toHaveLength(1);
+    expect(apiError.prop('fallbackMessage')).toEqual('An error occurred while loading short URL detail :(');
+  });
+
+  it.each([
+    [ undefined, { longUrl: '', validateUrl: true }, true ],
+    [
+      Mock.of<ShortUrl>({ meta: {} }),
+      {
+        longUrl: undefined,
+        tags: undefined,
+        title: undefined,
+        domain: undefined,
+        validSince: undefined,
+        validUntil: undefined,
+        maxVisits: undefined,
+        validateUrl: true,
+      },
+      false,
+    ],
+  ])('renders form when detail properly loads', (shortUrl, expectedInitialState, saving) => {
+    const wrapper = createWrapper({ shortUrl }, { saving });
+    const form = wrapper.find(ShortUrlForm);
+    const apiError = wrapper.find(ShlinkApiError);
+
+    expect(form).toHaveLength(1);
+    expect(apiError).toHaveLength(0);
+    expect(form.prop('initialState')).toEqual(expectedInitialState);
+    expect(form.prop('saving')).toEqual(saving);
+    expect(editShortUrl).not.toHaveBeenCalled();
+
+    form.simulate('save', {});
+
+    if (shortUrl) {
+      expect(editShortUrl).toHaveBeenCalledWith(shortUrl.shortCode, shortUrl.domain, {});
+    } else {
+      expect(editShortUrl).not.toHaveBeenCalled();
+    }
+  });
+
+  it('shows error when saving data has failed', () => {
+    const wrapper = createWrapper({}, { error: true });
+    const form = wrapper.find(ShortUrlForm);
+    const apiError = wrapper.find(ShlinkApiError);
+
+    expect(form).toHaveLength(1);
+    expect(apiError).toHaveLength(1);
+    expect(apiError.prop('fallbackMessage')).toEqual('An error occurred while updating short URL :(');
+  });
+});