From 30c9b06ab3ec582a2328ad032ca8d6cee88d01fb Mon Sep 17 00:00:00 2001 From: Marie Leuliette Date: Mon, 4 Jul 2022 18:46:46 +0200 Subject: [PATCH] =?UTF-8?q?Ajoute=20des=20barres=20selectionnables=20au=20?= =?UTF-8?q?graphique=20et=20envoie=20la=20r=C3=A9ponse?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../cafe_de_la_place/assets/icone_valide.svg | 4 + .../cafe_de_la_place/styles/graphique.scss | 55 +++++++++++++- .../vues/components/graphique.vue | 67 ++++++++++++++++- src/situations/commun/styles/variables.scss | 3 + .../vues/components/graphique.test.js | 75 +++++++++++++++++++ 5 files changed, 201 insertions(+), 3 deletions(-) create mode 100644 src/situations/cafe_de_la_place/assets/icone_valide.svg create mode 100644 tests/situations/cafe_de_la_place/vues/components/graphique.test.js diff --git a/src/situations/cafe_de_la_place/assets/icone_valide.svg b/src/situations/cafe_de_la_place/assets/icone_valide.svg new file mode 100644 index 000000000..9c612cbef --- /dev/null +++ b/src/situations/cafe_de_la_place/assets/icone_valide.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/situations/cafe_de_la_place/styles/graphique.scss b/src/situations/cafe_de_la_place/styles/graphique.scss index 834d53018..14f363621 100644 --- a/src/situations/cafe_de_la_place/styles/graphique.scss +++ b/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; + } + } } diff --git a/src/situations/cafe_de_la_place/vues/components/graphique.vue b/src/situations/cafe_de_la_place/vues/components/graphique.vue index 96344a039..c5f5c78ff 100644 --- a/src/situations/cafe_de_la_place/vues/components/graphique.vue +++ b/src/situations/cafe_de_la_place/vues/components/graphique.vue @@ -1,5 +1,18 @@ @@ -7,5 +20,57 @@ 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 } ); + } + } + } }; diff --git a/src/situations/commun/styles/variables.scss b/src/situations/commun/styles/variables.scss index da8d0bb4c..67014524b 100644 --- a/src/situations/commun/styles/variables.scss +++ b/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; diff --git a/tests/situations/cafe_de_la_place/vues/components/graphique.test.js b/tests/situations/cafe_de_la_place/vues/components/graphique.test.js new file mode 100644 index 000000000..b1649eb6e --- /dev/null +++ b/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(); + }); + }); + }); + }); +});