Change url validation in links

jest.config.js

@@ -0,0 +1,26 @@
+module.exports = {
+    roots: [
+        '<rootDir>',
+    ],
+    collectCoverageFrom: [
+        '**/*.{js,ts,jsx,tsx}',
+        '!**/node_modules/**',
+    ],
+    transform: {
+        '^.+\\.(js|ts|jsx|tsx)?$': 'babel-jest',
+    },
+    moduleNameMapper: {
+        'd3-shape': '<rootDir>/node_modules/d3-shape/dist/d3-shape.js',
+    },
+    transformIgnorePatterns: [
+        '.*/node_modules/(?!d3|d3-shape)',
+    ],
+    testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(ts|js|tsx|jsx)?$',
+    moduleFileExtensions: [
+        'ts',
+        'js',
+        'tsx',
+        'jsx',
+        'json',
+    ],
+};

package.json

@@ -17,6 +17,8 @@
         "build": "rollup -c && tsc --project tsconfig-typings.json",
         "prepack": "yarn build",
         "watch": "rollup -c -w",
+        "test": "jest",
+        "test:coverage": "jest --coverage",
         "typecheck": "tsc",
         "lint": "eslint 'src/**/*.[tj]s?(x)'",
         "lint:stories": "eslint 'storybook/stories/**/*.[tj]s?(x)'",
@@ -41,9 +43,12 @@
     "dependencies": {
         "@tanem/svg-injector": "^10.1.14",
         "@togglecorp/fujs": "^1.9.3",
+        "@types/jest": "^27.5.1",
         "@types/react-color": "^3.0.6",
         "@types/requestidlecallback": "^0.3.4",
+        "babel-jest": "^28.1.0",
         "d3-shape": "^3.0.1",
+        "jest": "^28.1.0",
         "react-color": "^2.19.3",
         "react-icons": "^4.3.1",
         "react-zoom-pan-pinch": "^2.1.3",

src/components/ButtonLikeLink/index.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { isValidUrl, _cs } from '@togglecorp/fujs';
+import { _cs } from '@togglecorp/fujs';
 import {
     Link as RouterLink,
     LinkProps as RouterLinkProps,
 } from 'react-router-dom';
 
-import { genericMemo } from '../../utils';
+import { genericMemo, isValidUrl } from '../../utils';
 import { useButtonFeatures } from '../Button';
 import styles from './styles.css';
 
@@ -51,7 +51,7 @@ function ButtonLikeLink(props: Props) {
     // FIXME: the typing is problematic
     const isExternalLink = React.useMemo(
         () => (
-            typeof to === 'string' && (isValidUrl(to) || to.startsWith('mailto:'))
+            typeof to === 'string' && isValidUrl(to)
         ),
         [to],
     );

src/components/Link/index.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import {
     _cs,
-    isValidUrl,
 } from '@togglecorp/fujs';
 import {
     Link as RouterLink,
@@ -11,7 +10,7 @@ import { IoChevronForward } from 'react-icons/io5';
 
 import {
     genericMemo,
-    isLocalUrl,
+    isValidUrl,
 } from '../../utils';
 import { SpacingTypes } from '../../types';
 import Actions from '../Actions';
@@ -55,7 +54,7 @@ function Link(props: Props) {
 
     const isExternalLink = React.useMemo(
         () => (
-            typeof to === 'string' && (isValidUrl(to) || to.startsWith('mailto:') || isLocalUrl(to))
+            typeof to === 'string' && isValidUrl(to)
         ),
         [to],
     );

src/utils/index.ts

@@ -47,7 +47,15 @@ export function dateStringToDate(value: string) {
     return new Date(`${value}T00:00`);
 }
 
-const localhostRegex = /(?<=\/\/)localhost(?=[:/]|$)/;
-export function isLocalUrl(url: string) {
-    return localhostRegex.test(url);
+export function isValidUrl(url?: string) {
+    if (!url) {
+        return false;
+    }
+    try {
+        // eslint-disable-next-line no-new
+        new URL(url);
+        return true;
+    } catch {
+        return false;
+    }
 }

src/utils/utils.test.ts

@@ -0,0 +1,11 @@
+import {
+    isValidUrl,
+} from './index';
+
+test('Is valid URL', () => {
+    expect(isValidUrl('https://wikipedia.org')).toBe(true);
+    expect(isValidUrl(undefined)).toBe(false);
+    expect(isValidUrl('/asd/a1jkn/')).toBe(false);
+    expect(isValidUrl('mailto:[email protected]')).toBe(true);
+    expect(isValidUrl('http://localhost:3900')).toBe(true);
+});