Test results will display properly in the instructions section after user runs examples.

Author: Steven-Nagie

src/assets/scss/styles.scss

@@ -98,6 +98,14 @@ main {
   font-weight: 400;
 }
 
+.font12-reg-black {
+  color: #131414;
+  font-family: $font;
+  font-size: 12px;
+  line-height: 12px;
+  font-weight: 400;
+}
+
 .side-menu {
     background-color: $sidebar-color;
     height: 100vh;
@@ -171,4 +179,4 @@ padding: 75px 75px 10px 75px;
 
 a {
     text-decoration: none;
-}
+}

src/components/mainService.js

@@ -2,10 +2,10 @@ angular.module('app').service('mainService', function($http, $q, $sce) {
 
   // $sce.trustAsResourceUrl('/s');
 
-  this.testExamples = function(solution, examples, kataid) {
+  this.testExamples = function(solution, examples) {
     return $http({
       method: 'POST',
-      url: `/test/examples/${kataid}`,
+      url: `http://192.168.0.186:3030/test/examples`,
       data: {
         script: solution,
         examples: examples
@@ -16,7 +16,7 @@ angular.module('app').service('mainService', function($http, $q, $sce) {
   this.testSuite = function(solution, kataid) {
     return $http({
       method: 'POST',
-      url: `/test/${kataid}`,
+      url: `/test/suite/${kataid}`,
       data: {
         script: solution
       }

src/components/training/training.html

@@ -49,6 +49,10 @@ <h3 class="font16-reg" id="kata-name">
         <h2 class="font20-reg">Name of Kata</h2>
         <div>
           <p>Here's where the instructions go. We have to think about how to present code samples.</p>
+          <div ng-repeat="test in output">
+              <p>{{test.test}}</p>
+              <p>{{test.result}}</p>
+          </div>
         </div>
       </div>
 
@@ -57,15 +61,16 @@ <h2 class="font20-reg">Name of Kata</h2>
         <div class="solution-div">
           <p>Solution:</p>
           <form>
-            Function: <textarea name="solution" cols="40" rows="5" id="solution-input" ng-model="solutionInput"></textarea>
+            Function: <textarea name="solution" cols="40" rows="5" id="solution-input" ng-init="solutionInput = 'var a = 1;'"ng-model="solutionInput"></textarea>
           </form>
         </div>
 
         <div class="example-tests-div">
           <p>Example Tests:</p>
           <form>
-            <textarea name="examples" cols="40" rows="5" id="example-tests-input" ng-model="examplesInput"></textarea>
-            <button ng-click="testExamples(solutionInput, examplesInput)" class="run-examples-button font12-reg-blue">RUN EXAMPLES</button>
+            <textarea name="examples" cols="40" rows="5" ng-init="examplesInput = 'Test.assertEquals(a, 1);'" id="example-tests-input" ng-model="examplesInput"></textarea>
+            <button ng-click="testExamples(solutionInput, examplesInput)" class="test-examples-button font12-reg-blue">RUN EXAMPLES</button>
+            <button ng-click="testSuite(solutionInput)" class="test-suite-button font12-reg-black" style=""><i class="fa fa-caret-right fa-lg" style="margin-right: 2px" aria-hidden="true"></i>ATTEMPT</button>
           </form>
         </div>
 

src/components/training/training.scss

@@ -96,14 +96,22 @@ hr {
   width: 40vw;
 }
 
-.run-examples-button {
+.test-examples-button {
   border: 1px solid #91b2e7;
   border-radius: 4%;
   width: 113px;
   height: 30px;
   background-color: #3C3C3C;
 }
 
+.test-suite-button {
+  border: 1px solid #91b2e7;
+  border-radius: 4%;
+  width: 113px;
+  height: 30px;
+  background-color: #91b2e7;
+}
+
 .training-body {
   background-color: red;
 }

src/components/training/trainingCtrl.js

@@ -4,6 +4,7 @@ angular.module('app').controller('trainingCtrl', function($scope, $state, mainSe
 
   $scope.languages = ['JavaScript', 'Python'];
   $scope.versions = ['Node v0.10.33', 'Node v6.6.0'];
+  $scope.output = [];
 
 
   //Examples should be an array of objects. Returned results will be an array with the different tests and their results.
@@ -12,10 +13,10 @@ angular.module('app').controller('trainingCtrl', function($scope, $state, mainSe
     let examplesArr = [];
     examples = examples.split(/\n/);
     examples.forEach(example => examplesArr.push({test: example}));
-    console.log(solutions, examplesArr);
-    // mainService.testExamples(solutionsInput, examplesArr, kataid).then((response) => console.log(response));
+    mainService.testExamples(solutions, examplesArr).then((response) => $scope.output.push(response.data[0]));
   }
 
+
   $scope.testSuite = function(solutions) {
     solutions = solutions.replace(/\n/g, " ");
     // mainService.testSuite(solutions, kataid).then((response) => console.log(response));

src/index.html

@@ -23,6 +23,7 @@
 </body>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
+<script src="https://use.fontawesome.com/b3416c175c.js"></script>
 <script type='text/javascript' src='./bundle.js'></script>
 
 </html>