1
\$\begingroup\$

Necessary explanations

The code below deal with the relationship between my question and test_case model.

A question ha many test cases, and the html/js code represents modal windows where I can give as input a source code (a simple "hello world" program made in Pascal, for example) and test the result with all the test cases of the question (a test case have specified the desired output, and so I check if the source code pass).

In the modal footer I show the test cases results, with a link where when I click, show the source code output.

Code to review

(Please note that the code is in english, but what the html show to user is in portuguese).

My _test_modal.html.erb, where I put the source code to test and show the results (test_url variable in the ajax request can be assumed as the url to my test_all action):

<div class="modal" id="test-modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button id="close" type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Execute seus casos de teste</h4>
      </div>
      <div class="modal-body">
        <b>Forneça uma solução</b>
        <textarea id="solution-test" cols="90", rows="10"></textarea>
        <button id="execute-test" class="btn btn-primary">Testar</button>
      </div>
      <div class="modal-footer">
        <div id="test-results"></div>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  $('#execute-test').click(function() {
    // Change to "testing layout".
    var text = $(this).text();
    $(this).append(' <i class="fa fa-refresh fa-spin"></i>')
    $(this).attr('disabled', 'true');
    $('#test-results').empty();

    var source_code = $('#solution-test').val();
    $.ajax({
     type: 'POST',
     url: '<%= test_url %>',
     dataType: 'script',
     data: { source_code: source_code },
     success: function() {
       // Change to "test layout".
       $('#execute-test').attr('disabled', false);
       $('#execute-test').empty();
       $('#execute-test').text(text);
     }
   });
  });
</script>

My test_all action of my test_cases_controller.rb (plain_current_datetime came from ApplicationHelper, and its used as a filename inside test_all question method):

class TestCasesController < ApplicationController
  include ApplicationHelper

  before_action :authenticate_user!
  before_action :find_question, only: [:index, :new, :create, :test_all] # it'll return @question

  def test_all
    @results = @question.test_all(plain_current_datetime, "pas", params[:source_code])
    respond_to { |format| format.js }
  end
...

end

My test_all.js.erb view (where I update the _test_modal.html.erb with the test cases results):

// Display each result in the screen.
<% @results.each_with_index do |result, index| %>
  // Div to put the result.
  var div = $(document.createElement('div'));

  <% if result[:status] == :error %>
    div.attr('class', 'alert alert-danger text-left');
    div.append("<i class='icon fa fa-close'> <%= result[:title] %></i>");
  <% else %>
    div.attr('class', 'alert alert-success text-left');
    div.append("<i class='icon fa fa-check'> <%= result[:title] %></i>");
  <% end %>
  div.append("<b><a href='#' id='test_<%= index %>' class='pull-right show-log' data-custom-value='<%= j result[:output] %>'>Ver o resultado</a></b>")

  $('#test-results').append(div)
<% end %>


$('.show-log').click(function(event) {
    // 'output' is the variable with the content shown in modal.
    var output = $('#' + event.target.id).data('customValue');
    <%= render partial: 'show_log_modal' %>
});

Main doubts

I would like to ask a code review specially in test_all.js.erb. I don't know if I'm following the best way of implementation in the part that refers to displaying the logs:

I'm using data-custom-value property to save the log in the page, and I get this data when I click in a link with the class .show-log.

In the same project where I did this, I need to do something simillar now, and I'm thinking in use the same logic where I used here (but now saving a object id from database in data-custom-value). It is better check if I'm in the right way before do more of this.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.