Implemented test for composable

src/composables/tests/unit/useMovie.spec.js

@@ -0,0 +1,15 @@
+import useMovies from "@/composables/useMovie";
+import { test, expect } from "vitest";
+
+test("Composable should return all movies", async () => {
+    const { movies, error, getAllMovies } = useMovies();
+
+    try{
+        await getAllMovies();
+
+        expect(movies.length).toBe(122);
+    } catch (err) {
+        console.log(err);
+    }
+
+});

src/composables/useMovie.ts

@@ -1,18 +1,16 @@
 import { ref, type Ref } from "vue";
-import apiClient from "@/apiClient";
 import type { Movie } from "@/types/MovieTypes";
+import MovieService from "../services/movieService";
 
 export default function useMovies() {
     const movies: Ref<Movie[]> = ref([]);
     const error = ref("");
 
-    const getAllMovies = async() => {
+    const getAllMovies = async () => {
         try {
-            const response = await apiClient.get("/movies");
-            movies.value = response.data;
+            movies.value = await MovieService.getAll();
         } catch (err) {
-            error.value = "An error occurred while trying to fetch movies";
-            console.error(err);
+            console.log(err);
         }
     }
 

src/services/httpService.ts

@@ -0,0 +1,15 @@
+import axios from "axios";
+
+export default class HttpService {
+  static client = axios.create({
+    baseURL: "https://tame-erin-pike-toga.cyclic.app/",
+  });
+
+  static async request(method: string, url: string) {
+    const response = await this.client.request({
+      method,
+      url,
+    });
+    return response;
+  }
+}

src/services/movieService.ts

@@ -0,0 +1,15 @@
+import HttpService from "./httpService";
+import type { Movie } from "@/types/MovieTypes";
+
+export default class MovieService extends HttpService {
+  static async getAll() {
+    const response = await this.request("GET", "/movies");
+    return response.data;
+  }
+
+  static async getSingle(id: number) {
+    const movies: Movie[] = await this.getAll();
+
+    return movies.find((movie: Movie) => movie.id == id);
+  }
+}

src/store/moviesStore.ts

@@ -32,9 +32,9 @@ const useMoviesStore = defineStore("moviesStore", () => {
 
     function sortMovies(sortBy: string) {
         if(sortBy === "release date"){
-            movies.value = movies.value.sort((a, b) => new Date(b.releaseDate).getFullYear() - new Date(a.releaseDate).getFullYear());
+            movies.value = movies.value.sort((a: Movie, b: Movie) => new Date(b.releaseDate).getFullYear() - new Date(a.releaseDate).getFullYear());
         } else {
-            movies.value = movies.value.sort((a, b) => b.imdbRating - a.imdbRating);
+            movies.value = movies.value.sort((a: Movie, b: Movie) => b.imdbRating - a.imdbRating);
         }
     }
 

src/utils/tests/unit/formatGenres.spec.js

@@ -0,0 +1,18 @@
+import { formatGenres } from "../../formatGenres";
+import { test, expect } from "vitest";
+
+test("Function should return empty string", () => {
+    expect(formatGenres([])).toBe("");
+});
+
+test("Function should return 'Action'", () => {
+    expect(formatGenres(["Action"])).toBe("Action");
+});
+
+test("Function should return 'Action, Drama'", () => {
+    expect(formatGenres(["Action", "Drama"])).toBe("Action, Drama");
+});
+
+test("Function should return 'Action, Drama, Comedy'", () => {
+    expect(formatGenres(["Action", "Drama", "Comedy"])).toBe("Action, Drama, Comedy");
+});

src/views/MoviePage.vue

@@ -3,26 +3,28 @@ import MovieDetails from '@/components/MovieDetails.vue';
 import MovieList from '@/components/MovieList.vue';
 import Footer from '@/layout/Footer.vue';
 import useMoviesStore from '@/store/moviesStore';
-import { onMounted, computed } from 'vue';
+import { onMounted, computed, watch } from 'vue';
 import { formatGenres } from "@/utils/formatGenres";
 import type { Movie } from '@/types/MovieTypes';
 import { ref } from "vue";
 import type { Ref } from "vue";
+import MovieService from "../services/movieService";
 
 const props = defineProps(["movieId"]);
 const movieStore = useMoviesStore();
 const emit = defineEmits(["closeMoviePage"]);
-const movie = ref(movieStore.movies.find(movie => movie.id == props.movieId));
+const movie = ref();
 
-onMounted((() => {
+onMounted((async() => {
+    movie.value = await MovieService.getSingle(props.movieId)
     if(movie.value) {
         movieStore.searchMovies(movie.value.genres, "genre");
     }
     window.scrollTo(0, 0);
 }));
 
-const selectMovie = (id: number) => {
-    movie.value = movieStore.movies.find(movie => movie.id === id);
+const selectMovie = async (id: number) => {
+    movie.value = await MovieService.getSingle(id);
     if(movie.value){
         movieStore.searchMovies(movie.value.genres, "genre");
     }
@@ -37,7 +39,7 @@ const closeMoviePage = () => {
 
 <template>
 
-    <MovieDetails :movie="movie" @closeMoviePage="closeMoviePage"/>
+    <MovieDetails v-if="movie" :movie="movie" @closeMoviePage="closeMoviePage"/>
 
     <section class="container-fluid bg-lightgray">
         <div class="container genres-section">