浏览器控制台错误:字符无效:' @'

时间:2016-05-17 04:00:06

标签: javascript css unit-testing browser syntax-error

我决定使用 JavaScript 学习单元测试。在这种情况下,我一起使用框架 Mocha.js Chai.js 。我将其最新版本导入cdnjs.com index.html 。所以我在Safari控制台中遇到了语法错误,如下所示:

无效字符:' @'

screenshot

据我所知,目前的问题位于浏览器或 mocha.min.css 远程文件中。还有其他建议吗?

PS 我在上面的情况下上传了 index.html style.css test.js



top,bottom,left,right

/*
* Description: This is a short BDD-test which checks pow() for working
* Mission: Just for study and fun!
*/

describe("Is working function pow()?", function() {
	
	it("2 * 2 * 2 = 8", function() {
		assert.equal(pow(2, 3), 8);
	});
	
});

/*
* Description: No any important things..
* Mission: Created for index.html
*/

body {
	background-color: #000;
	color: #FFF;
	font-family: "Open Sans", sans-serif;
}

.title {
	text-align: center;
	font-size: 72px;
	/*margin-top: 300px;*/
}




1 个答案:

答案 0 :(得分:1)

您正在使用<script>元素在

加载.css文件
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.4.5/mocha.min.css">
</script>

替换<link>元素,rel属性设置为stylesheettype设置为"text/css"<script>元素加载.css }文件到document

<link href="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.4.5/mocha.min.css" 
  rel="stylesheet"/>

&#13;
&#13;
<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">
  <title>JS TDD</title>

  <!-- import mocha.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.4.5/mocha.js"></script>
  <link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.4.5/mocha.min.css" rel="stylesheet" />
  <!-- customization mocha.js -->
  <script>
    mocha.setup('bdd');
  </script>
  <!-- import chai.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/3.5.0/chai.js"></script>
  <!-- customization chai.js (optional) -->
  <script>
    var assert = chai.assert;
  </script>
  <style>
    /*
* Description: No any important things..
* Mission: Created for index.html
*/
    body {
      background-color: #000;
      color: #FFF;
      font-family: "Open Sans", sans-serif;
    }
    .title {
      text-align: center;
      font-size: 72px;
      /*margin-top: 300px;*/
    }
  </style>

</head>

<body>

  <h1 class="title">Learn unit test!</h1>
  <!-- script for test -->
  <script>
    function pow() {
      return 8; // I am lier!
    }
  </script>

  <!--  upload custom test -->
  <script>
    /*
     * Description: This is a short BDD-test which checks pow() for working
     * Mission: Just for study and fun!
     */

    describe("Is working function pow()?", function() {

      it("2 * 2 * 2 = 8", function() {
        assert.equal(pow(2, 3), 8);
      });

    });
  </script>
  <!-- result of custom test -->
  <div id="mocha"></div>
  <!-- run mocha! -->
  <script>
    mocha.run();
  </script>

</body>

</html>
&#13;
&#13;
&#13;

plnkr http://plnkr.co/edit/45vSloJPChBvgSc96DRB?p=preview