# Cypress with vue

## რატომ Cypress?

* აქვს კარგი დოკუმენტაცია
* მარტივია რომ დაიწყო, რადგან აქვს "zero-configuration" მიდგომა
* cypress-ის მთავარი ნიშა არის E2E(ტესტირების ტიპი რომელიც ბაძავს იუზერის ინტერაქციას ჩვენს აპლიკაციასთან) ტესტები და აქვს შესაბამისი დამხარე ხელსაწყოები([time travel](https://docs.cypress.io/guides/core-concepts/cypress-app#Time-Traveling), [screenshots and videos](https://docs.cypress.io/guides/guides/screenshots-and-videos))

## Cypress-ის კონფიგურაცია

ვიუს აპლიკაციაში cypress-ის ინტეგრაციის ორი გზა არსებობს: ერთი, როდესაც ახალი ვიუს აპლიკაციას ვქმნით ბრძანებით <mark style="color:purple;">`npm init vue@latest`</mark> , შეგვიძლია კონფიგურაციაში ავირჩიოთ რომ აპლიკაცია შეიქმნას cypress-სთან ერთად და მეორე, თუ უკვე არსებულ ვიუს აპლიკაციაში გვინდა cypress-ის დაყენება უბრალოდ გავუშვათ <mark style="color:purple;">`npm install cypress -D`</mark>

## Explore One cypress test

მას შემდეგ რაც cypress დავაინსტალირეთ ჩვენს აპლიკაციაში, შეგვიძლია გავუშვათ ბრძანება <mark style="color:purple;">`npx cypress open`</mark>

ეს ბრძანება გაგვიხსნის სრულიად დამოუკიდებელ ბრაუზერს, რომელსაც cypress აკონტროლებს&#x20;

![cypress](https://392590438-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrgmjFj4NNSsoaQmAk09Z%2Fuploads%2FDj59nshYSinSw94k64ws%2Fimage.png?alt=media\&token=e6ee3417-d95e-4940-8f71-fc64c35f013c)

ავირჩიოთ E2E Testing და რომელიმე ბრაუზერი<br>

![](https://392590438-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrgmjFj4NNSsoaQmAk09Z%2Fuploads%2FQJFPdVgMlDsTwwdNpiRC%2Fimage.png?alt=media\&token=24c35056-c2c5-4e7f-82cf-aa342229cee8)

ახლა კი გამოვიკვლიოთ ერთი ტესტი, რომელიც მოთავსებულია `cypress/e2e/example.cy.js` მისამართზე. *you can see repository* [*here*](https://github.com/vakhtangaA/cypress-boy)

<pre class="language-javascript"><code class="lang-javascript">describe("Create user with form", () => {
  it("send user creation request", () => {
    cy.intercept(
      {
        method: "POST",
        url: "api/users",
      },
      {
        message: "OK",
      }
    ).as("CreateUser");
    
    cy.visit("/");
<strong>    cy.get("#first_name").type("Jane");
</strong>    cy.get("#last_name").type("Doe");
    cy.get("#email").type("Jane_Doe@gmail.com");
    cy.get("button").click();
    
    cy.wait("@CreateUser").then(({ response }) => {
      expect(response.body).to.be.an("object");
      expect(response.body.message).equals("OK");
    });
  });
});
</code></pre>

\
ზემოთ მოცემულ მაგალითში გვაქვს გვერდი, რომელზეც მოთავსებულია ფორმა იუზერის შესაქმნელად. იმის საშუალებას რომ ამ გვერდს ვესტუმროთ <mark style="color:purple;">`cy.visit("/");`</mark> ბრძაენებით და არ მოგვიწიოს ყოველ ჯერზე სრული მისამართის ჩაწერა, გვაძლევს <mark style="color:purple;">`cypress.config.js`</mark> ფაილი სადაც გვიწერია შემდეგი კონფიგურაცია <mark style="color:purple;">`baseUrl: "http://localhost:5173"`</mark>

შემდეგ ტესტ რანერი შეავსებს ინფუთებს და გამოიძახებს ჰენდლერს, ხოლო რადგან ტესტის თავში გვაქვს გამოყენებული <mark style="color:purple;">`cy.intercept`</mark><mark style="color:purple;">,</mark> <mark style="color:purple;"></mark><mark style="color:purple;">`/api/users`</mark>-ზე გაგზავნილ რექვესთს დაიჭერს cypress და უპასუხებს შესაბამისი response-ით.\
\
შემდეგ კი შეგვიძლია დავუბრუნდეთ ტესტ რანერს და ვნახოთ რომ assertion-ები გამწვანდა :tada:

![](https://392590438-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrgmjFj4NNSsoaQmAk09Z%2Fuploads%2FZTQwPy2MioS1bXdwuU6I%2Fimage.png?alt=media\&token=b8693ef0-69d1-470a-a7ec-97a4c91fb865)