Add testing lib (potty#1)

Author: potty

.eslintrc.js

@@ -0,0 +1,35 @@
+module.exports = {
+	env: {
+		browser: true,
+		es6: true,
+	},
+	extends: [
+		'plugin:@typescript-eslint/recommended',
+		'plugin:react/recommended',
+		'plugin:react-hooks/recommended',
+		'prettier',
+		'prettier/@typescript-eslint',
+		'prettier/react',
+	],
+	plugins: ['react', 'prettier', '@typescript-eslint'],
+	globals: {
+		Atomics: 'readonly',
+		SharedArrayBuffer: 'readonly',
+	},
+	parser: '@typescript-eslint/parser',
+	parserOptions: {
+		ecmaFeatures: {
+			jsx: true,
+		},
+		ecmaVersion: 2018,
+		sourceType: 'module',
+	},
+	rules: {
+		'@typescript-eslint/explicit-function-return-type': 'off',
+	},
+	settings: {
+		react: {
+			version: 'detect',
+		},
+	},
+}

.github/workflows/tests.yml

@@ -1,7 +1,4 @@
-# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
-# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
-
-name: Node.js CI
+name: Tests
 
 on:
   push:
@@ -11,19 +8,14 @@ on:
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [12.x]
-
     steps:
     - uses: actions/checkout@v2
-    - name: Use Node.js ${{ matrix.node-version }}
+    - name: Use Node.js
       uses: actions/setup-node@v1
       with:
-        node-version: ${{ matrix.node-version }}
-    - run: npm ci
-    - run: npm run build --if-present
-    - run: npm run test
+        node-version: '12.x'
+    - name: Install dependencies
+      run: yarn --frozen-lockfile
+    - name: Run tests
+      run: yarn test

.gitignore

@@ -1,2 +1,16 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Dependency directories
+node_modules/
+
 .idea
-node_modules
+/dist
+package-lock.json

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": false,
+  "useTabs": true,
+  "trailingComma": "all",
+  "singleQuote": true
+}

README.md

@@ -1 +1,3 @@
-# react-anchorme
+# react-anchorme
+
+![](https://github.com/actions/potty/react-anchorme/Tests/badge.svg)

jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+	preset: 'ts-jest',
+}

package.json

