stateFlagTimeout(this.setState.bind(this), 'copiedToClipboard')}
diff --git a/src/short-urls/helpers/ShortUrlsRowMenu.js b/src/short-urls/helpers/ShortUrlsRowMenu.js
index e52419e4..7efc8ae2 100644
--- a/src/short-urls/helpers/ShortUrlsRowMenu.js
+++ b/src/short-urls/helpers/ShortUrlsRowMenu.js
@@ -20,7 +20,6 @@ import './ShortUrlsRowMenu.scss';
const ShortUrlsRowMenu = (DeleteShortUrlModal, EditTagsModal) => class ShortUrlsRowMenu extends React.Component {
static propTypes = {
- completeShortUrl: PropTypes.string,
onCopyToClipboard: PropTypes.func,
selectedServer: serverType,
shortUrl: shortUrlType,
@@ -36,7 +35,8 @@ const ShortUrlsRowMenu = (DeleteShortUrlModal, EditTagsModal) => class ShortUrls
toggle = () => this.setState(({ isOpen }) => ({ isOpen: !isOpen }));
render() {
- const { completeShortUrl, onCopyToClipboard, selectedServer, shortUrl } = this.props;
+ const { onCopyToClipboard, selectedServer, shortUrl } = this.props;
+ const completeShortUrl = shortUrl && shortUrl.shortUrl ? shortUrl.shortUrl : '';
const serverId = selectedServer ? selectedServer.id : '';
const toggleModal = (prop) => () => this.setState((prevState) => ({ [prop]: !prevState[prop] }));
const toggleQrCode = toggleModal('isQrModalOpen');
diff --git a/src/short-urls/reducers/shortUrlsList.js b/src/short-urls/reducers/shortUrlsList.js
index ad972cea..fa4d4fe5 100644
--- a/src/short-urls/reducers/shortUrlsList.js
+++ b/src/short-urls/reducers/shortUrlsList.js
@@ -10,9 +10,10 @@ export const LIST_SHORT_URLS = 'shlink/shortUrlsList/LIST_SHORT_URLS';
/* eslint-enable padding-line-between-statements, newline-after-var */
export const shortUrlType = PropTypes.shape({
- tags: PropTypes.arrayOf(PropTypes.string),
shortCode: PropTypes.string,
- originalUrl: PropTypes.string,
+ shortUrl: PropTypes.string,
+ longUrl: PropTypes.string,
+ tags: PropTypes.arrayOf(PropTypes.string),
});
const initialState = {
diff --git a/src/visits/VisitsHeader.js b/src/visits/VisitsHeader.js
index 6213ced2..3103c2a4 100644
--- a/src/visits/VisitsHeader.js
+++ b/src/visits/VisitsHeader.js
@@ -34,13 +34,7 @@ export function VisitsHeader({ shortUrlDetail, shortUrlVisits }) {
Visit stats for
- {shortUrl.dateCreated && (
-
- Created:
-
- {renderDate()}
-
- )}
+ Created: {renderDate()}
Long URL:
diff --git a/test/short-urls/helpers/ShortUrlsRow.test.js b/test/short-urls/helpers/ShortUrlsRow.test.js
new file mode 100644
index 00000000..d8978788
--- /dev/null
+++ b/test/short-urls/helpers/ShortUrlsRow.test.js
@@ -0,0 +1,108 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import moment from 'moment';
+import Moment from 'react-moment';
+import { assoc, toString } from 'ramda';
+import * as sinon from 'sinon';
+import createShortUrlsRow from '../../../src/short-urls/helpers/ShortUrlsRow';
+import ExternalLink from '../../../src/utils/ExternalLink';
+import Tag from '../../../src/tags/helpers/Tag';
+
+describe('', () => {
+ let wrapper;
+ const mockFunction = () => '';
+ const ShortUrlsRowMenu = mockFunction;
+ const stateFlagTimeout = sinon.spy();
+ const colorGenerator = {
+ getColorForKey: mockFunction,
+ setColorForKey: mockFunction,
+ };
+ const server = {
+ url: 'https://doma.in',
+ };
+ const shortUrl = {
+ shortCode: 'abc123',
+ shortUrl: 'http://doma.in/abc123',
+ longUrl: 'http://foo.com/bar',
+ dateCreated: moment('2018-05-23 18:30:41').format(),
+ tags: [ 'nodejs', 'reactjs' ],
+ visitsCount: 45,
+ };
+
+ beforeEach(() => {
+ const ShortUrlsRow = createShortUrlsRow(ShortUrlsRowMenu, colorGenerator, stateFlagTimeout);
+
+ wrapper = shallow(
+
+ );
+ });
+ afterEach(() => wrapper.unmount());
+
+ it('renders date in first column', () => {
+ const col = wrapper.find('td').first();
+ const moment = col.find(Moment);
+
+ expect(moment.html()).toContain('>2018-05-23 18:30');
+ });
+
+ it('renders short URL in second row', () => {
+ const col = wrapper.find('td').at(1);
+ const link = col.find(ExternalLink);
+
+ expect(link.prop('href')).toEqual(shortUrl.shortUrl);
+ });
+
+ it('renders long URL in third row', () => {
+ const col = wrapper.find('td').at(2); // eslint-disable-line no-magic-numbers
+ const link = col.find(ExternalLink);
+
+ expect(link.prop('href')).toEqual(shortUrl.longUrl);
+ });
+
+ describe('renders list of tags in fourth row', () => {
+ it('with tags', () => {
+ const col = wrapper.find('td').at(3); // eslint-disable-line no-magic-numbers
+ const tags = col.find(Tag);
+
+ expect(tags).toHaveLength(shortUrl.tags.length);
+ shortUrl.tags.forEach((tagValue, index) => {
+ const tag = tags.at(index);
+
+ expect(tag.prop('text')).toEqual(tagValue);
+ });
+ });
+
+ it('without tags', () => {
+ wrapper.setProps({ shortUrl: assoc('tags', [], shortUrl) });
+
+ const col = wrapper.find('td').at(3); // eslint-disable-line no-magic-numbers
+
+ expect(col.text()).toContain('No tags');
+ });
+ });
+
+ it('renders visits count in fifth row', () => {
+ const col = wrapper.find('td').at(4); // eslint-disable-line no-magic-numbers
+
+ expect(col.text()).toEqual(toString(shortUrl.visitsCount));
+ });
+
+ it('updates state when copied to clipboard', () => {
+ const col = wrapper.find('td').at(5); // eslint-disable-line no-magic-numbers
+ const menu = col.find(ShortUrlsRowMenu);
+
+ expect(menu).toHaveLength(1);
+ expect(stateFlagTimeout.called).toEqual(false);
+ menu.simulate('copyToClipboard');
+ expect(stateFlagTimeout.calledOnce).toEqual(true);
+ });
+
+ it('shows copy hint when state prop is true', () => {
+ // eslint-disable-next-line no-magic-numbers
+ const isHidden = () => wrapper.find('td').at(5).find('.short-urls-row__copy-hint').prop('hidden');
+
+ expect(isHidden()).toEqual(true);
+ wrapper.setState({ copiedToClipboard: true });
+ expect(isHidden()).toEqual(false);
+ });
+});
diff --git a/test/visits/VisitsHeader.test.js b/test/visits/VisitsHeader.test.js
index 5416d3cb..797f6a29 100644
--- a/test/visits/VisitsHeader.test.js
+++ b/test/visits/VisitsHeader.test.js
@@ -8,6 +8,7 @@ describe('', () => {
let wrapper;
const shortUrlDetail = {
shortUrl: {
+ shortUrl: 'https://doma.in/abc123',
longUrl: 'https://foo.bar/bar/foo',
dateCreated: '2018-01-01T10:00:00+01:00',
},