Front Test (feat:Cypress)

기능 : 사용자 주식 트레이드

시나리오 : 트레이드가 마감되기 전에 사용자가 판매를 요청
  
"Given" 나는 MSFT 주식을 100가지고 있다. 
        그리고 나는 APPL 주식을 150가지고 있다. 
		그리고 시간은 트레이드가 종료되기 전이다.

"When"  나는 MSFT 주식 20을 팔도록 요청했다.
     
"Then"  나는 MSFT 주식 80 가지고 있어야 한다.
		그리고 나는 APPL 주식 150을 가지고 있어야 한다.
		그리고 MSFT 주식 20이 판매 요청이 실행되었어야 한다.

it('should $1', () => {
  // Given
  const data = $4

  // When
  const result = $3

  // Then
  expect(result).toEqual($2)
})

import { Ids } from '../../../src/app/constants';
//can share Id values between UI and Test to make sure the CSS selectors don't break

cy.get(`#${Ids.username}`)
  .type('john')

import { Ids } from '../../../src/app/constants';

class LoginPage {
  visit() {
    cy.visit('/login');
  }

  get username() {
    return cy.get(`#${Ids.username}`);
  }
}
const page = new LoginPage();

// Later
page.visit();

page.username.type('john');

cy.get('#foo')
  .should('have.text', 'something')

cy.get('div')
  .should(($div) => {
    expect($div).to.have.length(1);
    expect($div[0].className).to.contain('heading');
  })
// This is just an example. Normally you would `.should('have.class', 'heading')

// Don't do this
cy.get(/**something*/)
  .should(/**something*/)
  .click()
  .should(/**something*/)
  .get(/**something else*/)
  .should(/**something*/)

// Prefer separating the two gets
cy.get(/**something*/)
  .should(/**something*/)
  .click()
  .should(/**something*/)

cy.get(/**something else*/)
  .should(/**something*/)

cy.get('#foo')
  // Once #foo is found the following:
  .contains('Submit')
  .click()
  // ^ will continue to search for something that has text `Submit` and fail if it times out.
  // ^ After it is found trigger a click on the HTML Node that contained the text `Submit`.

// If there is no request against the `foo` alias cypress will wait for 4 seconds automatically
cy.wait('@foo')
// If there is no element with id #foo cypress will wait for 4 seconds automatically and keep retrying
cy.get('#foo')

cy.intercept("POST", "/graphql", (req) => {
      aliasMutation(req, "CreateLink");
    });

cy.wait("@gqlCreateLinkMutation")

cy.intercept("POST", "/graphql", (req) => {
      aliasMutation(req, "CreateLink");
    });

cy.wait("@gqlCreateLinkMutation")
      .its("response.body.data.createLink")
      .should("deep.include", { originalLink: graphqlResOriginalLink });

cy.wait("@gqlCreateLinkMutation")
      .its("response.body.data")
      .should("be.null");

cy.wait(10000)

/// <reference types="cypress"/>

describe('Hello world', () => {
  it('demonstrate command - execution separation', () => {
    console.log('start');
    cy.visit('http://www.google.com');
    console.log('between');
    cy.get('.gLFyf').type('Hello world');
    console.log('end');
  });
});
// command가 실행되기 전에 start/between/end가 console에 찍힘

npm install cypress
npm install eslint-plugin-cypress 
//code coverage 확인을 위한 패키지
npm install @cypress/code-coverage babel-plugin-istanbul 

/cypress - to hold all things Cypress i.e. tests, fixtures, page objects, utils, plugins, commands
	/fixtures - JSON files of common data objects needed in tests
	/integration - all of our tests, we would often create sub-folders per page/feature or even by group of tests
	/pages - page objects and each feature would often have its own sub-folder for the pages related to it
	/plugins - custom plugins to run in a Node server, each feature/page would have its own sub-folder for API teardown/setup
	/support - custom commands and types here
	/utils - extra utility files to be used throughout
		/action
		/graphql
	/config - environment configuration JSON files to extend/override the base cypress.json file - not all teams did this but it's another approach

/coverage 
	/Icov-report 
		/app.link.hitple.com 
			/__generated__ 
			/pages 
			/src 

describe("when you are in brand Page", () => {
  beforeEach(() => {
    cy.intercept("POST", "/graphql", (req) => {
      aliasMutation(req, "CreateLink");
    });

    login();
  });

  it("should success creating link", () => {
    const inputLink = "www.naver.com";
    const graphqlResOriginalLink = "http://www.naver.com";

    cy.findByPlaceholderText("줄이고자 하는 URL을 입력해주세요")
      .type(inputLink)
      .should("have.value", inputLink);
    cy.contains("생성").click();

    cy.wait("@gqlCreateLinkMutation")
      .its("response.body.data.createLink")
      .should("deep.include", { originalLink: graphqlResOriginalLink });

    cy.get(".Label__StyledLabel-k9469y-0").should("have.text", "기존 URL");
    cy.get(
      ":nth-child(2) > .LinkListItem__Container-j4stqv-0 > .LinkListItem__OriginalLink-j4stqv-6",
    ).should("have.text", graphqlResOriginalLink);
  });

  it("should fail creating link", () => {
    cy.findByPlaceholderText("줄이고자 하는 URL을 입력해주세요")
      .type("www.google")
      .should("have.value", "www.google");
    cy.get("#create-link-button").should("contain", "생성").click();

    cy.get(".Label__StyledLabel-k9469y-0").should(
      "have.text",
      "URL 형식을 다시 확인해주세요",
    );
  });
});

cypress에서 권장하는 방식이지만 작업하기 번거로울 수 있음
=> cypress에서 선택시 위에서처럼 ID나 className을 선택하지 않고 
<button
  id="main"
  class="btn btn-large"
  name="submission"
  role="button"
  data-cy="submit"
>
  Submit
</button>
과 같이 attribute를 주어 선택하도록 하여 js나 css혹은 id, className 변경으로부터 자유룝게 작성하는 것이 권장된다.

cy.get('[data-cy=submit]').click()	 Always	Best. Isolated from all changes.
[https://docs.cypress.io/guides/references/best-practices]