Ajout de tests unitaires 'basiques'

.babelrc

+{
+  "presets": [
+    "@babel/preset-env"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-object-rest-spread"
+  ]
+}
\ No newline at end of file

package.json

 {
   "name": "volet_navigation",
+  "jest": {
+    "moduleFileExtensions": [
+      "js",
+      "vue"
+    ],
+    "transform": {
+      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
+      ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
+    },
+    "testEnvironment": "jsdom"
+  },
   "version": "0.1.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "test": "jest --watch --verbose false"
   },
   "dependencies": {
     "@popperjs/core": "^2.9.2",
@@ -31,9 +43,15 @@
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
+    "@vue/test-utils": "^1.2.1",
+    "babel-core": "^7.0.0-0",
     "babel-eslint": "^10.1.0",
+    "babel-jest": "^27.0.6",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
+    "jest": "^27.0.6",
+    "vue-jest": "^3.0.7",
     "vue-template-compiler": "^2.6.11"
   },
   "eslintConfig": {

src/Contenu.vue

@@ -6,7 +6,7 @@
 
 <script>
 
-import Volet_Base from "@/components/Volet_Base";
+import Volet_Base from "./components/Volet_Base";
 export default {
   name: 'Contenu',
   components: {

src/Index.vue

@@ -17,17 +17,17 @@
 </template>
 
 <script>
-import Login from "@/Login";
-import Contenu from "@/Contenu";
-import Menu from "@/Menu";
-import Maj from "@/Maj";
-import Profil from "@/Profil";
-import Tags from "@/Tags";
-import NewContenu from "@/NewContenu";
+import Login from "./Login";
+import Contenu from "./Contenu";
+import Menu from "./Menu";
+import Maj from "./Maj";
+import Profil from "./Profil";
+import Tags from "./Tags";
+import NewContenu from "./NewContenu";
 // import showdown from "showdown"
 
 export default {
-  name: "Index.vue",
+  name: "Index",
   data: function () {
     return {
       etat: "unlogged",

src/Login.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import Service from '../src/service/Service'
+import Service from './service/Service'
 
 
 export default {
@@ -46,10 +46,6 @@ export default {
         }
       })
     },
-    /**
-     * @vuese
-     * Appel au WS pour tester la validité de la saisie mdp/login de l'utilisateur
-     */
     keymonitor: function(event) {
       if (event.key === "Enter") {
         this.logIn()

src/Maj.vue

@@ -2,6 +2,9 @@
   <div>
     <div  v-show="!detailContenu">
       <p> Vous êtes {{auteur}}</p>
+
+
+
       <span v-bind:class="['niveau', {'niveau-down' : isRecu}]" id="recues" v-on:click="naviguer">Maj Recues</span><br>
       <div id="detailRecues" class="masque" v-bind:class="{'affiche' : isRecu}">
         <table>
@@ -11,7 +14,7 @@
           </tr>
           </thead>
           <tr>
-            <th>Titrette</th>
+            <th>Titre</th>
             <th>Auteur</th>
             <th>Version actuelle</th>
             <th>Date Version actuelle</th>
@@ -36,6 +39,9 @@
           </tbody>
         </table>
       </div>
+
+
+
       <span class="niveau" id="proposees" v-bind:class="{'niveau-down' : isPropose}" v-on:click="naviguer">Maj Proposées</span>
       <div id="detailProposees" class="masque" v-bind:class="{'affiche' : isPropose}">
         <table>
@@ -84,8 +90,8 @@
 </template>
 
 <script>
-import Service from "@/service/Service";
-import Consulter_Contenu from "@/components/Consulter_Contenu";
+import Service from "./service/Service";
+import Consulter_Contenu from "./components/Consulter_Contenu";
 
 export default {
   name: "Maj",

src/Menu.vue

@@ -18,8 +18,8 @@
 </template>
 
 <script>
-import Choix_Mode_Variante from "@/components/Choix_Mode_Variante";
-import Service from "@/service/Service";
+import Choix_Mode_Variante from "./components/Choix_Mode_Variante";
+import Service from "./service/Service";
 export default {
   name: "Menu",
   data: function () {

src/NewContenu.vue

@@ -14,8 +14,8 @@
     </div>
     <div class="markdown">
       <br>
-      <button v-on:click="ajouterContenu">créer</button><br><br>
-      <button v-on:click="retourArriere">revenir en arrière</button>
+      <button class="ajouterContenu" v-on:click="ajouterContenu">créer</button><br><br>
+      <button class="retourArriere" v-on:click="retourArriere">revenir en arrière</button>
 
     </div>
 
@@ -24,7 +24,7 @@
 
 <script>
 // import VueSimplemde from 'vue-simplemde'
-import Service from "@/service/Service";
+import Service from "./service/Service";
 
 export default {
   name: "NewContenu",
@@ -38,7 +38,8 @@ export default {
       markdownOption: {
         bold: true,
         language: 'fr'
-      }
+      },
+      test: ""
     }
   },
   methods: {
@@ -46,6 +47,7 @@ export default {
 
       let data = {auteur: this.auteur, contenu_a_ecrire: this.contenuSaisi}
       let that = this
+      this.test = "test"
       Service.creerContenuPerso(data).then(
           function (reponse) {
             let nouveauContenu = reponse.data

src/Profil.vue

@@ -5,7 +5,7 @@
     <p> Ecole : </p>
     <p> "Note" : </p>
     <p> "Publications" : </p>
-  <button class="changermdp" v-on:click="this.editMode = ! this.editMode">ChangerMdp</button>
+  <button id="afficherMenuChangementMdp" v-on:click="editMode = !editMode">ChangerMdp</button>
     <div id="editMode" v-show="editMode">
     <label for="mdp1">Entrer le nouveau mdp</label>
     <input type="password" id="mdp1">      <br>
@@ -13,7 +13,7 @@
       <label for="mdp1">Entrer a nouveau votre mdp</label>
     <input type="password" id="mdp2">      <br>
 
-      <button class="changermdp" v-on:click="validerChangement">Valider</button>
+      <button id="validerChangementMdp" v-on:click="validerChangement">Valider</button>
 
     </div>
   </div>
@@ -40,7 +40,6 @@ export default {
      * (A construire) Fonction de changement du mot de passe
      */
     validerChangement: function (){
-      alert ('mot de passe changé')
       this.editMode = ! this.editMode
 
     }

src/components/Consulter_Contenu.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script>
-import Service from "@/service/Service";
+import Service from "../service/Service";
 
 export default {
   name: "Consulter_Contenu",

src/components/Detail_Contenu.vue

@@ -12,11 +12,11 @@
 
 <script>
 
-import Filtre_Tag from "@/components/filtres/Filtre_Tag";
-import Filtre_Auteur from "@/components/filtres/Filtre_Auteur";
-import Filtre_Date from "@/components/filtres/Filtre_Date";
-import Filtre_Note_Popularite from "@/components/filtres/Filtre_Note_Popularite";
-import Filtre_Type_Source from "@/components/filtres/Filtre_Type_Source";
+import Filtre_Tag from "../components/filtres/Filtre_Tag";
+import Filtre_Auteur from "../components/filtres/Filtre_Auteur";
+import Filtre_Date from "../components/filtres/Filtre_Date";
+import Filtre_Note_Popularite from "../components/filtres/Filtre_Note_Popularite";
+import Filtre_Type_Source from "../components/filtres/Filtre_Type_Source";
 
 
 

src/components/Modifier_Contenu.vue

@@ -8,7 +8,7 @@
     <div class="markdown">
       <br>
       <button id="validerModif" v-on:click="action('valider')">modifier </button>
-      <button v-on:click="action('arriere')"> revenir en arrière</button>
+      <button id="retourArriere" v-on:click="action('arriere')"> revenir en arrière</button>
 
     </div>
 

src/components/Volet_Base.vue

@@ -4,11 +4,11 @@
     <button id="changerVariante" v-show="!modeConsultation && !modeModification" v-on:click="changerVariante">changer</button>
     <div class="choixPanier" v-show="panierChoisi && !modeConsultation && !modeModification">
       <label>Perso</label>
-      <input type="checkbox" class="filtreTableau" v-model="persoChecked"  v-on:click="persoChecked = !persoChecked" name="perso" value="tiers"/>
+      <input type="checkbox" class="filtreTableau" id="filtrePerso" v-model="persoChecked"  v-on:click="persoChecked = !persoChecked" name="perso" value="tiers"/>
       <label>Tiers</label>
-      <input type="checkbox" class="filtreTableau" v-model="tiersChecked"   v-on:click="tiersChecked = !tiersChecked" name="tiers" value="tiers"/>
+      <input type="checkbox" class="filtreTableau" id="filtreTiers"  v-model="tiersChecked"   v-on:click="tiersChecked = !tiersChecked" name="tiers" value="tiers"/>
       <label>En Cours</label>
-      <input type="checkbox" class="filtreTableau"  v-model="enCoursChecked"  v-on:click="enCoursChecked = !enCoursChecked" name="en-cours" value="en-cours"/>
+      <input type="checkbox" class="filtreTableau" id="filtreEnCours"   v-model="enCoursChecked"  v-on:click="enCoursChecked = !enCoursChecked" name="en-cours" value="en-cours"/>
 
     </div>
     <div id="principal" v-show="!modeConsultation && !modeModification">
@@ -38,7 +38,7 @@
             <th>Nbre d'Utilisations</th>
             <th>Likes</th>
             <th>Tags</th>
-            <th v-on:click="supprimerContenus"  >
+            <th v-on:click="supprimerContenus" class="supprimerContenus">
               <img v-bind:src="panierChoisi ? imgPoubelle : imgEtoile" alt='' height=20 width=20/></th>
 
           </tr>
@@ -104,15 +104,16 @@
 </template>
 
 <script>
-import 'bootstrap/dist/js/bootstrap.min.js'
-import $ from 'jquery'
-import 'jquery-ui-bundle'
-import Volet_Menu from "@/components/Volet_Menu";
-import Volet_Contenu from "@/components/Volet_Contenu";
-import Consulter_Contenu from "@/components/Consulter_Contenu";
+let $ = require("jquery");
+window.$ = window.jQuery = $;
+require("jquery-ui-bundle");
+import '../assets/js/popper.min.js';
+import '../assets/js/bootstrap.min.js';
+import Volet_Menu from "./Volet_Menu";
+import Volet_Contenu from "./Volet_Contenu";
+import Consulter_Contenu from "./Consulter_Contenu";
 import Service from '../../src/service/Service'
-import 'popper.js/dist/popper.min.js';
-import Modifier_Contenu from "@/components/Modifier_Contenu";
+import Modifier_Contenu from "./Modifier_Contenu";
 
 export default {
   name: "Volet_Base",
@@ -249,7 +250,7 @@ export default {
      * Passer le filtre choisi (pour Volet_Contenu)
      */
     passerFiltre: function(event){
-      this.filtre_choisi = event.filtre
+        this.filtre_choisi = event.filtre
     },
     /**
      * @vuese

src/components/Volet_Contenu.vue

@@ -14,9 +14,9 @@
 </template>
 
 <script>
-import Choix_Mode from "@/components/Choix_Mode";
-import Detail_Filtre from "@/components/Detail_Filtre";
-import Detail_Contenu from "@/components/Detail_Contenu";
+import Choix_Mode from "../components/Choix_Mode";
+import Detail_Filtre from "../components/Detail_Filtre";
+import Detail_Contenu from "../components/Detail_Contenu";
 export default {
   name: "Volet_Contenu",
   components: {

src/components/Volet_Menu.vue

@@ -9,8 +9,8 @@
 </template>
 
 <script>
-import Barre_Filtre from "@/components/Barre_Filtre";
-import Barre_Recherche from "@/components/Barre_Recherche";
+import Barre_Filtre from "../components/Barre_Filtre";
+import Barre_Recherche from "../components/Barre_Recherche";
 export default {
   name: "Volet_Menu",
   components: {

src/components/filtres/Filtre_Auteur.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import Service from "@/service/Service";
+import Service from "../../service/Service";
 
 export default {
   name: "Filtre_Auteur",

src/main.js

 import Vue from 'vue'
-import Index from '@/Index'
+import Index from './Index'
 import VPopover from 'vue-js-popover'
 import mavonEditor from 'mavon-editor';
 import 'mavon-editor/dist/css/index.css';

src/setupTests.js

+jest.setTimeout(10000)
\ No newline at end of file

src/tests/Choix_Mode.test.js

+import Login from "../Login.vue";
+import {mount} from "@vue/test-utils";
+import { shallowMount } from '@vue/test-utils'
+import Service from "../service/Service";
+import Contenu from "../Contenu";
+import Volet_Base from "../components/Volet_Base";
+import Volet_Menu from "../components/Volet_Menu";
+import Choix_Mode from "../components/Choix_Mode";
+import Choix_Mode_Variante from "../components/Choix_Mode_Variante";
+
+// Rien a tester dans Index.vue, car c'est juste un "aggrégateur" pour d'autres composants.
+
+test('Choix_Mode', () => {
+
+    const wrapper = shallowMount(Choix_Mode)
+
+    expect(wrapper.vm.contenuPanier).toEqual(true)
+
+    let button = wrapper.find('#choixDuMode');
+    button.trigger('click');
+
+    expect(wrapper.vm.contenuPanier).toEqual(false)
+
+
+    const wrapperDeux = shallowMount(Choix_Mode_Variante)
+
+    expect(wrapperDeux.vm.contenuPanier).toEqual(true)
+
+     button = wrapperDeux.find('#choixDuMode');
+    button.trigger('click');
+
+    expect(wrapperDeux.vm.contenuPanier).toEqual(false)
+
+})
\ No newline at end of file

src/tests/Consulter_Contenu.test.js

+import Login from "../Login.vue";
+import {mount} from "@vue/test-utils";
+import { shallowMount } from '@vue/test-utils'
+import Service from "../service/Service";
+import Contenu from "../Contenu";
+import Volet_Base from "../components/Volet_Base";
+import Volet_Menu from "../components/Volet_Menu";
+import Consulter_Contenu from "../components/Consulter_Contenu";
+
+// Rien a tester dans Index.vue, car c'est juste un "aggrégateur" pour d'autres composants.
+
+test('Consulter_Contenu', () => {
+
+    const wrapper = shallowMount(Consulter_Contenu)
+
+    wrapper.vm.actionContenu = jest.fn()
+
+    let button = wrapper.find('button');
+    button.trigger('click');
+
+    expect(wrapper.vm.actionContenu).toHaveBeenCalled()
+
+})
\ No newline at end of file

src/tests/Contenu.test.js

+import Login from "../Login.vue";
+import {mount} from "@vue/test-utils";
+import { shallowMount } from '@vue/test-utils'
+import Service from "../service/Service";
+import Contenu from "../Contenu";
+import Volet_Base from "../components/Volet_Base";
+
+// Rien a tester dans Index.vue, car c'est juste un "aggrégateur" pour d'autres composants.
+
+test('Contenu', () => {
+
+    const wrapper = shallowMount(Contenu)
+    expect(wrapper.vm).toBeTruthy();
+
+    wrapper.vm.choixVariante = jest.fn()
+    expect(wrapper.vm.choixVariante).toHaveBeenCalledTimes(0);
+
+
+    const subComponent = wrapper.findComponent(Volet_Base)
+    expect(subComponent.exists()).toBe(true)
+})
\ No newline at end of file

src/tests/Detail_Filtre.test.js

+import Login from "../Login.vue";
+import {mount} from "@vue/test-utils";
+import { shallowMount } from '@vue/test-utils'
+import Service from "../service/Service";
+import Contenu from "../Contenu";
+import Volet_Base from "../components/Volet_Base";
+import Volet_Menu from "../components/Volet_Menu";
+import Detail_Filtre from "../components/Detail_Filtre";
+
+// Rien a tester dans Index.vue, car c'est juste un "aggrégateur" pour d'autres composants.
+
+test('Detail_Filtre', () => {
+
+    const wrapper = shallowMount(Detail_Filtre)
+
+    wrapper.setData({filtres_Choisis: ['Charles']})
+    let button = wrapper.find('#effacerFiltres');
+    button.trigger('click');
+
+    expect(wrapper.vm.filtres_Choisis).toEqual([])
+
+
+})
\ No newline at end of file

src/tests/Index.test.js

+
+import Index from "../Index.vue";
+import {mount} from "@vue/test-utils";
+import { shallowMount } from '@vue/test-utils'
+import Login from "../Login.vue";
+import Menu from "../Menu.vue";
+import Maj from "../Maj.vue";
+import NewContenu from "../NewContenu.vue";
+import Contenu from "../Contenu.vue";
+
+// Rien a tester dans Index.vue, car c'est juste un "aggrégateur" pour d'autres composants.
+
+test('Index', () => {
+
+    const wrapper = shallowMount(Index)
+    wrapper.vm.setLogged = jest.fn()
+
+    expect(wrapper.exists()).toBeTruthy();
+
+
+    // Tests du retour de l'émit de Contenu.vue
+    const subComponent = wrapper.findComponent(Login)
+    expect(subComponent.exists()).toBe(true)
+
+    subComponent.vm.$emit("user_logged", {"isLogged" : true, "auteur": "Marmaduke"})
+    expect(wrapper.vm.etat).toEqual("Contenu")
+    expect(wrapper.vm.errorLogin).toEqual(false)
+    expect(wrapper.vm.auteur).toEqual("Marmaduke")
+
+    subComponent.vm.$emit("user_logged", {"isLogged" : false})
+    expect(wrapper.vm.errorLogin).toEqual(true)
+
+    // Tests du retour de l'émit de Menu.vue
+    const subComponentTwo = wrapper.findComponent(Menu)
+    expect(subComponentTwo.exists()).toBe(true)
+
+    subComponentTwo.vm.$emit("menu_choisi", {choix: "Mises à jour", isRecu: true, isPropose: false})
+    expect(wrapper.vm.etat).toEqual("Mises à jour")
+    expect(wrapper.vm.isRecu).toEqual(true)
+    expect(wrapper.vm.isPropose).toEqual(false)
+
+    subComponentTwo.vm.$emit("menu_choisi", {choix: "Deconnexion"})
+    expect(wrapper.vm.etat).toEqual("unlogged")
+
+
+    // Test du retour de l'émit de Maj.vue
+    const subComponentThree = wrapper.findComponent(Maj)
+    subComponentThree.vm.$emit("majNvoContenu", {contenu: "data"})
+    expect(wrapper.vm.nvoContenu === "data")
+
+    expect(wrapper.vm.recalculerNotif === false)
+    subComponentTwo.vm.$emit("recalculerNotif")
+    expect(wrapper.vm.recalculerNotif === true)
+
+    // Test du retour de l'émit de NewContenu.vue
+    const subComponentFour = wrapper.findComponent(NewContenu)
+
+    subComponentFour.vm.$emit("contenuAjoute", {contenu: "nouveauContenu"})
+    expect(wrapper.vm.contenuAjoute === "nouveauContenu")
+
+    subComponentFour.vm.$emit("retourArriere")
+    expect(wrapper.vm.etat === "Contenu")
+
+    // Test du retour de Contenu.vue
+    const subComponentFive = wrapper.findComponent(Contenu)
+
+    subComponentFive.vm.$emit("choix_variante", {variante: true})
+    expect(wrapper.vm.variante === true)
+
+    subComponentFive.vm.$emit("newContenu")
+    expect(wrapper.vm.etat === "newContenu")
+
+})

src/tests/Login.test.js

+import Login from "../Login.vue";
+import {mount} from "@vue/test-utils";
+import { shallowMount } from '@vue/test-utils'
+import Service from "../service/Service";
+
+// Rien a tester dans Index.vue, car c'est juste un "aggrégateur" pour d'autres composants.
+
+test('Login', () => {
+
+    const wrapper = shallowMount(Login)
+
+    wrapper.vm.logIn = jest.fn()
+
+    expect(wrapper.vm.logIn).toHaveBeenCalledTimes(0);
+
+    // console.log(Service.login())
+    const button = wrapper.find('button');
+
+    button.trigger('click');
+    expect(wrapper.vm.logIn).toHaveBeenCalledTimes(1);
+
+})
\ No newline at end of file

src/tests/Menu.test.js

+import Login from "../Login.vue";
+import {mount} from "@vue/test-utils";
+import { shallowMount } from '@vue/test-utils'
+import Service from "../service/Service";
+import Menu from "../Menu";
+
+// Rien a tester dans Index.vue, car c'est juste un "aggrégateur" pour d'autres composants.
+
+test('Menu', () => {
+
+    const wrapper = shallowMount(Menu)
+
+    wrapper.vm.choixIconeNotification = jest.fn()
+
+    wrapper.setData({isAffiche: true})
+    wrapper.find('.notif').trigger('click');
+    expect(wrapper.vm.isAffiche === false)
+
+    let isAfficheTmp = wrapper.vm.isAffiche
+    wrapper.find('.circle').trigger('click')
+    expect(wrapper.vm.isAffiche).toEqual(true)
+
+    wrapper.vm.choixMenuAnnexe = jest.fn()
+    wrapper.setData({isAffiche: true})
+    wrapper.find('.sous_menu').trigger('click')
+    expect(wrapper.vm.isAffiche).toEqual(false)
+
+    wrapper.setData({isAffiche: true})
+
+})

src/tests/Modifier_Contenu.test.js

+import Login from "../Login.vue";
+import {mount} from "@vue/test-utils";
+import { shallowMount } from '@vue/test-utils'
+import Service from "../service/Service";
+import Contenu from "../Contenu";
+import Volet_Base from "../components/Volet_Base";
+import Volet_Menu from "../components/Volet_Menu";
+import Modifier_Contenu from "../components/Modifier_Contenu";
+
+// Rien a tester dans Index.vue, car c'est juste un "aggrégateur" pour d'autres composants.
+
+test('Modifier_Contenu', () => {
+
+    const wrapper = shallowMount(Modifier_Contenu)
+
+    wrapper.vm.action = jest.fn()
+
+    let button = wrapper.find('#validerModif');
+    button.trigger('click');
+
+    expect(wrapper.vm.action).toHaveBeenCalled()
+
+    button = wrapper.find('#retourArriere');
+    button.trigger('click');
+
+    expect(wrapper.vm.action).toHaveBeenCalledTimes(2)
+
+})
\ No newline at end of file

src/tests/NewContenu.test.js

+import Login from "../Login.vue";
+import {mount} from "@vue/test-utils";
+import { shallowMount } from '@vue/test-utils'
+import Service from "../service/Service";
+import NewContenu from "../NewContenu";
+
+// Rien a tester dans Index.vue, car c'est juste un "aggrégateur" pour d'autres composants.
+
+test('NewContenu', () => {
+
+    const wrapper = shallowMount(NewContenu)
+    expect(wrapper.vm.test).toEqual('')
+    wrapper.find('.ajouterContenu').trigger('click');
+    expect(wrapper.vm.test).toEqual('test')
+
+})
\ No newline at end of file

src/tests/Profil.test.js

+import Login from "../Login.vue";
+import {mount} from "@vue/test-utils";
+import { shallowMount } from '@vue/test-utils'
+import Service from "../service/Service";
+import Profil from "../Profil";
+
+// Rien a tester dans Index.vue, car c'est juste un "aggrégateur" pour d'autres composants.
+
+test('Profil', () => {
+
+    const wrapper = shallowMount(Profil)
+    expect(wrapper.vm.editMode).toEqual(false)
+
+    let button = wrapper.find('#validerChangementMdp');
+
+    button.trigger('click');
+    expect(wrapper.vm.editMode).toEqual(true)
+
+    console.log(wrapper.vm.editMode)
+
+    button = wrapper.find('#afficherMenuChangementMdp')
+    button.trigger('click');
+    expect(wrapper.vm.editMode).toEqual(false)
+
+    console.log(wrapper.vm.editMode)
+
+})
+

src/tests/Tags.test.js

+import Login from "../Login.vue";
+import {mount} from "@vue/test-utils";
+import { shallowMount } from '@vue/test-utils'
+import Service from "../service/Service";
+import Tags from "../Tags";
+
+// Rien a tester dans Index.vue, car c'est juste un "aggrégateur" pour d'autres composants.
+
+test('Tags', () => {
+
+    const wrapper = shallowMount(Tags)
+
+    expect(wrapper.vm).toBeTruthy();
+})
\ No newline at end of file

src/tests/Volet_Base.test.js

+import Login from "../Login.vue";
+import {mount} from "@vue/test-utils";
+import { shallowMount } from '@vue/test-utils'
+import Service from "../service/Service";
+import Contenu from "../Contenu";
+import Volet_Base from "../components/Volet_Base";
+import Volet_Menu from "../components/Volet_Menu";
+import Volet_Contenu from "../components/Volet_Contenu";
+
+// Rien a tester dans Index.vue, car c'est juste un "aggrégateur" pour d'autres composants.
+
+test('Volet_Base', () => {
+
+    const wrapper = shallowMount(Volet_Base)
+
+    // Volet_Menu -> filtre choisi
+    const subComponent = wrapper.findComponent(Volet_Menu)
+    expect(subComponent.exists()).toBe(true)
+    subComponent.vm.$emit("filtre_choisi", {filtre: "auteur"})
+    expect(wrapper.vm.filtre_choisi).toEqual("auteur")
+
+    // Volet_Contenu -> filtres choisis & mode_choisi
+    const subComponentTwo = wrapper.findComponent(Volet_Contenu)
+    // subComponentTwo.vm.$emit("filtresChoisis", {filtres: ["auteur", "tag1"]})
+
+    // réception d'un changement de mode
+    expect(wrapper.vm.panierChoisi).toEqual(true)
+    subComponentTwo.vm.$emit("mode_choisi", {mode: "banque"})
+    expect(wrapper.vm.panierChoisi).toEqual(false)
+
+
+    // bouton de changement de variante
+    let button = wrapper.find('#changerVariante');
+    expect(wrapper.vm.variante).toEqual(false)
+    button.trigger('click');
+    expect(wrapper.vm.variante).toEqual(true)
+
+    // bouton pour masquer / afficher le volet
+    expect(wrapper.vm.isActif).toEqual(true)
+    button = wrapper.find("#boutonVolet")
+    button.trigger('click');
+    expect(wrapper.vm.isActif).toEqual(false)
+
+    // bouton pour cocher décocher l'affichage des contenus persos
+    expect(wrapper.vm.persoChecked).toEqual(true)
+    button = wrapper.find("#filtrePerso")
+    button.trigger('click');
+    expect(wrapper.vm.persoChecked).toEqual(false)
+
+    // bouton pour cocher décocher l'affichage des contenus tiers
+    expect(wrapper.vm.tiersChecked).toEqual(true)
+    button = wrapper.find("#filtreTiers")
+    button.trigger('click');
+    expect(wrapper.vm.tiersChecked).toEqual(false)
+
+    // bouton pour cocher décocher l'affichage des contenus en-cours
+    expect(wrapper.vm.enCoursChecked).toEqual(true)
+    button = wrapper.find("#filtreEnCours")
+    button.trigger('click');
+    expect(wrapper.vm.enCoursChecked).toEqual(false)
+
+
+})
\ No newline at end of file

src/tests/Volet_Menu.test.js

+import Login from "../Login.vue";
+import {mount} from "@vue/test-utils";
+import { shallowMount } from '@vue/test-utils'
+import Service from "../service/Service";
+import Contenu from "../Contenu";
+import Volet_Base from "../components/Volet_Base";
+import Volet_Menu from "../components/Volet_Menu";
+import Volet_Contenu from "../components/Volet_Contenu";
+
+// Rien a tester dans Index.vue, car c'est juste un "aggrégateur" pour d'autres composants.
+
+test('Volet_Menu', () => {
+
+    const wrapper = shallowMount(Volet_Menu)
+
+    let button = wrapper.find('#recherche');
+    expect(wrapper.vm.modeFiltre).toEqual(true)
+    button.trigger('click');
+    expect(wrapper.vm.modeFiltre).toEqual(false)
+
+})
\ No newline at end of file