diff --git a/README.md b/README.md index 1acc939..6e0f966 100644 --- a/README.md +++ b/README.md @@ -45,6 +45,17 @@ 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 @@ -52,7 +63,7 @@ You should be done now! To review what we’ve done for you, be sure to do a `gi ### 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 ControlShift + A. 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 ControlShift + A. 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 diff --git a/app/views/magic_test/_context_menu.html.erb b/app/views/magic_test/_context_menu.html.erb index 8b94a22..40370ca 100644 --- a/app/views/magic_test/_context_menu.html.erb +++ b/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.") + } } } diff --git a/test/dummy/app/assets/config/manifest.js b/test/dummy/app/assets/config/manifest.js index 96d5fd6..5918193 100644 --- a/test/dummy/app/assets/config/manifest.js +++ b/test/dummy/app/assets/config/manifest.js @@ -1,3 +1,2 @@ //= link_tree ../images //= link_directory ../stylesheets .css -//= link magic_test/application.js \ No newline at end of file diff --git a/test/dummy/app/assets/stylesheets/application.css b/test/dummy/app/assets/stylesheets/application.css index b3d2232..3951e52 100644 --- a/test/dummy/app/assets/stylesheets/application.css +++ b/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; -}