Comprendre les composants de votre application Vue.js : Écrire des tests unitaires pour WeatherContainer

Introduction

La programmation orientée objet est une approche qui vous permet de structurer et d’organiser le code de vos applications. Cela implique souvent la conception de classes ou de composants qui sont responsables de certains aspects fonctionnels de votre application.

Dans ce chapitre, nous allons explorer les composants de l’application Weather Container en utilisant Vue.js. Nous aborderons tout d’abord le store et le router, puis nous passerons aux composants individuels.

Le Store

Le store est une partie cruciale de la programmation orientée objet qui stocke toutes les données nécessaires à votre application. Dans l’exemple donné, vous trouverez le fichier store.js dans le dossier src.

// store.js
const state = {
  location: '',
  weatherDescription: '',
  imageAbbr: '',
  weatherTemp: 0,
  loading: false
};

const mutations = {
  UPDATE_LOCATION(state, payload) {
    state.location = payload;
  },
  UPDATE_WEATHER_DETAILS(state, payload) {
    state.weatherDescription = payload.weather_state_name;
    state.imageAbbr = payload.weather_state_abbr + '.png';
    state.weatherTemp = payload.the_temp.toFixed();
  },
  LOADING_PENDING(state) {
    state.loading = true;
  },
  LOADING_COMPLETE(state) {
    state.loading = false;
  }
};

const actions = {
  fetchWeather({ commit }, id) {
    commit('LOADING_PENDING');
    axios.get(`/api/weather`, { params: { id: id } })
      .then((response) => {
        const weather = response.data.consolidated_weather[0];
        commit('UPDATE_LOCATION', response.data.title);
        // ommit('LOADING_PENDING'); // erreur de typo
        axios.get(`/api/weather`, { params: { id: id } })
          .then((response) => {
            const weather = response.data.consolidated_weather[0];
            commit('UPDATE_LOCATION', response.data.title);
            commit('UPDATE_WEATHER_DETAILS', weather);
            commit('LOADING_COMPLETE');
          });
      });
  }
};

const getters = {
  location: state => state.location,
  weatherDescription: state => state.weatherDescription,
  imageAbbr: state => state.imageAbbr,
  weatherTemp: state => state.weatherTemp,
  loading: state => state.loading
};

Dans ce code, vous pouvez voir trois parties importantes :

• La state qui stocke les données nécessaires à l’application.
• Les mutations qui mettent à jour la state.
• Les actions qui appellent les mutations.

Le Router

Le router est responsable de gérer les routes de votre application. Dans l’exemple donné, vous trouverez le fichier router.js dans le dossier src.

// router.js
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      component: HomeContainer,
      children: [
        { path: ':id', name: 'weather', component: WeatherContainer }
      ]
    },
    { path: '/not-found', component: NotFoundContainer }
  ]
});

Dans ce code, vous pouvez voir deux routes importantes :

• La route / qui est la page d’accueil et qui contient une sous-route pour afficher le temps par ville.
• La route /not-found qui est la page de non trouvé.

Les Composants

Les composants sont les éléments visuels de votre application. Dans l’exemple donné, vous trouverez trois composants : HomeContainer, NotFoundContainer et WeatherContainer.

HomeContainer

Le composant HomeContainer est le composant qui affiche la page d’accueil.

<!-- HomeContainer.vue -->
<template>
  <h1 class="subtitle is-size-3">Pick a city below to see the weather!</h1>
</template>

<script>
export default {
  name: 'HomeContainer'
}
</script>

NotFoundContainer

Le composant NotFoundContainer est le composant qui affiche la page de non trouvé.

<!-- NotFoundContainer.vue -->
<template>
  <h1 class="subtitle is-size-3">Sorry, this route does not exist :(</h1>
</template>

<script>
export default {
  name: 'NotFoundContainer'
}
</script>

WeatherContainer

Le composant WeatherContainer est le composant qui affiche les informations météorologiques pour une ville donnée.

<!-- WeatherContainer.vue -->
<template>
  <div>
    <div v-if="!loading" class="weather container">
      <img class="weather__image" :src="require(`../assets/${imageAbbr}`)" />
      <h1 class="subtitle weather__city">{{ location }}</h1>
      <p class="weather__description">{{ weatherDescription }}</p>
      <p class="weather__temperature">{{ weatherTemp }} ºC</p>
    </div>
    <div v-if="loading" class="loader"></div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  name: 'WeatherContainer',
  props: ['id'],
  computed: {
    ...mapGetters(['location', 'weatherDescription', 'imageAbbr', 'weatherTemp', 'loading'])
  },
  watch: {
    id() {
      this.fetchWeather();
    }
  },
  created() {
    this.fetchWeather();
  },
  methods: {
    fetchWeather() {
      this.$store.dispatch('fetchWeather', Number(this.id));
    }
  }
}
</script>

Dans ce code, vous pouvez voir les éléments suivants :

• La partie <template> qui définit la structure HTML du composant.
• La partie <script> qui définit le comportement du composant.

Tests Unitaires

Les tests unitaires sont utilisés pour tester les composants individuellement. Dans l’exemple donné, vous trouverez les fichiers de test dans le dossier tests/unit/weather.

Test de WeatherContainer

Le test de WeatherContainer est un exemple de test qui vérifie que les données météorologiques s’affichent correctement.

// tests/unit/weather/WeatherContainer.test.js
import { shallowMount } from '@vue/test-utils';
import WeatherContainer from '@/components/WeatherContainer.vue';

describe('WeatherContainer', () => {
  it('renders correctly', () => {
    const wrapper = shallowMount(WeatherContainer, {
      propsData: {
        id: '12345'
      }
    });
    expect(wrapper.element).toMatchSnapshot();
  });

  it('fetches weather data', async () => {
    const store = new Vuex.Store({
      state: {
        location: '',
        weatherDescription: '',
        imageAbbr: '',
        weatherTemp: 0,
        loading: false
      },
      mutations: {},
      actions: {}
    });
    const wrapper = shallowMount(WeatherContainer, {
      propsData: {
        id: '12345'
      },
      store
    });
    await wrapper.vm.fetchWeather();
    expect(wrapper.vm.$store.state.location).toBe('New York');
  });
});

Dans ce code, vous pouvez voir les éléments suivants :

• L’utilisation de la bibliothèque @vue/test-utils pour créer un wrapper autour du composant.
• La création d’un objet store qui simule le comportement du store réel.

Conclusion

Dans cet article, nous avons exploré les composants de l’application Weather Container en utilisant Vue.js. Nous avons abordé tout d’abord le store et le router, puis nous sommes passés aux composants individuels.

Nous avons également vu comment écrire des tests unitaires pour chaque composant, ce qui est essentiel pour garantir la qualité de votre code.

Il est important de noter que les composants sont les briques de base de votre application et doivent être conçus avec soin pour éviter les bugs et les problèmes de maintenance à long terme.

Enfin, je vous invite à explorer davantage les fonctionnalités de Vue.js et à écrire vos propres tests unitaires pour améliorer la qualité de votre code.