list (#130)

frontend/src/App.vue

@@ -171,6 +171,7 @@ export default {
         return p.then(() => that.updateQuestion(question)).catch(error => {
           // eslint-disable-next-line no-console
           console.error(error);
+          // TODO: add information to log in case a question failed and there is a list/rawlist question without selected value
         })
       }, Promise.resolve()); 
 
@@ -238,9 +239,7 @@ export default {
             "validate"
           ]);
           question.isValid = _.isString(response) ? false : response;
-          question.validationMessage = _.isString(response)
-            ? response
-            : undefined;
+          question.validationMessage = _.isString(response) ? response : undefined;
         }
       }
     },

frontend/src/components/QuestionTypes/QuestionList.vue

@@ -2,7 +2,8 @@
   <div id="question-list">
     <p class="question-label">{{currentQuestion.message}}</p>
     <v-select
-      :error-messages="currentQuestion.isValid ? '' : currentQuestion.validationMessage"
+      :label="clickToDisplay"
+      :error-messages="errorMessages"
       v-model="selected"
       :items="options"
       aria-describedby="validation-message"
@@ -19,7 +20,8 @@ export default {
   name: "QuestionList",
   data() {
     return {
-      selected: null
+      selected: null,
+      clickToDisplay: "Click to display the list of options"
     };
   },
   computed: {
@@ -40,14 +42,21 @@ export default {
       return [];
     },
     default() {
-      const defaultValue = _.get(this.currentQuestion, "default", 0);
+      const defaultValue = _.get(this.currentQuestion, "default");
       if (_.isNumber(defaultValue)) {
         const choice = _.get(this.options, "[" + defaultValue + "]");
         return _.get(choice, "value", _.get(choice, "name", choice));
       } else if (_.isString(defaultValue)) {
         return defaultValue;
       }
       return undefined;
+    },
+    errorMessages() {
+      if (_.isEmpty(this.selected)) {
+        return this.clickToDisplay;
+      }
+      
+      return this.currentQuestion.isValid ? '' : this.currentQuestion.validationMessage;
     }
   },
   watch: {
@@ -59,8 +68,9 @@ export default {
     },
     selected: {
       immediate: true,
-      handler: function(selectedvalue) {
-        this.currentQuestion.answer = selectedvalue
+      handler: function(selectedValue) {
+        this.currentQuestion.isValid = !_.isEmpty(selectedValue)
+        this.currentQuestion.answer = selectedValue
         this.updateQuestionsFromIndex(this.questionIndex)
       }
     }

frontend/tests/components/QuestionTypes/QuestionList.spec.js

@@ -66,7 +66,7 @@ describe('QuestionList.vue', () => {
                 updateQuestionsFromIndex: () => {}
             })
 
-            expect(wrapper.vm.default).toBe('testName1')
+            expect(wrapper.vm.default).toBeUndefined()
         })
 
         test('default is undefined and choices are strings', () => {
@@ -77,7 +77,7 @@ describe('QuestionList.vue', () => {
                 updateQuestionsFromIndex: () => {}
             })
 
-            expect(wrapper.vm.default).toBe('testName1')
+            expect(wrapper.vm.default).toBeUndefined()
         })
 
         test('change selected', async () => {

generator-foodq/generators/app/index.js

@@ -128,7 +128,6 @@ module.exports = class extends Generator {
         type: "list",
         name: "hungerLevel",
         message: "How hungry are you?",
-        default: 1,
         choices: () => [
           { name: "Very hungry" },
           { name: "A bit hungry" },
@@ -164,7 +163,7 @@ module.exports = class extends Generator {
         name: 'enjoy',
         message: 'Did you enjoy your meal?',
         default: (answers) => {
-          return (answers.hungerLevel === "A bit hungry" ? "ok" : "michelin");
+          return (answers.hungerLevel.toString() === "A bit hungry" ? "ok" : "michelin");
         },
         choices: [
           { name: 'Not at all', value: 'no' },