From 39374ddd1063761b0d884c28f8b959fd3a7e385a Mon Sep 17 00:00:00 2001
From: Pablo Klijnjan <pabloklijnjan@gmail.com>
Date: Fri, 31 Mar 2017 07:21:17 +0300
Subject: [PATCH] gh-52 Fix for buttons in submit form

  They are now enabled properly after selecting a file
---
 app/components/file-selector/template.hbs           |  5 +++--
 .../components/file-selector/component-test.js      | 13 ++++++++++++-
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/app/components/file-selector/template.hbs b/app/components/file-selector/template.hbs
index f61d039..0c7a278 100644
--- a/app/components/file-selector/template.hbs
+++ b/app/components/file-selector/template.hbs
@@ -3,11 +3,11 @@
   <div class="sub header">note that README.md, test files and nested folders are skipped from this list</div>
 </h5>
 {{#if problem.files}}
-<div class="ui large form">
+<div class="ui form">
   <div class="grouped inline fields">
     {{#each problem.files as |file|}}
     <div class="field" data-test-files>
-      {{ui-radio name="selectedFile" value=file label=file current=selectedFile}}
+      {{ui-radio name="selectedFile" value=file label=file current=selectedFile onChange=(action (mut selectedFile))}}
     </div>
     {{/each}}
   </div>
@@ -27,6 +27,7 @@
       Submit
   </button>
   <button
+    data-test-open-btn
     class="ui secondary basic button {{if (not selectedFile) 'disabled'}}"
     {{action "open"}}>
       Open
diff --git a/tests/integration/components/file-selector/component-test.js b/tests/integration/components/file-selector/component-test.js
index 2769c6c..2d13b7d 100644
--- a/tests/integration/components/file-selector/component-test.js
+++ b/tests/integration/components/file-selector/component-test.js
@@ -26,13 +26,24 @@ test('it shows message when no files available', function(assert) {
   assert.equal(this.$(testSelector('no-files-msg')).text().trim(), 'None');
 });
 
-test('it disables submit button if no selection', function(assert) {
+test('it disables submit and open buttons if no selection', function(assert) {
   let problem = { files: ['f1'] };
   this.set('problem', problem);
 
   this.render(hbs`{{file-selector problem=problem}}`);
   assert.equal(this.$(testSelector('files')).length, 1);
   assert.ok(this.$(testSelector('submit-btn')).hasClass('disabled'));
+  assert.ok(this.$(testSelector('open-btn')).hasClass('disabled'));
+});
+
+test('it enables submit and open buttons if selection', function(assert) {
+  let problem = { files: ['f1'] };
+  this.set('problem', problem);
+  this.set('selectedFile', 'f1');
+
+  this.render(hbs`{{file-selector problem=problem selectedFile=selectedFile}}`);
+  assert.notOk(this.$(testSelector('submit-btn')).hasClass('disabled'));
+  assert.notOk(this.$(testSelector('open-btn')).hasClass('disabled'));
 });
 
 test('it shows error message if file no longer exists', function(assert) {