Assertion improvements (#81)

* remove css

* added Right click functionality for mouse and touchpad

* updated readme

README.md

@@ -45,14 +45,25 @@ With this we will:
 <%= render 'magic_test/support' if Rails.env.test? %>
 ```
 
+Generate binstubs by running `bundle binstubs magic_test` in the root of your Rails application. Now you'll be able to run Magic Test
+with the following command:
+
+```
+bin/magic test test/system/basics_test.rb # for MiniTest
+bin/magic spec spec/system/basics_spec.rb # for RSpec
+```
+
+The bin executable is implicitly running your Rails test with an environment variable that Magic Test looks for. 
+The full command looks like this: `MAGIC_TEST=1 rails test test/system/basics_test.rb`.
+
 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!
 
 ## Usage
 
 ### Running the Example Test
 
 1. Open `test/system/basics_test.rb` in your editor of choice.
-2. Run `MAGIC_TEST=1 rails test test/system/basics_test.rb` on the shell or if you run `bundle binstubs magic_test` you can run your tests with `bin/magic test test/system/basics_test.rb`.
+2. Run `bin/magic test test/system/basics_test.rb` on your shell.
 
 This results in three windows:
 
@@ -83,7 +94,11 @@ You can click on buttons, click on links, fill in forms, and do many other thing
 
 ### Generating Assertions in the Browser
 
-If you want to add an assertion that some content exists on the page, simply highlight some text and press <kbd>Control</kbd><kbd>Shift</kbd> + <kbd>A</kbd>. You should see an alert dialog confirming the assertion has been generated.
+#### Method 1:
+If you want to add an assertion that some content exists on the page, simply highlight some text and press <kbd>Control</kbd><kbd>Shift</kbd> + <kbd>A</kbd>. You should see a confirm dialog asking for if you want to move forward with the assertion or cancel. 
+
+#### Method 2:
+You can now generate assertions by selecting your text and right-clicking with your mouse or touchpad. 
 
 ### Flushing In Browser Actions and Assertions to the Test File
 

app/views/magic_test/_context_menu.html.erb

@@ -13,6 +13,7 @@
 
 
   function enableKeyboardShortcuts() {
+    // Ctrl+A to generate an assertion
     function keydown(event) {
       if (event.ctrlKey && event.shiftKey && event.key === 'A') {
         event.preventDefault();
@@ -29,9 +30,42 @@
         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.");
+        var accept = "You selected:\n\r" + text + "\n\rOk: Type `flush` into debugger console to add to test.\nCancel: To select new text."
+        if (window.confirm(accept)) {
+          testingOutput.push({action: action, target: target, options: options});
+          sessionStorage.setItem("testingOutput", JSON.stringify(testingOutput));
+        }
+        else {
+          console.log("Assertion was not generated.")
+        }
+      }
+    }
+
+    // Right-click to generate an assertion
+    function riteklick(event) {
+      if (event.button == 2) {
+        window.addEventListener("contextmenu", e => e.preventDefault());
+        setupAssertion(event);
+      }
+    }
+
+    document.addEventListener('mousedown', riteklick);
+
+    function setupAssertion(event) {
+      var text = selectedText().trim();
+      if (text.length > 0) {
+        var action = assertMethod() + text.replace("'", "\\\'") +  "'";
+        var testingOutput = JSON.parse(sessionStorage.getItem("testingOutput"));
+        var target = "";
+        var options = "";
+        var accept = "You selected:\n\r" + text + "\n\rOk: Type `flush` into debugger console to add to test.\nCancel: To select new text."
+        if (window.confirm(accept)) {
+          testingOutput.push({action: action, target: target, options: options});
+          sessionStorage.setItem("testingOutput", JSON.stringify(testingOutput));
+        }
+        else {
+          console.log("Assertion was not generated.")
+        }
       }
     }
 

test/dummy/app/assets/config/manifest.js

@@ -1,3 +1,2 @@
 //= link_tree ../images
 //= link_directory ../stylesheets .css
-//= link magic_test/application.js

test/dummy/app/assets/stylesheets/application.css

@@ -14,16 +14,3 @@
  *= require_self
  */
 
-/* Bullet Train blue #047bf8; */
-
-:root {
-  --light-blue: 	hsl(211, 97%, 83%);
-  --blue: 	hsl(211, 97%, 49%);
-  --dark-blue: 	hsl(211, 97%, 33%);
-}
-
-.site-header {
-  background-color: var(--blue);
-  color: var(--light-blue);
-  padding: 1rem;
-}