Hook up new cypress project (#919)

* hook up new cypress project

* add --

* fix flakey test

* try removing duplicate CYPRESS_CI flag

* try this

* and this

* revert

* attempt fix URI encoding issue

.github/workflows/validate.yml

@@ -16,7 +16,7 @@ jobs:
           npm install
           npm run lint
           npm run build
-          npm start & npx wait-on http://localhost:3000 && CYPRESS_CI=true npm run cy:run -- --config baseUrl=http://localhost:3000
+          npm start & npx wait-on http://localhost:3000 && npm run cy:run -- --record --key 26c0b9eb-40f9-4ca6-b91d-a39f03652011 --config baseUrl=http://localhost:3000
         env:
           CI: true
           CYPRESS_CI: true

cypress.json

@@ -1,4 +1,4 @@
 {
   "baseUrl": "https://carbon.now.sh/",
-  "projectId": "t6c8sb"
+  "projectId": "p2tbx4"
 }

lib/routing.js

@@ -125,9 +125,36 @@ export const deserializeState = serializedState => {
   return JSON.parse(decodeURIComponent(stateString))
 }
 
+const getQueryStringObject = query => {
+  if (query.state) {
+    return deserializeState(query.state)
+  }
+
+  const state = mapper.map(readMappings, query)
+
+  Object.keys(state).forEach(key => {
+    if (state[key] === '') state[key] = undefined
+  })
+
+  return state
+}
+
+function getQueryStringState(query) {
+  const queryParams = getQueryStringObject(query)
+  return Object.keys(queryParams).length ? queryParams : {}
+}
+
+function fixAsPathEncoding(asPath) {
+  try {
+    return url.parse(asPath, true)
+  } catch (e) {
+    return url.parse(encodeURI(asPath), true)
+  }
+}
+
 export const getRouteState = router => {
   const { asPath = '' } = router
-  const { query, pathname } = url.parse(asPath, true)
+  const { query, pathname } = fixAsPathEncoding(asPath)
   const queryState = getQueryStringState(query)
   const path = escapeHtml(
     pathname
@@ -161,22 +188,3 @@ export const updateRouteState = (router, state) => {
     { shallow: true }
   )
 }
-
-const getQueryStringObject = query => {
-  if (query.state) {
-    return deserializeState(query.state)
-  }
-
-  const state = mapper.map(readMappings, query)
-
-  Object.keys(state).forEach(key => {
-    if (state[key] === '') state[key] = undefined
-  })
-
-  return state
-}
-
-function getQueryStringState(query) {
-  const queryParams = getQueryStringObject(query)
-  return Object.keys(queryParams).length ? queryParams : {}
-}