Ajoute des barres selectionnables au graphique et envoie la réponse

src/situations/cafe_de_la_place/styles/graphique.scss

@@ -1,7 +1,58 @@
-.zone-cliquable {
+@import 'commun/styles/variables.scss';
+
+.graphique {
   position: absolute;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  top: 11rem;
   left: 9.25rem;
   width: 22.5rem;
-  top: 11rem;
   height: 17.375rem;
+  gap: .5rem;
+
+  .moyenne {
+    background-color: $couleur-sombre;
+    height: 10rem;
+    span {
+      color: $blanc;
+    }
+  }
+
+  &-barre {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    background-color: $couleur-graph;
+    width: 2.375rem;
+
+    &--selectionnable {
+      border: 3px solid $couleur-graph;
+      &:hover {
+        border: 3px dotted $couleur-principale-marque-et-interaction;
+      }
+    }
+
+    span {
+      color:#1B4991;
+      font-size: .875rem;
+      margin-top: .5rem;
+    }
+
+    &--selectionnee {
+      border: 3px solid $couleur-principale-marque-et-interaction;
+      &::before {
+        content: '';
+        background-image: url(../assets/icone_valide.svg);
+        position: absolute;
+        height: 2rem;
+        width: 2rem;
+        top: -2.5rem;
+      }
+    }
+
+    .checkbox {
+      display: none;
+    }
+  }
 }

src/situations/cafe_de_la_place/vues/components/graphique.vue

@@ -1,11 +1,76 @@
 <template>
-  <div class="zone-cliquable">
+  <div class="graphique">
+    <label class="graphique-barre moyenne">
+      <span>13%</span>
+    </label>
+    <label
+      v-for="pays in pays"
+      v-bind:key="pays.id"
+      class="graphique-barre graphique-barre--selectionnable"
+      :class="{'graphique-barre--selectionnee': paysSelectionnes.includes(pays.id)}"
+      :style="{ height: pays.hauteur }"
+    >
+      <input type="checkbox" class="checkbox" :value="pays.id" v-model="paysSelectionnes" />
+      <span>{{pays.pourcentage}}%</span>
+    </label>
   </div>
 </template>
 
 <script>
 import 'cafe_de_la_place/styles/graphique.scss';
 
 export default {
+  data() {
+    return {
+      paysSelectionnes: [],
+      pays: [
+        {
+          id: 'allemagne',
+          pourcentage: 23,
+          hauteur: '17.375rem'
+        },
+        {
+          id: 'pologne',
+          pourcentage: 18,
+          hauteur: '14rem'
+        },
+        {
+          id: 'danemark',
+          pourcentage: 10,
+          hauteur: '7.5rem'
+        },
+        {
+          id: 'grece',
+          pourcentage: 16,
+          hauteur: '12.5rem'
+        },
+        {
+          id: 'italie',
+          pourcentage: 10,
+          hauteur: '7.5rem'
+        },
+        {
+          id: 'roumanie',
+          pourcentage: 6,
+          hauteur: '4.75rem'
+        },
+        {
+          id: 'espagne',
+          pourcentage: 8,
+          hauteur: '6.5rem'
+        },
+      ]
+    };
+  },
+
+  watch: {
+    paysSelectionnes () {
+      if (this.paysSelectionnes.length === 0) {
+        this.$emit('reponse');
+      } else {
+        this.$emit('reponse', { reponse: this.paysSelectionnes } );
+      }
+    }
+  }
 };
 </script>

src/situations/commun/styles/variables.scss

@@ -56,6 +56,9 @@ $couleur-app-repondeur: #5b7dd3;
 $couleur-app-notes: #fecd6e;
 $couleur-app-messages: #63d7ad;
 
+//cafe de la place
+$couleur-graph: #D9A78B;
+
 //fonts
 $font-work-sans: 'Work Sans', sans-serif;
 $font-roboto-mono: 'Roboto Mono', monospace;

tests/situations/cafe_de_la_place/vues/components/graphique.test.js

@@ -0,0 +1,75 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+
+import Graphique from 'cafe_de_la_place/vues/components/graphique.vue';
+
+describe('Le composant Graphique', function () {
+  let question;
+  let localVue;
+
+  beforeEach(function () {
+    question = { id: 1 };
+    localVue = createLocalVue();
+  });
+
+  function composant (question, paysSelectionnes) {
+    return shallowMount(Graphique, {
+      localVue,
+      data() {
+        return {
+          paysSelectionnes: paysSelectionnes,
+          pays: [
+            {
+              id: 'allemagne',
+              pourcentage: 23
+            },
+            {
+              id: 'pologne',
+              pourcentage: 18
+            }
+          ]
+        };
+      },
+      propsData: { question }
+    });
+  }
+
+  describe('quand je clique sur une barre du graphique', function () {
+    it("ajoute la classe graphique-barre--selectionnee", function (done) {
+      const wrapper = composant(question, []);
+      expect(wrapper.find('.graphique-barre--selectionnee').exists()).toBe(false);
+      wrapper.vm.paysSelectionnes.push('allemagne');
+      wrapper.vm.$nextTick(() => {
+        expect(wrapper.find('.graphique-barre--selectionnee').exists()).toBe(true);
+        done();
+      });
+    });
+  });
+
+  describe("l'envoi de la réponse", function() {
+    let wrapper;
+
+    beforeEach(function () {
+      wrapper = composant(question, ['allemagne']);
+    });
+
+    describe('quand je sélectionne un pays', function () {
+      it('emet une réponse avec la sélection en cours', function (done) {
+        wrapper.vm.paysSelectionnes.push('pologne');
+        wrapper.vm.$nextTick(() => {
+          expect(wrapper.emitted().reponse[0][0]).toEqual({"reponse": ["allemagne", "pologne"]});
+          done();
+        });
+      });
+    });
+
+    describe('quand je ne selectionne aucun pays', function () {
+      it("emet l'absence de réponse", function (done) {
+        wrapper.vm.paysSelectionnes = [];
+        wrapper.vm.$nextTick(() => {
+          expect(wrapper.emitted().reponse[0][0]).toEqual(undefined);
+          done();
+        });
+      });
+    });
+  });
+});