TodoList만들기!_mocha-testing(2)

장봄·2020년 6월 25일
0

TodoList만들기

목록 보기
5/9

💻 D-day 04

어제는 basic-self-assessment가 있었고 오늘부터 이번주는 solo-study기간이다. 이번주에는 todoList에 리스트 추가기능과 삭제기능, 그리고 전체삭제버튼기능을 구현해보려고 한다. 어제는 기본테스트를 했으니 오늘은 내가 구현할 기능을 테스트하는 코드를 만들었다. 물론 혼자서 만들기엔 어려움이 있어서 지금까지 한 codestate과제를 참고해서 테스트코드를 만들었다.

jsdom는 document와 같은 dom을 이용하기 위해서 설치를 했다.

//index.test.js
//index.test.js
require("mocha");
const chai = require("chai");
const expect = chai.expect;
const sinon = require("sinon");
const jsdom = require("jsdom");
const { JSDOM } = jsdom;
const { HTMLElement } = new JSDOM("").window;
const makeListClass = require("../src/index.js");

describe("makeListClass", function () {
  //Class를 가져와서 instance를 만듬
  let makeList = new makeListClass("todoList");

  function isClass(v) {
    //isClass를 사용할 수 있도록 정의
    return typeof v === "function" && /^\s*class\s+/.test(v.toString());
  }

  it("makeList은 makeListClass의 instance이여야 합니다", () => {
    expect(makeList).to.be.an.instanceof(makeListClass);
  });

  it("class keyword를 사용해서 구현되어야 합니다", function () {
    expect(isClass(makeListClass)).to.be.equal(true);
  });

  it("element 객체가 존재해야 합니다", function () {
    expect(makeList.$list).to.be.an.instanceof(HTMLElement);
  });

  it("createListElement 메소드를 사용할 수 있어야 합니다", function () {
    sinon.spy(makeList, "createListElement");
    makeList.createListElement();
    expect(makeList.createListElement.called).to.be.true;
  });
});
// index.js
// index.js
if (typeof window === "undefined") {
  var jsdom = require("jsdom");
  var { JSDOM } = jsdom;
  var { document } = new JSDOM("").window;
}

class makeListClass {
  constructor(value) {
    this.value = value;
    this.$list = this.createListElement();
  }

  createListElement() {
    let elList = document.createElement("li");
    elList.className = "list";
    elList.innerText = this.value;
    return elList;
  }
}

if (typeof window === "undefined") {
  module.exports = makeListClass;
}

이렇게 만들고 테스트를 돌렸는데 오류가 발생했다. 내가 만든 테스트에 오류가 발생했는데 테스트코드가 잘못된것인지 코드를 틀린건지 알수가 없다는 단점이...ㅎㅎ

오류코드를 분석해봐야겠다!!

profile
즐겁게 배우고 꾸준히 블로깅하는 개발자입니다 ;>

2개의 댓글

comment-user-thumbnail
2020년 6월 26일

객체끼리 비교는 JSON으로 변환 후 비교해야 할겁니다. 그냥 비교하면 무조건 false가 나오죠

1개의 답글