Remind users to assert for unique content on each new page

app/views/magic_test/_assertion_modal.html

@@ -0,0 +1,88 @@
+<style>
+  .assertion-modal {
+    display: none;
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    overflow: auto;
+    height: 100%;
+    width: 100%;
+    color: black;
+    background-color: rgba(0,0,0,0.4);
+  }
+
+  .assertion-modal-content {
+    padding: 20px;
+    border: 1px solid #888;
+    width: 40%;
+    background-color: white;
+    margin: 0 auto;
+  }
+
+  .assertion-modal h3 {
+    all: revert;
+    margin-top: 0;
+  }
+
+  .assertion-modal ol {
+    all: revert;
+  }
+
+  .ok-button-wrapper {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  .ok-button {
+    all: revert;
+    float: right;
+    padding: 5px 30px;
+  }
+</style>
+
+<script>
+  window.addEventListener('load', function () {
+    const activeMagicTestSession = JSON.parse(sessionStorage.getItem("activeMagicTestSession"));
+
+    if (!activeMagicTestSession) return;
+
+    const modalHTML = "  <div class=\"assertion-modal-content\" role=\"dialog\" aria-modal=\"true\">\n" +
+      "    <h3>Reminder to assert!</h3>\n" +
+      "    <p>Please don't forget to assert unique content on this page:</p>\n" +
+      "    </p>\n" +
+      "    <ol>" +
+      "      <li>" +
+      "        Select a unique content on this page" +
+      "      </li>" +
+      "      <li>" +
+      "        Press `Control + Shift + A`" +
+      "      </li>" +
+      "    </ol>" +
+      "    <div class=\"ok-button-wrapper\">" +
+      "      <button id=\"ok-button\" class=\"ok-button\">OK</button>" +
+      "    </div>" +
+      "  </div>\n";
+
+    let assertionModal = document.createElement("div");
+    assertionModal.id = "assertion-modal";
+    assertionModal.className = "assertion-modal";
+    assertionModal.innerHTML = modalHTML;
+    document.body.appendChild(assertionModal);
+
+    assertionModal.style.display = "block";
+    document.body.style.overflow = "hidden";
+  });
+
+  // Close the modal when users click OK button
+  document.addEventListener('click', function (event) {
+    const okButton = document.getElementById("ok-button");
+    const modal = document.getElementById("assertion-modal");
+
+    if (event.target === okButton) {
+      modal.style.display = "none";
+      document.body.style.overflow = "initial";
+    }
+  });
+</script>

app/views/magic_test/_support.html.erb

@@ -6,4 +6,5 @@
   <%= render 'magic_test/mutation_observer' %>
   <%= render 'magic_test/javascript_helpers' %>
   <%= render 'magic_test/listeners' %>
+  <%= render 'magic_test/assertion_modal' %>
 <% end %>

lib/magic_test/support.rb

@@ -77,12 +77,21 @@ def empty_cache
 
     def magic_test
       empty_cache
+      store_active_magic_test_session_variable
+
+      # reloading the page so that activeMagicTestSession variable is set and recognized by the JS
+      # activeMagicTestSession is not set in the beginning because HTML file would have already been rendered before this method is invoked
+      page.evaluate_script("window.location.reload()")
+
       @test_lines_written = 0
+
       begin
         # 👋 This isn't helpful context. Type `up` and hit enter to see where you really are.
         binding.pry
       rescue
         retry
+      ensure
+        reset_active_magic_test_session_variable
       end
     end
 
@@ -108,8 +117,16 @@ def get_last
     # TODO this feels like it's going to end up burning people who have other support files in `test` or `spec` that don't include `helper` in the name.
     def get_last_caller(caller)
       caller.select { |s| s.include?("/test/") || s.include?("/spec/") }
-        .reject { |s| s.include?("helper") }
-        .first.split(":").first(2)
+            .reject { |s| s.include?("helper") }
+            .first.split(":").first(2)
+    end
+
+    def store_active_magic_test_session_variable
+      page.evaluate_script("sessionStorage.setItem('activeMagicTestSession', true)")
+    end
+
+    def reset_active_magic_test_session_variable
+      page.evaluate_script("sessionStorage.setItem('activeMagicTestSession', null)")
     end
   end
 end