测试代码

Question

我正在尝试一些javascript tdd，但我无法弄清楚如何使用mocha和karma进行dom测试只有mocha才很容易：我创建了一个hmtl文件

<!doctype html>
<html>
    <head>
        <title>Simple mocha test</title>
        <link rel="stylesheet" href="node_modules/mocha/mocha.css">
    </head>
    <body>
        <h1>Login</h1>
        <form>
          <input type="email" name="email" required>
          <button id="btn-login">Login</button>
        </form>
        <div id="mocha"></div>
        <script src="node_modules/mocha/mocha.js"></script>
        <script src="node_modules/chai/chai.js"></script>
        <script>
            mocha.ui('bdd'); 
            mocha.reporter('html'); 
            var expect = chai.expect; 
        </script>
        <script src="./test.js"></script>
        <script>
            mocha.run(); 
        </script>
    </body>
</html>

一个js文件

describe('Tests DOM  - login form', function() {
      var formElem = document.forms[0];
      var signupButton = document.getElementById('btn-login');

      it('has a form', function() {
        debugger;
        expect(formElem).to.not.equal(null);
      });

      it('input field is of type email', function() {
        expect(formElem.email.getAttribute('type')).to.equal('email');
      });

      it('login button has the right text', function() {
        expect(signupButton.innerHTML).to.equal('Login');
      });
    });

并运行mocha

当我使用业力来运行我的测试时，它会加载javascript，但是它会在未加载html的上下文中执行它，有没有办法告诉karma加载hmtl或修改mocha脚本来直接加载hmtl？

Answer 1

请尝试karma-html2js-preprocessor

测试代码

beforeEach - ＆gt;

# inject html
if __html__?

    html = __html__['test/design/lib/jquery.loading.html']
    newDoc = document.open('text/html', 'replace')
    newDoc.write html
    newDoc.close()

karma config

   .....
   preprocessors: {
        'test/design/**/*.html': ['html2js']
   },
   ....
   plugins: [
        .....
        'karma-html2js-preprocessor',
    ]

Dom测试摩卡+业力

1 个答案:

测试代码

karma config