From a8c6e916cf04d3cc809d6adb510192bb55015f06 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed, 11 May 2022 19:43:12 +0000 Subject: [PATCH 001/101] Bump ini from 1.3.5 to 1.3.8 Bumps [ini](https://github.com/npm/ini) from 1.3.5 to 1.3.8. - [Release notes](https://github.com/npm/ini/releases) - [Changelog](https://github.com/npm/ini/blob/main/CHANGELOG.md) - [Commits](https://github.com/npm/ini/compare/v1.3.5...v1.3.8) --- updated-dependencies: - dependency-name: ini dependency-type: indirect ... Signed-off-by: dependabot[bot] --- package-lock.json | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9a693c03..f6993a86 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12887,14 +12887,10 @@ "dev": true }, "node_modules/ini": { - "version": "1.3.5", - "resolved": "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz", - "integrity": "sha1-7uJfVtscnsYIXgwid4CD9Zar+Sc=", - "deprecated": "Please update to ini >=1.3.6 to avoid a prototype pollution issue", - "dev": true, - "engines": { - "node": "*" - } + "version": "1.3.8", + "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz", + "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==", + "dev": true }, "node_modules/internal-slot": { "version": "1.0.3", @@ -37730,9 +37726,9 @@ "dev": true }, "ini": { - "version": "1.3.5", - "resolved": "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz", - "integrity": "sha1-7uJfVtscnsYIXgwid4CD9Zar+Sc=", + "version": "1.3.8", + "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz", + "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==", "dev": true }, "internal-slot": { From ec025b7d0fdea04ed6e0f80c31b617ef3ffa501c Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed, 25 May 2022 18:34:47 +0000 Subject: [PATCH 002/101] Bump async from 2.6.3 to 2.6.4 Bumps [async](https://github.com/caolan/async) from 2.6.3 to 2.6.4. - [Release notes](https://github.com/caolan/async/releases) - [Changelog](https://github.com/caolan/async/blob/v2.6.4/CHANGELOG.md) - [Commits](https://github.com/caolan/async/compare/v2.6.3...v2.6.4) --- updated-dependencies: - dependency-name: async dependency-type: indirect ... Signed-off-by: dependabot[bot] --- package-lock.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index 959a29dd..66a324f1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7260,9 +7260,9 @@ } }, "node_modules/async": { - "version": "2.6.3", - "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz", - "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==", + "version": "2.6.4", + "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz", + "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==", "dev": true, "dependencies": { "lodash": "^4.17.14" @@ -32134,9 +32134,9 @@ "dev": true }, "async": { - "version": "2.6.3", - "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz", - "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==", + "version": "2.6.4", + "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz", + "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==", "dev": true, "requires": { "lodash": "^4.17.14" From 27a05e55c9ef2b08b870a50b34774f0f9d1126a7 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Fri, 27 May 2022 13:42:30 +0200 Subject: [PATCH 003/101] Migrated TagsList to react testing library --- src/tags/TagsList.tsx | 4 +- src/tags/services/provideServices.ts | 2 +- test/tags/TagsList.test.tsx | 107 ++++++++------------------- 3 files changed, 33 insertions(+), 80 deletions(-) diff --git a/src/tags/TagsList.tsx b/src/tags/TagsList.tsx index ca8c3ca7..fe64a26a 100644 --- a/src/tags/TagsList.tsx +++ b/src/tags/TagsList.tsx @@ -30,7 +30,7 @@ export interface TagsListProps { settings: Settings; } -const TagsList = (TagsCards: FC, TagsTable: FC) => boundToMercureHub(( +export const TagsList = (TagsCards: FC, TagsTable: FC) => boundToMercureHub(( { filterTags, forceListTags, tagsList, selectedServer, settings }: TagsListProps, ) => { const [mode, setMode] = useState(settings.tags?.defaultMode ?? 'cards'); @@ -104,5 +104,3 @@ const TagsList = (TagsCards: FC, TagsTable: FC ); }, () => [Topics.visits]); - -export default TagsList; diff --git a/src/tags/services/provideServices.ts b/src/tags/services/provideServices.ts index 5a1a4221..aca9130c 100644 --- a/src/tags/services/provideServices.ts +++ b/src/tags/services/provideServices.ts @@ -3,7 +3,7 @@ import TagsSelector from '../helpers/TagsSelector'; import TagCard from '../TagCard'; import DeleteTagConfirmModal from '../helpers/DeleteTagConfirmModal'; import EditTagModal from '../helpers/EditTagModal'; -import TagsList from '../TagsList'; +import { TagsList } from '../TagsList'; import { filterTags, listTags } from '../reducers/tagsList'; import { deleteTag, tagDeleted } from '../reducers/tagDelete'; import { editTag, tagEdited } from '../reducers/tagEdit'; diff --git a/test/tags/TagsList.test.tsx b/test/tags/TagsList.test.tsx index d642a060..f1639203 100644 --- a/test/tags/TagsList.test.tsx +++ b/test/tags/TagsList.test.tsx @@ -1,25 +1,18 @@ -import { shallow, ShallowWrapper } from 'enzyme'; +import { render, screen, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import { identity } from 'ramda'; import { Mock } from 'ts-mockery'; -import createTagsList, { TagsListProps } from '../../src/tags/TagsList'; -import Message from '../../src/utils/Message'; +import { TagsList as createTagsList, TagsListProps } from '../../src/tags/TagsList'; import { TagsList } from '../../src/tags/reducers/tagsList'; import { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub'; -import { Result } from '../../src/utils/Result'; -import { TagsModeDropdown } from '../../src/tags/TagsModeDropdown'; -import { SearchField } from '../../src/utils/SearchField'; import { Settings } from '../../src/settings/reducers/settings'; -import { TagsOrderableFields } from '../../src/tags/data/TagsListChildrenProps'; -import { OrderingDropdown } from '../../src/utils/OrderingDropdown'; describe('', () => { - let wrapper: ShallowWrapper; const filterTags = jest.fn(); - const TagsCards = () => null; - const TagsTable = () => null; - const TagsListComp = createTagsList(TagsCards, TagsTable); - const createWrapper = (tagsList: Partial) => { - wrapper = shallow( + const TagsListComp = createTagsList(() => <>TagsCards, () => <>TagsTable); + const setUp = (tagsList: Partial) => ({ + user: userEvent.setup(), + ...render( ()} {...Mock.of({ mercureInfo: {} })} @@ -28,89 +21,51 @@ describe('', () => { tagsList={Mock.of(tagsList)} settings={Mock.all()} />, - ).dive(); // Dive is needed as this component is wrapped in a HOC + ), + }); - return wrapper; - }; - - afterEach(() => wrapper?.unmount()); afterEach(jest.clearAllMocks); it('shows a loading message when tags are being loaded', () => { - const wrapper = createWrapper({ loading: true }); - const loadingMsg = wrapper.find(Message); - const searchField = wrapper.find(SearchField); + setUp({ loading: true }); - expect(loadingMsg).toHaveLength(1); - expect(loadingMsg.html()).toContain('Loading...'); - expect(searchField).toHaveLength(0); + expect(screen.getByText('Loading...')).toBeInTheDocument(); + expect(screen.queryByText('Error loading tags :(')).not.toBeInTheDocument(); }); it('shows an error when tags failed to be loaded', () => { - const wrapper = createWrapper({ error: true }); - const errorMsg = wrapper.find(Result).filterWhere((result) => result.prop('type') === 'error'); - const searchField = wrapper.find(SearchField); + setUp({ error: true }); - expect(errorMsg).toHaveLength(1); - expect(errorMsg.html()).toContain('Error loading tags :('); - expect(searchField).toHaveLength(0); + expect(screen.getByText('Error loading tags :(')).toBeInTheDocument(); + expect(screen.queryByText('Loading')).not.toBeInTheDocument(); }); it('shows a message when the list of tags is empty', () => { - const wrapper = createWrapper({ filteredTags: [] }); - const msg = wrapper.find(Message); + setUp({ filteredTags: [] }); - expect(msg).toHaveLength(1); - expect(msg.html()).toContain('No tags found'); + expect(screen.getByText('No tags found')).toBeInTheDocument(); + expect(screen.queryByText('Error loading tags :(')).not.toBeInTheDocument(); + expect(screen.queryByText('Loading')).not.toBeInTheDocument(); }); - it('renders proper component based on the display mode', () => { - const wrapper = createWrapper({ filteredTags: ['foo', 'bar'], stats: {} }); + it('renders proper component based on the display mode', async () => { + const { user } = setUp({ filteredTags: ['foo', 'bar'], stats: {} }); - expect(wrapper.find(TagsCards)).toHaveLength(1); - expect(wrapper.find(TagsTable)).toHaveLength(0); + expect(screen.getByText('TagsCards')).toBeInTheDocument(); + expect(screen.queryByText('TagsTable')).not.toBeInTheDocument(); - wrapper.find(TagsModeDropdown).simulate('change'); + await user.click(screen.getByRole('button', { name: /^Display mode/ })); + await user.click(screen.getByRole('menuitem', { name: /List/ })); - expect(wrapper.find(TagsCards)).toHaveLength(0); - expect(wrapper.find(TagsTable)).toHaveLength(1); + expect(screen.queryByText('TagsCards')).not.toBeInTheDocument(); + expect(screen.getByText('TagsTable')).toBeInTheDocument(); }); - it('triggers tags filtering when search field changes', () => { - const wrapper = createWrapper({ filteredTags: [] }); - const searchField = wrapper.find(SearchField); + it('triggers tags filtering when search field changes', async () => { + const { user } = setUp({ filteredTags: [] }); - expect(searchField).toHaveLength(1); expect(filterTags).not.toHaveBeenCalled(); - searchField.simulate('change'); - expect(filterTags).toHaveBeenCalledTimes(1); - }); - - it('triggers ordering when sorting dropdown changes', () => { - const wrapper = createWrapper({ filteredTags: [] }); - - expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({}); - wrapper.find(OrderingDropdown).simulate('change', 'tag', 'DESC'); - expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'tag', dir: 'DESC' }); - wrapper.find(OrderingDropdown).simulate('change', 'visits', 'ASC'); - expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'visits', dir: 'ASC' }); - }); - - it('can update current order via orderByColumn from table component', () => { - const wrapper = createWrapper({ filteredTags: ['foo', 'bar'], stats: {} }); - const callOrderBy = (field: TagsOrderableFields) => { - ((wrapper.find(TagsTable).prop('orderByColumn') as Function)(field) as Function)(); - }; - - wrapper.find(TagsModeDropdown).simulate('change'); // Make sure table is rendered - - callOrderBy('visits'); - expect(wrapper.find(TagsTable).prop('currentOrder')).toEqual({ field: 'visits', dir: 'ASC' }); - callOrderBy('visits'); - expect(wrapper.find(TagsTable).prop('currentOrder')).toEqual({ field: 'visits', dir: 'DESC' }); - callOrderBy('tag'); - expect(wrapper.find(TagsTable).prop('currentOrder')).toEqual({ field: 'tag', dir: 'ASC' }); - callOrderBy('shortUrls'); - expect(wrapper.find(TagsTable).prop('currentOrder')).toEqual({ field: 'shortUrls', dir: 'ASC' }); + await user.type(screen.getByPlaceholderText('Search...'), 'Hello'); + await waitFor(() => expect(filterTags).toHaveBeenCalledTimes(1)); }); }); From e70724f0587ff60d0fb50daa0545589dcd3226ac Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sat, 28 May 2022 10:34:12 +0200 Subject: [PATCH 004/101] Refactored some default exports to regular ones --- src/settings/RealTimeUpdatesSettings.tsx | 2 +- src/settings/ShortUrlCreationSettings.tsx | 2 +- src/settings/UserInterfaceSettings.tsx | 2 +- src/short-urls/ShortUrlForm.tsx | 2 +- src/short-urls/helpers/ShortUrlFormCheckboxGroup.tsx | 2 +- src/utils/Checkbox.tsx | 4 +--- src/utils/ToggleSwitch.tsx | 4 +--- src/visits/DomainVisits.tsx | 2 +- src/visits/NonOrphanVisits.tsx | 2 +- src/visits/OrphanVisits.tsx | 2 +- src/visits/ShortUrlVisits.tsx | 2 +- src/visits/TagVisits.tsx | 2 +- src/visits/VisitsStats.tsx | 6 ++---- src/visits/charts/LineChartCard.tsx | 6 ++---- test/settings/RealTimeUpdatesSettings.test.tsx | 2 +- test/settings/UserInterfaceSettings.test.tsx | 2 +- test/short-urls/helpers/ShortUrlFormCheckboxGroup.test.tsx | 2 +- test/utils/Checkbox.test.tsx | 2 +- test/visits/OrphanVisits.test.tsx | 2 +- test/visits/ShortUrlVisits.test.tsx | 2 +- test/visits/TagVisits.test.tsx | 2 +- test/visits/VisitsStats.test.tsx | 6 +++--- test/visits/charts/LineChartCard.test.tsx | 4 ++-- 23 files changed, 28 insertions(+), 36 deletions(-) diff --git a/src/settings/RealTimeUpdatesSettings.tsx b/src/settings/RealTimeUpdatesSettings.tsx index e2424e5a..f9cccbce 100644 --- a/src/settings/RealTimeUpdatesSettings.tsx +++ b/src/settings/RealTimeUpdatesSettings.tsx @@ -1,6 +1,6 @@ import { FormGroup, Input } from 'reactstrap'; import classNames from 'classnames'; -import ToggleSwitch from '../utils/ToggleSwitch'; +import { ToggleSwitch } from '../utils/ToggleSwitch'; import { SimpleCard } from '../utils/SimpleCard'; import { FormText } from '../utils/forms/FormText'; import { LabeledFormGroup } from '../utils/forms/LabeledFormGroup'; diff --git a/src/settings/ShortUrlCreationSettings.tsx b/src/settings/ShortUrlCreationSettings.tsx index a369e90f..d5523550 100644 --- a/src/settings/ShortUrlCreationSettings.tsx +++ b/src/settings/ShortUrlCreationSettings.tsx @@ -1,7 +1,7 @@ import { FC, ReactNode } from 'react'; import { DropdownItem, FormGroup } from 'reactstrap'; import { SimpleCard } from '../utils/SimpleCard'; -import ToggleSwitch from '../utils/ToggleSwitch'; +import { ToggleSwitch } from '../utils/ToggleSwitch'; import { DropdownBtn } from '../utils/DropdownBtn'; import { FormText } from '../utils/forms/FormText'; import { LabeledFormGroup } from '../utils/forms/LabeledFormGroup'; diff --git a/src/settings/UserInterfaceSettings.tsx b/src/settings/UserInterfaceSettings.tsx index 5ca2e462..e21b3460 100644 --- a/src/settings/UserInterfaceSettings.tsx +++ b/src/settings/UserInterfaceSettings.tsx @@ -2,7 +2,7 @@ import { FC } from 'react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faSun, faMoon } from '@fortawesome/free-solid-svg-icons'; import { SimpleCard } from '../utils/SimpleCard'; -import ToggleSwitch from '../utils/ToggleSwitch'; +import { ToggleSwitch } from '../utils/ToggleSwitch'; import { changeThemeInMarkup, Theme } from '../utils/theme'; import { Settings, UiSettings } from './reducers/settings'; import './UserInterfaceSettings.scss'; diff --git a/src/short-urls/ShortUrlForm.tsx b/src/short-urls/ShortUrlForm.tsx index 23406833..d8537e27 100644 --- a/src/short-urls/ShortUrlForm.tsx +++ b/src/short-urls/ShortUrlForm.tsx @@ -7,7 +7,7 @@ import DateInput, { DateInputProps } from '../utils/DateInput'; import { supportsCrawlableVisits, supportsForwardQuery } from '../utils/helpers/features'; import { SimpleCard } from '../utils/SimpleCard'; import { handleEventPreventingDefault, hasValue, OptionalString } from '../utils/utils'; -import Checkbox from '../utils/Checkbox'; +import { Checkbox } from '../utils/Checkbox'; import { SelectedServer } from '../servers/data'; import { TagsSelectorProps } from '../tags/helpers/TagsSelector'; import { DomainSelectorProps } from '../domains/DomainSelector'; diff --git a/src/short-urls/helpers/ShortUrlFormCheckboxGroup.tsx b/src/short-urls/helpers/ShortUrlFormCheckboxGroup.tsx index 85654d24..8d933df5 100644 --- a/src/short-urls/helpers/ShortUrlFormCheckboxGroup.tsx +++ b/src/short-urls/helpers/ShortUrlFormCheckboxGroup.tsx @@ -1,5 +1,5 @@ import { ChangeEvent, FC, PropsWithChildren } from 'react'; -import Checkbox from '../../utils/Checkbox'; +import { Checkbox } from '../../utils/Checkbox'; import { InfoTooltip } from '../../utils/InfoTooltip'; type ShortUrlFormCheckboxGroupProps = PropsWithChildren<{ diff --git a/src/utils/Checkbox.tsx b/src/utils/Checkbox.tsx index de13b008..6a589dbf 100644 --- a/src/utils/Checkbox.tsx +++ b/src/utils/Checkbox.tsx @@ -1,6 +1,4 @@ import { FC } from 'react'; import BooleanControl, { BooleanControlProps } from './BooleanControl'; -const Checkbox: FC = (props) => ; - -export default Checkbox; +export const Checkbox: FC = (props) => ; diff --git a/src/utils/ToggleSwitch.tsx b/src/utils/ToggleSwitch.tsx index e5b30b0e..7b86b370 100644 --- a/src/utils/ToggleSwitch.tsx +++ b/src/utils/ToggleSwitch.tsx @@ -1,6 +1,4 @@ import { FC } from 'react'; import BooleanControl, { BooleanControlProps } from './BooleanControl'; -const ToggleSwitch: FC = (props) => ; - -export default ToggleSwitch; +export const ToggleSwitch: FC = (props) => ; diff --git a/src/visits/DomainVisits.tsx b/src/visits/DomainVisits.tsx index b0bdca5f..2283ad39 100644 --- a/src/visits/DomainVisits.tsx +++ b/src/visits/DomainVisits.tsx @@ -8,7 +8,7 @@ import { Topics } from '../mercure/helpers/Topics'; import { useGoBack } from '../utils/helpers/hooks'; import { toApiParams } from './types/helpers'; import { NormalizedVisit } from './types'; -import VisitsStats from './VisitsStats'; +import { VisitsStats } from './VisitsStats'; import VisitsHeader from './VisitsHeader'; export interface DomainVisitsProps extends CommonVisitsProps { diff --git a/src/visits/NonOrphanVisits.tsx b/src/visits/NonOrphanVisits.tsx index 2ebfe913..2c2cbe4f 100644 --- a/src/visits/NonOrphanVisits.tsx +++ b/src/visits/NonOrphanVisits.tsx @@ -3,7 +3,7 @@ import { ShlinkVisitsParams } from '../api/types'; import { Topics } from '../mercure/helpers/Topics'; import { useGoBack } from '../utils/helpers/hooks'; import { ReportExporter } from '../common/services/ReportExporter'; -import VisitsStats from './VisitsStats'; +import { VisitsStats } from './VisitsStats'; import { NormalizedVisit, VisitsInfo, VisitsParams } from './types'; import { CommonVisitsProps } from './types/CommonVisitsProps'; import { toApiParams } from './types/helpers'; diff --git a/src/visits/OrphanVisits.tsx b/src/visits/OrphanVisits.tsx index bc2ee1d1..45723ec2 100644 --- a/src/visits/OrphanVisits.tsx +++ b/src/visits/OrphanVisits.tsx @@ -3,7 +3,7 @@ import { ShlinkVisitsParams } from '../api/types'; import { Topics } from '../mercure/helpers/Topics'; import { useGoBack } from '../utils/helpers/hooks'; import { ReportExporter } from '../common/services/ReportExporter'; -import VisitsStats from './VisitsStats'; +import { VisitsStats } from './VisitsStats'; import { NormalizedVisit, OrphanVisitType, VisitsInfo, VisitsParams } from './types'; import { CommonVisitsProps } from './types/CommonVisitsProps'; import { toApiParams } from './types/helpers'; diff --git a/src/visits/ShortUrlVisits.tsx b/src/visits/ShortUrlVisits.tsx index 55323aec..748e8221 100644 --- a/src/visits/ShortUrlVisits.tsx +++ b/src/visits/ShortUrlVisits.tsx @@ -9,7 +9,7 @@ import { useGoBack } from '../utils/helpers/hooks'; import { ReportExporter } from '../common/services/ReportExporter'; import { ShortUrlVisits as ShortUrlVisitsState } from './reducers/shortUrlVisits'; import ShortUrlVisitsHeader from './ShortUrlVisitsHeader'; -import VisitsStats from './VisitsStats'; +import { VisitsStats } from './VisitsStats'; import { NormalizedVisit, VisitsParams } from './types'; import { CommonVisitsProps } from './types/CommonVisitsProps'; import { toApiParams } from './types/helpers'; diff --git a/src/visits/TagVisits.tsx b/src/visits/TagVisits.tsx index 74018ec5..afacca7f 100644 --- a/src/visits/TagVisits.tsx +++ b/src/visits/TagVisits.tsx @@ -7,7 +7,7 @@ import { useGoBack } from '../utils/helpers/hooks'; import { ReportExporter } from '../common/services/ReportExporter'; import { TagVisits as TagVisitsState } from './reducers/tagVisits'; import TagVisitsHeader from './TagVisitsHeader'; -import VisitsStats from './VisitsStats'; +import { VisitsStats } from './VisitsStats'; import { NormalizedVisit } from './types'; import { CommonVisitsProps } from './types/CommonVisitsProps'; import { toApiParams } from './types/helpers'; diff --git a/src/visits/VisitsStats.tsx b/src/visits/VisitsStats.tsx index 59885d5f..cb716261 100644 --- a/src/visits/VisitsStats.tsx +++ b/src/visits/VisitsStats.tsx @@ -17,7 +17,7 @@ import { supportsBotVisits } from '../utils/helpers/features'; import { prettify } from '../utils/helpers/numbers'; import { NavPillItem, NavPills } from '../utils/NavPills'; import { ExportBtn } from '../utils/ExportBtn'; -import LineChartCard from './charts/LineChartCard'; +import { LineChartCard } from './charts/LineChartCard'; import VisitsTable from './VisitsTable'; import { NormalizedOrphanVisit, NormalizedVisit, VisitsFilter, VisitsInfo, VisitsParams } from './types'; import OpenMapModalBtn from './helpers/OpenMapModalBtn'; @@ -55,7 +55,7 @@ const sections: Record = { let selectedBar: string | undefined; -const VisitsStats: FC = ({ +export const VisitsStats: FC = ({ children, visitsInfo, getVisits, @@ -325,5 +325,3 @@ const VisitsStats: FC = ({ ); }; - -export default VisitsStats; diff --git a/src/visits/charts/LineChartCard.tsx b/src/visits/charts/LineChartCard.tsx index 335dd742..039afce5 100644 --- a/src/visits/charts/LineChartCard.tsx +++ b/src/visits/charts/LineChartCard.tsx @@ -26,7 +26,7 @@ import { NormalizedVisit, Stats } from '../types'; import { fillTheGaps } from '../../utils/helpers/visits'; import { useToggle } from '../../utils/helpers/hooks'; import { rangeOf } from '../../utils/utils'; -import ToggleSwitch from '../../utils/ToggleSwitch'; +import { ToggleSwitch } from '../../utils/ToggleSwitch'; import { prettify } from '../../utils/helpers/numbers'; import { pointerOnHover, renderChartLabel } from '../../utils/helpers/charts'; import { HIGHLIGHTED_COLOR, MAIN_COLOR } from '../../utils/theme'; @@ -166,7 +166,7 @@ const chartElementAtEvent = ( } }; -const LineChartCard = ( +export const LineChartCard = ( { title, visits, highlightedVisits, highlightedLabel = 'Selected', setSelectedVisits }: LineChartCardProps, ) => { const [step, setStep] = useState( @@ -266,5 +266,3 @@ const LineChartCard = ( ); }; - -export default LineChartCard; diff --git a/test/settings/RealTimeUpdatesSettings.test.tsx b/test/settings/RealTimeUpdatesSettings.test.tsx index bd7c908a..ec86541a 100644 --- a/test/settings/RealTimeUpdatesSettings.test.tsx +++ b/test/settings/RealTimeUpdatesSettings.test.tsx @@ -7,7 +7,7 @@ import { Settings, } from '../../src/settings/reducers/settings'; import RealTimeUpdatesSettings from '../../src/settings/RealTimeUpdatesSettings'; -import ToggleSwitch from '../../src/utils/ToggleSwitch'; +import { ToggleSwitch } from '../../src/utils/ToggleSwitch'; import { LabeledFormGroup } from '../../src/utils/forms/LabeledFormGroup'; describe('', () => { diff --git a/test/settings/UserInterfaceSettings.test.tsx b/test/settings/UserInterfaceSettings.test.tsx index 48bd7f43..ce0945c2 100644 --- a/test/settings/UserInterfaceSettings.test.tsx +++ b/test/settings/UserInterfaceSettings.test.tsx @@ -4,7 +4,7 @@ import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Settings, UiSettings } from '../../src/settings/reducers/settings'; import { UserInterfaceSettings } from '../../src/settings/UserInterfaceSettings'; -import ToggleSwitch from '../../src/utils/ToggleSwitch'; +import { ToggleSwitch } from '../../src/utils/ToggleSwitch'; import { Theme } from '../../src/utils/theme'; describe('', () => { diff --git a/test/short-urls/helpers/ShortUrlFormCheckboxGroup.test.tsx b/test/short-urls/helpers/ShortUrlFormCheckboxGroup.test.tsx index da7aec6c..aa564849 100644 --- a/test/short-urls/helpers/ShortUrlFormCheckboxGroup.test.tsx +++ b/test/short-urls/helpers/ShortUrlFormCheckboxGroup.test.tsx @@ -1,6 +1,6 @@ import { shallow } from 'enzyme'; import { ShortUrlFormCheckboxGroup } from '../../../src/short-urls/helpers/ShortUrlFormCheckboxGroup'; -import Checkbox from '../../../src/utils/Checkbox'; +import { Checkbox } from '../../../src/utils/Checkbox'; import { InfoTooltip } from '../../../src/utils/InfoTooltip'; describe('', () => { diff --git a/test/utils/Checkbox.test.tsx b/test/utils/Checkbox.test.tsx index e98390f0..be173718 100644 --- a/test/utils/Checkbox.test.tsx +++ b/test/utils/Checkbox.test.tsx @@ -1,6 +1,6 @@ import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import Checkbox from '../../src/utils/Checkbox'; +import { Checkbox } from '../../src/utils/Checkbox'; describe('', () => { it.each([['foo'], ['bar'], ['baz']])('includes extra class names when provided', (className) => { diff --git a/test/visits/OrphanVisits.test.tsx b/test/visits/OrphanVisits.test.tsx index b9b284d2..87129f32 100644 --- a/test/visits/OrphanVisits.test.tsx +++ b/test/visits/OrphanVisits.test.tsx @@ -3,7 +3,7 @@ import { Mock } from 'ts-mockery'; import { OrphanVisits as createOrphanVisits } from '../../src/visits/OrphanVisits'; import { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub'; import { VisitsInfo } from '../../src/visits/types'; -import VisitsStats from '../../src/visits/VisitsStats'; +import { VisitsStats } from '../../src/visits/VisitsStats'; import { Settings } from '../../src/settings/reducers/settings'; import { ReportExporter } from '../../src/common/services/ReportExporter'; import { SelectedServer } from '../../src/servers/data'; diff --git a/test/visits/ShortUrlVisits.test.tsx b/test/visits/ShortUrlVisits.test.tsx index f4cfc604..33713113 100644 --- a/test/visits/ShortUrlVisits.test.tsx +++ b/test/visits/ShortUrlVisits.test.tsx @@ -5,7 +5,7 @@ import createShortUrlVisits, { ShortUrlVisitsProps } from '../../src/visits/Shor import ShortUrlVisitsHeader from '../../src/visits/ShortUrlVisitsHeader'; import { ShortUrlVisits as ShortUrlVisitsState } from '../../src/visits/reducers/shortUrlVisits'; import { ShortUrlDetail } from '../../src/short-urls/reducers/shortUrlDetail'; -import VisitsStats from '../../src/visits/VisitsStats'; +import { VisitsStats } from '../../src/visits/VisitsStats'; import { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub'; import { ReportExporter } from '../../src/common/services/ReportExporter'; diff --git a/test/visits/TagVisits.test.tsx b/test/visits/TagVisits.test.tsx index b95e7be4..965d1ad1 100644 --- a/test/visits/TagVisits.test.tsx +++ b/test/visits/TagVisits.test.tsx @@ -4,7 +4,7 @@ import createTagVisits, { TagVisitsProps } from '../../src/visits/TagVisits'; import TagVisitsHeader from '../../src/visits/TagVisitsHeader'; import ColorGenerator from '../../src/utils/services/ColorGenerator'; import { TagVisits as TagVisitsStats } from '../../src/visits/reducers/tagVisits'; -import VisitsStats from '../../src/visits/VisitsStats'; +import { VisitsStats } from '../../src/visits/VisitsStats'; import { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub'; import { ReportExporter } from '../../src/common/services/ReportExporter'; diff --git a/test/visits/VisitsStats.test.tsx b/test/visits/VisitsStats.test.tsx index 8c999008..2c6fbf1c 100644 --- a/test/visits/VisitsStats.test.tsx +++ b/test/visits/VisitsStats.test.tsx @@ -3,10 +3,10 @@ import { Progress } from 'reactstrap'; import { sum } from 'ramda'; import { Mock } from 'ts-mockery'; import { Route } from 'react-router-dom'; -import VisitStats from '../../src/visits/VisitsStats'; +import { VisitsStats } from '../../src/visits/VisitsStats'; import Message from '../../src/utils/Message'; import { Visit, VisitsInfo } from '../../src/visits/types'; -import LineChartCard from '../../src/visits/charts/LineChartCard'; +import { LineChartCard } from '../../src/visits/charts/LineChartCard'; import VisitsTable from '../../src/visits/VisitsTable'; import { Result } from '../../src/utils/Result'; import { Settings } from '../../src/settings/reducers/settings'; @@ -24,7 +24,7 @@ describe('', () => { const createComponent = (visitsInfo: Partial) => { wrapper = shallow( - (visitsInfo)} cancelGetVisits={() => {}} diff --git a/test/visits/charts/LineChartCard.test.tsx b/test/visits/charts/LineChartCard.test.tsx index 03e77933..e77511d9 100644 --- a/test/visits/charts/LineChartCard.test.tsx +++ b/test/visits/charts/LineChartCard.test.tsx @@ -3,8 +3,8 @@ import { CardHeader, DropdownItem } from 'reactstrap'; import { Line } from 'react-chartjs-2'; import { formatISO, subDays, subMonths, subYears } from 'date-fns'; import { Mock } from 'ts-mockery'; -import LineChartCard from '../../../src/visits/charts/LineChartCard'; -import ToggleSwitch from '../../../src/utils/ToggleSwitch'; +import { LineChartCard } from '../../../src/visits/charts/LineChartCard'; +import { ToggleSwitch } from '../../../src/utils/ToggleSwitch'; import { NormalizedVisit } from '../../../src/visits/types'; import { prettify } from '../../../src/utils/helpers/numbers'; import { pointerOnHover, renderChartLabel } from '../../../src/utils/helpers/charts'; From 2cac1d9fd2c496c4e681fbca67da7857f16e6a4a Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sat, 28 May 2022 10:47:39 +0200 Subject: [PATCH 005/101] More default exports removals --- src/api/services/ShlinkApiClient.ts | 2 +- src/api/services/ShlinkApiClientBuilder.ts | 6 ++---- src/api/services/provideServices.ts | 2 +- src/common/AsideMenu.tsx | 4 +--- src/common/Home.tsx | 2 +- src/common/ShlinkVersions.tsx | 4 +--- src/common/ShlinkVersionsContainer.tsx | 6 ++---- src/common/services/provideServices.ts | 4 ++-- src/servers/CreateServer.tsx | 4 +--- src/servers/DeleteServerButton.tsx | 4 +--- src/servers/DeleteServerModal.tsx | 4 +--- src/servers/ServersListGroup.tsx | 4 +--- src/servers/helpers/ImportServersBtn.tsx | 4 +--- src/servers/helpers/ServerError.tsx | 2 +- src/servers/services/provideServices.ts | 8 ++++---- src/settings/RealTimeUpdatesSettings.tsx | 4 +--- src/settings/services/provideServices.ts | 2 +- test/api/services/ShlinkApiClient.test.ts | 2 +- test/api/services/ShlinkApiClientBuilder.test.ts | 2 +- test/common/AsideMenu.test.tsx | 4 ++-- test/common/ShlinkVersions.test.tsx | 2 +- test/common/ShlinkVersionsContainer.test.tsx | 2 +- test/domains/reducers/domainRedirects.test.ts | 2 +- test/domains/reducers/domainsList.test.ts | 2 +- test/mercure/reducers/mercureInfo.test.ts | 2 +- test/servers/CreateServer.test.tsx | 4 ++-- test/servers/DeleteServerButton.test.tsx | 4 ++-- test/servers/DeleteServerModal.test.tsx | 2 +- test/servers/ServersListGroup.test.tsx | 2 +- test/servers/helpers/ImportServersBtn.test.tsx | 7 +++++-- test/settings/RealTimeUpdatesSettings.test.tsx | 2 +- test/short-urls/reducers/shortUrlCreation.test.ts | 2 +- test/short-urls/reducers/shortUrlDeletion.test.ts | 2 +- test/short-urls/reducers/shortUrlDetail.test.ts | 2 +- test/short-urls/reducers/shortUrlsList.test.ts | 2 +- test/tags/reducers/tagDelete.test.ts | 2 +- test/tags/reducers/tagEdit.test.ts | 2 +- test/visits/reducers/domainVisits.test.ts | 2 +- test/visits/reducers/nonOrphanVisits.test.ts | 2 +- test/visits/reducers/orphanVisits.test.ts | 2 +- test/visits/reducers/shortUrlVisits.test.ts | 2 +- test/visits/reducers/tagVisits.test.ts | 2 +- test/visits/reducers/visitsOverview.test.ts | 2 +- 43 files changed, 56 insertions(+), 73 deletions(-) diff --git a/src/api/services/ShlinkApiClient.ts b/src/api/services/ShlinkApiClient.ts index 54682e06..3e4c1b51 100644 --- a/src/api/services/ShlinkApiClient.ts +++ b/src/api/services/ShlinkApiClient.ts @@ -29,7 +29,7 @@ const normalizeOrderByInParams = (params: ShlinkShortUrlsListParams): ShlinkShor return { ...rest, orderBy: orderToString(orderBy) }; }; -export default class ShlinkApiClient { +export class ShlinkApiClient { public constructor( private readonly axios: AxiosInstance, private readonly baseUrl: string, diff --git a/src/api/services/ShlinkApiClientBuilder.ts b/src/api/services/ShlinkApiClientBuilder.ts index d2ba24cd..0d7efc0f 100644 --- a/src/api/services/ShlinkApiClientBuilder.ts +++ b/src/api/services/ShlinkApiClientBuilder.ts @@ -2,7 +2,7 @@ import { AxiosInstance } from 'axios'; import { prop } from 'ramda'; import { hasServerData, SelectedServer, ServerWithId } from '../../servers/data'; import { GetState } from '../../container/types'; -import ShlinkApiClient from './ShlinkApiClient'; +import { ShlinkApiClient } from './ShlinkApiClient'; const apiClients: Record = {}; @@ -12,7 +12,7 @@ const getSelectedServerFromState = (getState: GetState): SelectedServer => prop( export type ShlinkApiClientBuilder = (getStateOrSelectedServer: GetState | ServerWithId) => ShlinkApiClient; -const buildShlinkApiClient = (axios: AxiosInstance): ShlinkApiClientBuilder => ( +export const buildShlinkApiClient = (axios: AxiosInstance): ShlinkApiClientBuilder => ( getStateOrSelectedServer: GetState | ServerWithId, ) => { const server = isGetState(getStateOrSelectedServer) @@ -32,5 +32,3 @@ const buildShlinkApiClient = (axios: AxiosInstance): ShlinkApiClientBuilder => ( return apiClients[clientKey]; }; - -export default buildShlinkApiClient; diff --git a/src/api/services/provideServices.ts b/src/api/services/provideServices.ts index 2d0abf4e..3ddb60e7 100644 --- a/src/api/services/provideServices.ts +++ b/src/api/services/provideServices.ts @@ -1,5 +1,5 @@ import Bottle from 'bottlejs'; -import buildShlinkApiClient from './ShlinkApiClientBuilder'; +import { buildShlinkApiClient } from './ShlinkApiClientBuilder'; const provideServices = (bottle: Bottle) => { bottle.serviceFactory('buildShlinkApiClient', buildShlinkApiClient, 'axios'); diff --git a/src/common/AsideMenu.tsx b/src/common/AsideMenu.tsx index 826ff3b6..f7c81965 100644 --- a/src/common/AsideMenu.tsx +++ b/src/common/AsideMenu.tsx @@ -34,7 +34,7 @@ const AsideMenuItem: FC = ({ children, to, className, ...res ); -const AsideMenu = (DeleteServerButton: FC) => ( +export const AsideMenu = (DeleteServerButton: FC) => ( { selectedServer, showOnMobile = false }: AsideMenuProps, ) => { const hasId = isServerWithId(selectedServer); @@ -89,5 +89,3 @@ const AsideMenu = (DeleteServerButton: FC) => ( ); }; - -export default AsideMenu; diff --git a/src/common/Home.tsx b/src/common/Home.tsx index cd8ab483..018f9ce3 100644 --- a/src/common/Home.tsx +++ b/src/common/Home.tsx @@ -5,7 +5,7 @@ import { Card, Row } from 'reactstrap'; import { ExternalLink } from 'react-external-link'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faExternalLinkAlt, faPlus } from '@fortawesome/free-solid-svg-icons'; -import ServersListGroup from '../servers/ServersListGroup'; +import { ServersListGroup } from '../servers/ServersListGroup'; import { ServersMap } from '../servers/data'; import { ShlinkLogo } from './img/ShlinkLogo'; import './Home.scss'; diff --git a/src/common/ShlinkVersions.tsx b/src/common/ShlinkVersions.tsx index 5210e50e..e750b25f 100644 --- a/src/common/ShlinkVersions.tsx +++ b/src/common/ShlinkVersions.tsx @@ -17,7 +17,7 @@ const VersionLink = ({ project, version }: { project: 'shlink' | 'shlink-web-cli ); -const ShlinkVersions = ({ selectedServer, clientVersion = SHLINK_WEB_CLIENT_VERSION }: ShlinkVersionsProps) => { +export const ShlinkVersions = ({ selectedServer, clientVersion = SHLINK_WEB_CLIENT_VERSION }: ShlinkVersionsProps) => { const normalizedClientVersion = normalizeVersion(clientVersion); return ( @@ -29,5 +29,3 @@ const ShlinkVersions = ({ selectedServer, clientVersion = SHLINK_WEB_CLIENT_VERS ); }; - -export default ShlinkVersions; diff --git a/src/common/ShlinkVersionsContainer.tsx b/src/common/ShlinkVersionsContainer.tsx index 378283e8..0cdf8405 100644 --- a/src/common/ShlinkVersionsContainer.tsx +++ b/src/common/ShlinkVersionsContainer.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames'; import { SelectedServer } from '../servers/data'; -import ShlinkVersions from './ShlinkVersions'; +import { ShlinkVersions } from './ShlinkVersions'; import { Sidebar } from './reducers/sidebar'; import './ShlinkVersionsContainer.scss'; @@ -9,7 +9,7 @@ export interface ShlinkVersionsContainerProps { sidebar: Sidebar; } -const ShlinkVersionsContainer = ({ selectedServer, sidebar }: ShlinkVersionsContainerProps) => { +export const ShlinkVersionsContainer = ({ selectedServer, sidebar }: ShlinkVersionsContainerProps) => { const classes = classNames('text-center', { 'shlink-versions-container--with-sidebar': sidebar.sidebarPresent, }); @@ -20,5 +20,3 @@ const ShlinkVersionsContainer = ({ selectedServer, sidebar }: ShlinkVersionsCont ); }; - -export default ShlinkVersionsContainer; diff --git a/src/common/services/provideServices.ts b/src/common/services/provideServices.ts index 604ab336..3a613bd2 100644 --- a/src/common/services/provideServices.ts +++ b/src/common/services/provideServices.ts @@ -4,9 +4,9 @@ import { ScrollToTop } from '../ScrollToTop'; import { MainHeader } from '../MainHeader'; import { Home } from '../Home'; import { MenuLayout } from '../MenuLayout'; -import AsideMenu from '../AsideMenu'; +import { AsideMenu } from '../AsideMenu'; import { ErrorHandler } from '../ErrorHandler'; -import ShlinkVersionsContainer from '../ShlinkVersionsContainer'; +import { ShlinkVersionsContainer } from '../ShlinkVersionsContainer'; import { ConnectDecorator } from '../../container/types'; import { withoutSelectedServer } from '../../servers/helpers/withoutSelectedServer'; import { sidebarNotPresent, sidebarPresent } from '../reducers/sidebar'; diff --git a/src/servers/CreateServer.tsx b/src/servers/CreateServer.tsx index 6bdf75d7..bcc60e46 100644 --- a/src/servers/CreateServer.tsx +++ b/src/servers/CreateServer.tsx @@ -26,7 +26,7 @@ const ImportResult = ({ type }: { type: 'error' | 'success' }) => ( ); -const CreateServer = (ImportServersBtn: FC, useStateFlagTimeout: StateFlagTimeout) => ( +export const CreateServer = (ImportServersBtn: FC, useStateFlagTimeout: StateFlagTimeout) => ( { servers, createServer }: CreateServerProps, ) => { const navigate = useNavigate(); @@ -77,5 +77,3 @@ const CreateServer = (ImportServersBtn: FC, useStateFlagT ); }; - -export default CreateServer; diff --git a/src/servers/DeleteServerButton.tsx b/src/servers/DeleteServerButton.tsx index a40e6ecc..4759938c 100644 --- a/src/servers/DeleteServerButton.tsx +++ b/src/servers/DeleteServerButton.tsx @@ -11,7 +11,7 @@ export type DeleteServerButtonProps = PropsWithChildren<{ textClassName?: string; }>; -const DeleteServerButton = (DeleteServerModal: FC): FC => ( +export const DeleteServerButton = (DeleteServerModal: FC): FC => ( { server, className, children, textClassName }, ) => { const [isModalOpen, , showModal, hideModal] = useToggle(); @@ -27,5 +27,3 @@ const DeleteServerButton = (DeleteServerModal: FC): FC ); }; - -export default DeleteServerButton; diff --git a/src/servers/DeleteServerModal.tsx b/src/servers/DeleteServerModal.tsx index 9679dd7c..911ba3d0 100644 --- a/src/servers/DeleteServerModal.tsx +++ b/src/servers/DeleteServerModal.tsx @@ -14,7 +14,7 @@ interface DeleteServerModalConnectProps extends DeleteServerModalProps { deleteServer: (server: ServerWithId) => void; } -const DeleteServerModal: FC = ( +export const DeleteServerModal: FC = ( { server, toggle, isOpen, deleteServer, redirectHome = true }, ) => { const navigate = useNavigate(); @@ -43,5 +43,3 @@ const DeleteServerModal: FC = ( ); }; - -export default DeleteServerModal; diff --git a/src/servers/ServersListGroup.tsx b/src/servers/ServersListGroup.tsx index a88787a7..36bac3bf 100644 --- a/src/servers/ServersListGroup.tsx +++ b/src/servers/ServersListGroup.tsx @@ -19,7 +19,7 @@ const ServerListItem = ({ id, name }: { id: string; name: string }) => ( ); -const ServersListGroup: FC = ({ servers, children, embedded = false }) => ( +export const ServersListGroup: FC = ({ servers, children, embedded = false }) => ( <> {children &&
{children}
} {servers.length > 0 && ( @@ -31,5 +31,3 @@ const ServersListGroup: FC = ({ servers, children, embedd )} ); - -export default ServersListGroup; diff --git a/src/servers/helpers/ImportServersBtn.tsx b/src/servers/helpers/ImportServersBtn.tsx index e01500c6..a5673623 100644 --- a/src/servers/helpers/ImportServersBtn.tsx +++ b/src/servers/helpers/ImportServersBtn.tsx @@ -27,7 +27,7 @@ interface ImportServersBtnConnectProps extends ImportServersBtnProps { const serversFiltering = (servers: ServerData[]) => ({ url, apiKey }: ServerData) => servers.some((server) => server.url === url && server.apiKey === apiKey); -const ImportServersBtn = ({ importServersFromFile }: ServersImporter): FC => ({ +export const ImportServersBtn = ({ importServersFromFile }: ServersImporter): FC => ({ createServers, servers, fileRef, @@ -89,5 +89,3 @@ const ImportServersBtn = ({ importServersFromFile }: ServersImporter): FC ); }; - -export default ImportServersBtn; diff --git a/src/servers/helpers/ServerError.tsx b/src/servers/helpers/ServerError.tsx index c84a5708..2906b64d 100644 --- a/src/servers/helpers/ServerError.tsx +++ b/src/servers/helpers/ServerError.tsx @@ -1,7 +1,7 @@ import { FC } from 'react'; import { Link } from 'react-router-dom'; import Message from '../../utils/Message'; -import ServersListGroup from '../ServersListGroup'; +import { ServersListGroup } from '../ServersListGroup'; import { DeleteServerButtonProps } from '../DeleteServerButton'; import { isServerWithId, SelectedServer, ServersMap } from '../data'; import { NoMenuLayout } from '../../common/NoMenuLayout'; diff --git a/src/servers/services/provideServices.ts b/src/servers/services/provideServices.ts index 9f177cb6..1d6b0489 100644 --- a/src/servers/services/provideServices.ts +++ b/src/servers/services/provideServices.ts @@ -1,10 +1,10 @@ import Bottle from 'bottlejs'; -import CreateServer from '../CreateServer'; +import { CreateServer } from '../CreateServer'; import { ServersDropdown } from '../ServersDropdown'; -import DeleteServerModal from '../DeleteServerModal'; -import DeleteServerButton from '../DeleteServerButton'; +import { DeleteServerModal } from '../DeleteServerModal'; +import { DeleteServerButton } from '../DeleteServerButton'; import { EditServer } from '../EditServer'; -import ImportServersBtn from '../helpers/ImportServersBtn'; +import { ImportServersBtn } from '../helpers/ImportServersBtn'; import { resetSelectedServer, selectServer } from '../reducers/selectedServer'; import { createServer, createServers, deleteServer, editServer, setAutoConnect } from '../reducers/servers'; import { fetchServers } from '../reducers/remoteServers'; diff --git a/src/settings/RealTimeUpdatesSettings.tsx b/src/settings/RealTimeUpdatesSettings.tsx index f9cccbce..a4218b5a 100644 --- a/src/settings/RealTimeUpdatesSettings.tsx +++ b/src/settings/RealTimeUpdatesSettings.tsx @@ -14,7 +14,7 @@ interface RealTimeUpdatesProps { const intervalValue = (interval?: number) => (!interval ? '' : `${interval}`); -const RealTimeUpdatesSettings = ( +export const RealTimeUpdatesSettings = ( { settings: { realTimeUpdates }, toggleRealTimeUpdates, setRealTimeUpdatesInterval }: RealTimeUpdatesProps, ) => ( @@ -52,5 +52,3 @@ const RealTimeUpdatesSettings = ( ); - -export default RealTimeUpdatesSettings; diff --git a/src/settings/services/provideServices.ts b/src/settings/services/provideServices.ts index 344ad8a8..57870e91 100644 --- a/src/settings/services/provideServices.ts +++ b/src/settings/services/provideServices.ts @@ -1,5 +1,5 @@ import Bottle from 'bottlejs'; -import RealTimeUpdatesSettings from '../RealTimeUpdatesSettings'; +import { RealTimeUpdatesSettings } from '../RealTimeUpdatesSettings'; import Settings from '../Settings'; import { setRealTimeUpdatesInterval, diff --git a/test/api/services/ShlinkApiClient.test.ts b/test/api/services/ShlinkApiClient.test.ts index 91153fb4..f5f7b647 100644 --- a/test/api/services/ShlinkApiClient.test.ts +++ b/test/api/services/ShlinkApiClient.test.ts @@ -1,6 +1,6 @@ import { AxiosInstance, AxiosRequestConfig } from 'axios'; import { Mock } from 'ts-mockery'; -import ShlinkApiClient from '../../../src/api/services/ShlinkApiClient'; +import { ShlinkApiClient } from '../../../src/api/services/ShlinkApiClient'; import { OptionalString } from '../../../src/utils/utils'; import { ShlinkDomain, ShlinkVisitsOverview } from '../../../src/api/types'; import { ShortUrl, ShortUrlsOrder } from '../../../src/short-urls/data'; diff --git a/test/api/services/ShlinkApiClientBuilder.test.ts b/test/api/services/ShlinkApiClientBuilder.test.ts index 6967b0f4..b67bd7e6 100644 --- a/test/api/services/ShlinkApiClientBuilder.test.ts +++ b/test/api/services/ShlinkApiClientBuilder.test.ts @@ -1,6 +1,6 @@ import { Mock } from 'ts-mockery'; import { AxiosInstance } from 'axios'; -import buildShlinkApiClient from '../../../src/api/services/ShlinkApiClientBuilder'; +import { buildShlinkApiClient } from '../../../src/api/services/ShlinkApiClientBuilder'; import { ReachableServer, SelectedServer } from '../../../src/servers/data'; import { ShlinkState } from '../../../src/container/types'; diff --git a/test/common/AsideMenu.test.tsx b/test/common/AsideMenu.test.tsx index 6ebc0a31..df49244e 100644 --- a/test/common/AsideMenu.test.tsx +++ b/test/common/AsideMenu.test.tsx @@ -1,12 +1,12 @@ import { render, screen } from '@testing-library/react'; import { Mock } from 'ts-mockery'; import { MemoryRouter } from 'react-router-dom'; -import asideMenuCreator from '../../src/common/AsideMenu'; +import { AsideMenu as createAsideMenu } from '../../src/common/AsideMenu'; import { ReachableServer } from '../../src/servers/data'; import { SemVer } from '../../src/utils/helpers/version'; describe('', () => { - const AsideMenu = asideMenuCreator(() => <>DeleteServerButton); + const AsideMenu = createAsideMenu(() => <>DeleteServerButton); const setUp = (version: SemVer, id: string | false = 'abc123') => render( ({ id: id || undefined, version })} /> diff --git a/test/common/ShlinkVersions.test.tsx b/test/common/ShlinkVersions.test.tsx index 04273b32..7c6127f1 100644 --- a/test/common/ShlinkVersions.test.tsx +++ b/test/common/ShlinkVersions.test.tsx @@ -1,6 +1,6 @@ import { render, screen } from '@testing-library/react'; import { Mock } from 'ts-mockery'; -import ShlinkVersions, { ShlinkVersionsProps } from '../../src/common/ShlinkVersions'; +import { ShlinkVersions, ShlinkVersionsProps } from '../../src/common/ShlinkVersions'; import { NonReachableServer, NotFoundServer, ReachableServer } from '../../src/servers/data'; describe('', () => { diff --git a/test/common/ShlinkVersionsContainer.test.tsx b/test/common/ShlinkVersionsContainer.test.tsx index d264051d..1920fdc2 100644 --- a/test/common/ShlinkVersionsContainer.test.tsx +++ b/test/common/ShlinkVersionsContainer.test.tsx @@ -1,6 +1,6 @@ import { render } from '@testing-library/react'; import { Mock } from 'ts-mockery'; -import ShlinkVersionsContainer from '../../src/common/ShlinkVersionsContainer'; +import { ShlinkVersionsContainer } from '../../src/common/ShlinkVersionsContainer'; import { SelectedServer } from '../../src/servers/data'; import { Sidebar } from '../../src/common/reducers/sidebar'; diff --git a/test/domains/reducers/domainRedirects.test.ts b/test/domains/reducers/domainRedirects.test.ts index 3cb56393..f77f8377 100644 --- a/test/domains/reducers/domainRedirects.test.ts +++ b/test/domains/reducers/domainRedirects.test.ts @@ -1,5 +1,5 @@ import { Mock } from 'ts-mockery'; -import ShlinkApiClient from '../../../src/api/services/ShlinkApiClient'; +import { ShlinkApiClient } from '../../../src/api/services/ShlinkApiClient'; import { EDIT_DOMAIN_REDIRECTS, EDIT_DOMAIN_REDIRECTS_ERROR, diff --git a/test/domains/reducers/domainsList.test.ts b/test/domains/reducers/domainsList.test.ts index 5c1730f5..d40a58b8 100644 --- a/test/domains/reducers/domainsList.test.ts +++ b/test/domains/reducers/domainsList.test.ts @@ -15,7 +15,7 @@ import reducer, { } from '../../../src/domains/reducers/domainsList'; import { EDIT_DOMAIN_REDIRECTS } from '../../../src/domains/reducers/domainRedirects'; import { ShlinkDomainRedirects } from '../../../src/api/types'; -import ShlinkApiClient from '../../../src/api/services/ShlinkApiClient'; +import { ShlinkApiClient } from '../../../src/api/services/ShlinkApiClient'; import { Domain } from '../../../src/domains/data'; import { ShlinkState } from '../../../src/container/types'; import { SelectedServer, ServerData } from '../../../src/servers/data'; diff --git a/test/mercure/reducers/mercureInfo.test.ts b/test/mercure/reducers/mercureInfo.test.ts index 239a9ba1..d5cb2972 100644 --- a/test/mercure/reducers/mercureInfo.test.ts +++ b/test/mercure/reducers/mercureInfo.test.ts @@ -7,7 +7,7 @@ import reducer, { GetMercureInfoAction, } from '../../../src/mercure/reducers/mercureInfo'; import { ShlinkMercureInfo } from '../../../src/api/types'; -import ShlinkApiClient from '../../../src/api/services/ShlinkApiClient'; +import { ShlinkApiClient } from '../../../src/api/services/ShlinkApiClient'; import { GetState } from '../../../src/container/types'; describe('mercureInfoReducer', () => { diff --git a/test/servers/CreateServer.test.tsx b/test/servers/CreateServer.test.tsx index ba9abb4a..d23a6d1e 100644 --- a/test/servers/CreateServer.test.tsx +++ b/test/servers/CreateServer.test.tsx @@ -1,7 +1,7 @@ import { shallow, ShallowWrapper } from 'enzyme'; import { Mock } from 'ts-mockery'; import { useNavigate } from 'react-router-dom'; -import createServerConstruct from '../../src/servers/CreateServer'; +import { CreateServer as createCreateServer } from '../../src/servers/CreateServer'; import { ServerForm } from '../../src/servers/helpers/ServerForm'; import { ServerWithId } from '../../src/servers/data'; import { DuplicatedServersModal } from '../../src/servers/helpers/DuplicatedServersModal'; @@ -21,7 +21,7 @@ describe('', () => { .mockReturnValueOnce([serversImported, () => '']) .mockReturnValueOnce([importFailed, () => '']) .mockReturnValue([]); - const CreateServer = createServerConstruct(ImportServersBtn, useStateFlagTimeout); + const CreateServer = createCreateServer(ImportServersBtn, useStateFlagTimeout); wrapper = shallow(); diff --git a/test/servers/DeleteServerButton.test.tsx b/test/servers/DeleteServerButton.test.tsx index f66e8a95..40f1c9d8 100644 --- a/test/servers/DeleteServerButton.test.tsx +++ b/test/servers/DeleteServerButton.test.tsx @@ -2,11 +2,11 @@ import { ReactNode } from 'react'; import userEvent from '@testing-library/user-event'; import { render, screen, waitFor } from '@testing-library/react'; import { Mock } from 'ts-mockery'; -import deleteServerButtonConstruct from '../../src/servers/DeleteServerButton'; +import { DeleteServerButton as createDeleteServerButton } from '../../src/servers/DeleteServerButton'; import { ServerWithId } from '../../src/servers/data'; describe('', () => { - const DeleteServerButton = deleteServerButtonConstruct( + const DeleteServerButton = createDeleteServerButton( ({ isOpen }) => <>DeleteServerModal {isOpen ? '[Open]' : '[Closed]'}, ); const setUp = (children?: ReactNode) => ({ diff --git a/test/servers/DeleteServerModal.test.tsx b/test/servers/DeleteServerModal.test.tsx index 83c917c7..39b3832e 100644 --- a/test/servers/DeleteServerModal.test.tsx +++ b/test/servers/DeleteServerModal.test.tsx @@ -2,7 +2,7 @@ import { shallow, ShallowWrapper } from 'enzyme'; import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap'; import { Mock } from 'ts-mockery'; import { useNavigate } from 'react-router-dom'; -import DeleteServerModal from '../../src/servers/DeleteServerModal'; +import { DeleteServerModal } from '../../src/servers/DeleteServerModal'; import { ServerWithId } from '../../src/servers/data'; jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), useNavigate: jest.fn() })); diff --git a/test/servers/ServersListGroup.test.tsx b/test/servers/ServersListGroup.test.tsx index 35830681..2f1b8e81 100644 --- a/test/servers/ServersListGroup.test.tsx +++ b/test/servers/ServersListGroup.test.tsx @@ -1,7 +1,7 @@ import { shallow, ShallowWrapper } from 'enzyme'; import { ListGroup } from 'reactstrap'; import { Mock } from 'ts-mockery'; -import ServersListGroup from '../../src/servers/ServersListGroup'; +import { ServersListGroup } from '../../src/servers/ServersListGroup'; import { ServerWithId } from '../../src/servers/data'; describe('', () => { diff --git a/test/servers/helpers/ImportServersBtn.test.tsx b/test/servers/helpers/ImportServersBtn.test.tsx index 636ff295..88e1e345 100644 --- a/test/servers/helpers/ImportServersBtn.test.tsx +++ b/test/servers/helpers/ImportServersBtn.test.tsx @@ -2,7 +2,10 @@ import { ReactNode } from 'react'; import { shallow, ShallowWrapper } from 'enzyme'; import { UncontrolledTooltip } from 'reactstrap'; import { Mock } from 'ts-mockery'; -import importServersBtnConstruct, { ImportServersBtnProps } from '../../../src/servers/helpers/ImportServersBtn'; +import { + ImportServersBtn as createImportServersBtn, + ImportServersBtnProps, +} from '../../../src/servers/helpers/ImportServersBtn'; import { ServersImporter } from '../../../src/servers/services/ServersImporter'; import { DuplicatedServersModal } from '../../../src/servers/helpers/DuplicatedServersModal'; @@ -14,7 +17,7 @@ describe('', () => { const serversImporterMock = Mock.of({ importServersFromFile }); const click = jest.fn(); const fileRef = { current: Mock.of({ click }) }; - const ImportServersBtn = importServersBtnConstruct(serversImporterMock); + const ImportServersBtn = createImportServersBtn(serversImporterMock); const createWrapper = (props: Partial = {}) => { wrapper = shallow( { diff --git a/test/short-urls/reducers/shortUrlDeletion.test.ts b/test/short-urls/reducers/shortUrlDeletion.test.ts index 588dc790..0eb61b25 100644 --- a/test/short-urls/reducers/shortUrlDeletion.test.ts +++ b/test/short-urls/reducers/shortUrlDeletion.test.ts @@ -8,7 +8,7 @@ import reducer, { deleteShortUrl, } from '../../../src/short-urls/reducers/shortUrlDeletion'; import { ProblemDetailsError } from '../../../src/api/types'; -import ShlinkApiClient from '../../../src/api/services/ShlinkApiClient'; +import { ShlinkApiClient } from '../../../src/api/services/ShlinkApiClient'; describe('shortUrlDeletionReducer', () => { describe('reducer', () => { diff --git a/test/short-urls/reducers/shortUrlDetail.test.ts b/test/short-urls/reducers/shortUrlDetail.test.ts index d83d035a..2a6b9df7 100644 --- a/test/short-urls/reducers/shortUrlDetail.test.ts +++ b/test/short-urls/reducers/shortUrlDetail.test.ts @@ -7,7 +7,7 @@ import reducer, { ShortUrlDetailAction, } from '../../../src/short-urls/reducers/shortUrlDetail'; import { ShortUrl } from '../../../src/short-urls/data'; -import ShlinkApiClient from '../../../src/api/services/ShlinkApiClient'; +import { ShlinkApiClient } from '../../../src/api/services/ShlinkApiClient'; import { ShlinkState } from '../../../src/container/types'; import { ShortUrlsList } from '../../../src/short-urls/reducers/shortUrlsList'; diff --git a/test/short-urls/reducers/shortUrlsList.test.ts b/test/short-urls/reducers/shortUrlsList.test.ts index 4aac6f92..fbff5de0 100644 --- a/test/short-urls/reducers/shortUrlsList.test.ts +++ b/test/short-urls/reducers/shortUrlsList.test.ts @@ -8,7 +8,7 @@ import reducer, { import { SHORT_URL_DELETED } from '../../../src/short-urls/reducers/shortUrlDeletion'; import { CREATE_VISITS } from '../../../src/visits/reducers/visitCreation'; import { ShortUrl } from '../../../src/short-urls/data'; -import ShlinkApiClient from '../../../src/api/services/ShlinkApiClient'; +import { ShlinkApiClient } from '../../../src/api/services/ShlinkApiClient'; import { ShlinkPaginator, ShlinkShortUrlsResponse } from '../../../src/api/types'; import { CREATE_SHORT_URL } from '../../../src/short-urls/reducers/shortUrlCreation'; import { SHORT_URL_EDITED } from '../../../src/short-urls/reducers/shortUrlEdition'; diff --git a/test/tags/reducers/tagDelete.test.ts b/test/tags/reducers/tagDelete.test.ts index c68578a2..a4726bf1 100644 --- a/test/tags/reducers/tagDelete.test.ts +++ b/test/tags/reducers/tagDelete.test.ts @@ -7,7 +7,7 @@ import reducer, { tagDeleted, deleteTag, } from '../../../src/tags/reducers/tagDelete'; -import ShlinkApiClient from '../../../src/api/services/ShlinkApiClient'; +import { ShlinkApiClient } from '../../../src/api/services/ShlinkApiClient'; import { ShlinkState } from '../../../src/container/types'; describe('tagDeleteReducer', () => { diff --git a/test/tags/reducers/tagEdit.test.ts b/test/tags/reducers/tagEdit.test.ts index 08fbc1b9..63c6b719 100644 --- a/test/tags/reducers/tagEdit.test.ts +++ b/test/tags/reducers/tagEdit.test.ts @@ -8,7 +8,7 @@ import reducer, { editTag, EditTagAction, } from '../../../src/tags/reducers/tagEdit'; -import ShlinkApiClient from '../../../src/api/services/ShlinkApiClient'; +import { ShlinkApiClient } from '../../../src/api/services/ShlinkApiClient'; import ColorGenerator from '../../../src/utils/services/ColorGenerator'; import { ShlinkState } from '../../../src/container/types'; diff --git a/test/visits/reducers/domainVisits.test.ts b/test/visits/reducers/domainVisits.test.ts index 94499dfb..8c9bfccd 100644 --- a/test/visits/reducers/domainVisits.test.ts +++ b/test/visits/reducers/domainVisits.test.ts @@ -17,7 +17,7 @@ import { CREATE_VISITS } from '../../../src/visits/reducers/visitCreation'; import { rangeOf } from '../../../src/utils/utils'; import { Visit } from '../../../src/visits/types'; import { ShlinkVisits } from '../../../src/api/types'; -import ShlinkApiClient from '../../../src/api/services/ShlinkApiClient'; +import { ShlinkApiClient } from '../../../src/api/services/ShlinkApiClient'; import { ShlinkState } from '../../../src/container/types'; import { formatIsoDate } from '../../../src/utils/helpers/date'; import { DateInterval } from '../../../src/utils/dates/types'; diff --git a/test/visits/reducers/nonOrphanVisits.test.ts b/test/visits/reducers/nonOrphanVisits.test.ts index 99d0075f..7e6c2911 100644 --- a/test/visits/reducers/nonOrphanVisits.test.ts +++ b/test/visits/reducers/nonOrphanVisits.test.ts @@ -15,7 +15,7 @@ import { CREATE_VISITS } from '../../../src/visits/reducers/visitCreation'; import { rangeOf } from '../../../src/utils/utils'; import { Visit, VisitsInfo } from '../../../src/visits/types'; import { ShlinkVisits } from '../../../src/api/types'; -import ShlinkApiClient from '../../../src/api/services/ShlinkApiClient'; +import { ShlinkApiClient } from '../../../src/api/services/ShlinkApiClient'; import { ShlinkState } from '../../../src/container/types'; import { formatIsoDate } from '../../../src/utils/helpers/date'; import { DateInterval } from '../../../src/utils/dates/types'; diff --git a/test/visits/reducers/orphanVisits.test.ts b/test/visits/reducers/orphanVisits.test.ts index 0b26ee92..d57eff5c 100644 --- a/test/visits/reducers/orphanVisits.test.ts +++ b/test/visits/reducers/orphanVisits.test.ts @@ -15,7 +15,7 @@ import { CREATE_VISITS } from '../../../src/visits/reducers/visitCreation'; import { rangeOf } from '../../../src/utils/utils'; import { Visit, VisitsInfo } from '../../../src/visits/types'; import { ShlinkVisits } from '../../../src/api/types'; -import ShlinkApiClient from '../../../src/api/services/ShlinkApiClient'; +import { ShlinkApiClient } from '../../../src/api/services/ShlinkApiClient'; import { ShlinkState } from '../../../src/container/types'; import { formatIsoDate } from '../../../src/utils/helpers/date'; import { DateInterval } from '../../../src/utils/dates/types'; diff --git a/test/visits/reducers/shortUrlVisits.test.ts b/test/visits/reducers/shortUrlVisits.test.ts index e0a63ec1..3b7cdbb8 100644 --- a/test/visits/reducers/shortUrlVisits.test.ts +++ b/test/visits/reducers/shortUrlVisits.test.ts @@ -16,7 +16,7 @@ import { CREATE_VISITS } from '../../../src/visits/reducers/visitCreation'; import { rangeOf } from '../../../src/utils/utils'; import { Visit } from '../../../src/visits/types'; import { ShlinkVisits } from '../../../src/api/types'; -import ShlinkApiClient from '../../../src/api/services/ShlinkApiClient'; +import { ShlinkApiClient } from '../../../src/api/services/ShlinkApiClient'; import { ShlinkState } from '../../../src/container/types'; import { formatIsoDate } from '../../../src/utils/helpers/date'; import { DateInterval } from '../../../src/utils/dates/types'; diff --git a/test/visits/reducers/tagVisits.test.ts b/test/visits/reducers/tagVisits.test.ts index 34315bd0..5a217d24 100644 --- a/test/visits/reducers/tagVisits.test.ts +++ b/test/visits/reducers/tagVisits.test.ts @@ -16,7 +16,7 @@ import { CREATE_VISITS } from '../../../src/visits/reducers/visitCreation'; import { rangeOf } from '../../../src/utils/utils'; import { Visit } from '../../../src/visits/types'; import { ShlinkVisits } from '../../../src/api/types'; -import ShlinkApiClient from '../../../src/api/services/ShlinkApiClient'; +import { ShlinkApiClient } from '../../../src/api/services/ShlinkApiClient'; import { ShlinkState } from '../../../src/container/types'; import { formatIsoDate } from '../../../src/utils/helpers/date'; import { DateInterval } from '../../../src/utils/dates/types'; diff --git a/test/visits/reducers/visitsOverview.test.ts b/test/visits/reducers/visitsOverview.test.ts index fe0849da..98ced535 100644 --- a/test/visits/reducers/visitsOverview.test.ts +++ b/test/visits/reducers/visitsOverview.test.ts @@ -8,7 +8,7 @@ import reducer, { loadVisitsOverview, } from '../../../src/visits/reducers/visitsOverview'; import { CREATE_VISITS, CreateVisitsAction } from '../../../src/visits/reducers/visitCreation'; -import ShlinkApiClient from '../../../src/api/services/ShlinkApiClient'; +import { ShlinkApiClient } from '../../../src/api/services/ShlinkApiClient'; import { ShlinkVisitsOverview } from '../../../src/api/types'; import { ShlinkState } from '../../../src/container/types'; import { CreateVisit, OrphanVisit, Visit } from '../../../src/visits/types'; From 1d60db25bd29f86a40c3771a5b736d72e0fbb704 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sat, 28 May 2022 11:16:59 +0200 Subject: [PATCH 006/101] Removed all default export except for services and reducers --- src/domains/ManageDomains.tsx | 2 +- src/servers/helpers/ServerError.tsx | 2 +- src/servers/helpers/withSelectedServer.tsx | 2 +- src/servers/services/ServersExporter.ts | 2 +- src/settings/Settings.tsx | 4 +--- src/settings/services/provideServices.ts | 2 +- src/short-urls/CreateShortUrl.tsx | 7 ++++--- src/short-urls/EditShortUrl.tsx | 2 +- src/short-urls/Paginator.tsx | 4 +--- src/short-urls/ShortUrlForm.tsx | 2 +- src/short-urls/ShortUrlsList.tsx | 6 ++---- src/short-urls/helpers/CreateShortUrlResult.tsx | 4 +--- src/short-urls/helpers/DeleteShortUrlModal.tsx | 4 +--- src/short-urls/helpers/QrCodeModal.tsx | 4 +--- src/short-urls/helpers/ShortUrlDetailLink.tsx | 5 +---- src/short-urls/helpers/ShortUrlVisitsCount.tsx | 8 ++++---- src/short-urls/helpers/ShortUrlsRow.tsx | 10 ++++------ src/short-urls/helpers/ShortUrlsRowMenu.tsx | 6 ++---- src/short-urls/services/provideServices.ts | 14 +++++++------- src/tags/TagCard.tsx | 8 +++----- src/tags/TagsList.tsx | 2 +- src/tags/TagsTableRow.tsx | 4 ++-- src/tags/helpers/DeleteTagConfirmModal.tsx | 4 +--- src/tags/helpers/EditTagModal.tsx | 6 ++---- src/tags/helpers/Tag.tsx | 6 ++---- src/tags/helpers/TagBullet.tsx | 6 ++---- src/tags/helpers/TagsSelector.tsx | 10 ++++------ src/tags/reducers/tagEdit.ts | 2 +- src/tags/services/provideServices.ts | 8 ++++---- src/utils/BooleanControl.tsx | 4 +--- src/utils/Checkbox.tsx | 2 +- src/utils/DateInput.tsx | 4 +--- src/utils/Message.tsx | 6 +++--- src/utils/PaginationDropdown.tsx | 4 +--- src/utils/ToggleSwitch.tsx | 2 +- src/utils/dates/DateRangeRow.tsx | 6 ++---- src/utils/dates/DateRangeSelector.tsx | 2 +- src/utils/services/ColorGenerator.ts | 4 ++-- src/utils/services/LocalStorage.ts | 2 +- src/utils/services/provideServices.ts | 4 ++-- src/visits/DomainVisits.tsx | 2 +- src/visits/NonOrphanVisits.tsx | 2 +- src/visits/OrphanVisits.tsx | 2 +- src/visits/ShortUrlVisits.tsx | 6 ++---- src/visits/ShortUrlVisitsHeader.tsx | 6 ++---- src/visits/TagVisits.tsx | 8 +++----- src/visits/TagVisitsHeader.tsx | 11 ++++------- src/visits/VisitsHeader.tsx | 6 ++---- src/visits/VisitsStats.tsx | 6 +++--- src/visits/VisitsTable.tsx | 4 +--- src/visits/charts/SortableBarChartCard.tsx | 2 +- src/visits/helpers/MapModal.tsx | 6 ++---- src/visits/helpers/OpenMapModalBtn.tsx | 6 ++---- src/visits/services/provideServices.ts | 6 +++--- test/servers/services/ServersExporter.test.ts | 2 +- test/settings/Settings.test.tsx | 2 +- test/short-urls/CreateShortUrl.test.tsx | 2 +- test/short-urls/Paginator.test.tsx | 2 +- test/short-urls/ShortUrlForm.test.tsx | 2 +- test/short-urls/ShortUrlsList.test.tsx | 6 +++--- .../helpers/CreateShortUrlResult.test.tsx | 4 ++-- .../helpers/DeleteShortUrlModal.test.tsx | 2 +- test/short-urls/helpers/QrCodeModal.test.tsx | 2 +- .../short-urls/helpers/ShortUrlDetailLink.test.tsx | 2 +- .../helpers/ShortUrlVisitsCount.test.tsx | 2 +- test/short-urls/helpers/ShortUrlsRow.test.tsx | 6 +++--- test/short-urls/helpers/ShortUrlsRowMenu.test.tsx | 2 +- test/tags/TagCard.test.tsx | 6 +++--- test/tags/TagsTableRow.test.tsx | 2 +- test/tags/helpers/DeleteTagConfirmModal.test.tsx | 2 +- test/tags/helpers/EditTagModal.test.tsx | 4 ++-- test/tags/helpers/Tag.test.tsx | 4 ++-- test/tags/helpers/TagsSelector.test.tsx | 4 ++-- test/tags/reducers/tagEdit.test.ts | 2 +- test/utils/DateInput.test.tsx | 2 +- test/utils/Message.test.tsx | 2 +- test/utils/PaginationDropdown.test.tsx | 2 +- test/utils/dates/DateRangeRow.test.tsx | 4 ++-- test/utils/dates/DateRangeSelector.test.tsx | 2 +- test/utils/services/ColorGenerator.test.ts | 4 ++-- .../{Storage.test.ts => LocalStorage.test.ts} | 2 +- test/visits/OrphanVisits.test.tsx | 2 +- test/visits/ShortUrlVisits.test.tsx | 4 ++-- test/visits/ShortUrlVisitsHeader.test.tsx | 2 +- test/visits/TagVisits.test.tsx | 6 +++--- test/visits/TagVisitsHeader.test.tsx | 6 +++--- test/visits/VisitsHeader.test.tsx | 2 +- test/visits/VisitsStats.test.tsx | 4 ++-- test/visits/VisitsTable.test.tsx | 2 +- test/visits/charts/SortableBarChartCard.test.tsx | 2 +- test/visits/helpers/MapModal.test.tsx | 2 +- test/visits/helpers/OpenMapModalBtn.test.tsx | 4 ++-- 92 files changed, 159 insertions(+), 214 deletions(-) rename test/utils/services/{Storage.test.ts => LocalStorage.test.ts} (94%) diff --git a/src/domains/ManageDomains.tsx b/src/domains/ManageDomains.tsx index 3c149dd1..a6170595 100644 --- a/src/domains/ManageDomains.tsx +++ b/src/domains/ManageDomains.tsx @@ -1,5 +1,5 @@ import { FC, useEffect } from 'react'; -import Message from '../utils/Message'; +import { Message } from '../utils/Message'; import { Result } from '../utils/Result'; import { ShlinkApiError } from '../api/ShlinkApiError'; import { SimpleCard } from '../utils/SimpleCard'; diff --git a/src/servers/helpers/ServerError.tsx b/src/servers/helpers/ServerError.tsx index 2906b64d..6f605969 100644 --- a/src/servers/helpers/ServerError.tsx +++ b/src/servers/helpers/ServerError.tsx @@ -1,6 +1,6 @@ import { FC } from 'react'; import { Link } from 'react-router-dom'; -import Message from '../../utils/Message'; +import { Message } from '../../utils/Message'; import { ServersListGroup } from '../ServersListGroup'; import { DeleteServerButtonProps } from '../DeleteServerButton'; import { isServerWithId, SelectedServer, ServersMap } from '../data'; diff --git a/src/servers/helpers/withSelectedServer.tsx b/src/servers/helpers/withSelectedServer.tsx index 6c41667e..dcd7e228 100644 --- a/src/servers/helpers/withSelectedServer.tsx +++ b/src/servers/helpers/withSelectedServer.tsx @@ -1,6 +1,6 @@ import { FC, useEffect } from 'react'; import { useParams } from 'react-router-dom'; -import Message from '../../utils/Message'; +import { Message } from '../../utils/Message'; import { isNotFoundServer, SelectedServer } from '../data'; import { NoMenuLayout } from '../../common/NoMenuLayout'; diff --git a/src/servers/services/ServersExporter.ts b/src/servers/services/ServersExporter.ts index 54e2ccf7..df4fa680 100644 --- a/src/servers/services/ServersExporter.ts +++ b/src/servers/services/ServersExporter.ts @@ -1,5 +1,5 @@ import { values } from 'ramda'; -import LocalStorage from '../../utils/services/LocalStorage'; +import { LocalStorage } from '../../utils/services/LocalStorage'; import { ServersMap, serverWithIdToServerData } from '../data'; import { saveCsv } from '../../utils/helpers/files'; import { JsonToCsv } from '../../utils/helpers/csvjson'; diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx index ff4aed50..d1c8fd72 100644 --- a/src/settings/Settings.tsx +++ b/src/settings/Settings.tsx @@ -9,7 +9,7 @@ const SettingsSections: FC<{ items: ReactNode[] }> = ({ items }) => ( ); -const Settings = ( +export const Settings = ( RealTimeUpdates: FC, ShortUrlCreation: FC, ShortUrlsList: FC, @@ -32,5 +32,3 @@ const Settings = ( ); - -export default Settings; diff --git a/src/settings/services/provideServices.ts b/src/settings/services/provideServices.ts index 57870e91..d64b8592 100644 --- a/src/settings/services/provideServices.ts +++ b/src/settings/services/provideServices.ts @@ -1,6 +1,6 @@ import Bottle from 'bottlejs'; import { RealTimeUpdatesSettings } from '../RealTimeUpdatesSettings'; -import Settings from '../Settings'; +import { Settings } from '../Settings'; import { setRealTimeUpdatesInterval, setShortUrlCreationSettings, diff --git a/src/short-urls/CreateShortUrl.tsx b/src/short-urls/CreateShortUrl.tsx index ef9694f4..a13b75cf 100644 --- a/src/short-urls/CreateShortUrl.tsx +++ b/src/short-urls/CreateShortUrl.tsx @@ -33,7 +33,10 @@ const getInitialState = (settings?: ShortUrlCreationSettings): ShortUrlData => ( forwardQuery: settings?.forwardQuery ?? true, }); -const CreateShortUrl = (ShortUrlForm: FC, CreateShortUrlResult: FC) => ({ +export const CreateShortUrl = ( + ShortUrlForm: FC, + CreateShortUrlResult: FC, +) => ({ createShortUrl, shortUrlCreationResult, resetCreateShortUrl, @@ -64,5 +67,3 @@ const CreateShortUrl = (ShortUrlForm: FC, CreateShortUrlResul ); }; - -export default CreateShortUrl; diff --git a/src/short-urls/EditShortUrl.tsx b/src/short-urls/EditShortUrl.tsx index 35a93d04..1eec0bf5 100644 --- a/src/short-urls/EditShortUrl.tsx +++ b/src/short-urls/EditShortUrl.tsx @@ -8,7 +8,7 @@ import { SelectedServer } from '../servers/data'; import { Settings, ShortUrlCreationSettings } from '../settings/reducers/settings'; import { OptionalString } from '../utils/utils'; import { parseQuery } from '../utils/helpers/query'; -import Message from '../utils/Message'; +import { Message } from '../utils/Message'; import { Result } from '../utils/Result'; import { ShlinkApiError } from '../api/ShlinkApiError'; import { useGoBack, useToggle } from '../utils/helpers/hooks'; diff --git a/src/short-urls/Paginator.tsx b/src/short-urls/Paginator.tsx index 8103623f..45c2fd10 100644 --- a/src/short-urls/Paginator.tsx +++ b/src/short-urls/Paginator.tsx @@ -15,7 +15,7 @@ interface PaginatorProps { currentQueryString?: string; } -const Paginator = ({ paginator, serverId, currentQueryString = '' }: PaginatorProps) => { +export const Paginator = ({ paginator, serverId, currentQueryString = '' }: PaginatorProps) => { const { currentPage = 0, pagesCount = 0 } = paginator ?? {}; const urlForPage = (pageNumber: NumberOrEllipsis) => `/server/${serverId}/list-short-urls/${pageNumber}${currentQueryString}`; @@ -49,5 +49,3 @@ const Paginator = ({ paginator, serverId, currentQueryString = '' }: PaginatorPr ); }; - -export default Paginator; diff --git a/src/short-urls/ShortUrlForm.tsx b/src/short-urls/ShortUrlForm.tsx index d8537e27..32b26a0d 100644 --- a/src/short-urls/ShortUrlForm.tsx +++ b/src/short-urls/ShortUrlForm.tsx @@ -3,7 +3,7 @@ import { InputType } from 'reactstrap/types/lib/Input'; import { Button, FormGroup, Input, Row } from 'reactstrap'; import { cond, isEmpty, pipe, replace, trim, T } from 'ramda'; import { parseISO } from 'date-fns'; -import DateInput, { DateInputProps } from '../utils/DateInput'; +import { DateInput, DateInputProps } from '../utils/DateInput'; import { supportsCrawlableVisits, supportsForwardQuery } from '../utils/helpers/features'; import { SimpleCard } from '../utils/SimpleCard'; import { handleEventPreventingDefault, hasValue, OptionalString } from '../utils/utils'; diff --git a/src/short-urls/ShortUrlsList.tsx b/src/short-urls/ShortUrlsList.tsx index b46652ba..6b3f7a82 100644 --- a/src/short-urls/ShortUrlsList.tsx +++ b/src/short-urls/ShortUrlsList.tsx @@ -11,7 +11,7 @@ import { ShlinkShortUrlsListParams } from '../api/types'; import { DEFAULT_SHORT_URLS_ORDERING, Settings } from '../settings/reducers/settings'; import { ShortUrlsList as ShortUrlsListState } from './reducers/shortUrlsList'; import { ShortUrlsTableProps } from './ShortUrlsTable'; -import Paginator from './Paginator'; +import { Paginator } from './Paginator'; import { useShortUrlsQuery } from './helpers/hooks'; import { ShortUrlsOrderableFields } from './data'; import { ShortUrlsFilteringProps } from './ShortUrlsFilteringBar'; @@ -23,7 +23,7 @@ interface ShortUrlsListProps { settings: Settings; } -const ShortUrlsList = ( +export const ShortUrlsList = ( ShortUrlsTable: FC, ShortUrlsFilteringBar: FC, ) => boundToMercureHub(({ listShortUrls, shortUrlsList, selectedServer, settings }: ShortUrlsListProps) => { @@ -83,5 +83,3 @@ const ShortUrlsList = ( ); }, () => [Topics.visits]); - -export default ShortUrlsList; diff --git a/src/short-urls/helpers/CreateShortUrlResult.tsx b/src/short-urls/helpers/CreateShortUrlResult.tsx index f3e2cbfd..3345a4ee 100644 --- a/src/short-urls/helpers/CreateShortUrlResult.tsx +++ b/src/short-urls/helpers/CreateShortUrlResult.tsx @@ -16,7 +16,7 @@ export interface CreateShortUrlResultProps extends ShortUrlCreation { canBeClosed?: boolean; } -const CreateShortUrlResult = (useStateFlagTimeout: StateFlagTimeout) => ( +export const CreateShortUrlResult = (useStateFlagTimeout: StateFlagTimeout) => ( { error, errorData, result, resetCreateShortUrl, canBeClosed = false }: CreateShortUrlResultProps, ) => { const [showCopyTooltip, setShowCopyTooltip] = useStateFlagTimeout(); @@ -61,5 +61,3 @@ const CreateShortUrlResult = (useStateFlagTimeout: StateFlagTimeout) => ( ); }; - -export default CreateShortUrlResult; diff --git a/src/short-urls/helpers/DeleteShortUrlModal.tsx b/src/short-urls/helpers/DeleteShortUrlModal.tsx index 106690ce..1bf7579f 100644 --- a/src/short-urls/helpers/DeleteShortUrlModal.tsx +++ b/src/short-urls/helpers/DeleteShortUrlModal.tsx @@ -14,7 +14,7 @@ interface DeleteShortUrlModalConnectProps extends ShortUrlModalProps { resetDeleteShortUrl: () => void; } -const DeleteShortUrlModal = ( +export const DeleteShortUrlModal = ( { shortUrl, toggle, isOpen, shortUrlDeletion, resetDeleteShortUrl, deleteShortUrl }: DeleteShortUrlModalConnectProps, ) => { const [inputValue, setInputValue] = useState(''); @@ -70,5 +70,3 @@ const DeleteShortUrlModal = ( ); }; - -export default DeleteShortUrlModal; diff --git a/src/short-urls/helpers/QrCodeModal.tsx b/src/short-urls/helpers/QrCodeModal.tsx index 8e07279c..ac971806 100644 --- a/src/short-urls/helpers/QrCodeModal.tsx +++ b/src/short-urls/helpers/QrCodeModal.tsx @@ -17,7 +17,7 @@ interface QrCodeModalConnectProps extends ShortUrlModalProps { selectedServer: SelectedServer; } -const QrCodeModal = (imageDownloader: ImageDownloader) => ( +export const QrCodeModal = (imageDownloader: ImageDownloader) => ( { shortUrl: { shortUrl, shortCode }, toggle, isOpen, selectedServer }: QrCodeModalConnectProps, ) => { const [size, setSize] = useState(300); @@ -107,5 +107,3 @@ const QrCodeModal = (imageDownloader: ImageDownloader) => ( ); }; - -export default QrCodeModal; diff --git a/src/short-urls/helpers/ShortUrlDetailLink.tsx b/src/short-urls/helpers/ShortUrlDetailLink.tsx index 2ba82055..d656043f 100644 --- a/src/short-urls/helpers/ShortUrlDetailLink.tsx +++ b/src/short-urls/helpers/ShortUrlDetailLink.tsx @@ -13,11 +13,10 @@ export interface ShortUrlDetailLinkProps { const buildUrl = ({ id }: ServerWithId, { shortCode, domain }: ShortUrl, suffix: LinkSuffix) => { const query = domain ? `?domain=${domain}` : ''; - return `/server/${id}/short-code/${shortCode}/${suffix}${query}`; }; -const ShortUrlDetailLink: FC> = ( +export const ShortUrlDetailLink: FC> = ( { selectedServer, shortUrl, suffix, children, ...rest }, ) => { if (!selectedServer || !isServerWithId(selectedServer) || !shortUrl) { @@ -26,5 +25,3 @@ const ShortUrlDetailLink: FC{children}; }; - -export default ShortUrlDetailLink; diff --git a/src/short-urls/helpers/ShortUrlVisitsCount.tsx b/src/short-urls/helpers/ShortUrlVisitsCount.tsx index 7cb2f9a5..cbe00c75 100644 --- a/src/short-urls/helpers/ShortUrlVisitsCount.tsx +++ b/src/short-urls/helpers/ShortUrlVisitsCount.tsx @@ -6,7 +6,7 @@ import classNames from 'classnames'; import { prettify } from '../../utils/helpers/numbers'; import { ShortUrl } from '../data'; import { SelectedServer } from '../../servers/data'; -import ShortUrlDetailLink from './ShortUrlDetailLink'; +import { ShortUrlDetailLink } from './ShortUrlDetailLink'; import './ShortUrlVisitsCount.scss'; interface ShortUrlVisitsCountProps { @@ -16,7 +16,9 @@ interface ShortUrlVisitsCountProps { active?: boolean; } -const ShortUrlVisitsCount = ({ visitsCount, shortUrl, selectedServer, active = false }: ShortUrlVisitsCountProps) => { +export const ShortUrlVisitsCount = ( + { visitsCount, shortUrl, selectedServer, active = false }: ShortUrlVisitsCountProps, +) => { const maxVisits = shortUrl?.meta?.maxVisits; const visitsLink = ( @@ -57,5 +59,3 @@ const ShortUrlVisitsCount = ({ visitsCount, shortUrl, selectedServer, active = f ); }; - -export default ShortUrlVisitsCount; diff --git a/src/short-urls/helpers/ShortUrlsRow.tsx b/src/short-urls/helpers/ShortUrlsRow.tsx index fa829a4d..a15d4692 100644 --- a/src/short-urls/helpers/ShortUrlsRow.tsx +++ b/src/short-urls/helpers/ShortUrlsRow.tsx @@ -1,14 +1,14 @@ import { FC, useEffect, useRef } from 'react'; import { isEmpty } from 'ramda'; import { ExternalLink } from 'react-external-link'; -import ColorGenerator from '../../utils/services/ColorGenerator'; +import { ColorGenerator } from '../../utils/services/ColorGenerator'; import { StateFlagTimeout } from '../../utils/helpers/hooks'; -import Tag from '../../tags/helpers/Tag'; +import { Tag } from '../../tags/helpers/Tag'; import { SelectedServer } from '../../servers/data'; import { CopyToClipboardIcon } from '../../utils/CopyToClipboardIcon'; import { ShortUrl } from '../data'; import { Time } from '../../utils/Time'; -import ShortUrlVisitsCount from './ShortUrlVisitsCount'; +import { ShortUrlVisitsCount } from './ShortUrlVisitsCount'; import { ShortUrlsRowMenuProps } from './ShortUrlsRowMenu'; import './ShortUrlsRow.scss'; @@ -18,7 +18,7 @@ export interface ShortUrlsRowProps { shortUrl: ShortUrl; } -const ShortUrlsRow = ( +export const ShortUrlsRow = ( ShortUrlsRowMenu: FC, colorGenerator: ColorGenerator, useStateFlagTimeout: StateFlagTimeout, @@ -87,5 +87,3 @@ const ShortUrlsRow = ( ); }; - -export default ShortUrlsRow; diff --git a/src/short-urls/helpers/ShortUrlsRowMenu.tsx b/src/short-urls/helpers/ShortUrlsRowMenu.tsx index a8ac0ade..877233f3 100644 --- a/src/short-urls/helpers/ShortUrlsRowMenu.tsx +++ b/src/short-urls/helpers/ShortUrlsRowMenu.tsx @@ -11,7 +11,7 @@ import { useToggle } from '../../utils/helpers/hooks'; import { ShortUrl, ShortUrlModalProps } from '../data'; import { SelectedServer } from '../../servers/data'; import { DropdownBtnMenu } from '../../utils/DropdownBtnMenu'; -import ShortUrlDetailLink from './ShortUrlDetailLink'; +import { ShortUrlDetailLink } from './ShortUrlDetailLink'; export interface ShortUrlsRowMenuProps { selectedServer: SelectedServer; @@ -19,7 +19,7 @@ export interface ShortUrlsRowMenuProps { } type ShortUrlModal = FC; -const ShortUrlsRowMenu = ( +export const ShortUrlsRowMenu = ( DeleteShortUrlModal: ShortUrlModal, QrCodeModal: ShortUrlModal, ) => ({ shortUrl, selectedServer }: ShortUrlsRowMenuProps) => { @@ -51,5 +51,3 @@ const ShortUrlsRowMenu = ( ); }; - -export default ShortUrlsRowMenu; diff --git a/src/short-urls/services/provideServices.ts b/src/short-urls/services/provideServices.ts index 3124ba93..f6d1533f 100644 --- a/src/short-urls/services/provideServices.ts +++ b/src/short-urls/services/provideServices.ts @@ -1,18 +1,18 @@ import Bottle from 'bottlejs'; import { ShortUrlsFilteringBar } from '../ShortUrlsFilteringBar'; -import ShortUrlsList from '../ShortUrlsList'; -import ShortUrlsRow from '../helpers/ShortUrlsRow'; -import ShortUrlsRowMenu from '../helpers/ShortUrlsRowMenu'; -import CreateShortUrl from '../CreateShortUrl'; -import DeleteShortUrlModal from '../helpers/DeleteShortUrlModal'; -import CreateShortUrlResult from '../helpers/CreateShortUrlResult'; +import { ShortUrlsList } from '../ShortUrlsList'; +import { ShortUrlsRow } from '../helpers/ShortUrlsRow'; +import { ShortUrlsRowMenu } from '../helpers/ShortUrlsRowMenu'; +import { CreateShortUrl } from '../CreateShortUrl'; +import { DeleteShortUrlModal } from '../helpers/DeleteShortUrlModal'; +import { CreateShortUrlResult } from '../helpers/CreateShortUrlResult'; import { listShortUrls } from '../reducers/shortUrlsList'; import { createShortUrl, resetCreateShortUrl } from '../reducers/shortUrlCreation'; import { deleteShortUrl, resetDeleteShortUrl } from '../reducers/shortUrlDeletion'; import { editShortUrl } from '../reducers/shortUrlEdition'; import { ConnectDecorator } from '../../container/types'; import { ShortUrlsTable } from '../ShortUrlsTable'; -import QrCodeModal from '../helpers/QrCodeModal'; +import { QrCodeModal } from '../helpers/QrCodeModal'; import { ShortUrlForm } from '../ShortUrlForm'; import { EditShortUrl } from '../EditShortUrl'; import { getShortUrlDetail } from '../reducers/shortUrlDetail'; diff --git a/src/tags/TagCard.tsx b/src/tags/TagCard.tsx index 755d9769..29d90828 100644 --- a/src/tags/TagCard.tsx +++ b/src/tags/TagCard.tsx @@ -5,9 +5,9 @@ import { FC, useEffect, useRef } from 'react'; import { Link } from 'react-router-dom'; import { prettify } from '../utils/helpers/numbers'; import { useToggle } from '../utils/helpers/hooks'; -import ColorGenerator from '../utils/services/ColorGenerator'; +import { ColorGenerator } from '../utils/services/ColorGenerator'; import { getServerId, SelectedServer } from '../servers/data'; -import TagBullet from './helpers/TagBullet'; +import { TagBullet } from './helpers/TagBullet'; import { NormalizedTag, TagModalProps } from './data'; import './TagCard.scss'; @@ -20,7 +20,7 @@ export interface TagCardProps { const isTruncated = (el: HTMLElement | undefined): boolean => !!el && el.scrollWidth > el.clientWidth; -const TagCard = ( +export const TagCard = ( DeleteTagConfirmModal: FC, EditTagModal: FC, colorGenerator: ColorGenerator, @@ -82,5 +82,3 @@ const TagCard = ( ); }; - -export default TagCard; diff --git a/src/tags/TagsList.tsx b/src/tags/TagsList.tsx index fe64a26a..2c825931 100644 --- a/src/tags/TagsList.tsx +++ b/src/tags/TagsList.tsx @@ -1,7 +1,7 @@ import { FC, useEffect, useState } from 'react'; import { Row } from 'reactstrap'; import { pipe } from 'ramda'; -import Message from '../utils/Message'; +import { Message } from '../utils/Message'; import { SearchField } from '../utils/SearchField'; import { SelectedServer } from '../servers/data'; import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub'; diff --git a/src/tags/TagsTableRow.tsx b/src/tags/TagsTableRow.tsx index 55bf4ba9..1bad323e 100644 --- a/src/tags/TagsTableRow.tsx +++ b/src/tags/TagsTableRow.tsx @@ -4,11 +4,11 @@ import { DropdownItem } from 'reactstrap'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faTrash as deleteIcon, faPencilAlt as editIcon } from '@fortawesome/free-solid-svg-icons'; import { getServerId, SelectedServer } from '../servers/data'; -import ColorGenerator from '../utils/services/ColorGenerator'; +import { ColorGenerator } from '../utils/services/ColorGenerator'; import { prettify } from '../utils/helpers/numbers'; import { useToggle } from '../utils/helpers/hooks'; import { DropdownBtnMenu } from '../utils/DropdownBtnMenu'; -import TagBullet from './helpers/TagBullet'; +import { TagBullet } from './helpers/TagBullet'; import { NormalizedTag, TagModalProps } from './data'; export interface TagsTableRowProps { diff --git a/src/tags/helpers/DeleteTagConfirmModal.tsx b/src/tags/helpers/DeleteTagConfirmModal.tsx index 61027e88..fd9e4a5a 100644 --- a/src/tags/helpers/DeleteTagConfirmModal.tsx +++ b/src/tags/helpers/DeleteTagConfirmModal.tsx @@ -10,7 +10,7 @@ interface DeleteTagConfirmModalProps extends TagModalProps { tagDelete: TagDeletion; } -const DeleteTagConfirmModal = ( +export const DeleteTagConfirmModal = ( { tag, toggle, isOpen, deleteTag, tagDelete, tagDeleted }: DeleteTagConfirmModalProps, ) => { const { deleting, error, errorData } = tagDelete; @@ -42,5 +42,3 @@ const DeleteTagConfirmModal = ( ); }; - -export default DeleteTagConfirmModal; diff --git a/src/tags/helpers/EditTagModal.tsx b/src/tags/helpers/EditTagModal.tsx index 6bd676ae..b03a00a7 100644 --- a/src/tags/helpers/EditTagModal.tsx +++ b/src/tags/helpers/EditTagModal.tsx @@ -5,7 +5,7 @@ import { faPalette as colorIcon } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { useToggle } from '../../utils/helpers/hooks'; import { handleEventPreventingDefault } from '../../utils/utils'; -import ColorGenerator from '../../utils/services/ColorGenerator'; +import { ColorGenerator } from '../../utils/services/ColorGenerator'; import { TagModalProps } from '../data'; import { TagEdition } from '../reducers/tagEdit'; import { Result } from '../../utils/Result'; @@ -18,7 +18,7 @@ interface EditTagModalProps extends TagModalProps { tagEdited: (oldName: string, newName: string, color: string) => void; } -const EditTagModal = ({ getColorForKey }: ColorGenerator) => ( +export const EditTagModal = ({ getColorForKey }: ColorGenerator) => ( { tag, editTag, toggle, tagEdited, isOpen, tagEdit }: EditTagModalProps, ) => { const [newTagName, setNewTagName] = useState(tag); @@ -78,5 +78,3 @@ const EditTagModal = ({ getColorForKey }: ColorGenerator) => ( ); }; - -export default EditTagModal; diff --git a/src/tags/helpers/Tag.tsx b/src/tags/helpers/Tag.tsx index 1bfa2daf..b61bc1b5 100644 --- a/src/tags/helpers/Tag.tsx +++ b/src/tags/helpers/Tag.tsx @@ -1,6 +1,6 @@ import { FC, MouseEventHandler, PropsWithChildren } from 'react'; import classNames from 'classnames'; -import ColorGenerator from '../../utils/services/ColorGenerator'; +import { ColorGenerator } from '../../utils/services/ColorGenerator'; import './Tag.scss'; type TagProps = PropsWithChildren<{ @@ -12,7 +12,7 @@ type TagProps = PropsWithChildren<{ onClose?: MouseEventHandler; }>; -const Tag: FC = ({ text, children, clearable, className = '', colorGenerator, onClick, onClose }) => ( +export const Tag: FC = ({ text, children, clearable, className = '', colorGenerator, onClick, onClose }) => ( = ({ text, children, clearable, className = '', colorGen {clearable && ×} ); - -export default Tag; diff --git a/src/tags/helpers/TagBullet.tsx b/src/tags/helpers/TagBullet.tsx index d7769262..dc84f729 100644 --- a/src/tags/helpers/TagBullet.tsx +++ b/src/tags/helpers/TagBullet.tsx @@ -1,4 +1,4 @@ -import ColorGenerator from '../../utils/services/ColorGenerator'; +import { ColorGenerator } from '../../utils/services/ColorGenerator'; import './TagBullet.scss'; interface TagBulletProps { @@ -6,11 +6,9 @@ interface TagBulletProps { colorGenerator: ColorGenerator; } -const TagBullet = ({ tag, colorGenerator }: TagBulletProps) => ( +export const TagBullet = ({ tag, colorGenerator }: TagBulletProps) => (
); - -export default TagBullet; diff --git a/src/tags/helpers/TagsSelector.tsx b/src/tags/helpers/TagsSelector.tsx index 6f47b58f..3d785af3 100644 --- a/src/tags/helpers/TagsSelector.tsx +++ b/src/tags/helpers/TagsSelector.tsx @@ -1,10 +1,10 @@ import { useEffect } from 'react'; import ReactTags, { SuggestionComponentProps, TagComponentProps } from 'react-tag-autocomplete'; -import ColorGenerator from '../../utils/services/ColorGenerator'; +import { ColorGenerator } from '../../utils/services/ColorGenerator'; import { Settings } from '../../settings/reducers/settings'; import { TagsList } from '../reducers/tagsList'; -import TagBullet from './TagBullet'; -import Tag from './Tag'; +import { TagBullet } from './TagBullet'; +import { Tag } from './Tag'; export interface TagsSelectorProps { selectedTags: string[]; @@ -21,7 +21,7 @@ interface TagsSelectorConnectProps extends TagsSelectorProps { const toComponentTag = (tag: string) => ({ id: tag, name: tag }); -const TagsSelector = (colorGenerator: ColorGenerator) => ( +export const TagsSelector = (colorGenerator: ColorGenerator) => ( { selectedTags, onChange, placeholder, listTags, tagsList, settings, allowNew = true }: TagsSelectorConnectProps, ) => { useEffect(() => { @@ -68,5 +68,3 @@ const TagsSelector = (colorGenerator: ColorGenerator) => ( /> ); }; - -export default TagsSelector; diff --git a/src/tags/reducers/tagEdit.ts b/src/tags/reducers/tagEdit.ts index 6e9829a8..ea58ad8c 100644 --- a/src/tags/reducers/tagEdit.ts +++ b/src/tags/reducers/tagEdit.ts @@ -2,7 +2,7 @@ import { pick } from 'ramda'; import { Action, Dispatch } from 'redux'; import { buildReducer } from '../../utils/helpers/redux'; import { GetState } from '../../container/types'; -import ColorGenerator from '../../utils/services/ColorGenerator'; +import { ColorGenerator } from '../../utils/services/ColorGenerator'; import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder'; import { ProblemDetailsError } from '../../api/types'; import { parseApiError } from '../../api/utils'; diff --git a/src/tags/services/provideServices.ts b/src/tags/services/provideServices.ts index aca9130c..e7d58453 100644 --- a/src/tags/services/provideServices.ts +++ b/src/tags/services/provideServices.ts @@ -1,8 +1,8 @@ import Bottle, { IContainer } from 'bottlejs'; -import TagsSelector from '../helpers/TagsSelector'; -import TagCard from '../TagCard'; -import DeleteTagConfirmModal from '../helpers/DeleteTagConfirmModal'; -import EditTagModal from '../helpers/EditTagModal'; +import { TagsSelector } from '../helpers/TagsSelector'; +import { TagCard } from '../TagCard'; +import { DeleteTagConfirmModal } from '../helpers/DeleteTagConfirmModal'; +import { EditTagModal } from '../helpers/EditTagModal'; import { TagsList } from '../TagsList'; import { filterTags, listTags } from '../reducers/tagsList'; import { deleteTag, tagDeleted } from '../reducers/tagDelete'; diff --git a/src/utils/BooleanControl.tsx b/src/utils/BooleanControl.tsx index 76360a7c..fd93a8d0 100644 --- a/src/utils/BooleanControl.tsx +++ b/src/utils/BooleanControl.tsx @@ -14,7 +14,7 @@ interface BooleanControlWithTypeProps extends BooleanControlProps { type: 'switch' | 'checkbox'; } -const BooleanControl: FC = ( +export const BooleanControl: FC = ( { checked = false, onChange = identity, className, children, type, inline = false }, ) => { const id = useDomId(); @@ -32,5 +32,3 @@ const BooleanControl: FC = ( ); }; - -export default BooleanControl; diff --git a/src/utils/Checkbox.tsx b/src/utils/Checkbox.tsx index 6a589dbf..4e4ef083 100644 --- a/src/utils/Checkbox.tsx +++ b/src/utils/Checkbox.tsx @@ -1,4 +1,4 @@ import { FC } from 'react'; -import BooleanControl, { BooleanControlProps } from './BooleanControl'; +import { BooleanControl, BooleanControlProps } from './BooleanControl'; export const Checkbox: FC = (props) => ; diff --git a/src/utils/DateInput.tsx b/src/utils/DateInput.tsx index f365d477..f2b7cc96 100644 --- a/src/utils/DateInput.tsx +++ b/src/utils/DateInput.tsx @@ -8,7 +8,7 @@ import './DateInput.scss'; export type DateInputProps = ReactDatePickerProps; -const DateInput = (props: DateInputProps) => { +export const DateInput = (props: DateInputProps) => { const { className, isClearable, selected } = props; const showCalendarIcon = !isClearable || isNil(selected); const ref = useRef<{ input: HTMLInputElement }>(); @@ -32,5 +32,3 @@ const DateInput = (props: DateInputProps) => {
); }; - -export default DateInput; diff --git a/src/utils/Message.tsx b/src/utils/Message.tsx index 7d267ca4..e171e93c 100644 --- a/src/utils/Message.tsx +++ b/src/utils/Message.tsx @@ -30,7 +30,9 @@ export type MessageProps = PropsWithChildren<{ type?: MessageType; }>; -const Message: FC = ({ className, children, loading = false, type = 'default', fullWidth = false }) => { +export const Message: FC = ( + { className, children, loading = false, type = 'default', fullWidth = false }, +) => { const classes = classNames({ 'col-md-12': fullWidth, 'col-md-10 offset-md-1': !fullWidth, @@ -50,5 +52,3 @@ const Message: FC = ({ className, children, loading = false, type ); }; - -export default Message; diff --git a/src/utils/PaginationDropdown.tsx b/src/utils/PaginationDropdown.tsx index f98af1a9..c349dc52 100644 --- a/src/utils/PaginationDropdown.tsx +++ b/src/utils/PaginationDropdown.tsx @@ -7,7 +7,7 @@ interface PaginationDropdownProps { toggleClassName?: string; } -const PaginationDropdown = ({ toggleClassName, ranges, value, setValue }: PaginationDropdownProps) => ( +export const PaginationDropdown = ({ toggleClassName, ranges, value, setValue }: PaginationDropdownProps) => ( Paginate @@ -23,5 +23,3 @@ const PaginationDropdown = ({ toggleClassName, ranges, value, setValue }: Pagina ); - -export default PaginationDropdown; diff --git a/src/utils/ToggleSwitch.tsx b/src/utils/ToggleSwitch.tsx index 7b86b370..797e9b5d 100644 --- a/src/utils/ToggleSwitch.tsx +++ b/src/utils/ToggleSwitch.tsx @@ -1,4 +1,4 @@ import { FC } from 'react'; -import BooleanControl, { BooleanControlProps } from './BooleanControl'; +import { BooleanControl, BooleanControlProps } from './BooleanControl'; export const ToggleSwitch: FC = (props) => ; diff --git a/src/utils/dates/DateRangeRow.tsx b/src/utils/dates/DateRangeRow.tsx index a3a2e917..3712fb86 100644 --- a/src/utils/dates/DateRangeRow.tsx +++ b/src/utils/dates/DateRangeRow.tsx @@ -1,5 +1,5 @@ import { endOfDay } from 'date-fns'; -import DateInput from '../DateInput'; +import { DateInput } from '../DateInput'; import { DateRange } from './types'; interface DateRangeRowProps extends DateRange { @@ -8,7 +8,7 @@ interface DateRangeRowProps extends DateRange { disabled?: boolean; } -const DateRangeRow = ( +export const DateRangeRow = ( { startDate = null, endDate = null, disabled = false, onStartDateChange, onEndDateChange }: DateRangeRowProps, ) => (
@@ -35,5 +35,3 @@ const DateRangeRow = (
); - -export default DateRangeRow; diff --git a/src/utils/dates/DateRangeSelector.tsx b/src/utils/dates/DateRangeSelector.tsx index 08a569b4..1b2a89cd 100644 --- a/src/utils/dates/DateRangeSelector.tsx +++ b/src/utils/dates/DateRangeSelector.tsx @@ -10,7 +10,7 @@ import { rangeIsInterval, dateRangeIsEmpty, } from './types'; -import DateRangeRow from './DateRangeRow'; +import { DateRangeRow } from './DateRangeRow'; import { DateIntervalDropdownItems } from './DateIntervalDropdownItems'; export interface DateRangeSelectorProps { diff --git a/src/utils/services/ColorGenerator.ts b/src/utils/services/ColorGenerator.ts index 75fbb04c..b440ab52 100644 --- a/src/utils/services/ColorGenerator.ts +++ b/src/utils/services/ColorGenerator.ts @@ -1,6 +1,6 @@ import { isNil } from 'ramda'; import { rangeOf } from '../utils'; -import LocalStorage from './LocalStorage'; +import { LocalStorage } from './LocalStorage'; const HEX_COLOR_LENGTH = 6; const HEX_DIGITS = '0123456789ABCDEF'; @@ -15,7 +15,7 @@ const hexColorToRgbArray = (colorHex: string): number[] => // HSP by Darel Rex Finley https://alienryderflex.com/hsp.html const perceivedLightness = (r = 0, g = 0, b = 0) => round(sqrt(0.299 * r ** 2 + 0.587 * g ** 2 + 0.114 * b ** 2)); -export default class ColorGenerator { +export class ColorGenerator { private readonly colors: Record; private readonly lights: Record; diff --git a/src/utils/services/LocalStorage.ts b/src/utils/services/LocalStorage.ts index 914a5a2c..9c404e07 100644 --- a/src/utils/services/LocalStorage.ts +++ b/src/utils/services/LocalStorage.ts @@ -1,7 +1,7 @@ const PREFIX = 'shlink'; const buildPath = (path: string) => `${PREFIX}.${path}`; -export default class LocalStorage { +export class LocalStorage { public constructor(private readonly localStorage: Storage) {} public readonly get = (key: string): T | undefined => { diff --git a/src/utils/services/provideServices.ts b/src/utils/services/provideServices.ts index f9fdce0e..578a945c 100644 --- a/src/utils/services/provideServices.ts +++ b/src/utils/services/provideServices.ts @@ -1,7 +1,7 @@ import Bottle from 'bottlejs'; import { useStateFlagTimeout } from '../helpers/hooks'; -import LocalStorage from './LocalStorage'; -import ColorGenerator from './ColorGenerator'; +import { LocalStorage } from './LocalStorage'; +import { ColorGenerator } from './ColorGenerator'; import { csvToJson, jsonToCsv } from '../helpers/csvjson'; const provideServices = (bottle: Bottle) => { diff --git a/src/visits/DomainVisits.tsx b/src/visits/DomainVisits.tsx index 2283ad39..b759f167 100644 --- a/src/visits/DomainVisits.tsx +++ b/src/visits/DomainVisits.tsx @@ -9,7 +9,7 @@ import { useGoBack } from '../utils/helpers/hooks'; import { toApiParams } from './types/helpers'; import { NormalizedVisit } from './types'; import { VisitsStats } from './VisitsStats'; -import VisitsHeader from './VisitsHeader'; +import { VisitsHeader } from './VisitsHeader'; export interface DomainVisitsProps extends CommonVisitsProps { getDomainVisits: (domain: string, query?: ShlinkVisitsParams, doIntervalFallback?: boolean) => void; diff --git a/src/visits/NonOrphanVisits.tsx b/src/visits/NonOrphanVisits.tsx index 2c2cbe4f..6113cfd6 100644 --- a/src/visits/NonOrphanVisits.tsx +++ b/src/visits/NonOrphanVisits.tsx @@ -7,7 +7,7 @@ import { VisitsStats } from './VisitsStats'; import { NormalizedVisit, VisitsInfo, VisitsParams } from './types'; import { CommonVisitsProps } from './types/CommonVisitsProps'; import { toApiParams } from './types/helpers'; -import VisitsHeader from './VisitsHeader'; +import { VisitsHeader } from './VisitsHeader'; export interface NonOrphanVisitsProps extends CommonVisitsProps { getNonOrphanVisits: (params?: ShlinkVisitsParams, doIntervalFallback?: boolean) => void; diff --git a/src/visits/OrphanVisits.tsx b/src/visits/OrphanVisits.tsx index 45723ec2..dbd3d8ba 100644 --- a/src/visits/OrphanVisits.tsx +++ b/src/visits/OrphanVisits.tsx @@ -7,7 +7,7 @@ import { VisitsStats } from './VisitsStats'; import { NormalizedVisit, OrphanVisitType, VisitsInfo, VisitsParams } from './types'; import { CommonVisitsProps } from './types/CommonVisitsProps'; import { toApiParams } from './types/helpers'; -import VisitsHeader from './VisitsHeader'; +import { VisitsHeader } from './VisitsHeader'; export interface OrphanVisitsProps extends CommonVisitsProps { getOrphanVisits: ( diff --git a/src/visits/ShortUrlVisits.tsx b/src/visits/ShortUrlVisits.tsx index 748e8221..4fc4ec23 100644 --- a/src/visits/ShortUrlVisits.tsx +++ b/src/visits/ShortUrlVisits.tsx @@ -8,7 +8,7 @@ import { ShortUrlDetail } from '../short-urls/reducers/shortUrlDetail'; import { useGoBack } from '../utils/helpers/hooks'; import { ReportExporter } from '../common/services/ReportExporter'; import { ShortUrlVisits as ShortUrlVisitsState } from './reducers/shortUrlVisits'; -import ShortUrlVisitsHeader from './ShortUrlVisitsHeader'; +import { ShortUrlVisitsHeader } from './ShortUrlVisitsHeader'; import { VisitsStats } from './VisitsStats'; import { NormalizedVisit, VisitsParams } from './types'; import { CommonVisitsProps } from './types/CommonVisitsProps'; @@ -22,7 +22,7 @@ export interface ShortUrlVisitsProps extends CommonVisitsProps { cancelGetShortUrlVisits: () => void; } -const ShortUrlVisits = ({ exportVisits }: ReportExporter) => boundToMercureHub(({ +export const ShortUrlVisits = ({ exportVisits }: ReportExporter) => boundToMercureHub(({ shortUrlVisits, shortUrlDetail, getShortUrlVisits, @@ -60,5 +60,3 @@ const ShortUrlVisits = ({ exportVisits }: ReportExporter) => boundToMercureHub(( ); }, (_, params) => [Topics.shortUrlVisits(params.shortCode)]); - -export default ShortUrlVisits; diff --git a/src/visits/ShortUrlVisitsHeader.tsx b/src/visits/ShortUrlVisitsHeader.tsx index f7d0bf5a..82f2d19b 100644 --- a/src/visits/ShortUrlVisitsHeader.tsx +++ b/src/visits/ShortUrlVisitsHeader.tsx @@ -3,7 +3,7 @@ import { ExternalLink } from 'react-external-link'; import { ShortUrlDetail } from '../short-urls/reducers/shortUrlDetail'; import { Time } from '../utils/Time'; import { ShortUrlVisits } from './reducers/shortUrlVisits'; -import VisitsHeader from './VisitsHeader'; +import { VisitsHeader } from './VisitsHeader'; import './ShortUrlVisitsHeader.scss'; interface ShortUrlVisitsHeaderProps { @@ -12,7 +12,7 @@ interface ShortUrlVisitsHeaderProps { goBack: () => void; } -const ShortUrlVisitsHeader = ({ shortUrlDetail, shortUrlVisits, goBack }: ShortUrlVisitsHeaderProps) => { +export const ShortUrlVisitsHeader = ({ shortUrlDetail, shortUrlVisits, goBack }: ShortUrlVisitsHeaderProps) => { const { shortUrl, loading } = shortUrlDetail; const { visits } = shortUrlVisits; const shortLink = shortUrl?.shortUrl ?? ''; @@ -43,5 +43,3 @@ const ShortUrlVisitsHeader = ({ shortUrlDetail, shortUrlVisits, goBack }: ShortU ); }; - -export default ShortUrlVisitsHeader; diff --git a/src/visits/TagVisits.tsx b/src/visits/TagVisits.tsx index afacca7f..a7ce5ba1 100644 --- a/src/visits/TagVisits.tsx +++ b/src/visits/TagVisits.tsx @@ -1,12 +1,12 @@ import { useParams } from 'react-router-dom'; import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub'; -import ColorGenerator from '../utils/services/ColorGenerator'; +import { ColorGenerator } from '../utils/services/ColorGenerator'; import { ShlinkVisitsParams } from '../api/types'; import { Topics } from '../mercure/helpers/Topics'; import { useGoBack } from '../utils/helpers/hooks'; import { ReportExporter } from '../common/services/ReportExporter'; import { TagVisits as TagVisitsState } from './reducers/tagVisits'; -import TagVisitsHeader from './TagVisitsHeader'; +import { TagVisitsHeader } from './TagVisitsHeader'; import { VisitsStats } from './VisitsStats'; import { NormalizedVisit } from './types'; import { CommonVisitsProps } from './types/CommonVisitsProps'; @@ -18,7 +18,7 @@ export interface TagVisitsProps extends CommonVisitsProps { cancelGetTagVisits: () => void; } -const TagVisits = (colorGenerator: ColorGenerator, { exportVisits }: ReportExporter) => boundToMercureHub(({ +export const TagVisits = (colorGenerator: ColorGenerator, { exportVisits }: ReportExporter) => boundToMercureHub(({ getTagVisits, tagVisits, cancelGetTagVisits, @@ -44,5 +44,3 @@ const TagVisits = (colorGenerator: ColorGenerator, { exportVisits }: ReportExpor ); }, () => [Topics.visits]); - -export default TagVisits; diff --git a/src/visits/TagVisitsHeader.tsx b/src/visits/TagVisitsHeader.tsx index 88536a72..0de9df7c 100644 --- a/src/visits/TagVisitsHeader.tsx +++ b/src/visits/TagVisitsHeader.tsx @@ -1,6 +1,6 @@ -import Tag from '../tags/helpers/Tag'; -import ColorGenerator from '../utils/services/ColorGenerator'; -import VisitsHeader from './VisitsHeader'; +import { Tag } from '../tags/helpers/Tag'; +import { ColorGenerator } from '../utils/services/ColorGenerator'; +import { VisitsHeader } from './VisitsHeader'; import { TagVisits } from './reducers/tagVisits'; import './ShortUrlVisitsHeader.scss'; @@ -10,9 +10,8 @@ interface TagVisitsHeaderProps { colorGenerator: ColorGenerator; } -const TagVisitsHeader = ({ tagVisits, goBack, colorGenerator }: TagVisitsHeaderProps) => { +export const TagVisitsHeader = ({ tagVisits, goBack, colorGenerator }: TagVisitsHeaderProps) => { const { visits, tag } = tagVisits; - const visitsStatsTitle = ( Visits for @@ -22,5 +21,3 @@ const TagVisitsHeader = ({ tagVisits, goBack, colorGenerator }: TagVisitsHeaderP return ; }; - -export default TagVisitsHeader; diff --git a/src/visits/VisitsHeader.tsx b/src/visits/VisitsHeader.tsx index 85398a6b..7dca6459 100644 --- a/src/visits/VisitsHeader.tsx +++ b/src/visits/VisitsHeader.tsx @@ -2,7 +2,7 @@ import { Button, Card } from 'reactstrap'; import { FC, PropsWithChildren, ReactNode } from 'react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faArrowLeft } from '@fortawesome/free-solid-svg-icons'; -import ShortUrlVisitsCount from '../short-urls/helpers/ShortUrlVisitsCount'; +import { ShortUrlVisitsCount } from '../short-urls/helpers/ShortUrlVisitsCount'; import { ShortUrl } from '../short-urls/data'; import { Visit } from './types'; @@ -13,7 +13,7 @@ type VisitsHeaderProps = PropsWithChildren<{ shortUrl?: ShortUrl; }>; -const VisitsHeader: FC = ({ visits, goBack, shortUrl, children, title }) => ( +export const VisitsHeader: FC = ({ visits, goBack, shortUrl, children, title }) => (

@@ -36,5 +36,3 @@ const VisitsHeader: FC = ({ visits, goBack, shortUrl, childre

); - -export default VisitsHeader; diff --git a/src/visits/VisitsStats.tsx b/src/visits/VisitsStats.tsx index cb716261..41e37d0a 100644 --- a/src/visits/VisitsStats.tsx +++ b/src/visits/VisitsStats.tsx @@ -7,7 +7,7 @@ import { IconDefinition } from '@fortawesome/fontawesome-common-types'; import { Route, Routes, Navigate } from 'react-router-dom'; import classNames from 'classnames'; import { DateRangeSelector } from '../utils/dates/DateRangeSelector'; -import Message from '../utils/Message'; +import { Message } from '../utils/Message'; import { DateInterval, DateRange, intervalToDateRange } from '../utils/dates/types'; import { Result } from '../utils/Result'; import { ShlinkApiError } from '../api/ShlinkApiError'; @@ -18,9 +18,9 @@ import { prettify } from '../utils/helpers/numbers'; import { NavPillItem, NavPills } from '../utils/NavPills'; import { ExportBtn } from '../utils/ExportBtn'; import { LineChartCard } from './charts/LineChartCard'; -import VisitsTable from './VisitsTable'; +import { VisitsTable } from './VisitsTable'; import { NormalizedOrphanVisit, NormalizedVisit, VisitsFilter, VisitsInfo, VisitsParams } from './types'; -import OpenMapModalBtn from './helpers/OpenMapModalBtn'; +import { OpenMapModalBtn } from './helpers/OpenMapModalBtn'; import { normalizeVisits, processStatsFromVisits } from './services/VisitsParser'; import { VisitsFilterDropdown } from './helpers/VisitsFilterDropdown'; import { HighlightableProps, highlightedVisitsToStats } from './types/helpers'; diff --git a/src/visits/VisitsTable.tsx b/src/visits/VisitsTable.tsx index 28ca9c61..39e30c48 100644 --- a/src/visits/VisitsTable.tsx +++ b/src/visits/VisitsTable.tsx @@ -45,7 +45,7 @@ const calculateVisits = (allVisits: NormalizedVisit[], searchTerm: string | unde return { visitsGroups, total }; }; -const VisitsTable = ({ +export const VisitsTable = ({ visits, selectedVisits = [], setSelectedVisits, @@ -222,5 +222,3 @@ const VisitsTable = ({ ); }; - -export default VisitsTable; diff --git a/src/visits/charts/SortableBarChartCard.tsx b/src/visits/charts/SortableBarChartCard.tsx index 23790ec3..83219b73 100644 --- a/src/visits/charts/SortableBarChartCard.tsx +++ b/src/visits/charts/SortableBarChartCard.tsx @@ -5,7 +5,7 @@ import { Order } from '../../utils/helpers/ordering'; import { SimplePaginator } from '../../common/SimplePaginator'; import { roundTen } from '../../utils/helpers/numbers'; import { OrderingDropdown } from '../../utils/OrderingDropdown'; -import PaginationDropdown from '../../utils/PaginationDropdown'; +import { PaginationDropdown } from '../../utils/PaginationDropdown'; import { Stats, StatsRow } from '../types'; import { HorizontalBarChart, HorizontalBarChartProps } from './HorizontalBarChart'; import { ChartCard } from './ChartCard'; diff --git a/src/visits/helpers/MapModal.tsx b/src/visits/helpers/MapModal.tsx index b672b1af..94dfa823 100644 --- a/src/visits/helpers/MapModal.tsx +++ b/src/visits/helpers/MapModal.tsx @@ -29,13 +29,13 @@ const calculateMapProps = (locations: CityStats[]): MapContainerProps => { } // When there's only one location, an error is thrown if trying to calculate the bounds. - // When that happens, we use zoom and center as a workaround + // When that happens, we use "zoom" and "center" as a workaround const [{ latLong: center }] = locations; return { zoom: 10, center }; }; -const MapModal = ({ toggle, isOpen, title, locations = [] }: MapModalProps) => ( +export const MapModal = ({ toggle, isOpen, title, locations = [] }: MapModalProps) => (

@@ -53,5 +53,3 @@ const MapModal = ({ toggle, isOpen, title, locations = [] }: MapModalProps) => ( ); - -export default MapModal; diff --git a/src/visits/helpers/OpenMapModalBtn.tsx b/src/visits/helpers/OpenMapModalBtn.tsx index 1afc8583..c6b367e1 100644 --- a/src/visits/helpers/OpenMapModalBtn.tsx +++ b/src/visits/helpers/OpenMapModalBtn.tsx @@ -4,7 +4,7 @@ import { faMapMarkedAlt as mapIcon } from '@fortawesome/free-solid-svg-icons'; import { Button, Dropdown, DropdownItem, DropdownMenu, UncontrolledTooltip } from 'reactstrap'; import { useDomId, useToggle } from '../../utils/helpers/hooks'; import { CityStats } from '../types'; -import MapModal from './MapModal'; +import { MapModal } from './MapModal'; import './OpenMapModalBtn.scss'; interface OpenMapModalBtnProps { @@ -13,7 +13,7 @@ interface OpenMapModalBtnProps { locations?: CityStats[]; } -const OpenMapModalBtn = ({ modalTitle, activeCities, locations = [] }: OpenMapModalBtnProps) => { +export const OpenMapModalBtn = ({ modalTitle, activeCities, locations = [] }: OpenMapModalBtnProps) => { const [mapIsOpened, , openMap, closeMap] = useToggle(); const [dropdownIsOpened, toggleDropdown, openDropdown] = useToggle(); const [locationsToShow, setLocationsToShow] = useState([]); @@ -51,5 +51,3 @@ const OpenMapModalBtn = ({ modalTitle, activeCities, locations = [] }: OpenMapMo ); }; - -export default OpenMapModalBtn; diff --git a/src/visits/services/provideServices.ts b/src/visits/services/provideServices.ts index efc9d620..a6b0d931 100644 --- a/src/visits/services/provideServices.ts +++ b/src/visits/services/provideServices.ts @@ -1,8 +1,8 @@ import Bottle from 'bottlejs'; -import MapModal from '../helpers/MapModal'; +import { MapModal } from '../helpers/MapModal'; import { createNewVisits } from '../reducers/visitCreation'; -import ShortUrlVisits from '../ShortUrlVisits'; -import TagVisits from '../TagVisits'; +import { ShortUrlVisits } from '../ShortUrlVisits'; +import { TagVisits } from '../TagVisits'; import { OrphanVisits } from '../OrphanVisits'; import { NonOrphanVisits } from '../NonOrphanVisits'; import { cancelGetShortUrlVisits, getShortUrlVisits } from '../reducers/shortUrlVisits'; diff --git a/test/servers/services/ServersExporter.test.ts b/test/servers/services/ServersExporter.test.ts index ffe7596a..54e93fcf 100644 --- a/test/servers/services/ServersExporter.test.ts +++ b/test/servers/services/ServersExporter.test.ts @@ -1,6 +1,6 @@ import { Mock } from 'ts-mockery'; import ServersExporter from '../../../src/servers/services/ServersExporter'; -import LocalStorage from '../../../src/utils/services/LocalStorage'; +import { LocalStorage } from '../../../src/utils/services/LocalStorage'; import { appendChild, removeChild, windowMock } from '../../mocks/WindowMock'; describe('ServersExporter', () => { diff --git a/test/settings/Settings.test.tsx b/test/settings/Settings.test.tsx index e3fd951d..3a94fb07 100644 --- a/test/settings/Settings.test.tsx +++ b/test/settings/Settings.test.tsx @@ -1,6 +1,6 @@ import { shallow } from 'enzyme'; import { Route } from 'react-router-dom'; -import createSettings from '../../src/settings/Settings'; +import { Settings as createSettings } from '../../src/settings/Settings'; import { NoMenuLayout } from '../../src/common/NoMenuLayout'; import { NavPillItem } from '../../src/utils/NavPills'; diff --git a/test/short-urls/CreateShortUrl.test.tsx b/test/short-urls/CreateShortUrl.test.tsx index 59cb732e..43dfdf90 100644 --- a/test/short-urls/CreateShortUrl.test.tsx +++ b/test/short-urls/CreateShortUrl.test.tsx @@ -1,6 +1,6 @@ import { shallow, ShallowWrapper } from 'enzyme'; import { Mock } from 'ts-mockery'; -import createShortUrlsCreator from '../../src/short-urls/CreateShortUrl'; +import { CreateShortUrl as createShortUrlsCreator } from '../../src/short-urls/CreateShortUrl'; import { ShortUrlCreation } from '../../src/short-urls/reducers/shortUrlCreation'; import { Settings } from '../../src/settings/reducers/settings'; diff --git a/test/short-urls/Paginator.test.tsx b/test/short-urls/Paginator.test.tsx index ed147a19..0e611429 100644 --- a/test/short-urls/Paginator.test.tsx +++ b/test/short-urls/Paginator.test.tsx @@ -1,7 +1,7 @@ import { shallow, ShallowWrapper } from 'enzyme'; import { PaginationItem, PaginationLink } from 'reactstrap'; import { Mock } from 'ts-mockery'; -import Paginator from '../../src/short-urls/Paginator'; +import { Paginator } from '../../src/short-urls/Paginator'; import { ShlinkPaginator } from '../../src/api/types'; import { ELLIPSIS } from '../../src/utils/helpers/pagination'; diff --git a/test/short-urls/ShortUrlForm.test.tsx b/test/short-urls/ShortUrlForm.test.tsx index 13f424e4..15da680a 100644 --- a/test/short-urls/ShortUrlForm.test.tsx +++ b/test/short-urls/ShortUrlForm.test.tsx @@ -4,7 +4,7 @@ import { identity } from 'ramda'; import { Mock } from 'ts-mockery'; import { Input } from 'reactstrap'; import { ShortUrlForm as createShortUrlForm, Mode } from '../../src/short-urls/ShortUrlForm'; -import DateInput from '../../src/utils/DateInput'; +import { DateInput } from '../../src/utils/DateInput'; import { ShortUrlData } from '../../src/short-urls/data'; import { ReachableServer, SelectedServer } from '../../src/servers/data'; import { SimpleCard } from '../../src/utils/SimpleCard'; diff --git a/test/short-urls/ShortUrlsList.test.tsx b/test/short-urls/ShortUrlsList.test.tsx index 426c94ce..fa314655 100644 --- a/test/short-urls/ShortUrlsList.test.tsx +++ b/test/short-urls/ShortUrlsList.test.tsx @@ -2,11 +2,11 @@ import { shallow, ShallowWrapper } from 'enzyme'; import { ReactElement } from 'react'; import { Mock } from 'ts-mockery'; import { useNavigate } from 'react-router-dom'; -import shortUrlsListCreator from '../../src/short-urls/ShortUrlsList'; +import { ShortUrlsList as createShortUrlsList } from '../../src/short-urls/ShortUrlsList'; import { ShortUrlsOrderableFields, ShortUrl, ShortUrlsOrder } from '../../src/short-urls/data'; import { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub'; import { ShortUrlsList as ShortUrlsListModel } from '../../src/short-urls/reducers/shortUrlsList'; -import Paginator from '../../src/short-urls/Paginator'; +import { Paginator } from '../../src/short-urls/Paginator'; import { ReachableServer } from '../../src/servers/data'; import { Settings } from '../../src/settings/reducers/settings'; @@ -36,7 +36,7 @@ describe('', () => { pagination: {}, }, }); - const ShortUrlsList = shortUrlsListCreator(ShortUrlsTable, ShortUrlsFilteringBar); + const ShortUrlsList = createShortUrlsList(ShortUrlsTable, ShortUrlsFilteringBar); const createWrapper = (defaultOrdering: ShortUrlsOrder = {}) => shallow( ({ mercureInfo: { loading: true } })} diff --git a/test/short-urls/helpers/CreateShortUrlResult.test.tsx b/test/short-urls/helpers/CreateShortUrlResult.test.tsx index 0f74d06f..7dd45c30 100644 --- a/test/short-urls/helpers/CreateShortUrlResult.test.tsx +++ b/test/short-urls/helpers/CreateShortUrlResult.test.tsx @@ -2,7 +2,7 @@ import { shallow, ShallowWrapper } from 'enzyme'; import CopyToClipboard from 'react-copy-to-clipboard'; import { Tooltip } from 'reactstrap'; import { Mock } from 'ts-mockery'; -import createCreateShortUrlResult from '../../../src/short-urls/helpers/CreateShortUrlResult'; +import { CreateShortUrlResult as createResult } from '../../../src/short-urls/helpers/CreateShortUrlResult'; import { ShortUrl } from '../../../src/short-urls/data'; import { StateFlagTimeout } from '../../../src/utils/helpers/hooks'; import { Result } from '../../../src/utils/Result'; @@ -11,7 +11,7 @@ describe('', () => { let wrapper: ShallowWrapper; const copyToClipboard = jest.fn(); const useStateFlagTimeout = jest.fn(() => [false, copyToClipboard]) as StateFlagTimeout; - const CreateShortUrlResult = createCreateShortUrlResult(useStateFlagTimeout); + const CreateShortUrlResult = createResult(useStateFlagTimeout); const createWrapper = (result: ShortUrl | null = null, error = false) => { wrapper = shallow( {}} result={result} error={error} saving={false} />, diff --git a/test/short-urls/helpers/DeleteShortUrlModal.test.tsx b/test/short-urls/helpers/DeleteShortUrlModal.test.tsx index af4a6014..fcbf9900 100644 --- a/test/short-urls/helpers/DeleteShortUrlModal.test.tsx +++ b/test/short-urls/helpers/DeleteShortUrlModal.test.tsx @@ -1,7 +1,7 @@ import { shallow, ShallowWrapper } from 'enzyme'; import { identity } from 'ramda'; import { Mock } from 'ts-mockery'; -import DeleteShortUrlModal from '../../../src/short-urls/helpers/DeleteShortUrlModal'; +import { DeleteShortUrlModal } from '../../../src/short-urls/helpers/DeleteShortUrlModal'; import { ShortUrl } from '../../../src/short-urls/data'; import { ShortUrlDeletion } from '../../../src/short-urls/reducers/shortUrlDeletion'; import { ProblemDetailsError } from '../../../src/api/types'; diff --git a/test/short-urls/helpers/QrCodeModal.test.tsx b/test/short-urls/helpers/QrCodeModal.test.tsx index fad659dc..213aea9e 100644 --- a/test/short-urls/helpers/QrCodeModal.test.tsx +++ b/test/short-urls/helpers/QrCodeModal.test.tsx @@ -2,7 +2,7 @@ import { shallow, ShallowWrapper } from 'enzyme'; import { ExternalLink } from 'react-external-link'; import { Button, FormGroup, Modal, ModalBody, ModalHeader, Row } from 'reactstrap'; import { Mock } from 'ts-mockery'; -import createQrCodeModal from '../../../src/short-urls/helpers/QrCodeModal'; +import { QrCodeModal as createQrCodeModal } from '../../../src/short-urls/helpers/QrCodeModal'; import { ShortUrl } from '../../../src/short-urls/data'; import { ReachableServer } from '../../../src/servers/data'; import { CopyToClipboardIcon } from '../../../src/utils/CopyToClipboardIcon'; diff --git a/test/short-urls/helpers/ShortUrlDetailLink.test.tsx b/test/short-urls/helpers/ShortUrlDetailLink.test.tsx index 5dfe257b..83671e5a 100644 --- a/test/short-urls/helpers/ShortUrlDetailLink.test.tsx +++ b/test/short-urls/helpers/ShortUrlDetailLink.test.tsx @@ -1,7 +1,7 @@ import { shallow, ShallowWrapper } from 'enzyme'; import { Link } from 'react-router-dom'; import { Mock } from 'ts-mockery'; -import ShortUrlDetailLink, { LinkSuffix } from '../../../src/short-urls/helpers/ShortUrlDetailLink'; +import { ShortUrlDetailLink, LinkSuffix } from '../../../src/short-urls/helpers/ShortUrlDetailLink'; import { NotFoundServer, ReachableServer } from '../../../src/servers/data'; import { ShortUrl } from '../../../src/short-urls/data'; diff --git a/test/short-urls/helpers/ShortUrlVisitsCount.test.tsx b/test/short-urls/helpers/ShortUrlVisitsCount.test.tsx index e6420e9b..474802f1 100644 --- a/test/short-urls/helpers/ShortUrlVisitsCount.test.tsx +++ b/test/short-urls/helpers/ShortUrlVisitsCount.test.tsx @@ -1,7 +1,7 @@ import { shallow, ShallowWrapper } from 'enzyme'; import { UncontrolledTooltip } from 'reactstrap'; import { Mock } from 'ts-mockery'; -import ShortUrlVisitsCount from '../../../src/short-urls/helpers/ShortUrlVisitsCount'; +import { ShortUrlVisitsCount } from '../../../src/short-urls/helpers/ShortUrlVisitsCount'; import { ShortUrl } from '../../../src/short-urls/data'; describe('', () => { diff --git a/test/short-urls/helpers/ShortUrlsRow.test.tsx b/test/short-urls/helpers/ShortUrlsRow.test.tsx index fcb9b562..fd917cf5 100644 --- a/test/short-urls/helpers/ShortUrlsRow.test.tsx +++ b/test/short-urls/helpers/ShortUrlsRow.test.tsx @@ -3,9 +3,9 @@ import { assoc, toString } from 'ramda'; import { Mock } from 'ts-mockery'; import { ExternalLink } from 'react-external-link'; import { formatISO } from 'date-fns'; -import createShortUrlsRow from '../../../src/short-urls/helpers/ShortUrlsRow'; -import Tag from '../../../src/tags/helpers/Tag'; -import ColorGenerator from '../../../src/utils/services/ColorGenerator'; +import { ShortUrlsRow as createShortUrlsRow } from '../../../src/short-urls/helpers/ShortUrlsRow'; +import { Tag } from '../../../src/tags/helpers/Tag'; +import { ColorGenerator } from '../../../src/utils/services/ColorGenerator'; import { StateFlagTimeout } from '../../../src/utils/helpers/hooks'; import { ShortUrl } from '../../../src/short-urls/data'; import { ReachableServer } from '../../../src/servers/data'; diff --git a/test/short-urls/helpers/ShortUrlsRowMenu.test.tsx b/test/short-urls/helpers/ShortUrlsRowMenu.test.tsx index 6476e312..0a967ad9 100644 --- a/test/short-urls/helpers/ShortUrlsRowMenu.test.tsx +++ b/test/short-urls/helpers/ShortUrlsRowMenu.test.tsx @@ -1,7 +1,7 @@ import { shallow, ShallowWrapper } from 'enzyme'; import { DropdownItem } from 'reactstrap'; import { Mock } from 'ts-mockery'; -import createShortUrlsRowMenu from '../../../src/short-urls/helpers/ShortUrlsRowMenu'; +import { ShortUrlsRowMenu as createShortUrlsRowMenu } from '../../../src/short-urls/helpers/ShortUrlsRowMenu'; import { ReachableServer } from '../../../src/servers/data'; import { ShortUrl } from '../../../src/short-urls/data'; import { DropdownBtnMenu } from '../../../src/utils/DropdownBtnMenu'; diff --git a/test/tags/TagCard.test.tsx b/test/tags/TagCard.test.tsx index 94189d12..914f143e 100644 --- a/test/tags/TagCard.test.tsx +++ b/test/tags/TagCard.test.tsx @@ -1,9 +1,9 @@ import { shallow, ShallowWrapper } from 'enzyme'; import { Link } from 'react-router-dom'; import { Mock } from 'ts-mockery'; -import createTagCard from '../../src/tags/TagCard'; -import TagBullet from '../../src/tags/helpers/TagBullet'; -import ColorGenerator from '../../src/utils/services/ColorGenerator'; +import { TagCard as createTagCard } from '../../src/tags/TagCard'; +import { TagBullet } from '../../src/tags/helpers/TagBullet'; +import { ColorGenerator } from '../../src/utils/services/ColorGenerator'; import { ReachableServer } from '../../src/servers/data'; describe('', () => { diff --git a/test/tags/TagsTableRow.test.tsx b/test/tags/TagsTableRow.test.tsx index bd8c5191..ffced252 100644 --- a/test/tags/TagsTableRow.test.tsx +++ b/test/tags/TagsTableRow.test.tsx @@ -4,7 +4,7 @@ import { Link } from 'react-router-dom'; import { DropdownItem } from 'reactstrap'; import { TagsTableRow as createTagsTableRow } from '../../src/tags/TagsTableRow'; import { ReachableServer } from '../../src/servers/data'; -import ColorGenerator from '../../src/utils/services/ColorGenerator'; +import { ColorGenerator } from '../../src/utils/services/ColorGenerator'; import { DropdownBtnMenu } from '../../src/utils/DropdownBtnMenu'; describe('', () => { diff --git a/test/tags/helpers/DeleteTagConfirmModal.test.tsx b/test/tags/helpers/DeleteTagConfirmModal.test.tsx index f9bb7925..b8326fd9 100644 --- a/test/tags/helpers/DeleteTagConfirmModal.test.tsx +++ b/test/tags/helpers/DeleteTagConfirmModal.test.tsx @@ -1,6 +1,6 @@ import { shallow, ShallowWrapper } from 'enzyme'; import { Button, Modal, ModalBody, ModalFooter } from 'reactstrap'; -import DeleteTagConfirmModal from '../../../src/tags/helpers/DeleteTagConfirmModal'; +import { DeleteTagConfirmModal } from '../../../src/tags/helpers/DeleteTagConfirmModal'; import { TagDeletion } from '../../../src/tags/reducers/tagDelete'; describe('', () => { diff --git a/test/tags/helpers/EditTagModal.test.tsx b/test/tags/helpers/EditTagModal.test.tsx index 266f5d7a..6140caf6 100644 --- a/test/tags/helpers/EditTagModal.test.tsx +++ b/test/tags/helpers/EditTagModal.test.tsx @@ -3,8 +3,8 @@ import { Mock } from 'ts-mockery'; import { Button, Input, Modal, ModalHeader, Popover } from 'reactstrap'; import { HexColorPicker } from 'react-colorful'; import { TagEdition } from '../../../src/tags/reducers/tagEdit'; -import createEditTagModal from '../../../src/tags/helpers/EditTagModal'; -import ColorGenerator from '../../../src/utils/services/ColorGenerator'; +import { EditTagModal as createEditTagModal } from '../../../src/tags/helpers/EditTagModal'; +import { ColorGenerator } from '../../../src/utils/services/ColorGenerator'; import { Result } from '../../../src/utils/Result'; import { ProblemDetailsError } from '../../../src/api/types'; import { ShlinkApiError } from '../../../src/api/ShlinkApiError'; diff --git a/test/tags/helpers/Tag.test.tsx b/test/tags/helpers/Tag.test.tsx index 53a4bb4b..11ecfc4e 100644 --- a/test/tags/helpers/Tag.test.tsx +++ b/test/tags/helpers/Tag.test.tsx @@ -1,9 +1,9 @@ import { Mock } from 'ts-mockery'; import { shallow, ShallowWrapper } from 'enzyme'; import { ReactNode } from 'react'; -import ColorGenerator from '../../../src/utils/services/ColorGenerator'; +import { ColorGenerator } from '../../../src/utils/services/ColorGenerator'; import { MAIN_COLOR } from '../../../src/utils/theme'; -import Tag from '../../../src/tags/helpers/Tag'; +import { Tag } from '../../../src/tags/helpers/Tag'; describe('', () => { const onClick = jest.fn(); diff --git a/test/tags/helpers/TagsSelector.test.tsx b/test/tags/helpers/TagsSelector.test.tsx index b4d1f6fa..143e32da 100644 --- a/test/tags/helpers/TagsSelector.test.tsx +++ b/test/tags/helpers/TagsSelector.test.tsx @@ -1,7 +1,7 @@ import { shallow, ShallowWrapper } from 'enzyme'; import { Mock } from 'ts-mockery'; -import createTagsSelector from '../../../src/tags/helpers/TagsSelector'; -import ColorGenerator from '../../../src/utils/services/ColorGenerator'; +import { TagsSelector as createTagsSelector } from '../../../src/tags/helpers/TagsSelector'; +import { ColorGenerator } from '../../../src/utils/services/ColorGenerator'; import { TagsList } from '../../../src/tags/reducers/tagsList'; import { Settings } from '../../../src/settings/reducers/settings'; diff --git a/test/tags/reducers/tagEdit.test.ts b/test/tags/reducers/tagEdit.test.ts index 63c6b719..d000b343 100644 --- a/test/tags/reducers/tagEdit.test.ts +++ b/test/tags/reducers/tagEdit.test.ts @@ -9,7 +9,7 @@ import reducer, { EditTagAction, } from '../../../src/tags/reducers/tagEdit'; import { ShlinkApiClient } from '../../../src/api/services/ShlinkApiClient'; -import ColorGenerator from '../../../src/utils/services/ColorGenerator'; +import { ColorGenerator } from '../../../src/utils/services/ColorGenerator'; import { ShlinkState } from '../../../src/container/types'; describe('tagEditReducer', () => { diff --git a/test/utils/DateInput.test.tsx b/test/utils/DateInput.test.tsx index 4ec93544..4a0ab9c0 100644 --- a/test/utils/DateInput.test.tsx +++ b/test/utils/DateInput.test.tsx @@ -1,7 +1,7 @@ import { shallow, ShallowWrapper } from 'enzyme'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Mock } from 'ts-mockery'; -import DateInput, { DateInputProps } from '../../src/utils/DateInput'; +import { DateInput, DateInputProps } from '../../src/utils/DateInput'; describe('', () => { let wrapped: ShallowWrapper; diff --git a/test/utils/Message.test.tsx b/test/utils/Message.test.tsx index 2ad9d531..4c658c20 100644 --- a/test/utils/Message.test.tsx +++ b/test/utils/Message.test.tsx @@ -2,7 +2,7 @@ import { shallow, ShallowWrapper } from 'enzyme'; import { PropsWithChildren } from 'react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Card } from 'reactstrap'; -import Message, { MessageProps } from '../../src/utils/Message'; +import { Message, MessageProps } from '../../src/utils/Message'; describe('', () => { let wrapper: ShallowWrapper; diff --git a/test/utils/PaginationDropdown.test.tsx b/test/utils/PaginationDropdown.test.tsx index 5a413a86..c3718398 100644 --- a/test/utils/PaginationDropdown.test.tsx +++ b/test/utils/PaginationDropdown.test.tsx @@ -1,6 +1,6 @@ import { shallow, ShallowWrapper } from 'enzyme'; import { DropdownItem } from 'reactstrap'; -import PaginationDropdown from '../../src/utils/PaginationDropdown'; +import { PaginationDropdown } from '../../src/utils/PaginationDropdown'; describe('', () => { const setValue = jest.fn(); diff --git a/test/utils/dates/DateRangeRow.test.tsx b/test/utils/dates/DateRangeRow.test.tsx index 74cbf2a2..79c957c6 100644 --- a/test/utils/dates/DateRangeRow.test.tsx +++ b/test/utils/dates/DateRangeRow.test.tsx @@ -1,6 +1,6 @@ import { shallow, ShallowWrapper } from 'enzyme'; -import DateRangeRow from '../../../src/utils/dates/DateRangeRow'; -import DateInput from '../../../src/utils/DateInput'; +import { DateRangeRow } from '../../../src/utils/dates/DateRangeRow'; +import { DateInput } from '../../../src/utils/DateInput'; describe('', () => { let wrapper: ShallowWrapper; diff --git a/test/utils/dates/DateRangeSelector.test.tsx b/test/utils/dates/DateRangeSelector.test.tsx index 629f740d..4d2a8a49 100644 --- a/test/utils/dates/DateRangeSelector.test.tsx +++ b/test/utils/dates/DateRangeSelector.test.tsx @@ -4,7 +4,7 @@ import { Mock } from 'ts-mockery'; import { DateRangeSelector, DateRangeSelectorProps } from '../../../src/utils/dates/DateRangeSelector'; import { DateInterval } from '../../../src/utils/dates/types'; import { DateIntervalDropdownItems } from '../../../src/utils/dates/DateIntervalDropdownItems'; -import DateRangeRow from '../../../src/utils/dates/DateRangeRow'; +import { DateRangeRow } from '../../../src/utils/dates/DateRangeRow'; describe('', () => { let wrapper: ShallowWrapper; diff --git a/test/utils/services/ColorGenerator.test.ts b/test/utils/services/ColorGenerator.test.ts index c8f13894..86059d8f 100644 --- a/test/utils/services/ColorGenerator.test.ts +++ b/test/utils/services/ColorGenerator.test.ts @@ -1,6 +1,6 @@ import { Mock } from 'ts-mockery'; -import ColorGenerator from '../../../src/utils/services/ColorGenerator'; -import LocalStorage from '../../../src/utils/services/LocalStorage'; +import { ColorGenerator } from '../../../src/utils/services/ColorGenerator'; +import { LocalStorage } from '../../../src/utils/services/LocalStorage'; import { MAIN_COLOR } from '../../../src/utils/theme'; describe('ColorGenerator', () => { diff --git a/test/utils/services/Storage.test.ts b/test/utils/services/LocalStorage.test.ts similarity index 94% rename from test/utils/services/Storage.test.ts rename to test/utils/services/LocalStorage.test.ts index b8fd25b4..4f59cc1d 100644 --- a/test/utils/services/Storage.test.ts +++ b/test/utils/services/LocalStorage.test.ts @@ -1,5 +1,5 @@ import { Mock } from 'ts-mockery'; -import LocalStorage from '../../../src/utils/services/LocalStorage'; +import { LocalStorage } from '../../../src/utils/services/LocalStorage'; describe('LocalStorage', () => { const getItem = jest.fn((key) => (key === 'shlink.foo' ? JSON.stringify({ foo: 'bar' }) : null)); diff --git a/test/visits/OrphanVisits.test.tsx b/test/visits/OrphanVisits.test.tsx index 87129f32..b4641a3a 100644 --- a/test/visits/OrphanVisits.test.tsx +++ b/test/visits/OrphanVisits.test.tsx @@ -7,7 +7,7 @@ import { VisitsStats } from '../../src/visits/VisitsStats'; import { Settings } from '../../src/settings/reducers/settings'; import { ReportExporter } from '../../src/common/services/ReportExporter'; import { SelectedServer } from '../../src/servers/data'; -import VisitsHeader from '../../src/visits/VisitsHeader'; +import { VisitsHeader } from '../../src/visits/VisitsHeader'; jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), diff --git a/test/visits/ShortUrlVisits.test.tsx b/test/visits/ShortUrlVisits.test.tsx index 33713113..984648f2 100644 --- a/test/visits/ShortUrlVisits.test.tsx +++ b/test/visits/ShortUrlVisits.test.tsx @@ -1,8 +1,8 @@ import { shallow, ShallowWrapper } from 'enzyme'; import { identity } from 'ramda'; import { Mock } from 'ts-mockery'; -import createShortUrlVisits, { ShortUrlVisitsProps } from '../../src/visits/ShortUrlVisits'; -import ShortUrlVisitsHeader from '../../src/visits/ShortUrlVisitsHeader'; +import { ShortUrlVisits as createShortUrlVisits, ShortUrlVisitsProps } from '../../src/visits/ShortUrlVisits'; +import { ShortUrlVisitsHeader } from '../../src/visits/ShortUrlVisitsHeader'; import { ShortUrlVisits as ShortUrlVisitsState } from '../../src/visits/reducers/shortUrlVisits'; import { ShortUrlDetail } from '../../src/short-urls/reducers/shortUrlDetail'; import { VisitsStats } from '../../src/visits/VisitsStats'; diff --git a/test/visits/ShortUrlVisitsHeader.test.tsx b/test/visits/ShortUrlVisitsHeader.test.tsx index b646dcce..ba814ebd 100644 --- a/test/visits/ShortUrlVisitsHeader.test.tsx +++ b/test/visits/ShortUrlVisitsHeader.test.tsx @@ -1,7 +1,7 @@ import { shallow, ShallowWrapper } from 'enzyme'; import { ExternalLink } from 'react-external-link'; import { Mock } from 'ts-mockery'; -import ShortUrlVisitsHeader from '../../src/visits/ShortUrlVisitsHeader'; +import { ShortUrlVisitsHeader } from '../../src/visits/ShortUrlVisitsHeader'; import { ShortUrlDetail } from '../../src/short-urls/reducers/shortUrlDetail'; import { ShortUrlVisits } from '../../src/visits/reducers/shortUrlVisits'; import { Time } from '../../src/utils/Time'; diff --git a/test/visits/TagVisits.test.tsx b/test/visits/TagVisits.test.tsx index 965d1ad1..114b68c0 100644 --- a/test/visits/TagVisits.test.tsx +++ b/test/visits/TagVisits.test.tsx @@ -1,8 +1,8 @@ import { shallow, ShallowWrapper } from 'enzyme'; import { Mock } from 'ts-mockery'; -import createTagVisits, { TagVisitsProps } from '../../src/visits/TagVisits'; -import TagVisitsHeader from '../../src/visits/TagVisitsHeader'; -import ColorGenerator from '../../src/utils/services/ColorGenerator'; +import { TagVisits as createTagVisits, TagVisitsProps } from '../../src/visits/TagVisits'; +import { TagVisitsHeader } from '../../src/visits/TagVisitsHeader'; +import { ColorGenerator } from '../../src/utils/services/ColorGenerator'; import { TagVisits as TagVisitsStats } from '../../src/visits/reducers/tagVisits'; import { VisitsStats } from '../../src/visits/VisitsStats'; import { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub'; diff --git a/test/visits/TagVisitsHeader.test.tsx b/test/visits/TagVisitsHeader.test.tsx index 9abca3a7..a48984e9 100644 --- a/test/visits/TagVisitsHeader.test.tsx +++ b/test/visits/TagVisitsHeader.test.tsx @@ -1,9 +1,9 @@ import { shallow, ShallowWrapper } from 'enzyme'; import { Mock } from 'ts-mockery'; -import Tag from '../../src/tags/helpers/Tag'; -import TagVisitsHeader from '../../src/visits/TagVisitsHeader'; +import { Tag } from '../../src/tags/helpers/Tag'; +import { TagVisitsHeader } from '../../src/visits/TagVisitsHeader'; import { TagVisits } from '../../src/visits/reducers/tagVisits'; -import ColorGenerator from '../../src/utils/services/ColorGenerator'; +import { ColorGenerator } from '../../src/utils/services/ColorGenerator'; describe('', () => { let wrapper: ShallowWrapper; diff --git a/test/visits/VisitsHeader.test.tsx b/test/visits/VisitsHeader.test.tsx index 53d13630..f05cb6a0 100644 --- a/test/visits/VisitsHeader.test.tsx +++ b/test/visits/VisitsHeader.test.tsx @@ -1,6 +1,6 @@ import { shallow, ShallowWrapper } from 'enzyme'; import { Mock } from 'ts-mockery'; -import VisitsHeader from '../../src/visits/VisitsHeader'; +import { VisitsHeader } from '../../src/visits/VisitsHeader'; import { Visit } from '../../src/visits/types'; describe('', () => { diff --git a/test/visits/VisitsStats.test.tsx b/test/visits/VisitsStats.test.tsx index 2c6fbf1c..0c7d3de4 100644 --- a/test/visits/VisitsStats.test.tsx +++ b/test/visits/VisitsStats.test.tsx @@ -4,10 +4,10 @@ import { sum } from 'ramda'; import { Mock } from 'ts-mockery'; import { Route } from 'react-router-dom'; import { VisitsStats } from '../../src/visits/VisitsStats'; -import Message from '../../src/utils/Message'; +import { Message } from '../../src/utils/Message'; import { Visit, VisitsInfo } from '../../src/visits/types'; import { LineChartCard } from '../../src/visits/charts/LineChartCard'; -import VisitsTable from '../../src/visits/VisitsTable'; +import { VisitsTable } from '../../src/visits/VisitsTable'; import { Result } from '../../src/utils/Result'; import { Settings } from '../../src/settings/reducers/settings'; import { SelectedServer } from '../../src/servers/data'; diff --git a/test/visits/VisitsTable.test.tsx b/test/visits/VisitsTable.test.tsx index 279ada47..4f5fc10e 100644 --- a/test/visits/VisitsTable.test.tsx +++ b/test/visits/VisitsTable.test.tsx @@ -1,6 +1,6 @@ import { shallow, ShallowWrapper } from 'enzyme'; import { Mock } from 'ts-mockery'; -import VisitsTable, { VisitsTableProps } from '../../src/visits/VisitsTable'; +import { VisitsTable, VisitsTableProps } from '../../src/visits/VisitsTable'; import { rangeOf } from '../../src/utils/utils'; import { SimplePaginator } from '../../src/common/SimplePaginator'; import { SearchField } from '../../src/utils/SearchField'; diff --git a/test/visits/charts/SortableBarChartCard.test.tsx b/test/visits/charts/SortableBarChartCard.test.tsx index dcf6c855..a9ebe28a 100644 --- a/test/visits/charts/SortableBarChartCard.test.tsx +++ b/test/visits/charts/SortableBarChartCard.test.tsx @@ -1,7 +1,7 @@ import { shallow, ShallowWrapper } from 'enzyme'; import { range } from 'ramda'; import { OrderingDropdown } from '../../../src/utils/OrderingDropdown'; -import PaginationDropdown from '../../../src/utils/PaginationDropdown'; +import { PaginationDropdown } from '../../../src/utils/PaginationDropdown'; import { rangeOf } from '../../../src/utils/utils'; import { OrderDir } from '../../../src/utils/helpers/ordering'; import { Stats } from '../../../src/visits/types'; diff --git a/test/visits/helpers/MapModal.test.tsx b/test/visits/helpers/MapModal.test.tsx index 08f5d86e..f582a582 100644 --- a/test/visits/helpers/MapModal.test.tsx +++ b/test/visits/helpers/MapModal.test.tsx @@ -1,7 +1,7 @@ import { shallow, ShallowWrapper } from 'enzyme'; import { Marker, Popup } from 'react-leaflet'; import { Modal } from 'reactstrap'; -import MapModal from '../../../src/visits/helpers/MapModal'; +import { MapModal } from '../../../src/visits/helpers/MapModal'; import { CityStats } from '../../../src/visits/types'; describe('', () => { diff --git a/test/visits/helpers/OpenMapModalBtn.test.tsx b/test/visits/helpers/OpenMapModalBtn.test.tsx index 12fd9443..89eea4fc 100644 --- a/test/visits/helpers/OpenMapModalBtn.test.tsx +++ b/test/visits/helpers/OpenMapModalBtn.test.tsx @@ -1,8 +1,8 @@ import { shallow, ShallowWrapper } from 'enzyme'; import { Dropdown, DropdownItem, UncontrolledTooltip } from 'reactstrap'; import { Mock } from 'ts-mockery'; -import OpenMapModalBtn from '../../../src/visits/helpers/OpenMapModalBtn'; -import MapModal from '../../../src/visits/helpers/MapModal'; +import { OpenMapModalBtn } from '../../../src/visits/helpers/OpenMapModalBtn'; +import { MapModal } from '../../../src/visits/helpers/MapModal'; import { CityStats } from '../../../src/visits/types'; describe('', () => { From 56150e870726fa8778ff12a77dad3249db3e9f56 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sat, 28 May 2022 12:16:17 +0200 Subject: [PATCH 007/101] Migrated TagCard test to react testing library --- src/tags/TagCard.tsx | 10 ++- src/tags/helpers/DeleteTagConfirmModal.tsx | 4 +- test/tags/TagCard.test.tsx | 91 ++++++++++------------ 3 files changed, 50 insertions(+), 55 deletions(-) diff --git a/src/tags/TagCard.tsx b/src/tags/TagCard.tsx index 29d90828..a82eb3e1 100644 --- a/src/tags/TagCard.tsx +++ b/src/tags/TagCard.tsx @@ -40,10 +40,16 @@ export const TagCard = ( return ( - -
- - Delete tag - + Delete tag Are you sure you want to delete tag {tag}? {error && ( diff --git a/test/tags/TagCard.test.tsx b/test/tags/TagCard.test.tsx index 914f143e..cb31f3ad 100644 --- a/test/tags/TagCard.test.tsx +++ b/test/tags/TagCard.test.tsx @@ -1,69 +1,60 @@ -import { shallow, ShallowWrapper } from 'enzyme'; -import { Link } from 'react-router-dom'; +import userEvent from '@testing-library/user-event'; +import { render, screen } from '@testing-library/react'; +import { MemoryRouter } from 'react-router-dom'; import { Mock } from 'ts-mockery'; import { TagCard as createTagCard } from '../../src/tags/TagCard'; -import { TagBullet } from '../../src/tags/helpers/TagBullet'; import { ColorGenerator } from '../../src/utils/services/ColorGenerator'; import { ReachableServer } from '../../src/servers/data'; describe('', () => { - let wrapper: ShallowWrapper; - const DeleteTagConfirmModal = jest.fn(); - const EditTagModal = jest.fn(); - const TagCard = createTagCard(DeleteTagConfirmModal, EditTagModal, Mock.all()); - const createWrapper = (tag = 'ssr') => { - wrapper = shallow( - ({ id: '1' })} - displayed - toggle={() => {}} - />, - ); + const TagCard = createTagCard( + ({ isOpen }) => DeleteTagConfirmModal {isOpen ? '[Open]' : '[Closed]'}, + ({ isOpen }) => EditTagModal {isOpen ? '[Open]' : '[Closed]'}, + Mock.of({ getColorForKey: () => '' }), + ); + const setUp = (tag = 'ssr') => ({ + user: userEvent.setup(), + ...render( + + ({ id: '1' })} + displayed + toggle={() => {}} + /> + , + ), + }); - return wrapper; - }; - - beforeEach(() => createWrapper()); - - afterEach(() => wrapper.unmount()); afterEach(jest.resetAllMocks); it.each([ - ['ssr', '/server/1/list-short-urls/1?tags=ssr'], - ['ssr-&-foo', '/server/1/list-short-urls/1?tags=ssr-%26-foo'], - ])('shows a TagBullet and a link to the list filtering by the tag', (tag, expectedLink) => { - const wrapper = createWrapper(tag); - const links = wrapper.find(Link); - const bullet = wrapper.find(TagBullet); + ['ssr', '/server/1/list-short-urls/1?tags=ssr', '/server/1/tag/ssr/visits'], + ['ssr-&-foo', '/server/1/list-short-urls/1?tags=ssr-%26-foo', '/server/1/tag/ssr-&-foo/visits'], + ])('shows expected links for provided tags', (tag, shortUrlsLink, visitsLink) => { + setUp(tag); - expect(links.at(0).prop('to')).toEqual(expectedLink); - expect(bullet.prop('tag')).toEqual(tag); + expect(screen.getByText('48').parentNode).toHaveAttribute('href', shortUrlsLink); + expect(screen.getByText('23,257').parentNode).toHaveAttribute('href', visitsLink); }); - it('displays delete modal when delete btn is clicked', () => { - const delBtn = wrapper.find('.tag-card__btn').at(0); + it('displays delete modal when delete btn is clicked', async () => { + const { user } = setUp(); - expect(wrapper.find(DeleteTagConfirmModal).prop('isOpen')).toEqual(false); - delBtn.simulate('click'); - expect(wrapper.find(DeleteTagConfirmModal).prop('isOpen')).toEqual(true); + expect(screen.getByText(/^DeleteTagConfirmModal/)).not.toHaveTextContent('[Open]'); + expect(screen.getByText(/^DeleteTagConfirmModal/)).toHaveTextContent('[Closed]'); + await user.click(screen.getByLabelText('Delete tag')); + expect(screen.getByText(/^DeleteTagConfirmModal/)).toHaveTextContent('[Open]'); + expect(screen.getByText(/^DeleteTagConfirmModal/)).not.toHaveTextContent('[Closed]'); }); - it('displays edit modal when edit btn is clicked', () => { - const editBtn = wrapper.find('.tag-card__btn').at(1); + it('displays edit modal when edit btn is clicked', async () => { + const { user } = setUp(); - expect(wrapper.find(EditTagModal).prop('isOpen')).toEqual(false); - editBtn.simulate('click'); - expect(wrapper.find(EditTagModal).prop('isOpen')).toEqual(true); - }); - - it('shows expected tag stats', () => { - const links = wrapper.find(Link); - - expect(links).toHaveLength(2); - expect(links.at(0).prop('to')).toEqual('/server/1/list-short-urls/1?tags=ssr'); - expect(links.at(0).text()).toContain('48'); - expect(links.at(1).prop('to')).toEqual('/server/1/tag/ssr/visits'); - expect(links.at(1).text()).toContain('23,257'); + expect(screen.getByText(/^EditTagModal/)).not.toHaveTextContent('[Open]'); + expect(screen.getByText(/^EditTagModal/)).toHaveTextContent('[Closed]'); + await user.click(screen.getByLabelText('Edit tag')); + expect(screen.getByText(/^EditTagModal/)).toHaveTextContent('[Open]'); + expect(screen.getByText(/^EditTagModal/)).not.toHaveTextContent('[Closed]'); }); }); From 89f830d9bbea21c01d3b833322efd91032500dbc Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sat, 28 May 2022 12:33:50 +0200 Subject: [PATCH 008/101] Migrated DoughnutChartLegend test to react testing library --- .../charts/DoughnutChartLegend.test.tsx | 23 +++++++++++-------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/test/visits/charts/DoughnutChartLegend.test.tsx b/test/visits/charts/DoughnutChartLegend.test.tsx index 0e7f1b42..58f63ab3 100644 --- a/test/visits/charts/DoughnutChartLegend.test.tsx +++ b/test/visits/charts/DoughnutChartLegend.test.tsx @@ -1,11 +1,11 @@ -import { shallow } from 'enzyme'; +import { render, screen } from '@testing-library/react'; import { Mock } from 'ts-mockery'; import { Chart, ChartDataset } from 'chart.js'; import { DoughnutChartLegend } from '../../../src/visits/charts/DoughnutChartLegend'; describe('', () => { const labels = ['foo', 'bar', 'baz', 'foo2', 'bar2']; - const colors = ['foo_color', 'bar_color', 'baz_color']; + const colors = ['green', 'blue', 'yellow']; const defaultColor = 'red'; const datasets = [Mock.of({ backgroundColor: colors })]; const chart = Mock.of({ @@ -16,18 +16,21 @@ describe('', () => { }); it('renders the expected amount of items with expected colors and labels', () => { - const wrapper = shallow(); - const items = wrapper.find('li'); + render(); + + const items = screen.getAllByRole('listitem'); expect.assertions(labels.length * 2 + 1); expect(items).toHaveLength(labels.length); - labels.forEach((label, index) => { - const item = items.at(index); - expect(item.find('.doughnut-chart-legend__item-color').prop('style')).toEqual({ - backgroundColor: colors[index] ?? defaultColor, - }); - expect(item.find('.doughnut-chart-legend__item-text').text()).toEqual(label); + labels.forEach((label, index) => { + const item = items[index]; + + expect(item.querySelector('.doughnut-chart-legend__item-color')).toHaveAttribute( + 'style', + `background-color: ${colors[index] ?? defaultColor};`, + ); + expect(item.querySelector('.doughnut-chart-legend__item-text')).toHaveTextContent(label); }); }); }); From 357c4786401151ce70b71a727e0c9b3a49221ea0 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sat, 28 May 2022 12:54:33 +0200 Subject: [PATCH 009/101] Migrated LineChartCard test to react testing library --- src/visits/charts/LineChartCard.tsx | 2 +- test/__mocks__/setUpCanvas.ts | 4 +- test/visits/charts/LineChartCard.test.tsx | 121 ++--- .../__snapshots__/LineChartCard.test.tsx.snap | 461 ++++++++++++++++++ 4 files changed, 507 insertions(+), 81 deletions(-) create mode 100644 test/visits/charts/__snapshots__/LineChartCard.test.tsx.snap diff --git a/src/visits/charts/LineChartCard.tsx b/src/visits/charts/LineChartCard.tsx index 039afce5..a6e4b4ba 100644 --- a/src/visits/charts/LineChartCard.tsx +++ b/src/visits/charts/LineChartCard.tsx @@ -235,7 +235,7 @@ export const LineChartCard = ( return ( - + {title}
diff --git a/test/__mocks__/setUpCanvas.ts b/test/__mocks__/setUpCanvas.ts index 9308a25d..66c32b3b 100644 --- a/test/__mocks__/setUpCanvas.ts +++ b/test/__mocks__/setUpCanvas.ts @@ -4,7 +4,7 @@ import { render } from '@testing-library/react'; export const setUpCanvas = (element: ReactElement) => { const result = render(element); const { container } = result; - const events = container.querySelector('canvas')?.getContext('2d')?.__getEvents(); // eslint-disable-line no-underscore-dangle + const getEvents = () => container.querySelector('canvas')?.getContext('2d')?.__getEvents(); // eslint-disable-line no-underscore-dangle - return { ...result, events }; + return { ...result, events: getEvents(), getEvents }; }; diff --git a/test/visits/charts/LineChartCard.test.tsx b/test/visits/charts/LineChartCard.test.tsx index e77511d9..474f51fc 100644 --- a/test/visits/charts/LineChartCard.test.tsx +++ b/test/visits/charts/LineChartCard.test.tsx @@ -1,103 +1,68 @@ -import { shallow, ShallowWrapper } from 'enzyme'; -import { CardHeader, DropdownItem } from 'reactstrap'; -import { Line } from 'react-chartjs-2'; +import { screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import { formatISO, subDays, subMonths, subYears } from 'date-fns'; import { Mock } from 'ts-mockery'; import { LineChartCard } from '../../../src/visits/charts/LineChartCard'; -import { ToggleSwitch } from '../../../src/utils/ToggleSwitch'; import { NormalizedVisit } from '../../../src/visits/types'; -import { prettify } from '../../../src/utils/helpers/numbers'; -import { pointerOnHover, renderChartLabel } from '../../../src/utils/helpers/charts'; +import { setUpCanvas } from '../../__mocks__/setUpCanvas'; describe('', () => { - let wrapper: ShallowWrapper; - const createWrapper = (visits: NormalizedVisit[] = [], highlightedVisits: NormalizedVisit[] = []) => { - wrapper = shallow(); - - return wrapper; - }; - - afterEach(() => wrapper?.unmount()); + const setUp = (visits: NormalizedVisit[] = [], highlightedVisits: NormalizedVisit[] = []) => ({ + user: userEvent.setup(), + ...setUpCanvas(), + }); it('renders provided title', () => { - const wrapper = createWrapper(); - const header = wrapper.find(CardHeader); - - expect(header.html()).toContain('Cool title'); + setUp(); + expect(screen.getByRole('heading')).toHaveTextContent('Cool title'); }); it.each([ - [[], 'monthly'], - [[{ date: formatISO(subDays(new Date(), 1)) }], 'hourly'], - [[{ date: formatISO(subDays(new Date(), 3)) }], 'daily'], - [[{ date: formatISO(subMonths(new Date(), 2)) }], 'weekly'], - [[{ date: formatISO(subMonths(new Date(), 6)) }], 'weekly'], - [[{ date: formatISO(subMonths(new Date(), 7)) }], 'monthly'], - [[{ date: formatISO(subYears(new Date(), 1)) }], 'monthly'], - ])('renders group menu and selects proper grouping item based on visits dates', (visits, expectedActiveItem) => { - const wrapper = createWrapper(visits.map((visit) => Mock.of(visit))); - const items = wrapper.find(DropdownItem); + [[], 0], + [[{ date: formatISO(subDays(new Date(), 1)) }], 3], + [[{ date: formatISO(subDays(new Date(), 3)) }], 2], + [[{ date: formatISO(subMonths(new Date(), 2)) }], 1], + [[{ date: formatISO(subMonths(new Date(), 6)) }], 1], + [[{ date: formatISO(subMonths(new Date(), 7)) }], 0], + [[{ date: formatISO(subYears(new Date(), 1)) }], 0], + ])('renders group menu and selects proper grouping item based on visits dates', async ( + visits, + expectedActiveIndex, + ) => { + const { user } = setUp(visits.map((visit) => Mock.of(visit))); + + await user.click(screen.getByRole('button', { name: /Group by/ })); + + const items = screen.getAllByRole('menuitem'); expect(items).toHaveLength(4); - expect(items.at(0).prop('children')).toEqual('Month'); - expect(items.at(0).prop('active')).toEqual(expectedActiveItem === 'monthly'); - expect(items.at(1).prop('children')).toEqual('Week'); - expect(items.at(1).prop('active')).toEqual(expectedActiveItem === 'weekly'); - expect(items.at(2).prop('children')).toEqual('Day'); - expect(items.at(2).prop('active')).toEqual(expectedActiveItem === 'daily'); - expect(items.at(3).prop('children')).toEqual('Hour'); - expect(items.at(3).prop('active')).toEqual(expectedActiveItem === 'hourly'); - }); - - it('renders chart with expected options', () => { - const wrapper = createWrapper(); - const chart = wrapper.find(Line); - - expect(chart.prop('options')).toEqual(expect.objectContaining({ - maintainAspectRatio: false, - plugins: { - legend: { display: false }, - tooltip: { - intersect: false, - axis: 'x', - callbacks: { label: renderChartLabel }, - }, - }, - scales: { - y: { - beginAtZero: true, - ticks: { - precision: 0, - callback: prettify, - }, - }, - x: { - title: { display: true, text: 'Month' }, - }, - }, - onHover: pointerOnHover, - })); + expect(items[0]).toHaveTextContent('Month'); + expect(items[1]).toHaveTextContent('Week'); + expect(items[2]).toHaveTextContent('Day'); + expect(items[3]).toHaveTextContent('Hour'); + expect(items[expectedActiveIndex]).toHaveAttribute('class', expect.stringContaining('active')); }); it.each([ - [[Mock.of({ date: '2016-04-01' })], [], 1], - [[Mock.of({ date: '2016-04-01' })], [Mock.of({ date: '2016-04-01' })], 2], - ])('renders chart with expected data', (visits, highlightedVisits, expectedLines) => { - const wrapper = createWrapper(visits, highlightedVisits); - const chart = wrapper.find(Line); - const { datasets } = chart.prop('data') as any; + [undefined, undefined], + [[], []], + [[Mock.of({ date: '2016-04-01' })], []], + [[Mock.of({ date: '2016-04-01' })], [Mock.of({ date: '2016-04-01' })]], + ])('renders chart with expected data', (visits, highlightedVisits) => { + const { events } = setUp(visits, highlightedVisits); - expect(datasets).toHaveLength(expectedLines); + expect(events).toBeTruthy(); + expect(events).toMatchSnapshot(); }); - it('includes stats for visits with no dates if selected', () => { - const wrapper = createWrapper([ + it('includes stats for visits with no dates if selected', async () => { + const { getEvents, user } = setUp([ Mock.of({ date: '2016-04-01' }), Mock.of({ date: '2016-01-01' }), ]); - expect((wrapper.find(Line).prop('data') as any).labels).toHaveLength(2); - wrapper.find(ToggleSwitch).simulate('change'); - expect((wrapper.find(Line).prop('data') as any).labels).toHaveLength(4); + const eventsBefore = getEvents(); + await user.click(screen.getByLabelText('Skip dates with no visits')); + expect(eventsBefore).not.toEqual(getEvents()); }); }); diff --git a/test/visits/charts/__snapshots__/LineChartCard.test.tsx.snap b/test/visits/charts/__snapshots__/LineChartCard.test.tsx.snap new file mode 100644 index 00000000..105b15cf --- /dev/null +++ b/test/visits/charts/__snapshots__/LineChartCard.test.tsx.snap @@ -0,0 +1,461 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders chart with expected data 1`] = ` +Array [ + Object { + "props": Object { + "a": 1, + "b": 0, + "c": 0, + "d": 1, + "e": 0, + "f": 0, + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "setTransform", + }, + Object { + "props": Object { + "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif", + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "font", + }, + Object { + "props": Object { + "text": "0", + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "measureText", + }, + Object { + "props": Object { + "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif", + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "font", + }, + Object { + "props": Object { + "text": "1", + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "measureText", + }, + Object { + "props": Object { + "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif", + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "font", + }, +] +`; + +exports[` renders chart with expected data 2`] = ` +Array [ + Object { + "props": Object { + "a": 1, + "b": 0, + "c": 0, + "d": 1, + "e": 0, + "f": 0, + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "setTransform", + }, + Object { + "props": Object { + "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif", + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "font", + }, + Object { + "props": Object { + "text": "0", + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "measureText", + }, + Object { + "props": Object { + "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif", + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "font", + }, + Object { + "props": Object { + "text": "1", + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "measureText", + }, + Object { + "props": Object { + "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif", + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "font", + }, +] +`; + +exports[` renders chart with expected data 3`] = ` +Array [ + Object { + "props": Object { + "a": 1, + "b": 0, + "c": 0, + "d": 1, + "e": 0, + "f": 0, + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "setTransform", + }, + Object { + "props": Object { + "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif", + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "font", + }, + Object { + "props": Object { + "text": "0", + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "measureText", + }, + Object { + "props": Object { + "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif", + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "font", + }, + Object { + "props": Object { + "text": "1", + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "measureText", + }, + Object { + "props": Object { + "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif", + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "font", + }, + Object { + "props": Object { + "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif", + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "font", + }, + Object { + "props": Object { + "text": "2016-04", + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "measureText", + }, + Object { + "props": Object { + "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif", + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "font", + }, +] +`; + +exports[` renders chart with expected data 4`] = ` +Array [ + Object { + "props": Object { + "a": 1, + "b": 0, + "c": 0, + "d": 1, + "e": 0, + "f": 0, + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "setTransform", + }, + Object { + "props": Object { + "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif", + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "font", + }, + Object { + "props": Object { + "text": "0", + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "measureText", + }, + Object { + "props": Object { + "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif", + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "font", + }, + Object { + "props": Object { + "text": "1", + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "measureText", + }, + Object { + "props": Object { + "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif", + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "font", + }, + Object { + "props": Object { + "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif", + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "font", + }, + Object { + "props": Object { + "text": "2016-04", + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "measureText", + }, + Object { + "props": Object { + "value": "12px \\"Helvetica Neue\\", 'Helvetica', 'Arial', sans-serif", + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "font", + }, +] +`; From 494e36c84256f2d8f0856f76323e4cf8e563518e Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sun, 29 May 2022 12:18:21 +0200 Subject: [PATCH 010/101] Migrated CreateServer test to react testing library --- src/servers/CreateServer.tsx | 8 +- src/servers/ManageServers.tsx | 6 +- src/servers/services/provideServices.ts | 4 +- .../helpers/CreateShortUrlResult.tsx | 6 +- src/short-urls/helpers/ShortUrlsRow.tsx | 8 +- src/short-urls/services/provideServices.ts | 4 +- src/utils/forms/InputFormGroup.tsx | 30 +++--- src/utils/forms/LabeledFormGroup.tsx | 5 +- src/utils/helpers/hooks.ts | 8 +- src/utils/services/provideServices.ts | 4 +- test/servers/CreateServer.test.tsx | 99 ++++++++++--------- test/servers/ManageServers.test.tsx | 6 +- .../helpers/CreateShortUrlResult.test.tsx | 6 +- test/short-urls/helpers/ShortUrlsRow.test.tsx | 12 +-- 14 files changed, 106 insertions(+), 100 deletions(-) diff --git a/src/servers/CreateServer.tsx b/src/servers/CreateServer.tsx index bcc60e46..df96e838 100644 --- a/src/servers/CreateServer.tsx +++ b/src/servers/CreateServer.tsx @@ -4,7 +4,7 @@ import { Button } from 'reactstrap'; import { useNavigate } from 'react-router-dom'; import { Result } from '../utils/Result'; import { NoMenuLayout } from '../common/NoMenuLayout'; -import { StateFlagTimeout, useGoBack, useToggle } from '../utils/helpers/hooks'; +import { TimeoutToggle, useGoBack, useToggle } from '../utils/helpers/hooks'; import { ServerForm } from './helpers/ServerForm'; import { ImportServersBtnProps } from './helpers/ImportServersBtn'; import { ServerData, ServersMap, ServerWithId } from './data'; @@ -26,14 +26,14 @@ const ImportResult = ({ type }: { type: 'error' | 'success' }) => (
); -export const CreateServer = (ImportServersBtn: FC, useStateFlagTimeout: StateFlagTimeout) => ( +export const CreateServer = (ImportServersBtn: FC, useTimeoutToggle: TimeoutToggle) => ( { servers, createServer }: CreateServerProps, ) => { const navigate = useNavigate(); const goBack = useGoBack(); const hasServers = !!Object.keys(servers).length; - const [serversImported, setServersImported] = useStateFlagTimeout(false, SHOW_IMPORT_MSG_TIME); - const [errorImporting, setErrorImporting] = useStateFlagTimeout(false, SHOW_IMPORT_MSG_TIME); + const [serversImported, setServersImported] = useTimeoutToggle(false, SHOW_IMPORT_MSG_TIME); + const [errorImporting, setErrorImporting] = useTimeoutToggle(false, SHOW_IMPORT_MSG_TIME); const [isConfirmModalOpen, toggleConfirmModal] = useToggle(); const [serverData, setServerData] = useState(); const save = () => { diff --git a/src/servers/ManageServers.tsx b/src/servers/ManageServers.tsx index 53c364ce..71c859a8 100644 --- a/src/servers/ManageServers.tsx +++ b/src/servers/ManageServers.tsx @@ -7,7 +7,7 @@ import { NoMenuLayout } from '../common/NoMenuLayout'; import { SimpleCard } from '../utils/SimpleCard'; import { SearchField } from '../utils/SearchField'; import { Result } from '../utils/Result'; -import { StateFlagTimeout } from '../utils/helpers/hooks'; +import { TimeoutToggle } from '../utils/helpers/hooks'; import { ImportServersBtnProps } from './helpers/ImportServersBtn'; import { ServersMap } from './data'; import { ManageServersRowProps } from './ManageServersRow'; @@ -22,7 +22,7 @@ const SHOW_IMPORT_MSG_TIME = 4000; export const ManageServers = ( serversExporter: ServersExporter, ImportServersBtn: FC, - useStateFlagTimeout: StateFlagTimeout, + useTimeoutToggle: TimeoutToggle, ManageServersRow: FC, ): FC => ({ servers }) => { const allServers = Object.values(servers); @@ -31,7 +31,7 @@ export const ManageServers = ( allServers.filter(({ name, url }) => `${name} ${url}`.match(searchTerm)), ); const hasAutoConnect = serversList.some(({ autoConnect }) => !!autoConnect); - const [errorImporting, setErrorImporting] = useStateFlagTimeout(false, SHOW_IMPORT_MSG_TIME); + const [errorImporting, setErrorImporting] = useTimeoutToggle(false, SHOW_IMPORT_MSG_TIME); useEffect(() => { setServersList(Object.values(servers)); diff --git a/src/servers/services/provideServices.ts b/src/servers/services/provideServices.ts index 1d6b0489..6f56cc84 100644 --- a/src/servers/services/provideServices.ts +++ b/src/servers/services/provideServices.ts @@ -25,7 +25,7 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => { ManageServers, 'ServersExporter', 'ImportServersBtn', - 'useStateFlagTimeout', + 'useTimeoutToggle', 'ManageServersRow', ); bottle.decorator('ManageServers', withoutSelectedServer); @@ -36,7 +36,7 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => { bottle.serviceFactory('ManageServersRowDropdown', ManageServersRowDropdown, 'DeleteServerModal'); bottle.decorator('ManageServersRowDropdown', connect(null, ['setAutoConnect'])); - bottle.serviceFactory('CreateServer', CreateServer, 'ImportServersBtn', 'useStateFlagTimeout'); + bottle.serviceFactory('CreateServer', CreateServer, 'ImportServersBtn', 'useTimeoutToggle'); bottle.decorator('CreateServer', withoutSelectedServer); bottle.decorator('CreateServer', connect(['selectedServer', 'servers'], ['createServer', 'resetSelectedServer'])); diff --git a/src/short-urls/helpers/CreateShortUrlResult.tsx b/src/short-urls/helpers/CreateShortUrlResult.tsx index 3345a4ee..73d60ba6 100644 --- a/src/short-urls/helpers/CreateShortUrlResult.tsx +++ b/src/short-urls/helpers/CreateShortUrlResult.tsx @@ -6,7 +6,7 @@ import { useEffect } from 'react'; import CopyToClipboard from 'react-copy-to-clipboard'; import { Tooltip } from 'reactstrap'; import { ShortUrlCreation } from '../reducers/shortUrlCreation'; -import { StateFlagTimeout } from '../../utils/helpers/hooks'; +import { TimeoutToggle } from '../../utils/helpers/hooks'; import { Result } from '../../utils/Result'; import './CreateShortUrlResult.scss'; import { ShlinkApiError } from '../../api/ShlinkApiError'; @@ -16,10 +16,10 @@ export interface CreateShortUrlResultProps extends ShortUrlCreation { canBeClosed?: boolean; } -export const CreateShortUrlResult = (useStateFlagTimeout: StateFlagTimeout) => ( +export const CreateShortUrlResult = (useTimeoutToggle: TimeoutToggle) => ( { error, errorData, result, resetCreateShortUrl, canBeClosed = false }: CreateShortUrlResultProps, ) => { - const [showCopyTooltip, setShowCopyTooltip] = useStateFlagTimeout(); + const [showCopyTooltip, setShowCopyTooltip] = useTimeoutToggle(); useEffect(() => { resetCreateShortUrl(); diff --git a/src/short-urls/helpers/ShortUrlsRow.tsx b/src/short-urls/helpers/ShortUrlsRow.tsx index a15d4692..eed961af 100644 --- a/src/short-urls/helpers/ShortUrlsRow.tsx +++ b/src/short-urls/helpers/ShortUrlsRow.tsx @@ -2,7 +2,7 @@ import { FC, useEffect, useRef } from 'react'; import { isEmpty } from 'ramda'; import { ExternalLink } from 'react-external-link'; import { ColorGenerator } from '../../utils/services/ColorGenerator'; -import { StateFlagTimeout } from '../../utils/helpers/hooks'; +import { TimeoutToggle } from '../../utils/helpers/hooks'; import { Tag } from '../../tags/helpers/Tag'; import { SelectedServer } from '../../servers/data'; import { CopyToClipboardIcon } from '../../utils/CopyToClipboardIcon'; @@ -21,10 +21,10 @@ export interface ShortUrlsRowProps { export const ShortUrlsRow = ( ShortUrlsRowMenu: FC, colorGenerator: ColorGenerator, - useStateFlagTimeout: StateFlagTimeout, + useTimeoutToggle: TimeoutToggle, ) => ({ shortUrl, selectedServer, onTagClick }: ShortUrlsRowProps) => { - const [copiedToClipboard, setCopiedToClipboard] = useStateFlagTimeout(); - const [active, setActive] = useStateFlagTimeout(false, 500); + const [copiedToClipboard, setCopiedToClipboard] = useTimeoutToggle(); + const [active, setActive] = useTimeoutToggle(false, 500); const isFirstRun = useRef(true); const renderTags = (tags: string[]) => { diff --git a/src/short-urls/services/provideServices.ts b/src/short-urls/services/provideServices.ts index f6d1533f..a19ca9b6 100644 --- a/src/short-urls/services/provideServices.ts +++ b/src/short-urls/services/provideServices.ts @@ -27,9 +27,9 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => { )); bottle.serviceFactory('ShortUrlsTable', ShortUrlsTable, 'ShortUrlsRow'); - bottle.serviceFactory('ShortUrlsRow', ShortUrlsRow, 'ShortUrlsRowMenu', 'ColorGenerator', 'useStateFlagTimeout'); + bottle.serviceFactory('ShortUrlsRow', ShortUrlsRow, 'ShortUrlsRowMenu', 'ColorGenerator', 'useTimeoutToggle'); bottle.serviceFactory('ShortUrlsRowMenu', ShortUrlsRowMenu, 'DeleteShortUrlModal', 'QrCodeModal'); - bottle.serviceFactory('CreateShortUrlResult', CreateShortUrlResult, 'useStateFlagTimeout'); + bottle.serviceFactory('CreateShortUrlResult', CreateShortUrlResult, 'useTimeoutToggle'); bottle.serviceFactory('ShortUrlForm', ShortUrlForm, 'TagsSelector', 'DomainSelector'); bottle.serviceFactory('CreateShortUrl', CreateShortUrl, 'ShortUrlForm', 'CreateShortUrlResult'); diff --git a/src/utils/forms/InputFormGroup.tsx b/src/utils/forms/InputFormGroup.tsx index 9e047d3a..9dabb6b1 100644 --- a/src/utils/forms/InputFormGroup.tsx +++ b/src/utils/forms/InputFormGroup.tsx @@ -1,6 +1,7 @@ import { FC, PropsWithChildren } from 'react'; import { InputType } from 'reactstrap/types/lib/Input'; import { LabeledFormGroup } from './LabeledFormGroup'; +import { useDomId } from '../helpers/hooks'; export type InputFormGroupProps = PropsWithChildren<{ value: string; @@ -14,15 +15,20 @@ export type InputFormGroupProps = PropsWithChildren<{ export const InputFormGroup: FC = ( { children, value, onChange, type, required, placeholder, className, labelClassName }, -) => ( - {children}:} className={className ?? ''} labelClassName={labelClassName}> - onChange(e.target.value)} - /> - -); +) => { + const id = useDomId(); + + return ( + {children}:} className={className ?? ''} labelClassName={labelClassName} id={id}> + onChange(e.target.value)} + /> + + ); +}; diff --git a/src/utils/forms/LabeledFormGroup.tsx b/src/utils/forms/LabeledFormGroup.tsx index ea11c1ee..dfc68729 100644 --- a/src/utils/forms/LabeledFormGroup.tsx +++ b/src/utils/forms/LabeledFormGroup.tsx @@ -5,14 +5,15 @@ type LabeledFormGroupProps = PropsWithChildren<{ noMargin?: boolean; className?: string; labelClassName?: string; + id?: string; }>; /* eslint-disable jsx-a11y/label-has-associated-control */ export const LabeledFormGroup: FC = ( - { children, label, className = '', labelClassName = '', noMargin = false }, + { children, label, className = '', labelClassName = '', noMargin = false, id }, ) => (
- + {children}
); diff --git a/src/utils/helpers/hooks.ts b/src/utils/helpers/hooks.ts index 90c232d2..877f8412 100644 --- a/src/utils/helpers/hooks.ts +++ b/src/utils/helpers/hooks.ts @@ -6,12 +6,12 @@ import { parseQuery, stringifyQuery } from './query'; const DEFAULT_DELAY = 2000; -export type StateFlagTimeout = (initialValue?: boolean, delay?: number) => [ boolean, () => void ]; +export type TimeoutToggle = (initialValue?: boolean, delay?: number) => [boolean, () => void]; -export const useStateFlagTimeout = ( +export const useTimeoutToggle = ( setTimeout: (callback: Function, timeout: number) => number, clearTimeout: (timer: number) => void, -): StateFlagTimeout => (initialValue = false, delay = DEFAULT_DELAY) => { +): TimeoutToggle => (initialValue = false, delay = DEFAULT_DELAY) => { const [flag, setFlag] = useState(initialValue); const timeout = useRef(undefined); const callback = () => { @@ -31,7 +31,6 @@ type ToggleResult = [ boolean, () => void, () => void, () => void ]; export const useToggle = (initialValue = false): ToggleResult => { const [flag, setFlag] = useState(initialValue); - return [flag, () => setFlag(!flag), () => setFlag(true), () => setFlag(false)]; }; @@ -80,7 +79,6 @@ export const useEffectExceptFirstTime = (callback: EffectCallback, deps: Depende export const useGoBack = () => { const navigate = useNavigate(); - return () => navigate(-1); }; diff --git a/src/utils/services/provideServices.ts b/src/utils/services/provideServices.ts index 578a945c..53037c02 100644 --- a/src/utils/services/provideServices.ts +++ b/src/utils/services/provideServices.ts @@ -1,5 +1,5 @@ import Bottle from 'bottlejs'; -import { useStateFlagTimeout } from '../helpers/hooks'; +import { useTimeoutToggle } from '../helpers/hooks'; import { LocalStorage } from './LocalStorage'; import { ColorGenerator } from './ColorGenerator'; import { csvToJson, jsonToCsv } from '../helpers/csvjson'; @@ -14,7 +14,7 @@ const provideServices = (bottle: Bottle) => { bottle.constant('setTimeout', global.setTimeout); bottle.constant('clearTimeout', global.clearTimeout); - bottle.serviceFactory('useStateFlagTimeout', useStateFlagTimeout, 'setTimeout', 'clearTimeout'); + bottle.serviceFactory('useTimeoutToggle', useTimeoutToggle, 'setTimeout', 'clearTimeout'); }; export default provideServices; diff --git a/test/servers/CreateServer.test.tsx b/test/servers/CreateServer.test.tsx index d23a6d1e..54695846 100644 --- a/test/servers/CreateServer.test.tsx +++ b/test/servers/CreateServer.test.tsx @@ -1,83 +1,84 @@ -import { shallow, ShallowWrapper } from 'enzyme'; +import userEvent from '@testing-library/user-event'; +import { fireEvent, render, screen, waitFor } from '@testing-library/react'; import { Mock } from 'ts-mockery'; import { useNavigate } from 'react-router-dom'; import { CreateServer as createCreateServer } from '../../src/servers/CreateServer'; -import { ServerForm } from '../../src/servers/helpers/ServerForm'; import { ServerWithId } from '../../src/servers/data'; -import { DuplicatedServersModal } from '../../src/servers/helpers/DuplicatedServersModal'; jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), useNavigate: jest.fn() })); describe('', () => { - let wrapper: ShallowWrapper; - const ImportServersBtn = () => null; const createServerMock = jest.fn(); const navigate = jest.fn(); - const servers = { foo: Mock.all() }; - const createWrapper = (serversImported = false, importFailed = false) => { + const servers = { foo: Mock.of({ url: 'https://existing_url.com', apiKey: 'existing_api_key' }) }; + const setUp = (serversImported = false, importFailed = false) => { (useNavigate as any).mockReturnValue(navigate); - const useStateFlagTimeout = jest.fn() - .mockReturnValueOnce([serversImported, () => '']) - .mockReturnValueOnce([importFailed, () => '']) - .mockReturnValue([]); - const CreateServer = createCreateServer(ImportServersBtn, useStateFlagTimeout); + let callCount = 0; + const useTimeoutToggle = jest.fn().mockImplementation(() => { + const result = [callCount % 2 === 0 ? serversImported : importFailed, () => null]; + callCount += 1; + return result; + }); + const CreateServer = createCreateServer(() => <>ImportServersBtn, useTimeoutToggle); - wrapper = shallow(); - - return wrapper; + return { + user: userEvent.setup(), + ...render(), + }; }; beforeEach(jest.clearAllMocks); - afterEach(() => wrapper?.unmount()); - - it('renders components', () => { - const wrapper = createWrapper(); - - expect(wrapper.find(ServerForm)).toHaveLength(1); - expect(wrapper.find('ImportResult')).toHaveLength(0); - }); it('shows success message when imported is true', () => { - const wrapper = createWrapper(true); - const result = wrapper.find('ImportResult'); + setUp(true); - expect(result).toHaveLength(1); - expect(result.prop('type')).toEqual('success'); + expect(screen.getByText('Servers properly imported. You can now select one from the list :)')).toBeInTheDocument(); + expect( + screen.queryByText('The servers could not be imported. Make sure the format is correct.'), + ).not.toBeInTheDocument(); }); it('shows error message when import failed', () => { - const wrapper = createWrapper(false, true); - const result = wrapper.find('ImportResult'); + setUp(false, true); - expect(result).toHaveLength(1); - expect(result.prop('type')).toEqual('error'); + expect( + screen.queryByText('Servers properly imported. You can now select one from the list :)'), + ).not.toBeInTheDocument(); + expect(screen.getByText('The servers could not be imported. Make sure the format is correct.')).toBeInTheDocument(); }); - it('creates server data when form is submitted', () => { - const wrapper = createWrapper(); - const form = wrapper.find(ServerForm); + it('creates server data when form is submitted', async () => { + const { user } = setUp(); - expect(wrapper.find(DuplicatedServersModal).prop('duplicatedServers')).toEqual([]); - form.simulate('submit', {}); - expect(wrapper.find(DuplicatedServersModal).prop('duplicatedServers')).toEqual([{}]); + expect(createServerMock).not.toHaveBeenCalled(); + + await user.type(screen.getByLabelText(/^Name/), 'the_name'); + await user.type(screen.getByLabelText(/^URL/), 'https://the_url.com'); + await user.type(screen.getByLabelText(/^API key/), 'the_api_key'); + fireEvent.submit(screen.getByRole('form')); + + expect(createServerMock).toHaveBeenCalledWith(expect.objectContaining({ + name: 'the_name', + url: 'https://the_url.com', + apiKey: 'the_api_key', + })); + expect(navigate).toHaveBeenCalledWith(expect.stringMatching(/^\/server\//)); + expect(screen.queryByRole('dialog')).not.toBeInTheDocument(); }); - it('saves server and redirects on modal save', () => { - const wrapper = createWrapper(); + it('displays dialog when trying to create a duplicated server', async () => { + const { user } = setUp(); - wrapper.find(ServerForm).simulate('submit', {}); - wrapper.find(DuplicatedServersModal).simulate('save'); + await user.type(screen.getByLabelText(/^Name/), 'the_name'); + await user.type(screen.getByLabelText(/^URL/), 'https://existing_url.com'); + await user.type(screen.getByLabelText(/^API key/), 'existing_api_key'); + fireEvent.submit(screen.getByRole('form')); - expect(createServerMock).toHaveBeenCalledTimes(1); - expect(navigate).toHaveBeenCalledTimes(1); - }); - - it('goes back on modal discard', () => { - const wrapper = createWrapper(); - - wrapper.find(DuplicatedServersModal).simulate('discard'); + await waitFor(() => expect(screen.getByRole('dialog')).toBeInTheDocument()); + await user.click(screen.getByRole('button', { name: 'Discard' })); + expect(createServerMock).not.toHaveBeenCalled(); expect(navigate).toHaveBeenCalledWith(-1); }); }); diff --git a/test/servers/ManageServers.test.tsx b/test/servers/ManageServers.test.tsx index 49292a1e..5cbb81e6 100644 --- a/test/servers/ManageServers.test.tsx +++ b/test/servers/ManageServers.test.tsx @@ -12,8 +12,8 @@ describe('', () => { const serversExporter = Mock.of({ exportServers }); const ImportServersBtn = () => null; const ManageServersRow = () => null; - const useStateFlagTimeout = jest.fn().mockReturnValue([false, jest.fn()]); - const ManageServers = createManageServers(serversExporter, ImportServersBtn, useStateFlagTimeout, ManageServersRow); + const useTimeoutToggle = jest.fn().mockReturnValue([false, jest.fn()]); + const ManageServers = createManageServers(serversExporter, ImportServersBtn, useTimeoutToggle, ManageServersRow); let wrapper: ShallowWrapper; const createServerMock = (value: string, autoConnect = false) => Mock.of( { id: value, name: value, url: value, autoConnect }, @@ -82,7 +82,7 @@ describe('', () => { }); it('shows an error message if an error occurs while importing servers', () => { - useStateFlagTimeout.mockReturnValue([true, jest.fn()]); + useTimeoutToggle.mockReturnValue([true, jest.fn()]); const wrapper = createWrapper({ foo: createServerMock('foo') }); const result = wrapper.find(Result); diff --git a/test/short-urls/helpers/CreateShortUrlResult.test.tsx b/test/short-urls/helpers/CreateShortUrlResult.test.tsx index 7dd45c30..1fbe1af0 100644 --- a/test/short-urls/helpers/CreateShortUrlResult.test.tsx +++ b/test/short-urls/helpers/CreateShortUrlResult.test.tsx @@ -4,14 +4,14 @@ import { Tooltip } from 'reactstrap'; import { Mock } from 'ts-mockery'; import { CreateShortUrlResult as createResult } from '../../../src/short-urls/helpers/CreateShortUrlResult'; import { ShortUrl } from '../../../src/short-urls/data'; -import { StateFlagTimeout } from '../../../src/utils/helpers/hooks'; +import { TimeoutToggle } from '../../../src/utils/helpers/hooks'; import { Result } from '../../../src/utils/Result'; describe('', () => { let wrapper: ShallowWrapper; const copyToClipboard = jest.fn(); - const useStateFlagTimeout = jest.fn(() => [false, copyToClipboard]) as StateFlagTimeout; - const CreateShortUrlResult = createResult(useStateFlagTimeout); + const useTimeoutToggle = jest.fn(() => [false, copyToClipboard]) as TimeoutToggle; + const CreateShortUrlResult = createResult(useTimeoutToggle); const createWrapper = (result: ShortUrl | null = null, error = false) => { wrapper = shallow( {}} result={result} error={error} saving={false} />, diff --git a/test/short-urls/helpers/ShortUrlsRow.test.tsx b/test/short-urls/helpers/ShortUrlsRow.test.tsx index fd917cf5..8812f962 100644 --- a/test/short-urls/helpers/ShortUrlsRow.test.tsx +++ b/test/short-urls/helpers/ShortUrlsRow.test.tsx @@ -6,7 +6,7 @@ import { formatISO } from 'date-fns'; import { ShortUrlsRow as createShortUrlsRow } from '../../../src/short-urls/helpers/ShortUrlsRow'; import { Tag } from '../../../src/tags/helpers/Tag'; import { ColorGenerator } from '../../../src/utils/services/ColorGenerator'; -import { StateFlagTimeout } from '../../../src/utils/helpers/hooks'; +import { TimeoutToggle } from '../../../src/utils/helpers/hooks'; import { ShortUrl } from '../../../src/short-urls/data'; import { ReachableServer } from '../../../src/servers/data'; import { CopyToClipboardIcon } from '../../../src/utils/CopyToClipboardIcon'; @@ -17,8 +17,8 @@ describe('', () => { let wrapper: ShallowWrapper; const mockFunction = () => null; const ShortUrlsRowMenu = mockFunction; - const stateFlagTimeout = jest.fn(() => true); - const useStateFlagTimeout = jest.fn(() => [false, stateFlagTimeout]) as StateFlagTimeout; + const timeoutToggle = jest.fn(() => true); + const useTimeoutToggle = jest.fn(() => [false, timeoutToggle]) as TimeoutToggle; const colorGenerator = Mock.of({ getColorForKey: jest.fn(), setColorForKey: jest.fn(), @@ -38,7 +38,7 @@ describe('', () => { maxVisits: null, }, }; - const ShortUrlsRow = createShortUrlsRow(ShortUrlsRowMenu, colorGenerator, useStateFlagTimeout); + const ShortUrlsRow = createShortUrlsRow(ShortUrlsRowMenu, colorGenerator, useTimeoutToggle); const createWrapper = (title?: string | null) => { wrapper = shallow( , @@ -129,8 +129,8 @@ describe('', () => { const menu = col.find(CopyToClipboardIcon); expect(menu).toHaveLength(1); - expect(stateFlagTimeout).not.toHaveBeenCalled(); + expect(timeoutToggle).not.toHaveBeenCalled(); menu.simulate('copy'); - expect(stateFlagTimeout).toHaveBeenCalledTimes(1); + expect(timeoutToggle).toHaveBeenCalledTimes(1); }); }); From ceee26ad259bd3779c27d02c8fdafcb6c1791a67 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sun, 29 May 2022 20:32:34 +0200 Subject: [PATCH 011/101] Migrated Time test to react testing library --- src/utils/Time.tsx | 4 ++-- test/utils/Time.test.tsx | 24 ++++++++---------------- 2 files changed, 10 insertions(+), 18 deletions(-) diff --git a/src/utils/Time.tsx b/src/utils/Time.tsx index c50639a2..fc4c3571 100644 --- a/src/utils/Time.tsx +++ b/src/utils/Time.tsx @@ -1,13 +1,13 @@ import { parseISO, format as formatDate, getUnixTime, formatDistance } from 'date-fns'; import { isDateObject } from './helpers/date'; -export interface DateProps { +export interface TimeProps { date: Date | string; format?: string; relative?: boolean; } -export const Time = ({ date, format = 'yyyy-MM-dd HH:mm', relative = false }: DateProps) => { +export const Time = ({ date, format = 'yyyy-MM-dd HH:mm', relative = false }: TimeProps) => { const dateObject = isDateObject(date) ? date : parseISO(date); return ( diff --git a/test/utils/Time.test.tsx b/test/utils/Time.test.tsx index a62dc06c..cb1f9c8f 100644 --- a/test/utils/Time.test.tsx +++ b/test/utils/Time.test.tsx @@ -1,30 +1,22 @@ -import { shallow, ShallowWrapper } from 'enzyme'; -import { DateProps, Time } from '../../src/utils/Time'; +import { render } from '@testing-library/react'; +import { TimeProps, Time } from '../../src/utils/Time'; import { parseDate } from '../../src/utils/helpers/date'; describe('