Add code frame util

lilaconlee · lilaconlee · commit 059abaee3398 · 2019-03-26T07:18:23.000-07:00
diff --git a/packages/driver/package.json b/packages/driver/package.json
@@ -17,6 +17,7 @@
     "lib"
   ],
   "devDependencies": {
+    "@babel/code-frame": "^7.0.0",
     "@cypress/bower-kendo-ui": "0.0.2",
     "@cypress/sinon-chai": "1.1.0",
     "@cypress/underscore.inflection": "1.0.1",
diff --git a/packages/driver/src/cypress/utils.coffee b/packages/driver/src/cypress/utils.coffee
@@ -3,6 +3,7 @@ _ = require("lodash")
 methods = require("methods")
 moment = require("moment")
 Promise = require("bluebird")
+codeFrameColumns = require("@babel/code-frame").codeFrameColumns
 
 $jquery = require("../dom/jquery")
 $Location = require("./location")
@@ -184,6 +185,20 @@ module.exports = {
 
     @formatErrorMessage(errMessage, args)
 
+  getCodeFrame: (source, path, lineNumber, columnNumber) ->
+    location = { start: { line: lineNumber, column: columnNumber } }
+    options = {
+      highlightCode: true,
+      forceColor: true
+    }
+
+    return {
+      frame: codeFrameColumns(source, location, options),
+      path: path,
+      lineNumber: lineNumber,
+      columnNumber: columnNumber
+    }
+
   normalizeObjWithLength: (obj) ->
     ## lodash shits the bed if our object has a 'length'
     ## property so we have to normalize that
diff --git a/packages/driver/test/cypress/integration/cypress/utils_spec.coffee b/packages/driver/test/cypress/integration/cypress/utils_spec.coffee
@@ -74,3 +74,48 @@ describe "driver/src/cypress/utils", ->
       expect(err2.docs).to.eq("baz")
 
       expect(err2.stack).to.eq("Error: foo\n\nbar\n" + stack)
+
+  context ".getCodeFrame", ->
+    it "returns a code frame with syntax highlighting", ->
+      path = "foo/bar/baz"
+      line = 5
+      column = 6
+      src = """
+        <!DOCTYPE html>
+        <html>
+        <body>
+          <script type="text/javascript">
+            foo.bar()
+          </script>
+        </body>
+        </html>
+      """
+
+      { frame, path, lineNumber, columnNumber } = $utils.getCodeFrame(src, path, line, column)
+
+      expect(frame).to.contain("foo")
+      expect(frame).to.contain("bar()")
+      expect(frame).to.contain("[0m")
+      expect(path).to.eq("foo/bar/baz")
+      expect(lineNumber).to.eq(5)
+      expect(columnNumber).to.eq(6)
+
+    ## TODO determine if we want more failure cases covered
+    it "fails gracefully", ->
+      path = "foo/bar/baz"
+      line = 100
+      column = 6
+      src = """
+        <!DOCTYPE html>
+        <html>
+        <body>
+          <script type="text/javascript">
+            foo.bar()
+          </script>
+        </body>
+        </html>
+      """
+
+      { frame } = $utils.getCodeFrame(src, path, line, column)
+
+      expect(frame).to.eq("")
