/*
 * decaffeinate suggestions:
 * DS101: Remove unnecessary use of Array.from
 * DS207: Consider shorter variations of null checks
 * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
 */
describe('Problem', function() {
  const problem_content_default = readFixtures('problem_content.html');

  beforeEach(function() {
    // Stub MathJax
    window.MathJax = {
      Hub: jasmine.createSpyObj('MathJax.Hub', ['getAllJax', 'Queue']),
      Callback: jasmine.createSpyObj('MathJax.Callback', ['After'])
    };
    this.stubbedJax = {root: jasmine.createSpyObj('jax.root', ['toMathML'])};
    MathJax.Hub.getAllJax.and.returnValue([this.stubbedJax]);
    window.update_schematics = function() {};
    spyOn(SR, 'readText');
    spyOn(SR, 'readTexts');

    // Load this function from spec/helper.js
    // Note that if your test fails with a message like:
    // 'External request attempted for blah, which is not defined.'
    // this msg is coming from the stubRequests function else clause.
    jasmine.stubRequests();

    loadFixtures('problem.html');

    spyOn(Logger, 'log');
    spyOn($.fn, 'load').and.callFake(function(url, callback) {
      $(this).html(readFixtures('problem_content.html'));
      return callback();
    });
  });

  describe('constructor', function() {

    it('set the element from html', function() {
      this.problem999 = new Problem((`\
<section class='xblock xblock-student_view xmodule_display xmodule_CapaModule' data-type='Problem'> \
<section id='problem_999' \
class='problems-wrapper' \
data-problem-id='i4x://edX/999/problem/Quiz' \
data-url='/problem/quiz/'> \
</section> \
</section>\
`)
      );
      expect(this.problem999.element_id).toBe('problem_999');
    });

    it('set the element from loadFixtures', function() {
      this.problem1 = new Problem($('.xblock-student_view'));
      expect(this.problem1.element_id).toBe('problem_1');
    });
  });

  describe('bind', function() {
    beforeEach(function() {
      spyOn(window, 'update_schematics');
      MathJax.Hub.getAllJax.and.returnValue([this.stubbedJax]);
      this.problem = new Problem($('.xblock-student_view'));
    });

    it('set mathjax typeset', () => expect(MathJax.Hub.Queue).toHaveBeenCalled());

    it('update schematics', () => expect(window.update_schematics).toHaveBeenCalled());

    it('bind answer refresh on button click', function() {
      expect($('div.action button')).toHandleWith('click', this.problem.refreshAnswers);
    });

    it('bind the submit button', function() {
      expect($('.action .submit')).toHandleWith('click', this.problem.submit_fd);
    });

    it('bind the reset button', function() {
      expect($('div.action button.reset')).toHandleWith('click', this.problem.reset);
    });

    it('bind the show button', function() {
      expect($('.action .show')).toHandleWith('click', this.problem.show);
    });

    it('bind the save button', function() {
      expect($('div.action button.save')).toHandleWith('click', this.problem.save);
    });

    it('bind the math input', function() {
      expect($('input.math')).toHandleWith('keyup', this.problem.refreshMath);
    });
  });

  describe('bind_with_custom_input_id', function() {
    beforeEach(function() {
      spyOn(window, 'update_schematics');
      MathJax.Hub.getAllJax.and.returnValue([this.stubbedJax]);
      this.problem = new Problem($('.xblock-student_view'));
      return $(this).html(readFixtures('problem_content_1240.html'));
    });

    it('bind the submit button', function() {
      expect($('.action .submit')).toHandleWith('click', this.problem.submit_fd);
    });

    it('bind the show button', function() {
      expect($('div.action button.show')).toHandleWith('click', this.problem.show);
    });
  });


  describe('renderProgressState', function() {
    beforeEach(function() {
      this.problem = new Problem($('.xblock-student_view'));
    });

    const testProgessData = function(problem, score, total_possible, attempts, graded, expected_progress_after_render) {
      problem.el.data('problem-score', score);
      problem.el.data('problem-total-possible', total_possible);
      problem.el.data('attempts-used', attempts);
      problem.el.data('graded', graded);
      expect(problem.$('.problem-progress').html()).toEqual("");
      problem.renderProgressState();
      expect(problem.$('.problem-progress').html()).toEqual(expected_progress_after_render);
    };

    describe('with a status of "none"', function() {
      it('reports the number of points possible and graded', function() {
        testProgessData(this.problem, 0, 1, 0, "True", "1 point possible (graded)");
      });

      it('displays the number of points possible when rendering happens with the content', function() {
        testProgessData(this.problem, 0, 2, 0, "True", "2 points possible (graded)");
      });

      it('reports the number of points possible and ungraded', function() {
        testProgessData(this.problem, 0, 1, 0, "False", "1 point possible (ungraded)");
      });

      it('displays ungraded if number of points possible is 0', function() {
        testProgessData(this.problem, 0, 0, 0, "False", "0 points possible (ungraded)");
      });

      it('displays ungraded if number of points possible is 0, even if graded value is True', function() {
        testProgessData(this.problem, 0, 0, 0, "True", "0 points possible (ungraded)");
      });

      it('reports the correct score with status none and >0 attempts', function() {
        testProgessData(this.problem, 0, 1, 1, "True", "0/1 point (graded)");
      });

      it('reports the correct score with >1 weight, status none, and >0 attempts', function() {
        testProgessData(this.problem, 0, 2, 2, "True", "0/2 points (graded)");
      });
    });

    describe('with any other valid status', function() {

      it('reports the current score', function() {
        testProgessData(this.problem, 1, 1, 1, "True", "1/1 point (graded)");
      });

      it('shows current score when rendering happens with the content', function() {
        testProgessData(this.problem, 2, 2, 1, "True", "2/2 points (graded)");
      });

      it('reports the current score even if problem is ungraded', function() {
        testProgessData(this.problem, 1, 1, 1, "False", "1/1 point (ungraded)");
      });
    });

    describe('with valid status and string containing an integer like "0" for detail', () =>
      // These tests are to address a failure specific to Chrome 51 and 52 +
      it('shows 0 points possible for the detail', function() {
        testProgessData(this.problem, 0, 0, 1, "False", "0 points possible (ungraded)");
      })
    );

    describe('with a score of null (show_correctness == false)', function() {
      it('reports the number of points possible and graded, results hidden', function() {
        testProgessData(this.problem, null, 1, 0, "True", "1 point possible (graded, results hidden)");
      });

      it('reports the number of points possible (plural) and graded, results hidden', function() {
        testProgessData(this.problem, null, 2, 0, "True", "2 points possible (graded, results hidden)");
      });

      it('reports the number of points possible and ungraded, results hidden', function() {
        testProgessData(this.problem, null, 1, 0, "False", "1 point possible (ungraded, results hidden)");
      });

      it('displays ungraded if number of points possible is 0, results hidden', function() {
        testProgessData(this.problem, null, 0, 0, "False", "0 points possible (ungraded, results hidden)");
      });

      it('displays ungraded if number of points possible is 0, even if graded value is True, results hidden', function() {
        testProgessData(this.problem, null, 0, 0, "True", "0 points possible (ungraded, results hidden)");
      });

      it('reports the correct score with status none and >0 attempts, results hidden', function() {
        testProgessData(this.problem, null, 1, 1, "True", "1 point possible (graded, results hidden)");
      });

      it('reports the correct score with >1 weight, status none, and >0 attempts, results hidden', function() {
        testProgessData(this.problem, null, 2, 2, "True", "2 points possible (graded, results hidden)");
      });
    });
  });

  describe('render', function() {
    beforeEach(function() {
      this.problem = new Problem($('.xblock-student_view'));
      this.bind = this.problem.bind;
      spyOn(this.problem, 'bind');
    });

    describe('with content given', function() {
      beforeEach(function() {
        this.problem.render('Hello World');
      });

      it('render the content', function() {
        expect(this.problem.el.html()).toEqual('Hello World');
      });

      it('re-bind the content', function() {
        expect(this.problem.bind).toHaveBeenCalled();
      });
    });

    describe('with no content given', function() {
      beforeEach(function() {
        spyOn($, 'postWithPrefix').and.callFake((url, callback) => callback({html: "Hello World"}));
        this.problem.render();
      });

      it('load the content via ajax', function() {
        expect(this.problem.el.html()).toEqual('Hello World');
      });

      it('re-bind the content', function() {
        expect(this.problem.bind).toHaveBeenCalled();
      });
    });
  });

  describe('submit_fd', function() {
    beforeEach(function() {
      // Insert an input of type file outside of the problem.
      $('.xblock-student_view').after('<input type="file" />');
      this.problem = new Problem($('.xblock-student_view'));
      spyOn(this.problem, 'submit');
    });

    it('submit method is called if input of type file is not in problem', function() {
      this.problem.submit_fd();
      expect(this.problem.submit).toHaveBeenCalled();
    });
  });

  describe('submit', function() {
    beforeEach(function() {
      this.problem = new Problem($('.xblock-student_view'));
      this.problem.answers = 'foo=1&bar=2';
    });

    it('log the problem_check event', function() {
      spyOn($, 'postWithPrefix').and.callFake(function(url, answers, callback) {
        let promise;
        promise = {
          always(callable) { return callable(); },
          done(callable) { return callable(); }
        };
        return promise;
      });
      this.problem.submit();
      expect(Logger.log).toHaveBeenCalledWith('problem_check', 'foo=1&bar=2');
    });

    it('log the problem_graded event, after the problem is done grading.', function() {
      spyOn($, 'postWithPrefix').and.callFake(function(url, answers, callback) {
        let promise;
        const response = {
          success: 'correct',
          contents: 'mock grader response'
        };
        callback(response);
        promise = {
          always(callable) { return callable(); },
          done(callable) { return callable(); }
        };
        return promise;
      });
      this.problem.submit();
      expect(Logger.log).toHaveBeenCalledWith('problem_graded', ['foo=1&bar=2', 'mock grader response'], this.problem.id);
    });

    it('submit the answer for submit', function() {
      spyOn($, 'postWithPrefix').and.callFake(function(url, answers, callback) {
        let promise;
        promise = {
          always(callable) { return callable(); },
          done(callable) { return callable(); }
        };
        return promise;
      });
      this.problem.submit();
      expect($.postWithPrefix).toHaveBeenCalledWith('/problem/Problem1/problem_check',
          'foo=1&bar=2', jasmine.any(Function));
    });

    describe('when the response is correct', () =>
      it('call render with returned content', function() {
        const contents = '<div class="wrapper-problem-response" aria-label="Question 1"><p>Correct<span class="status">excellent</span></p></div>' +
                   '<div class="wrapper-problem-response" aria-label="Question 2"><p>Yep<span class="status">correct</span></p></div>';
        spyOn($, 'postWithPrefix').and.callFake(function(url, answers, callback) {
          let promise;
          callback({success: 'correct', contents});
          promise = {
            always(callable) { return callable(); },
            done(callable) { return callable(); }
          };
          return promise;
        });
        this.problem.submit();
        expect(this.problem.el).toHaveHtml(contents);
        expect(window.SR.readTexts).toHaveBeenCalledWith(['Question 1: excellent', 'Question 2: correct']);
    })
  );

    describe('when the response is incorrect', () =>
      it('call render with returned content', function() {
        const contents = '<p>Incorrect<span class="status">no, try again</span></p>';
        spyOn($, 'postWithPrefix').and.callFake(function(url, answers, callback) {
          let promise;
          callback({success: 'incorrect', contents});
          promise = {
            always(callable) { return callable(); },
            done(callable) { return callable(); }
          };
          return promise;
        });
        this.problem.submit();
        expect(this.problem.el).toHaveHtml(contents);
        expect(window.SR.readTexts).toHaveBeenCalledWith(['no, try again']);
    })
  );

    it('tests if the submit button is disabled while submitting and the text changes on the button', function() {
      const self = this;
      const curr_html = this.problem.el.html();
      spyOn($, 'postWithPrefix').and.callFake(function(url, answers, callback) {
        // At this point enableButtons should have been called, making the submit button disabled with text 'submitting'
        let promise;
        expect(self.problem.submitButton).toHaveAttr('disabled');
        expect(self.problem.submitButtonLabel.text()).toBe('Submitting');
        callback({
          success: 'incorrect', // does not matter if correct or incorrect here
          contents: curr_html
        });
        promise = {
          always(callable) { return callable(); },
          done(callable) { return callable(); }
        };
        return promise;
      });
      // Make sure the submit button is enabled before submitting
      $('#input_example_1').val('test').trigger('input');
      expect(this.problem.submitButton).not.toHaveAttr('disabled');
      this.problem.submit();
      // After submit, the button should not be disabled and should have text as 'Submit'
      expect(this.problem.submitButtonLabel.text()).toBe('Submit');
      expect(this.problem.submitButton).not.toHaveAttr('disabled');
    });
  });

  describe('submit button on problems', function() {

    beforeEach(function() {
      this.problem = new Problem($('.xblock-student_view'));
      this.submitDisabled = disabled => {
        if (disabled) {
          expect(this.problem.submitButton).toHaveAttr('disabled');
        } else {
          expect(this.problem.submitButton).not.toHaveAttr('disabled');
        }
      };
    });

    describe('some basic tests for submit button', () =>
      it('should become enabled after a value is entered into the text box', function() {
        $('#input_example_1').val('test').trigger('input');
        this.submitDisabled(false);
        $('#input_example_1').val('').trigger('input');
        this.submitDisabled(true);
      })
    );

    describe('some advanced tests for submit button', function() {
      const radioButtonProblemHtml = readFixtures('radiobutton_problem.html');
      const checkboxProblemHtml = readFixtures('checkbox_problem.html');

      it('should become enabled after a checkbox is checked', function() {
        $('#input_example_1').replaceWith(checkboxProblemHtml);
        this.problem.submitAnswersAndSubmitButton(true);
        this.submitDisabled(true);
        $('#input_1_1_1').click();
        this.submitDisabled(false);
        $('#input_1_1_1').click();
        this.submitDisabled(true);
      });

      it('should become enabled after a radiobutton is checked', function() {
        $('#input_example_1').replaceWith(radioButtonProblemHtml);
        this.problem.submitAnswersAndSubmitButton(true);
        this.submitDisabled(true);
        $('#input_1_1_1').attr('checked', true).trigger('click');
        this.submitDisabled(false);
        $('#input_1_1_1').attr('checked', false).trigger('click');
        this.submitDisabled(true);
      });

      it('should become enabled after a value is selected in a selector', function() {
        const html = `\
<div id="problem_sel">
<select>
<option value="val0">Select an option</option>
<option value="val1">1</option>
<option value="val2">2</option>
</select>
</div>\
`;
        $('#input_example_1').replaceWith(html);
        this.problem.submitAnswersAndSubmitButton(true);
        this.submitDisabled(true);
        $("#problem_sel select").val("val2").trigger('change');
        this.submitDisabled(false);
        $("#problem_sel select").val("val0").trigger('change');
        this.submitDisabled(true);
      });

      it('should become enabled after a radiobutton is checked and a value is entered into the text box', function() {
        $(radioButtonProblemHtml).insertAfter('#input_example_1');
        this.problem.submitAnswersAndSubmitButton(true);
        this.submitDisabled(true);
        $('#input_1_1_1').attr('checked', true).trigger('click');
        this.submitDisabled(true);
        $('#input_example_1').val('111').trigger('input');
        this.submitDisabled(false);
        $('#input_1_1_1').attr('checked', false).trigger('click');
        this.submitDisabled(true);
      });

      it('should become enabled if there are only hidden input fields', function() {
        const html = `\
<input type="text" name="test" id="test" aria-describedby="answer_test" value="" style="display:none;">\
`;
        $('#input_example_1').replaceWith(html);
        this.problem.submitAnswersAndSubmitButton(true);
        this.submitDisabled(false);
      });
    });
  });

  describe('reset', function() {
    beforeEach(function() {
      this.problem = new Problem($('.xblock-student_view'));
    });

    it('log the problem_reset event', function() {
      spyOn($, 'postWithPrefix').and.callFake(function(url, answers, callback) {
        let promise;
        promise =
          {always(callable) { return callable(); }};
        return promise;
      });
      this.problem.answers = 'foo=1&bar=2';
      this.problem.reset();
      expect(Logger.log).toHaveBeenCalledWith('problem_reset', 'foo=1&bar=2');
    });

    it('POST to the problem reset page', function() {
      spyOn($, 'postWithPrefix').and.callFake(function(url, answers, callback) {
        let promise;
        promise =
          {always(callable) { return callable(); }};
        return promise;
      });
      this.problem.reset();
      expect($.postWithPrefix).toHaveBeenCalledWith('/problem/Problem1/problem_reset',
          { id: 'i4x://edX/101/problem/Problem1' }, jasmine.any(Function));
    });

    it('render the returned content', function() {
      spyOn($, 'postWithPrefix').and.callFake(function(url, answers, callback) {
        let promise;
        callback({html: "Reset", success: true});
        promise =
            {always(callable) { return callable(); }};
        return promise;
      });
      this.problem.reset();
      expect(this.problem.el.html()).toEqual('Reset');
    });

    it('sends a message to the window SR element', function() {
      spyOn($, 'postWithPrefix').and.callFake(function(url, answers, callback) {
        let promise;
        callback({html: "Reset", success: true});
        promise =
          {always(callable) { return callable(); }};
        return promise;
      });
      this.problem.reset();
      expect(window.SR.readText).toHaveBeenCalledWith('This problem has been reset.');
    });

    it('shows a notification on error', function() {
      spyOn($, 'postWithPrefix').and.callFake(function(url, answers, callback) {
        let promise;
        callback({msg: "Error on reset.", success: false});
        promise =
          {always(callable) { return callable(); }};
        return promise;
      });
      this.problem.reset();
      expect($('.notification-gentle-alert .notification-message').text()).toEqual("Error on reset.");
    });

    it('tests that reset does not enable submit or modify the text while resetting', function() {
      const self = this;
      const curr_html = this.problem.el.html();
      spyOn($, 'postWithPrefix').and.callFake(function(url, answers, callback) {
        // enableButtons should have been called at this point to set them to all disabled
        let promise;
        expect(self.problem.submitButton).toHaveAttr('disabled');
        expect(self.problem.submitButtonLabel.text()).toBe('Submit');
        callback({success: 'correct', html: curr_html});
        promise =
          {always(callable) { return callable(); }};
        return promise;
      });
      // Submit should be disabled
      expect(this.problem.submitButton).toHaveAttr('disabled');
      this.problem.reset();
      // Submit should remain disabled
      expect(self.problem.submitButton).toHaveAttr('disabled');
      expect(self.problem.submitButtonLabel.text()).toBe('Submit');
    });
  });

  describe('show problem with column in id', function() {
    beforeEach(function () {
      this.problem = new Problem($('.xblock-student_view'));
      this.problem.el.prepend('<div id="answer_1_1:11" /><div id="answer_1_2:12" />');
    });

    it('log the problem_show event', function() {
      this.problem.show();
      expect(Logger.log).toHaveBeenCalledWith('problem_show',
          {problem: 'i4x://edX/101/problem/Problem1'});
    });

    it('fetch the answers', function() {
      spyOn($, 'postWithPrefix');
      this.problem.show();
      expect($.postWithPrefix).toHaveBeenCalledWith('/problem/Problem1/problem_show',
          jasmine.any(Function));
    });

    it('show the answers', function() {
      spyOn($, 'postWithPrefix').and.callFake(
        (url, callback) => callback({answers: {'1_1:11': 'One', '1_2:12': 'Two'}})
      );
      this.problem.show();
      expect($("#answer_1_1\\:11")).toHaveHtml('One');
      expect($("#answer_1_2\\:12")).toHaveHtml('Two');
    });

    it('disables the show answer button', function() {
      spyOn($, 'postWithPrefix').and.callFake((url, callback) => callback({answers: {}}));
      this.problem.show();
      expect(this.problem.el.find('.show').attr('disabled')).toEqual('disabled');
    });
  });

  describe('show', function() {
    beforeEach(function() {
      this.problem = new Problem($('.xblock-student_view'));
      this.problem.el.prepend('<div id="answer_1_1" /><div id="answer_1_2" />');
    });

    describe('when the answer has not yet shown', function() {
      beforeEach(function() {
        expect(this.problem.el.find('.show').attr('disabled')).not.toEqual('disabled');
      });

      it('log the problem_show event', function() {
        this.problem.show();
        expect(Logger.log).toHaveBeenCalledWith('problem_show',
            {problem: 'i4x://edX/101/problem/Problem1'});
      });

      it('fetch the answers', function() {
        spyOn($, 'postWithPrefix');
        this.problem.show();
        expect($.postWithPrefix).toHaveBeenCalledWith('/problem/Problem1/problem_show',
            jasmine.any(Function));
      });

      it('show the answers', function() {
        spyOn($, 'postWithPrefix').and.callFake((url, callback) => callback({answers: {'1_1': 'One', '1_2': 'Two'}}));
        this.problem.show();
        expect($('#answer_1_1')).toHaveHtml('One');
        expect($('#answer_1_2')).toHaveHtml('Two');
      });

      it('disables the show answer button', function() {
        spyOn($, 'postWithPrefix').and.callFake((url, callback) => callback({answers: {}}));
        this.problem.show();
        expect(this.problem.el.find('.show').attr('disabled')).toEqual('disabled');
      });

      describe('radio text question', function() {
        const radio_text_xml=`\
<section class="problem">
  <div><p></p><span><section id="choicetextinput_1_2_1" class="choicetextinput">

<form class="choicetextgroup capa_inputtype" id="inputtype_1_2_1">
  <div class="indicator-container">
    <span class="unanswered" style="display:inline-block;" id="status_1_2_1"></span>
  </div>
  <fieldset>
    <section id="forinput1_2_1_choiceinput_0bc">
      <input class="ctinput" type="radio" name="choiceinput_1_2_1" id="1_2_1_choiceinput_0bc" value="choiceinput_0"">
      <input class="ctinput" type="text" name="choiceinput_0_textinput_0" id="1_2_1_choiceinput_0_textinput_0" value=" ">
      <p id="answer_1_2_1_choiceinput_0bc" class="answer"></p>
    </>
    <section id="forinput1_2_1_choiceinput_1bc">
      <input class="ctinput" type="radio" name="choiceinput_1_2_1" id="1_2_1_choiceinput_1bc" value="choiceinput_1" >
      <input class="ctinput" type="text" name="choiceinput_1_textinput_0" id="1_2_1_choiceinput_1_textinput_0" value=" " >
      <p id="answer_1_2_1_choiceinput_1bc" class="answer"></p>
    </section>
    <section id="forinput1_2_1_choiceinput_2bc">
      <input class="ctinput" type="radio" name="choiceinput_1_2_1" id="1_2_1_choiceinput_2bc" value="choiceinput_2" >
      <input class="ctinput" type="text" name="choiceinput_2_textinput_0" id="1_2_1_choiceinput_2_textinput_0" value=" " >
      <p id="answer_1_2_1_choiceinput_2bc" class="answer"></p>
    </section></fieldset><input class="choicetextvalue" type="hidden" name="input_1_2_1" id="input_1_2_1"></form>
</section></span></div>
</section>\
`;
        beforeEach(function() {
          // Append a radiotextresponse problem to the problem, so we can check it's javascript functionality
          this.problem.el.prepend(radio_text_xml);
        });

        it('sets the correct class on the section for the correct choice', function() {
          spyOn($, 'postWithPrefix').and.callFake((url, callback) => callback({answers: {"1_2_1": ["1_2_1_choiceinput_0bc"], "1_2_1_choiceinput_0bc": "3"}}));
          this.problem.show();

          expect($('#forinput1_2_1_choiceinput_0bc').attr('class')).toEqual(
            'choicetextgroup_show_correct');
          expect($('#answer_1_2_1_choiceinput_0bc').text()).toEqual('3');
          expect($('#answer_1_2_1_choiceinput_1bc').text()).toEqual('');
          expect($('#answer_1_2_1_choiceinput_2bc').text()).toEqual('');
        });

        it('Should not disable input fields', function() {
          spyOn($, 'postWithPrefix').and.callFake((url, callback) => callback({answers: {"1_2_1": ["1_2_1_choiceinput_0bc"], "1_2_1_choiceinput_0bc": "3"}}));
          this.problem.show();
          expect($('input#1_2_1_choiceinput_0bc').attr('disabled')).not.toEqual('disabled');
          expect($('input#1_2_1_choiceinput_1bc').attr('disabled')).not.toEqual('disabled');
          expect($('input#1_2_1_choiceinput_2bc').attr('disabled')).not.toEqual('disabled');
          expect($('input#1_2_1').attr('disabled')).not.toEqual('disabled');
        });
      });

      describe('imageinput', function() {
        let el, height, width;
        const imageinput_html = readFixtures('imageinput.underscore');

        const DEFAULTS = {
          id: '12345',
          width: '300',
          height: '400'
        };

        beforeEach(function() {
          this.problem = new Problem($('.xblock-student_view'));
          this.problem.el.prepend(_.template(imageinput_html)(DEFAULTS));
        });

        const assertAnswer = (problem, data) => {
          stubRequest(data);
          problem.show();

          $.each(data['answers'], (id, answer) => {
            const img = getImage(answer);
            el = $(`#inputtype_${id}`);
            expect(img).toImageDiffEqual(el.find('canvas')[0]);
          });
        };

        var stubRequest = data => {
          spyOn($, 'postWithPrefix').and.callFake((url, callback) => callback(data));
        };

        var getImage = (coords, c_width, c_height) => {
          let ctx, reg;
          const types = {
            rectangle: coords => {
              reg = /^\(([0-9]+),([0-9]+)\)-\(([0-9]+),([0-9]+)\)$/;
              const rects = coords.replace(/\s*/g, '').split(/;/);

              $.each(rects, (index, rect) => {
                const { abs } = Math;
                const points = reg.exec(rect);
                if (points) {
                  width = abs(points[3] - points[1]);
                  height = abs(points[4] - points[2]);

                  return ctx.rect(points[1], points[2], width, height);
                }
              });

              ctx.stroke();
              ctx.fill();
            },

            regions: coords => {
              const parseCoords = coords => {
                reg = JSON.parse(coords);

                if (typeof reg[0][0][0] === "undefined") {
                  reg = [reg];
                }

                return reg;
              };

              return $.each(parseCoords(coords), (index, region) => {
                ctx.beginPath();
                $.each(region, (index, point) => {
                  if (index === 0) {
                    return ctx.moveTo(point[0], point[1]);
                  } else {
                    return ctx.lineTo(point[0], point[1]);
                  }
                });

                ctx.closePath();
                ctx.stroke();
                ctx.fill();
              });
            }
          };

          const canvas = document.createElement('canvas');
          canvas.width = c_width || 100;
          canvas.height = c_height || 100;

          if (canvas.getContext) {
            ctx = canvas.getContext('2d');
          } else {
            console.log('Canvas is not supported.');
          }

          ctx.fillStyle = 'rgba(255,255,255,.3)';
          ctx.strokeStyle = "#FF0000";
          ctx.lineWidth = "2";

          $.each(coords, (key, value) => {
            if ((types[key] != null) && value) { return types[key](value); }
          });

          return canvas;
        };

        it('rectangle is drawn correctly', function() {
          assertAnswer(this.problem, {
            'answers': {
              '12345': {
                'rectangle': '(10,10)-(30,30)',
                'regions': null
              }
            }
          });
        });

        it('region is drawn correctly', function() {
          assertAnswer(this.problem, {
            'answers': {
              '12345': {
                'rectangle': null,
                'regions': '[[10,10],[30,30],[70,30],[20,30]]'
              }
            }
          });
        });

        it('mixed shapes are drawn correctly', function() {
          assertAnswer(this.problem, {
            'answers': {'12345': {
              'rectangle': '(10,10)-(30,30);(5,5)-(20,20)',
              'regions': `[
  [[50,50],[40,40],[70,30],[50,70]],
  [[90,95],[95,95],[90,70],[70,70]]
]`
            }
          }
          });
        });

        it('multiple image inputs draw answers on separate canvases', function() {
          const data = {
            id: '67890',
            width: '400',
            height: '300'
          };

          this.problem.el.prepend(_.template(imageinput_html)(data));
          assertAnswer(this.problem, {
            'answers': {
              '12345': {
                'rectangle': null,
                'regions': '[[10,10],[30,30],[70,30],[20,30]]'
              },
              '67890': {
                'rectangle': '(10,10)-(30,30)',
                'regions': null
              }
            }
          });
        });

        it('dictionary with answers doesn\'t contain answer for current id', function() {
          spyOn(console, 'log');
          stubRequest({'answers':{}});
          this.problem.show();
          el = $('#inputtype_12345');
          expect(el.find('canvas')).not.toExist();
          expect(console.log).toHaveBeenCalledWith('Answer is absent for image input with id=12345');
        });
      });
    });
  });

  describe('save', function() {
    beforeEach(function() {
      this.problem = new Problem($('.xblock-student_view'));
      this.problem.answers = 'foo=1&bar=2';
    });

    it('log the problem_save event', function() {
      spyOn($, 'postWithPrefix').and.callFake(function(url, answers, callback) {
        let promise;
        promise =
          {always(callable) { return callable(); }};
        return promise;
      });
      this.problem.save();
      expect(Logger.log).toHaveBeenCalledWith('problem_save', 'foo=1&bar=2');
    });

    it('POST to save problem', function() {
      spyOn($, 'postWithPrefix').and.callFake(function(url, answers, callback) {
        let promise;
        promise =
          {always(callable) { return callable(); }};
        return promise;
      });
      this.problem.save();
      expect($.postWithPrefix).toHaveBeenCalledWith('/problem/Problem1/problem_save',
          'foo=1&bar=2', jasmine.any(Function));
    });

    it('tests that save does not enable the submit button or change the text when submit is originally disabled', function() {
      const self = this;
      const curr_html = this.problem.el.html();
      spyOn($, 'postWithPrefix').and.callFake(function(url, answers, callback) {
        // enableButtons should have been called at this point and the submit button should be unaffected
        let promise;
        expect(self.problem.submitButton).toHaveAttr('disabled');
        expect(self.problem.submitButtonLabel.text()).toBe('Submit');
        callback({success: 'correct', html: curr_html});
        promise =
          {always(callable) { return callable(); }};
        return promise;
      });
      // Expect submit to be disabled and labeled properly at the start
      expect(this.problem.submitButton).toHaveAttr('disabled');
      expect(this.problem.submitButtonLabel.text()).toBe('Submit');
      this.problem.save();
      // Submit button should have the same state after save has completed
      expect(this.problem.submitButton).toHaveAttr('disabled');
      expect(this.problem.submitButtonLabel.text()).toBe('Submit');
    });

    it('tests that save does not disable the submit button or change the text when submit is originally enabled', function() {
      const self = this;
      const curr_html = this.problem.el.html();
      spyOn($, 'postWithPrefix').and.callFake(function(url, answers, callback) {
        // enableButtons should have been called at this point, and the submit button should be disabled while submitting
        let promise;
        expect(self.problem.submitButton).toHaveAttr('disabled');
        expect(self.problem.submitButtonLabel.text()).toBe('Submit');
        callback({success: 'correct', html: curr_html});
        promise =
          {always(callable) { return callable(); }};
        return promise;
      });
      // Expect submit to be enabled and labeled properly at the start after adding an input
      $('#input_example_1').val('test').trigger('input');
      expect(this.problem.submitButton).not.toHaveAttr('disabled');
      expect(this.problem.submitButtonLabel.text()).toBe('Submit');
      this.problem.save();
      // Submit button should have the same state after save has completed
      expect(this.problem.submitButton).not.toHaveAttr('disabled');
      expect(this.problem.submitButtonLabel.text()).toBe('Submit');
    });
  });

  describe('refreshMath', function() {
    beforeEach(function() {
      this.problem = new Problem($('.xblock-student_view'));
      $('#input_example_1').val('E=mc^2');
      this.problem.refreshMath({target: $('#input_example_1').get(0)});
    });

    it('should queue the conversion and MathML element update', function() {
      expect(MathJax.Hub.Queue).toHaveBeenCalledWith(['Text', this.stubbedJax, 'E=mc^2'],
        [this.problem.updateMathML, this.stubbedJax, $('#input_example_1').get(0)]);
  });
});

  describe('updateMathML', function() {
    beforeEach(function() {
      this.problem = new Problem($('.xblock-student_view'));
      this.stubbedJax.root.toMathML.and.returnValue('<MathML>');
    });

    describe('when there is no exception', function() {
      beforeEach(function() {
        this.problem.updateMathML(this.stubbedJax, $('#input_example_1').get(0));
      });

      it('convert jax to MathML', () => expect($('#input_example_1_dynamath')).toHaveValue('<MathML>'));
    });

    describe('when there is an exception', function() {
      beforeEach(function() {
        const error = new Error();
        error.restart = true;
        this.stubbedJax.root.toMathML.and.throwError(error);
        this.problem.updateMathML(this.stubbedJax, $('#input_example_1').get(0));
      });

      it('should queue up the exception', function() {
        expect(MathJax.Callback.After).toHaveBeenCalledWith([this.problem.refreshMath, this.stubbedJax], true);
      });
    });
  });

  describe('refreshAnswers', function() {
    beforeEach(function() {
      this.problem = new Problem($('.xblock-student_view'));
      this.problem.el.html(`\
<textarea class="CodeMirror" />
<input id="input_1_1" name="input_1_1" class="schematic" value="one" />
<input id="input_1_2" name="input_1_2" value="two" />
<input id="input_bogus_3" name="input_bogus_3" value="three" />\
`
      );
      this.stubSchematic = { update_value: jasmine.createSpy('schematic') };
      this.stubCodeMirror = { save: jasmine.createSpy('CodeMirror') };
      $('input.schematic').get(0).schematic = this.stubSchematic;
      $('textarea.CodeMirror').get(0).CodeMirror = this.stubCodeMirror;
    });

    it('update each schematic', function() {
      this.problem.refreshAnswers();
      expect(this.stubSchematic.update_value).toHaveBeenCalled();
    });

    it('update each code block', function() {
      this.problem.refreshAnswers();
      expect(this.stubCodeMirror.save).toHaveBeenCalled();
    });
  });

  describe('multiple JsInput in single problem', function() {
    const jsinput_html = readFixtures('jsinput_problem.html');

    beforeEach(function() {
      this.problem = new Problem($('.xblock-student_view'));
      this.problem.render(jsinput_html);
    });

    it('submit_save_waitfor should return false', function() {
      $(this.problem.inputs[0]).data('waitfor', function() {});
      expect(this.problem.submit_save_waitfor()).toEqual(false);
    });
  });

  describe('Submitting an xqueue-graded problem', function() {
    const matlabinput_html = readFixtures('matlabinput_problem.html');

    beforeEach(function() {
      spyOn($, 'postWithPrefix').and.callFake((url, callback) => callback({html: matlabinput_html}));
      jasmine.clock().install();
      this.problem = new Problem($('.xblock-student_view'));
      spyOn(this.problem, 'poll').and.callThrough();
      this.problem.render(matlabinput_html);
    });

    afterEach(() => jasmine.clock().uninstall());

    it('check that we stop polling after a fixed amount of time', function() {
      expect(this.problem.poll).not.toHaveBeenCalled();
      jasmine.clock().tick(1);
      const time_steps = [1000, 2000, 4000, 8000, 16000, 32000];
      let num_calls = 1;
      for (let time_step of Array.from(time_steps)) {
        (time_step => {
          jasmine.clock().tick(time_step);
          expect(this.problem.poll.calls.count()).toEqual(num_calls);
          num_calls += 1;
        })(time_step);
      }

      // jump the next step and verify that we are not still continuing to poll
      jasmine.clock().tick(64000);
      expect(this.problem.poll.calls.count()).toEqual(6);

      expect($('.notification-gentle-alert .notification-message').text()).toEqual("The grading process is still running. Refresh the page to see updates.");
    });
  });

  describe('codeinput problem', function() {
    const codeinputProblemHtml = readFixtures('codeinput_problem.html');

    beforeEach(function() {
      spyOn($, 'postWithPrefix').and.callFake((url, callback) => callback({html: codeinputProblemHtml}));
      this.problem = new Problem($('.xblock-student_view'));
      this.problem.render(codeinputProblemHtml);
    });

    it('has rendered with correct a11y info', function() {
      const CodeMirrorTextArea = $('textarea')[1];
      const CodeMirrorTextAreaId = 'cm-textarea-101';

      // verify that question label has correct `for` attribute value
      expect($('.problem-group-label').attr('for')).toEqual(CodeMirrorTextAreaId);

      // verify that codemirror textarea has correct `id` attribute value
      expect($(CodeMirrorTextArea).attr('id')).toEqual(CodeMirrorTextAreaId);

      // verify that codemirror textarea has correct `aria-describedby` attribute value
      expect($(CodeMirrorTextArea).attr('aria-describedby')).toEqual('cm-editor-exit-message-101 status_101');
    });
  });


  describe('show answer button', function() {

    const radioButtonProblemHtml = readFixtures('radiobutton_problem.html');
    const checkboxProblemHtml = readFixtures('checkbox_problem.html');

    beforeEach(function() {
      this.problem = new Problem($('.xblock-student_view'));

      this.checkAssertionsAfterClickingAnotherOption = () => {
        // verify that 'show answer button is no longer disabled'
        expect(this.problem.el.find('.show').attr('disabled')).not.toEqual('disabled');

        // verify that displayed answer disappears
        expect(this.problem.el.find('div.choicegroup')).not.toHaveClass('choicegroup_correct');

        // verify that radio/checkbox label has no span having class '.status.correct'
        expect(this.problem.el.find('div.choicegroup')).not.toHaveAttr('span.status.correct');
      };
    });

    it('should become enabled after a radiobutton is selected', function() {
      $('#input_example_1').replaceWith(radioButtonProblemHtml);
      // assume that 'ShowAnswer' button is clicked,
      // clicking make it disabled.
      this.problem.el.find('.show').attr('disabled', 'disabled');
      // bind click event to input fields
      this.problem.submitAnswersAndSubmitButton(true);
      // selects option 2
      $('#input_1_1_2').attr('checked', true).trigger('click');
      this.checkAssertionsAfterClickingAnotherOption();
    });

    it('should become enabled after a checkbox is selected', function() {
      $('#input_example_1').replaceWith(checkboxProblemHtml);
      this.problem.el.find('.show').attr('disabled', 'disabled');
      this.problem.submitAnswersAndSubmitButton(true);
      $('#input_1_1_2').click();
      this.checkAssertionsAfterClickingAnotherOption();
    });
  });
});