Vue BDD - Setting

📌 목차

• Introduction
• Setting을 어떻게 해야할까?
• Conclusion
• Reference

📌 Introduction

안녕하세요 이번 포스팅은 지난번에 알려드린대로 BDD를 세팅하는 방법에 대해서 알려드리려고 합니다. 실제 코드는 여기를 참고하시면 됩니다. 🎉

📌 Setting을 하는 방법

먼저 cypress-cucumber-preprocessor를 설치해주세요

npm i -D cypress-cucumber-preprocessor

package.json

package.json에 해당 내용을 추가해주세요.

 "cypress-cucumber-preprocessor": {
    "nonGlobalStepDefinitions": true,
    "stepDefinitions": "tests/e2e/specs",
    "commonPath": "tests/e2e/common",
    "cucumberJson": {
      "generate": true,
      "outputFolder": "tests/e2e/cucumber-json",
      "filePrefix": "",
      "fileSuffix": ".cucumber"
    }

cypress.json

cypress.json에 해당 내용을 추가해주세요.

{
    "baseUrl": "http://localhost:8080",
    "chromeWebSecurity": false,
    "testFiles": "**/*.{feature,features}"
}

cypress/plugins/index.js

cypress/plugins/index.js에 해당 내용을 추가해주세요.

const cucumber = require("cypress-cucumber-preprocessor").default;// 이부분

module.exports = (on, config) => {
  on("file:preprocessor", cucumber()); // 이부분
  return Object.assign({}, config, {
    fixturesFolder: "tests/e2e/fixtures",
    integrationFolder: "tests/e2e/specs",
    screenshotsFolder: "tests/e2e/screenshots",
    videosFolder: "tests/e2e/videos",
    supportFile: "tests/e2e/support/index.js",
  });
};

cypress/support/commands.js

cypress/support/commands.js에 해당 내용을 추가해주세요.

Cypress.Commands.add("the", testSelector =>
  cy.get(`[data-test-${testSelector}]`)
);
Cypress.Commands.add("clickThe", testSelector => {
  cy.get(`[data-test-${testSelector}]`).click();
});
Cypress.Commands.add("clickTheFirst", testSelector => {
  cy.get(`[data-test-${testSelector}]`)
    .eq(0)
    .click();
});
Cypress.Commands.add("theFirst", testSelector =>
  cy.get(`[data-test-${testSelector}]`).eq(0)
);
Cypress.Commands.add("fillOutThe", testSelector =>
  cy.get(`[data-test-${testSelector}]`)
);
Cypress.Commands.add("with", { prevSubject: true }, (form, formData) => {
  cy.wrap(Object.keys(formData)).each(key => {
    cy.get(form)
      .find(`[name=${key}]`)
      .type(formData[key]);
  });
  cy.get(form).submit();
});
Cypress.Commands.add("getStore", () => {
  return cy.window().its("app.__vue__.$store");
});
Cypress.Commands.add(
  "dispatch",
  { prevSubject: true },
  (store, methodToDispatch, ...dispatchArguments) => {
    return store.dispatch(methodToDispatch, ...dispatchArguments);
  }
);
Cypress.Commands.add(
  "commit",
  { prevSubject: true },
  (store, methodToCommit, ...commitArguments) => {
    return store.commit(methodToCommit, ...commitArguments);
  }
);
Cypress.Commands.add(
  "setState",
  { prevSubject: true },
  (store, property, value) => {
    store.state[property] = value;
    return value;
  }
);
Cypress.Commands.add(
  "getState",
  { prevSubject: true },
  (store, property) => {
    return store.state[property];
  }
);

만약 store에 namspaced를 사용한다면 getStore,dispatch,commit,setState,getState를 이렇게 바꿔주시면 됩니다.

Cypress.Commands.add("getStore", () => {
  return cy.window().its("app.__vue__.$store");
});
Cypress.Commands.add(
  "dispatch",
  { prevSubject: true },
  (store, moduleName, methodToDispatch, ...dispatchArguments) => {
    return store[moduleName].dispatch(methodToDispatch, ...dispatchArguments);
  }
);
Cypress.Commands.add(
  "commit",
  { prevSubject: true },
  (store, moduleName, methodToCommit, ...commitArguments) => {
    return store[moduleName].commit(methodToCommit, ...commitArguments);
  }
);
Cypress.Commands.add(
  "setState",
  { prevSubject: true },
  (store, moduleName, property, value) => {
    store.state[moduleName][property] = value;
    return value;
  }
);
Cypress.Commands.add(
  "getState",
  { prevSubject: true },
  (store, moduleName, property) => {
    return store.state[moduleName][property];
  }
);

📌 Conclusion

이렇게 세팅을 해주면 이제 정말 BDD를 할 준비가 되었습니다. 정말로 이제 다음 포스팅에서는 이제 진짜 BDD를 하는 방법에 대해서 포스팅을 해보겠습니다.🎉

📌 Reference

• kyle's cypress cucumber wiki