Vue (TypeScript)

Ar trebui să creezi un component Vue principal numit App.vue ca punct de intrare al aplicației tale Vue. Codul tău Vue ar trebui să fie verificat (linted) folosind ESLint cu configurația recomandată pentru Vue.js și TypeScript.

Fișier de intrare

Fișierul de intrare pentru acest șablon trebuie să fie unul dintre următoarele: index.ts sau main.ts. Primul care este găsit va fi utilizat ca punct de intrare.

Versiune

Rulează pe Node.js v20.0.0

Limbi suportate

TypeScript

Cadru de testare

Jest

Precizări speciale și detalii de implementare

• Vue Testing Library, o bibliotecă construită peste @vue/test-utils, biblioteca oficială de testare pentru Vue.

Exemplu cu Vue Testing Library:

import "@testing-library/jest-dom/jest-globals";

import { render } from "@testing-library/vue";
import { describe, expect, it } from "@jest/globals";
import { screen } from "@testing-library/dom";

import HelloWorld from "./App.vue";

describe("HelloWorld", () => {
  it("renders Hello, World!", () => {
    render(HelloWorld);
    expect(screen.getByText("Hello, World!")).toBeInTheDocument();
  });
});

Nu uita să îți păstrezi întotdeauna componentele modulare și să folosești reactivitatea, proprietățile calculate și directivele Vue pentru o gestionare eficientă a datelor și manipulări ale DOM-ului. Folosește tipuri și interfețe TypeScript pentru o mai bună siguranță a tipurilor (type safety).

Biblioteci incluse

• @babel/preset-env
• babel-jest
• jest-environment-jsdom
• @testing-library/jest-dom
• @testing-library/user-event
• @testing-library/vue
• @vue/compiler-sfc
• @vue/vue3-jest
• jest-transform-stub
• typescript

Provocări write-tests

Acest șablon acceptă provocări write-tests. Soluția de referință este deja scrisă, iar tu scrii testele: acestea trebuie să treacă pe soluția de referință și să prindă fiecare variantă cu bug-uri ascunsă. Test îți rulează testele doar pe soluția de referință, iar Verify tests (Verifică testele) și Submit (Trimite) le rulează și pe variantele cu bug-uri ascunse. Citește Rezolvarea unei provocări write-tests pentru întregul flux.

• Runner de teste: Jest (ts-jest) + @testing-library/vue
• Aceeași configurare ca la Vue, cu fișiere de test *.spec.ts și componente <script lang="ts" setup>.
• Pentru input-urile cu v-model folosește await fireEvent.update(input, value): setează valoarea și declanșează evenimentul potrivit într-un singur apel.

Un exemplu complet găsești în Exemple de write-tests după șablon.

Cum să depanezi

Depanarea aplicațiilor Vue.js 3 cu TypeScript este esențială pentru a asigura stabilitatea și corectitudinea acestora. Utilizarea instrucțiunilor console.log() poate fi o metodă simplă, dar eficientă de depanare a aplicațiilor Vue.

Pași pentru depanare folosind log-uri în consolă

1. Identifică zona cu probleme: Localizează componenta sau metoda Vue unde suspectezi că se află problema.

2. Introdu instrucțiuni console.log(): Introdu instrucțiuni console.log() înainte și după segmentul de cod pe care dorești să îl inspectezi, înregistrând date relevante precum starea componentei, props sau apelurile de metode.

3. Verifică output-ul rezultatelor testelor tale

4. Folosește pictograma de depanare din zona de previzualizare: Fă clic pe pictograma de depanare (debug) din zona Preview pentru a verifica output-ul consolei sau verifică consola browserului tău.

5. Analizează output-ul: Examinează datele înregistrate pentru a înțelege fluxul aplicației tale Vue și pentru a identifica orice comportamente neașteptate sau erori.

Iată un exemplu de utilizare a console.log() pentru depanare în Vue.js 3 cu TypeScript:

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const count: Ref<number> = ref(0);

const increment = (): void => {
  console.log("Button clicked!");
  count.value++;
};

console.log("Component initialized."); // Log component initialization
</script>