test dynamic links

.github/workflows/nodejs.yml

@@ -20,6 +20,7 @@ jobs:
         run: |
           yarn install
           yarn build --if-present
+          yarn lint
           yarn test
         env:
           CI: true

components/ui/DynamicLink.tsx

@@ -1,5 +1,5 @@
 import Link, { LinkProps } from 'next/link'
-import { string } from 'prop-types'
+import { getDynamicPath } from '../../utils/getDynamicPath'
 
 type ExtraProps = Omit<LinkProps, 'as' | 'href'>
 
@@ -9,29 +9,10 @@ interface DynamicLinkProps extends ExtraProps {
 }
 
 export const DynamicLink = ({ children, href, ...props }: DynamicLinkProps) => {
-  const dynamicHref = getDynamicUrl(href)
+  const dynamicHref = getDynamicPath(href)
   return (
     <Link href={dynamicHref} as={href} {...props}>
       {children}
     </Link>
   )
 }
-
-const getDynamicUrl = (url: string) => {
-  const docsPattern = new RegExp('(.)?/docs/(.)+')
-  if (docsPattern.test(url)) {
-    return '/docs/[...slug]'
-  }
-
-  const blogIndexPattern = new RegExp('(.)?/blog/page/[0-9]+')
-  if (blogIndexPattern.test(url)) {
-    return '/blog/page/[page_index]'
-  }
-
-  const blogPattern = new RegExp('(.)?/blog/(.)+')
-  if (blogPattern.test(url)) {
-    return '/blog/[slug]'
-  }
-
-  return url
-}

create.jest.config.js

@@ -0,0 +1,18 @@
+module.exports = function createJestConfig(pack) {
+  return {
+    verbose: true,
+    transform: {
+      '.(ts|tsx)': 'ts-jest',
+    },
+    testRegex: '(\\.test)\\.(ts|tsx|js)$',
+    modulePaths: ['<rootDir>/', '<rootDir>/node_modules/'],
+    moduleFileExtensions: ['ts', 'tsx', 'js'],
+    displayName: pack.name,
+    name: pack.name,
+    moduleNameMapper: {
+      '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+        '<rootDir>/../../__mocks__/fileMock.js',
+      '\\.(css|scss)$': 'identity-obj-proxy',
+    },
+  }
+}

jest.config.js

@@ -0,0 +1,4 @@
+const createJestConfig = require("./create.jest.config.js");
+const pack = require("./package");
+
+module.exports = createJestConfig(pack);

package.json

@@ -13,8 +13,9 @@
     "prestart": "npm run export",
     "start": "serve out",
     "format": "prettier --write \"src/**/*.{ts,tsx,md}\"",
-    "lint": "tslint 'src/**/*.{ts,tsx}' -p tsconfig.json",
-    "test": "npm run type-check && npm run lint",
+    "lint": "yarn type-check && tslint 'src/**/*.{ts,tsx}' -p tsconfig.json",
+    "test": "jest --passWithNoTests",
+    "test-watch": "jest  --passWithNoTests --watch",
     "type-check": "tsc",
     "create-indices": "tsc --project ./indices/tsconfig.json --outDir ./indices/out && node ./indices/out/indices/createIndices.js",
     "deploy": "yarn build && yarn export"
@@ -65,11 +66,14 @@
   },
   "devDependencies": {
     "@types/glob": "^7.1.1",
+    "@types/jest": "^25.1.2",
     "@types/node": "^13.1.4",
     "@types/react": "^16.9.17",
     "@types/react-gtm-module": "^2.0.0",
     "babel-plugin-styled-components": "^1.8.0",
+    "jest": "^25.1.0",
     "prettier": "^1.18.2",
+    "ts-jest": "^25.2.0",
     "tslint": "^5.18.0",
     "tslint-config-kata": "^1.1.3",
     "tslint-config-prettier": "^1.18.0",

utils/getDynamicPath.test.ts

@@ -0,0 +1,41 @@
+import {
+  getDynamicPath,
+  BLOG_PATH,
+  BLOG_INDEX_PATH,
+  DOCS_PATH,
+} from './getDynamicPath'
+
+describe('getDynamicPath', () => {
+  describe('with static path', () => {
+    const STATIC_URL = '/teams'
+    it('should return original path', () => {
+      const url = getDynamicPath(STATIC_URL)
+      expect(url).toEqual(STATIC_URL)
+    })
+
+    it('should return original path with root', () => {
+      const url = getDynamicPath('/')
+      expect(url).toEqual('/')
+    })
+  })
+  describe('with dynamic path', () => {
+    describe('- blog post', () => {
+      it('should return blog path', () => {
+        const url = getDynamicPath('/blog/heres-a-post')
+        expect(url).toEqual(BLOG_PATH)
+      })
+    })
+    describe('- blog index', () => {
+      it('should return blog index path', () => {
+        const url = getDynamicPath('/blog/page/3')
+        expect(url).toEqual(BLOG_INDEX_PATH)
+      })
+    })
+    describe('- docs', () => {
+      it('should return docs path', () => {
+        const url = getDynamicPath('/docs/sub/heres-a-doc')
+        expect(url).toEqual(DOCS_PATH)
+      })
+    })
+  })
+})

utils/getDynamicPath.ts

@@ -0,0 +1,24 @@
+//used to create Next links to actual page layout path
+
+export const DOCS_PATH = '/docs/[...slug]'
+export const BLOG_INDEX_PATH = '/blog/page/[page_index]'
+export const BLOG_PATH = '/blog/[slug]'
+
+export function getDynamicPath(url: string) {
+  const docsPattern = new RegExp('(.)?/docs/(.)+')
+  if (docsPattern.test(url)) {
+    return '/docs/[...slug]'
+  }
+
+  const blogIndexPattern = new RegExp('(.)?/blog/page/[0-9]+')
+  if (blogIndexPattern.test(url)) {
+    return '/blog/page/[page_index]'
+  }
+
+  const blogPattern = new RegExp('(.)?/blog/(.)+')
+  if (blogPattern.test(url)) {
+    return '/blog/[slug]'
+  }
+
+  return url
+}