From 30b4cb406891f43cc349fc3c2236ada2e272a233 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sun, 13 Jan 2019 09:49:02 +0100 Subject: [PATCH] Created ShortUrlsRow test --- src/short-urls/ShortUrlsList.js | 6 +- src/short-urls/helpers/ShortUrlsRow.js | 6 +- src/short-urls/helpers/ShortUrlsRowMenu.js | 4 +- src/short-urls/reducers/shortUrlsList.js | 5 +- src/visits/VisitsHeader.js | 8 +- test/short-urls/helpers/ShortUrlsRow.test.js | 108 +++++++++++++++++++ test/visits/VisitsHeader.test.js | 1 + 7 files changed, 120 insertions(+), 18 deletions(-) create mode 100644 test/short-urls/helpers/ShortUrlsRow.test.js diff --git a/src/short-urls/ShortUrlsList.js b/src/short-urls/ShortUrlsList.js index c037ebaf..660e559a 100644 --- a/src/short-urls/ShortUrlsList.js +++ b/src/short-urls/ShortUrlsList.js @@ -14,7 +14,7 @@ import './ShortUrlsList.scss'; const SORTABLE_FIELDS = { dateCreated: 'Created at', shortCode: 'Short URL', - originalUrl: 'Long URL', + longUrl: 'Long URL', visits: 'Visits', }; @@ -142,9 +142,9 @@ const ShortUrlsList = (ShortUrlsRow) => class ShortUrlsList extends React.Compon - {this.renderOrderIcon('originalUrl')} + {this.renderOrderIcon('longUrl')} Long URL Tags diff --git a/src/short-urls/helpers/ShortUrlsRow.js b/src/short-urls/helpers/ShortUrlsRow.js index 80bc60ef..a22f9ba2 100644 --- a/src/short-urls/helpers/ShortUrlsRow.js +++ b/src/short-urls/helpers/ShortUrlsRow.js @@ -43,7 +43,6 @@ const ShortUrlsRow = ( render() { const { shortUrl, selectedServer } = this.props; - const completeShortUrl = !selectedServer ? shortUrl.shortCode : `${selectedServer.url}/${shortUrl.shortCode}`; return ( @@ -51,10 +50,10 @@ const ShortUrlsRow = ( {shortUrl.dateCreated} - {completeShortUrl} + - {shortUrl.originalUrl} + {this.renderTags(shortUrl.tags)} {shortUrl.visitsCount} @@ -66,7 +65,6 @@ const ShortUrlsRow = ( Copied short URL! 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', },