Cypress 기본문법 2

wrap

한번에 묶어서 for loop처럼 테스팅을 진행 할 수 도 있다.

describe('Footer', () => {
  context('with multiple todos', () => {
    beforeEach(() => {
      cy.seedAndVisit();
    });

    it('displays todos count when active link clicked', () => {
      cy.contains('Active').click();

      cy.get('.todo-list li').should('have.length', 3);
    });
    it('displays todos count when completed link clicked', () => {
      cy.contains('Completed').click();

      cy.get('.todo-list li').should('have.length', 1);
    });
  });
});

can be refactored into the code below

describe('Footer', () => {
  context('with multiple todos', () => {
    beforeEach(() => {
      cy.seedAndVisit();
    });

    it('Handle filter links', () => {
      const filters = [
        { link: 'All', expectedLength: 4 },
        { link: 'Active', expectedLength: 3 },
        { link: 'Completed', expectedLength: 1 },
      ];

      cy.wrap(filters).each(filter => {
        cy.contains(filter.link).click();

        cy.get('.todo-list li').should('have.length', fileter.expectedLength);
      });
    });
  });
});

wait

비동기 request가 끝날때까지 기다렸다가 테스트를 진행한다.

일종의 await 와 비슷하다고 보면 된다.

우선 JSON server를 설치하자!
build JSON server - fake backend server.
So no need to stub server.

describe('Smoke tests', () => {
  beforeEach(() => {
    // init todos list by sending delete request.
    cy.request('GET', '/api/todos')
      .its('body')
      /* 
      [
        {name:'Buy Milk',isCompleted:false},
        {name:'Buy Cucumber',isCompleted:true},
        {name:'Buy Soda',isCompleted:false}
      ]
      */
      .each(todo => cy.request('DELETE', `/api/todos/${todo.id}`));
    // now todos list is empty
  });

  context('With no todos', () => {
    it.only('Saves new todos', () => {
      const items = [
        { text: 'Buy milk', expectedLength: 1 },
        { text: 'Buy eggs', expectedLength: 2 },
        { text: 'Buy bread', expectedLength: 3 },
      ];
      cy.visit('/');
      cy.server();
      cy.route('POST', '/api/todos').as('create');
      // Not stubbing!
      // just to use 'wait api' for us to wait for the request to be finished.

      cy.wrap(items) //
        .each(todo => {
          cy.focused() //
            .type(todo.text)
            .type('{enter}');

          // wait until serves us a data we requested.
          cy.wait('@create');

          cy.get('.todo-list li').should('have.length', todo.expectedLength);
        });
    });
  });
});

end-to-end test

front와 backend의 상호작용을 본격적으로 테스팅 해보자.

// extends everything from above

// populate todos
// get the todo lists
// click and wait
// get the element
// check if the elements have completed class

// test to see if the toggles works properly in the other direction
context('with active todos', () => {
  beforeEach(() => {
    cy.fixtures('todos').each(todo => {
      const newTodo = Cypress._.merge(todo, { isCompleted: true });
      cy.request('POST', '/api/todos', newTodos);
    });

    cy.visit('/');
  });

  it('toggle todos', () => {
    cy.server();
    cy.route('POST', '/api/todos').as('update');

    const clickAndWait = $li => {
      cy.wrap($li) //
        .as('item')
        .find('.toggle')
        .click();
      cy.wait('@update');
    };
    cy.get('.todo-list li')
      .each($li => {
        clickAndWait($li);
        cy.get('@item').should('have.class', 'completed');
      })
      .each($li => {
        clickAndWait($li);
        cy.get('@item').should('not.have.class', 'completed');
      });
  });
});

참고로 assertion에 대해서 더 많이 알고 싶다면 아래 링크 참고

assertions

cypress run

모든 테스트를 진행하고 그에 따른 결과를 보여주는 script를 짜보자!

// package.json
script:{
  "cypress:all":"cypress run"
}

// npm run cypress:all