2019-06-28 Mocha적용(3) 비동기처리와 브라우저 테스트

비동기테스트

// Async
describe('#indexOf()', () => {
  it('setTimeout', (done) => {
    setTimeout(() =>{
      expect([1, 2, 3].indexOf(5)).to.equal(-1);
      expect([1, 2, 3].indexOf(3)).to.equal(2);
      expect([1, 2, 3].indexOf(0)).to.equal(-1);
      done();
    }, 1000);
  });
});
  • Mocha에서 비동기처리를 위해서는 콜백을 호출하면 된다. 콜백(일반적으로 done())을 추가함으로 테스트가 완료하기 위해 이 함수(done())이 호출될 때까지 기다린다.
  • setTimeout(callback, 1000)을 통해 1초 뒤에 실행되지만 done()호출을 하였기때문에 테스트가 종료된것을 알 수 있다.
  • done()호출이 없다면 에러가 발생한다.
describe('#indexOf() hooks', () => {
  let arr = [];
  beforeEach((done) => {
    setTimeout((() => {
      arr = [1, 2, 3];
      done();
      console.log('beforeEach after Done() method called');
    }), 1500);
  });
  afterEach(() => {
    console.log('afterEach method called');
    arr = [];
  });
  it('Asynchronous Hooks', () => {
    console.log('비동기 실행중');
    expect(arr.indexOf(5)).to.equal(-1);
    expect(arr.indexOf(3)).to.equal(2);
    expect(arr.indexOf(0)).to.equal(-1);
  });
});
// result
비동기 실행중
    ✓ Asynchronous Hooks
beforeEach after Done() method called
afterEach method called

외부모듈 테스트

// Module_test.js
const chai = require('chai');
const moduleSum = require('./ModuleSum');
const expect = chai.expect;

describe('#moduleSum', () => {
  it('sum()', () => {
    expect(moduleSum.sum(1, 2)).to.equal(3);
    expect(moduleSum.sum(3, 2)).to.equal(5);
    expect(moduleSum.sum(5, 0)).to.equal(5);
  });
});

//ModuleSum.js
module.exports = {
  sum: (num1, num2) => {
    return num1 + num2;
  },
};
  • ModuleSum이라는 모듈을 만들고, require를 통해 모듈을 불러들인다.

문제 : chai.js, mocha.js중에 위에 있는것만 로드가 된다!!!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mocha browser test</title>
    <link rel="stylesheet" href="../node_modules/mocha/mocha.css">
</head>
<body>
    <h1>Mocha test.html file</h1>
    <div id="mocha"></div>
    <script src="../node_modules/chai/chai.js"></script>
    <script src="../node_modules/mocha/mocha.js"></script>

    <script>
        mocha.setup({
          ui: 'bdd',
          reporter: 'html'
        })
    </script>

    <!--Test code-->
    <script src="./browser_test.js"></script>
    <script>
        mocha.checkLeaks();
        mocha.run();
    </script>
</body>
</html>

Solution : html의 몇몇 태그들에 대해서는 self-Closing이 안된다. github출처

HTML Self-Closing Tag

  1. <br />
  2. <col />
  3. <input />
  4. <link />
  5. <meta />
    • 위의 태그와 다른 기타 13가지 태그의 경우 Self-Closing기능이 지원이 되지만 다른 태그들에 대해서는 지원이 안된다. 따라서 위에서 발생했던 문제의 경우 <sciprt>태그가 self-closing을 지원 안하므로 일부 js파일이 로딩이 안되는 문제가 발생을 했던것이다.

느낀점

Mocha, Chai를 이용해서 유닛테스트만 진행을 하다가. 오늘은 브라우저테스트에 관해서 학습을 했다. 모듈형태로 만든 메소드를 불러와서 테스트를 하고, html에서 모듈들을 로드해서 테스트를 했다. 오늘 부딪쳤던 문제는 script태그를 사용해서 모듈을 불러올때 일부는 불러들이고, 일부는 로드를 못하는 문제가 있었는데, 알고보니 HTML에는 Self-Closing을 지원하는 18개의 태그들이 있었다. input과 같은 태그들은 지원이 되기때문에 사용이 가능했는데, script태그의 경우 안되서 일부가 로드가 안됬다. 그렇다고 다 안된것도 아니고 1개만 안됬는데… 과연 무엇일까??.. 이건 좀 더 깊이 찾아봐야겠다. 테스트코드 작성을 공부하다가 HTML에서 로드될때 문제가 발생을 해서 어떻게 키워드를 검색해야되는지 어려웠다. 조만간 브라우저가 어떻게 HTML페이지를 로드를 하는지 찾아봐야겠다.

Written on June 28, 2019