Clean up deps, fix jest and linting (#149)

* Clean up deps, fix jest and linting
* Remove ./prebuild.sh since we no longer work with .md files directly
* Remove gatsby links
* Fix null vs undefined

.env.local

@@ -0,0 +1 @@
+#API_SERVER=https://api.openbeta.io

.github/workflows/nodejs.yml

@@ -23,8 +23,8 @@ jobs:
       - name: Lint code
         run: yarn lint
 
-      - name: Copy a subset of content files
-        run: ./prebuild.sh
+      - name: Run unit tests
+        run: yarn test
 
       - name: Test build
         run: yarn build

.gitlab-ci.yml

@@ -12,6 +12,9 @@ variables:
 
 gatsby-build:
   stage: build
+  only: # Only run for these branches
+  - develop
+  - main
 
   tags:
   - docker

.husky/pre-commit

@@ -1,5 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
-# @gibboj -- turn back when switch to next js is closer
-# yarn lint
-# yarn test
+yarn lint
+yarn test

jest.config.js

@@ -0,0 +1,20 @@
+const nextJest = require('next/jest')
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: './'
+})
+
+// Add any custom config to be passed to Jest
+const customJestConfig = {
+  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
+  // moduleDirectories: ['node_modules', '<rootDir>/'],
+  testEnvironment: 'jest-environment-jsdom',
+  transform: {
+    "^.+\\.tsx?$": "ts-jest"
+  },  
+}
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(customJestConfig)

package.json

@@ -35,7 +35,6 @@
     "axios": "^0.24.0",
     "btoa": "^1.2.1",
     "buffer": "^6.0.3",
-    "cross-env": "^7.0.3",
     "dayjs": "^1.10.6",
     "formik": "^2.2.9",
     "front-matter": "^4.0.2",
@@ -79,19 +78,16 @@
     "prepare": "husky install"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/react": "^12.1.2",
     "@types/react": "^17.0.38",
     "autoprefixer": "^10.4.1",
-    "babel-jest": "^27.0.2",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.6",
-    "eslint-plugin-jest": "^25.3.2",
+    "eslint-plugin-jest": "^25.3.4",
     "husky": "^7.0.4",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^27.0.4",
+    "jest": "^27.4.5",
     "postcss": "^8.4.5",
-    "prettier": "^2.3.1",
-    "react-test-renderer": "^17.0.2",
     "tailwindcss": "^3.0.8",
+    "ts-jest": "^27.1.2",
     "ts-standard": "^11.0.0",
     "typescript": "^4.5.4"
   },
@@ -102,14 +98,6 @@
   "bugs": {
     "url": "https://github.com/OpenBeta/open-tacos/issues"
   },
