import type { Genre } from "~/interfaces/movie";
import { mount } from "@vue/test-utils";
// #region --Import--.
import { describe, expect, it } from "vitest";
import MovieGender from "../../components/details/MovieGender.vue";
// #endregion

describe("movieGender", () => {
  it("affiche correctement les genres", () => {
    // Données de test.
    const genres: Genre[] = [
      { id: 1, name: "Action" },
      { id: 2, name: "Comédie" },
      { id: 3, name: "Drame" },
    ];
    // Monter le composant avec sa props.
    const wrapper = mount(MovieGender, {
      props: {
        genres,
      },
    });
    // Vérifier que tous les genres sont affichés.
    const spanElements = wrapper.findAll("span");
    // spanElements.length doit être égal aux données de test (genres.length).
    expect(spanElements.length).toBe(genres.length);

    // Vérifier le contenu affiché de chaque élément.
    spanElements.forEach((spanElement, index) => {
      // Sur chaque itération d'élément (span), vérification que le nom du genre correspondant soit bien affiché.
      expect(spanElement.text()).toContain(genres[index].name);
      expect(spanElement.text()).toBe(genres[index].name);
    });
  });

  it("affiche correctement un seul genre", () => {
    // Données de test.
    const genres: Genre[] = [{ id: 1, name: "Horreur" }];
    // Monter le composant avec sa props.
    const wrapper = mount(MovieGender, {
      props: {
        genres,
      },
    });
    // Vérifier que le genre soit affiché.
    const spanElements = wrapper.findAll("span");
    // spanElements.length doit être égal aux données de test (ici 1).
    expect(spanElements.length).toBe(genres.length);

    // Vérifier le contenu affiché de l'élément.
    expect(spanElements[0].text()).toContain(genres[0].name);
    expect(spanElements[0].text()).toBe(genres[0].name);
  });

  it("ne rend aucun élément span quand la liste est vide", () => {
    // Données de test volontairement vide.
    const genres: Genre[] = [];
    // Monter le composant avec sa props.
    const wrapper = mount(MovieGender, {
      props: {
        genres,
      },
    });
    // spanElements.length doit être égal à 0.
    const spanElements = wrapper.findAll("span");
    expect(spanElements.length).toBe(0);
  });
});