Fix conflict with Content Security Policy headers

README.md

@@ -44,7 +44,13 @@ With this we will:
  Finally, because it’s hard for us to do automatically, you will need to add the following before any closing `</head>` tags in any of the files in `app/views/layouts`:
 
 ```ruby+erb
-<%= render 'magic_test/support' if Rails.env.test? %>
+<%= render 'magic_test/support' %>
+```
+
+You can also pass attributes, like CSP nonce, for the `script` tag inside:
+
+```ruby+erb
+<%= render 'magic_test/support', nonce: true %>
 ```
 
 You should be done now! To review what we’ve done for you, be sure to do a `git diff` at this point and make sure our generators didn’t break anything!

app/views/magic_test/_context_menu.js

@@ -0,0 +1,46 @@
+function ready(fn) {
+  if (document.readyState !== 'loading'){
+    fn();
+  } else {
+    document.addEventListener('DOMContentLoaded', fn);
+  }
+}
+
+ready(function() {
+  enableKeyboardShortcuts();
+});
+
+
+function enableKeyboardShortcuts() {
+  function keydown(event) {
+    if (event.ctrlKey && event.shiftKey && event.key === 'A') {
+      event.preventDefault();
+      generateAssertion();
+    }
+  }
+
+  document.addEventListener('keydown', keydown, false);
+
+  function generateAssertion() {
+    var text = selectedText().trim();
+    if (text.length > 0) {
+      var action = "assert page.has_content? '" + text.replace("'", "\\\'") +  "'";
+      var testingOutput = JSON.parse(sessionStorage.getItem("testingOutput"));
+      var target = "";
+      var options = "";
+      testingOutput.push({action: action, target: target, options: options});
+      sessionStorage.setItem("testingOutput", JSON.stringify(testingOutput));
+      alert("Generated an assertion for \"" + selectedText() + "\". Type `flush` in the debugger console to add it to your test file.");
+    }
+  }
+
+  function selectedText() {
+    var text = "";
+    if (window.getSelection) {
+        text = window.getSelection().toString();
+    } else if (document.selection && document.selection.type != "Control") {
+        text = document.selection.createRange().text;
+    }
+    return text;
+  }
+}

app/views/magic_test/_finders.js

@@ -0,0 +1,49 @@
+function getPathTo(element) {
+  if (element.tagName === 'HTML') {
+    return '/HTML[1]';
+  }
+  if (element===document.body) {
+    return '/HTML[1]/BODY[1]';
+  }
+  var ix = 0;
+  var siblings = element.parentNode.childNodes;
+  for (var i= 0; i<siblings.length; i++) {
+    var sibling= siblings[i];
+    if (sibling===element) {
+      return getPathTo(element.parentNode)+'/'+element.tagName+'['+(ix+1)+']';
+    }
+    if (sibling.nodeType===1 && sibling.tagName===element.tagName) {
+      ix++;
+    }
+  }
+}
+
+function visibleFilter(target){
+  var computedStyle = window.getComputedStyle(target);
+  return !(computedStyle.display === 'none' || computedStyle.visibility === 'hidden' || target.hidden)
+}
+
+
+function finderForElement(element) {
+  // Try to find just using the element tagName
+  var tagName = element.tagName.toLowerCase();
+  if (document.querySelectorAll(tagName).length === 1) {
+    return `find('${tagName}')`;
+  }
+  // Try adding in the classes of the element
+  var classList = [].slice.apply(element.classList)
+  var classString = classList.length ? "." + classList.join('.') : "";
+  if (classList.length && document.querySelectorAll(tagName + classList).length === 1) {
+    return `find('${tagName}${classString}')`;
+  }
+  // Try adding in the text of the element
+  var text = element.textContent.trim();
+  var targets = Array.from(document.querySelectorAll(`${tagName}${classString}`))
+                     .filter(visibleFilter)
+                     .filter((el) => el.textContent.includes(text))
+  if (text && targets.length === 1) {
+    return `find('${tagName}${classString}', text: '${text}')`;
+  }
+  // use the xpath to the element
+  return `find(:xpath, '${getPathTo(element)}')`;
+}