@@ -1,22 +1,52 @@
 {
   "name": "react-anchorme",
+  "description": "React component to detect links in text and make them clickable",
   "version": "1.0.0",
-  "main": "index.js",
-  "author": "Pavel Potacek <[email protected]>",
+  "main": "dist/react-anchorme.js",
+  "module": "dist/react-anchorme.es.js",
+  "types": "dist/types.d.ts",
+  "author": "Pavel Potáček <[email protected]>",
   "license": "MIT",
+  "sideEffects": false,
+  "scripts": {
+    "build": "rollup -c",
+    "lint": "yarn lint:check --fix && yarn prettier",
+    "lint:check": "eslint ./src --ext .tsx,.ts --report-unused-disable-directives",
+    "prettier": "prettier --write './src/**/*.ts' './src/**/*.tsx'",
+    "test": "jest --runInBand",
+    "test:coverage": "jest --runInBand --coverage",
+    "test:watch": "yarn test:coverage -- --watchAll"
+  },
   "dependencies": {
     "anchorme": "^2.0.0"
   },
   "peerDependencies": {
     "react": "^16.8.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.5.0",
+    "@testing-library/react": "^10.0.3",
+    "@types/jest": "^25.2.1",
+    "@types/react": "^16.9.34",
+    "@types/react-dom": "^16.9.7",
+    "@typescript-eslint/eslint-plugin": "^2.30.0",
+    "@typescript-eslint/parser": "^2.30.0",
     "eslint": "^6.8.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-react": "^7.19.0",
     "eslint-plugin-react-hooks": "^3.0.0",
     "husky": "^4.2.5",
+    "jest": "^25.5.1",
     "lint-staged": "^10.2.0",
     "prettier": "^2.0.5",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "rollup": "^2.7.5",
+    "rollup-plugin-terser": "^5.3.0",
+    "rollup-plugin-typescript2": "^0.27.0",
+    "ts-jest": "^25.4.0",
     "typescript": "^3.8.3"
   },
   "husky": {

rollup.config.js

@@ -0,0 +1,20 @@
+import typescript from 'rollup-plugin-typescript2'
+import { terser } from 'rollup-plugin-terser'
+import pkg from './package.json'
+
+export default {
+	input: 'src/index.ts',
+	output: [
+		{
+			file: pkg.module,
+			format: 'es',
+		},
+	],
+	external: ['react', 'anchorme'],
+	plugins: [
+		typescript({
+			typescript: require('typescript'),
+		}),
+		terser(),
+	],
+}

src/Anchorme.test.tsx

@@ -0,0 +1,65 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+
+import Anchorme from './Anchorme'
+
+describe('Anchorme', () => {
+	const URL = 'http://www.example.loc'
+	const EMAIL = '[email protected]'
+	const IP = '127.0.0.1'
+
+	const expectLink = (el: HTMLElement, url: string) => {
+		const linkEl = el.querySelector('a')
+		expect(linkEl).not.toBeNull()
+		expect(linkEl?.href).toBe(url)
+	}
+
+	it('should render link', () => {
+		const { container, getByText } = render(<Anchorme>{URL}</Anchorme>)
+		expectLink(container, `${URL}/`)
+		expect(getByText(URL)).toBeInTheDocument()
+	})
+
+	it('should render link and text', () => {
+		const { container, getByText } = render(
+			<Anchorme>{`foo ${URL} bar`}</Anchorme>,
+		)
+		expectLink(container, `${URL}/`)
+		expect(getByText(/foo/i)).toBeInTheDocument()
+		expect(getByText(URL)).toBeInTheDocument()
+		expect(getByText(/bar/i)).toBeInTheDocument()
+	})
+
+	it('should render only text', () => {
+		const { container, getByText } = render(<Anchorme>foo bar</Anchorme>)
+		const linkEl = container.querySelector('a')
+		expect(linkEl).toBeNull()
+		expect(getByText(/foo bar/i)).toBeInTheDocument()
+	})
+
+	it('should render email as a link', () => {
+		const { container, getByText } = render(<Anchorme>{EMAIL}</Anchorme>)
+		expectLink(container, `mailto:${EMAIL}`)
+		expect(getByText(EMAIL)).toBeInTheDocument()
+	})
+
+	it('should render IP as a link', () => {
+		const { container } = render(<Anchorme>{IP}</Anchorme>)
+		expectLink(container, `http://${IP}/`)
+	})
+
+	it('should render link with custom props', () => {
+		const { container, getByText } = render(
+			<Anchorme target="_blank" rel="noreferrer noopener">
+				{URL}
+			</Anchorme>,
+		)
+		const linkEl = container.querySelector('a')
+		expect(linkEl).not.toBeNull()
+		expect(linkEl?.href).toBe(`${URL}/`)
+		expect(linkEl?.target).toBe('_blank')
+		expect(linkEl?.rel).toBe('noreferrer noopener')
+		expect(getByText(URL)).toBeInTheDocument()
+	})
+})

src/Anchorme.tsx

@@ -0,0 +1,45 @@
+import React, { useCallback, useMemo } from 'react'
+import anchorme from 'anchorme'
+
+import { AnchorProps } from './types'
+import { Link } from './Link'
+
+type Props = {
+	children: string
+} & AnchorProps
+
+const Anchorme = ({ children, ...rest }: Props) => {
+	const text = children
+
+	const parse = useCallback(() => {
+		const matches = anchorme.list(text)
+		if (matches.length === 0) return text
+
+		const elements = []
+		let lastIndex = 0
+		matches.forEach((match, index) => {
+			// Push text located before matched string
+			if (match.start > lastIndex) {
+				elements.push(text.substring(lastIndex, match.start))
+			}
+
+			// Push Link component
+			elements.push(<Link {...rest} key={index} href={match.string} />)
+
+			lastIndex = match.end
+		})
+
+		// Push remaining text
+		if (text.length > lastIndex) {
+			elements.push(text.substring(lastIndex))
+		}
+
+		return elements.length === 1 ? elements[0] : elements
+	}, [text, rest])
+
+	const parsedText = useMemo(() => parse(), [parse])
+
+	return <>{parsedText}</>
+}
+
+export default React.memo(Anchorme)

src/Link.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import { AnchorProps } from './types'
+import { getProtocol } from './utils'
+
+type Props = {
+	href: string
+} & AnchorProps
+
+export const Link = ({ href, ...rest }: Props) => {
+	const protocol = getProtocol(href)
+	return (
+		<a {...rest} href={`${protocol}${href}`}>
+			{href}
+		</a>
+	)
+}

src/index.ts

@@ -0,0 +1 @@
+export { default as Anchorme } from './Anchorme'

src/types.ts

@@ -0,0 +1,3 @@
+import React from 'react'
+
+export type AnchorProps = Omit<React.HTMLProps<HTMLAnchorElement>, 'href'>

src/utils.test.ts

@@ -0,0 +1,18 @@
+import { getProtocol } from './utils'
+
+describe('getProtocol', () => {
+	it('should return protocol for url', () => {
+		const protocol = getProtocol('example.loc')
+		expect(protocol).toBe('http://')
+	})
+
+	it('should return protocol for email', () => {
+		const protocol = getProtocol('[email protected]')
+		expect(protocol).toBe('mailto:')
+	})
+
+	it('should return protocol for IP', () => {
+		const protocol = getProtocol('127.0.0.1')
+		expect(protocol).toBe('http://')
+	})
+})

src/utils.ts

@@ -0,0 +1,11 @@
+import anchorme from 'anchorme'
+
+const protocolRegex = /^((file:\/\/\/)|(https?:|ftps?:)\/\/|(mailto:))/i
+
+const hasProtocol = (input: string) => protocolRegex.test(input)
+
+export const getProtocol = (input: string) => {
+	if (hasProtocol(input)) return ''
+
+	return anchorme.validate.email(input) ? 'mailto:' : 'http://'
+}

tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "sourceMap": true,
-    "module": "es2015",
+    "module": "esnext",
     "target": "es2017",
     "moduleResolution": "node",
     "outDir": "./dist",
@@ -10,12 +10,13 @@
     "declaration": true,
     "noEmit": true,
     "allowSyntheticDefaultImports": true,
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": ["dom", "esnext"],
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "esModuleInterop": true
   },
   "include": ["src"],
   "exclude": ["node_modules"]