Fix routing precedence algorithm

.vtexignore

@@ -11,5 +11,7 @@ CHANGELOG.md
 react/**/__tests__/**
 react/**/__mocks__/**
 react/**/*.test.js
+react/**/*.test.ts
+react/**/*.test.tsx
 react/testUtils/**/*
 react/.babelrc

CHANGELOG.md

@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Changed
+- Change routing precedence algorithm to match the server-side one.
 
 ## [8.38.3] - 2019-06-26
 ### Fixed
@@ -39,7 +41,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Sets every URI scope to `private` whenever the workspace's root interface declarer has a `requiresAuthorization` setting with value `true`.
 
 ## [8.36.3] - 2019-06-13
-### Fixed 
+### Fixed
 - Fix data-src attribute for lazy image loading.
 
 ## [8.36.2] - 2019-06-13

react/package.json

@@ -2,7 +2,7 @@
   "license": "UNLICENSED",
   "scripts": {
     "lint": "tsc --noEmit --pretty && eslint --fix --ext ts,tsx .",
-    "test": "jest"
+    "test": "vtex-test-tools test"
   },
   "dependencies": {
     "@types/react-content-loader": "^3.1.4",
@@ -54,6 +54,7 @@
     "@types/react-hot-loader": "^4.1.0",
     "@types/react-intl": "^2.3.5",
     "@types/route-parser": "^0.1.1",
+    "@vtex/test-tools": "^0.3.2",
     "babel-core": "^6.26.3",
     "babel-jest": "^24.1.0",
     "babel-preset-env": "^1.7.0",
@@ -72,7 +73,7 @@
     "react-intl": "^2.4.0",
     "react-testing-library": "^5.6.0",
     "regenerator-runtime": "^0.13.1",
-    "ts-jest": "^23.10.5",
+    "ts-jest": "^24.0.1",
     "typescript": "3.5.2"
   }
 }

react/utils/pages.test.ts

@@ -0,0 +1,37 @@
+import { getComparablePrecedence } from './pages'
+
+describe('#getPrecedence', () => {
+  it('should set precedence as expected', () => {
+    const routes = [
+      '/a/b/c',
+      '/a/:b/c',
+      '/:a/b/c',
+      '/a/b/:c',
+      '/a/:b/:c',
+      '/:a/b/:c',
+      '/a/b/*c',
+      '/a/:b/*c',
+      '/:a/b/*c',
+      '/a/*b',
+      '/:a/*b',
+      '/*a',
+    ]
+
+    const result = routes.sort((a, b) => getComparablePrecedence(b) > getComparablePrecedence(a) ? -1 : 1)
+
+    expect(result).toEqual([
+      '/a/b/c',
+      '/a/b/:c',
+      '/a/b/*c',
+      '/a/:b/c',
+      '/a/:b/:c',
+      '/a/:b/*c',
+      '/a/*b',
+      '/:a/b/c',
+      '/:a/b/:c',
+      '/:a/b/*c',
+      '/:a/*b',
+      '/*a',
+    ])
+  })
+})

react/utils/pages.ts

@@ -6,11 +6,21 @@ import RouteParser from 'route-parser'
 
 const EMPTY_OBJECT = (Object.freeze && Object.freeze({})) || {}
 
-function getScore(path: string) {
-  const catchAll = (path.match(/\*/g) || []).length
-  const catchOne = (path.match(/:/g) || []).length
-  const fixed = (path.match(/\/[\w_-]+/g) || []).length
-  return ~((catchAll << 12) + (catchOne << 6) + ((1 << 6) - fixed - 1))
+export function getComparablePrecedence(path: string): string {
+  return path
+    .split('/')
+    .reduce((acc, pathSegment) => {
+      if (pathSegment.startsWith('*')) {
+        acc.push(3);
+      } else if (pathSegment.startsWith(':')) {
+        acc.push(2)
+      } else if (pathSegment) {
+        acc.push(1)
+      }
+
+      return acc
+    }, [] as number[])
+    .join()
 }
 
 function isHost(hostname: string) {
@@ -343,8 +353,8 @@ function routeMatchForMappedURL(
 
 function routeMatchFromPath(path: string, routes: Pages): RouteMatch | null {
   let id: string | undefined
-  let score: number
-  let highScore: number = Number.NEGATIVE_INFINITY
+  let pathPrecedence: string
+  let chosenPathPrecedence: string | null = null
 
   for (const name in routes) {
     const pagePath = getPagePath(name, routes)
@@ -357,12 +367,12 @@ function routeMatchFromPath(path: string, routes: Pages): RouteMatch | null {
       continue
     }
 
-    score = getScore(pagePath)
-    if (highScore > score) {
+    pathPrecedence = getComparablePrecedence(pagePath)
+    if (chosenPathPrecedence !== null && chosenPathPrecedence < pathPrecedence) {
       continue
     }
 
-    highScore = score
+    chosenPathPrecedence = pathPrecedence
     id = name
   }