-  "jest": {
-    "setupFilesAfterEnv": [
-      "./setupTests.js"
-    ],
-    "transformIgnorePatterns": [
-      "[/\\\\]node_modules[/\\\\](?!unified).+\\.(js|jsx)$"
-    ]
-  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -132,9 +120,6 @@
     "plugins": [
       "jest"
     ],
-    "globals": [
-      "jest"
-    ],
     "envs": {
       "browser": true,
       "es2021": true,

src/components/RandomRouteCard.js → src/components/RandomRouteCard.tsx

@@ -1,17 +1,16 @@
 import React from 'react'
-import { Link } from 'gatsby'
-import Card from './ui/card'
+import Link from 'next/link'
+import Card from './ui/Card'
 import RouteTypeChips from './ui/RouteTypeChips'
 import RouteGradeChip from './ui/RouteGradeChip'
 import { sanitizeName } from '../js/utils'
 
-function RandomRouteCard ({ climb }) {
-  if (!climb) return null
+function RandomRouteCard ({ climb }): JSX.Element {
+  if (climb === null) return null
   const { slug, pathTokens } = climb
   const { type, route_name: routeName, safety, yds } = climb.frontmatter
-
   return (
-    <Link to={slug}>
+    <Link href={slug}>
       <Card>
         <div className='text-left'>
           <h2 className='font-medium font-semigole font-sans text-base truncate'>

src/components/SearchBar.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-// import { navigate } from 'gatsby'
+import { useRouter } from 'next/router'
 
 import ClimbSearch from './ClimbSearch'
 import { IconButton } from './ui/Button'
@@ -30,11 +30,14 @@ export default function SearchBar ({ className }) {
       false
     )
   }
+
+  const router = useRouter()
+
   return (
     <div className={className}>
       {activated
         ? (
-          <ClimbSearch onClimbNameChange={navigateTo} />
+          <ClimbSearch onClimbNameChange={({ meta_mp_route_id: metaMpRouteId }) => router.push(`/climbs/${metaMpRouteId}`)} />
           )
         : (
           <div
@@ -50,12 +53,3 @@ export default function SearchBar ({ className }) {
     </div>
   )
 }
-
-const navigateTo = (data) => {
-  const { meta_mp_route_id: metaMpRouteId } = data
-  navigate(buildUrl(metaMpRouteId))
-}
-
-const buildUrl = (metaMpRouteId) => {
-  return `/climbs/${metaMpRouteId}`
-}

src/components/SeoTags.tsx

@@ -17,22 +17,11 @@ function SeoTags ({ description = '', keywords = [], title, image = '' }: SEOPro
       content_edit_branch: 'edit-test'
     }
   }
-  // const { site } = useStaticQuery(graphql`
-  //   query DefaultSEOQuery {
-  //     site {
-  //       siteMetadata {
-  //         title
-  //         description
-  //         author
-  //       }
-  //     }
-  //   }
-  // `)
 
-  const metaDescription = description || site.siteMetadata.description
-  const metaTitle = title || site.siteMetadata.title
+  const metaDescription = description ?? site.siteMetadata.description
+  const metaTitle = title ?? site.siteMetadata.title
   const metaImage =
-    image ||
+    image ??
     'https://res.cloudinary.com/openbeta-prod/image/upload/v1639562113/open-tacos/nc9dsf6aoitrnehe1cwo.jpg'
 
   return (

src/components/__tests__/RandomRouteCard.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import '@testing-library/jest-dom/extend-expect'
+import { render, screen } from '@testing-library/react'
+import RandomRouteCard from '../RandomRouteCard'
+
+test('RandomRouteCard has route_name', () => {
+  const mocked = {
+    frontmatter: {
+      type: { sport: 1 },
+      route_name: 'Sample Test',
+      yds: '5.10a'
+    },
+    pathTokens: [
+      'USA',
+      'Oregon',
+      'Central Oregon',
+      'Smith Rock',
+      'Shipwreck Wall - East Face',
+      'marooned'
+    ],
+    slug: '/climbs/1234'
+  }
+
+  render(<RandomRouteCard climb={mocked} />)
+
+  expect(screen.getByRole('heading', { hidden: true })).toHaveTextContent(mocked.frontmatter.route_name)
+})

src/components/editor/Editor.js

@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from 'react'
+import { useRouter } from 'next/router'
 import ReactPlaceholder from 'react-placeholder'
 import { usePlateValue } from '@udecode/plate-core'
 import { useAuth0 } from '@auth0/auth0-react'
-import { navigate } from 'gatsby'
 
 import PlateEditor from './PlateEditor'
 import FronmatterForm from './ClimbProfile'
@@ -53,6 +53,8 @@ export const ERROR = Object.freeze({
 })
 
 export const Editor = () => {
+  const router = useRouter()
+
   const { getAccessTokenSilently, user } = useAuth0()
   // to get access to commit message
   const commitMsgRef = React.useRef(null)
@@ -111,7 +113,7 @@ export const Editor = () => {
         commitMsgRef.current.values.message,
         authToken
       )
-      navigate('/dashboard')
+      router.push('/dashboard')
     } catch (e) {
       switch (e.httpStatus) {
         case 409:

src/components/editor/ErrorMessage.js

@@ -1,10 +1,12 @@
 import React from 'react'
-import { navigate } from 'gatsby'
+import { useRouter } from 'next/router'
+
 import Modal from '../ui/Modal'
 import RainIcon from '../../assets/icons/rain.svg'
 import { ERROR } from './Editor'
 
 export default function ErrorMessage ({ code, msg, setError }) {
+  const router = useRouter()
   const actionOk = {
     text: 'OK',
     action: function () {
@@ -14,7 +16,7 @@ export default function ErrorMessage ({ code, msg, setError }) {
   const actionDashboard = {
     text: 'Go to Dashboard',
     action: function () {
-      navigate('/dashboard') // direct user to dashboard because there's nothing user can do
+      router.push('/dashboard') // direct user to dashboard because there's nothing user can do
     }
   }
 

src/components/editor/PageHeader.js

@@ -1,7 +1,8 @@
 import React from 'react'
-import { navigate } from 'gatsby'
+import { useRouter } from 'next/router'
 
 const PageHeader = ({ onSubmit, editType, submitting, children }) => {
+  const router = useRouter()
   return (
     <div className='flex justify-between mb-8'>
       <div className=''>
@@ -15,7 +16,7 @@ const PageHeader = ({ onSubmit, editType, submitting, children }) => {
         <div>
           <button
             className='btn btn-text mr-4'
-            onClick={() => navigate(-1)}
+            onClick={() => router.back()}
           >
             Cancel
           </button>

src/components/ui/AreaCard.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Card from './card'
+import Card from './Card'
 import BarPercent from './BarPercent'
 
 /**
@@ -15,14 +15,12 @@ interface AreaStatistics {
 
 interface AreaCardProps {
   areaName: string
-  onPress?: () => {}
   stats?: AreaStatistics
 }
 
-function AreaCard ({ areaName, onPress, stats }: AreaCardProps): JSX.Element {
+function AreaCard ({ areaName, stats }: AreaCardProps): JSX.Element {
   return (
     <Card
-      onPress={onPress}
       footer={
         (stats != null) &&
           <BarPercent styles='-mt-2' percents={stats.percents} colors={stats.colors} />