TOGOUTECH

javascript - 如何为 requirejs 和 qunit 设置 grunt 任务

coder 2024-05-16 原文

我正在尝试使用 requirejs 和 grunt-contrib-qunit 设置 QUnit 环境。

这是我的。

咕噜文件:

qunit: {
  all: {
    options: {
      urls: [
        'http://localhost:8000/qunit/qunit-test-suite.html'
      ]
    }
  }
},

connect: {
  server: {
    options: {
      port: 8000,
      base: '.'
    }
  }
},

qunit-test-suite.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>QUnit Tests Suite: travis CI Test</title>
  <link rel="stylesheet" href="../components/libs/qunit/qunit/qunit.css">
</head>
<body>

  <div id="qunit"></div>
  <div id="qunit-fixture"></div>

  <script src="../components/libs/qunit/qunit/qunit.js"></script>
  <script>
    QUnit.config.autoload = false;
    QUnit.config.autostart = false;
  </script>

  <script data-main="qunit" src="../components/libs/requirejs/require.js"></script>

</body>
</html>

qunit.js:

require.config({
    baseUrl: "../",
    paths: {
      'jquery': 'components/libs/jquery/dist/jquery.min',

      // Test for Foo
      'foo': 'components/app/foo/foo',
      'test-Foo': 'components/app/foo/test-Foo'
    },
    shim: {
     'QUnit': {
       exports: 'QUnit',
       init: function() {
         QUnit.config.autoload = false;
         QUnit.config.autostart = false;
       }
      }
    }
});

require(['test-Foo'], function (Foo) {
  QUnit.load();
  QUnit.start();
});

测试-Foo.js:

define(['foo'], function(Foo) {

  'use strict';

  module("Foo");

  test("Foo return Test", function() {
    equal(Foo.foo(), "foo", "Function should return 'foo'");
    equal(Foo.oof(), "oof", "Function should return 'oof'");
  });

  test("Bar return Test", function() {
    equal(Foo.bar(), "barz", "Function should return 'bar'");
  });

});

问题是当我在浏览器中打开 test-suite.html 时一切正常。发送到 PhantomJS 后,我收到以下错误:

Running "connect:server" (connect) task
Started connect web server on http://localhost:8000

Running "qunit:all" (qunit) task
Testing http://localhost:8000/qunit/qunit-test-suite.html

>> PhantomJS timed out, possibly due to a missing QUnit start() call.
Warning: 1/1 assertions failed (0ms) Use --force to continue.

Aborted due to warnings.

完整设置:https://github.com/markusfalk/test-travis

测试运行:https://travis-ci.org/markusfalk/test-travis

感谢您的帮助:)

最佳答案

Jörn的帮助下我想出了一个工作设置。技巧是在 QUnit 加载之前设置 requireJS(将 requireJS 配置移动到 config.js 并首先加载它)。

要求:

  • grunt-contrib-qunit v0.7.0
  • qunit v1.18.0

HTML 测试套件:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>QUnit Tests Suite: asdf</title>
    <link rel="stylesheet" href="../components/libs/qunit/qunit/qunit.css">
  </head>
  <body>

    <div id="qunit"></div>
    <div id="qunit-fixture"></div>

    <script src="config.js"></script>
    <script data-main="unit" src="../components/libs/requirejs/require.js"></script>

  </body>
</html>

配置.js

var requirejs = {
  baseUrl: "../",
  paths: {
    //{{app}}
    'foo': 'components/app/foo/foo',
    'test-foo': 'components/app/foo/test-foo',

    //{{libs}}
    'unit': 'qunit/unit',
    'qunit': 'components/libs/qunit/qunit/qunit',
    'jquery.exists': 'libs/jquery.exists/jquery.exists',
    'jquery': 'components/libs/jquery/dist/jquery.min'
  },
  'shim': {
    'jquery.exists': ['jquery']
  }
};

单元.js

require([
  'qunit',
  'test-foo'
],
function(qunit, TestFoo) {
  TestFoo();
  qunit.start();
});

test-foo.js:

define(['jquery', 'qunit', 'foo'], function($, qunit, Foo) {
  'use strict';
  return function() {
    qunit.module("Foo");
    qunit.test("Foo Test", function() {
      equal(Foo.saySomething(), "Hello", "returns 'Hello'");
    });
  };
});

最后是我要测试的模块:

define(['jquery'], function($) {
  'use strict';
  var Foo = {
    saySomething: function() {
      return "Hello";
    }
  };
  return {
    saySomething: Foo.saySomething
  };
});

关于javascript - 如何为 requirejs 和 qunit 设置 grunt 任务,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29435486/

有关javascript - 如何为 requirejs 和 qunit 设置 grunt 任务的更多相关文章

  1. javascript - 如何在 summernote 中设置字体大小? - 2

    我一直在使用summernote作为我的默认文本编辑器,但在初始化时我无法默认设置特定的字体大小。到目前为止我已经尝试过了$('.active-textcontainer').summernote({toolbar:[['style',['bold','italic','underline']],['fontsize',['fontsize']],['color',['color']],['para',['ul','ol','paragraph']]],height:150,fontsize:'18px'});和$('.active-textcontainer').summernote

  2. javascript - 实现插入功能 - 2

    我目前正在学习可汗学院的算法类(class),该类(class)使用JS教授基础算法。我目前正在实现插入排序,但发现了一个问题。我们正在编写一个函数,它接受一个数组、起始索引和值,以便在正确的排序位置插入一个数字。我在这里写了上述功能:varinsert=function(array,rightIndex,value){for(vari=rightIndex;array[i]>=value;i--){array[i+1]=array[i];array[i]=value;}returnarray;};这工作正常,并按预期执行,但是它没有通过KA的自动标记系统。他们为代码提供指导并建议这样

  3. javascript - 当 Angular 改变状态时,如何让屏幕阅读器阅读整个页面? - 2

    要求:每次更改页面时,屏幕阅读器必须阅读整个页面内容。我们使用firefox+NVDA进行测试,由于angular不会“更改页面”,我们尝试了以下方法使其在更改状态时读取整个页面:aria-live="assertive"这在很大程度上读取了我们站点中文本的更改,但它只读取了添加的内容,在我们的例子中,我们有一个表格被ng-repeat填充并且它读取正在添加信息但没有任何上下文(它没有说明正在读取的行或列)另一个问题是表单,当被angular填充时,屏幕阅读器会在它们被angular填充之前读取它,这已通过$timeout解决,但仍然是aria-live读取它会跳过一些部分的更改,如果

  4. javascript - 需要使用 Browserify 和 browserify-rails 的 sprockets 预处理文件 - 2

    我正在使用browserify-rails我正在尝试让sprockets预处理包含sprockets指令的文件,这样当我使用browserifyrequire()它时,它将包含生成的JavaScript。sprockets指令尝试包含gemjs-routes的输出,以便让我从客户端访问Rails路由。这是我的设置(在app/assets/javascripts中):system/rails_routes.jsapplication.jsapplication.js是主文件,它运行应用程序的其余部分。我希望能够做类似的事情varrr=require("./system/rails_rou

  5. javascript - 警告 : Tried to load angular more than once. ..因为 jQuery...为什么? - 2

    我想了解这里发生了什么。警告是不言自明的,我意识到在应用程序中,使用下面的代码和结构,它会运行ng-view两次('test'将在控制台中记录两次,所以Angular当然会加载两次!)....但为什么?我已经阅读了所有我能找到的关于它的帖子,它似乎归结为在angular之前加载jQuery。如果我遗漏了jQuery或者如果我在angualr之后加载jQuery(据我所知这不是好的做法),没问题。我想让jQuery支持某些功能(特别是ui-sortable)。而且,虽然它似乎并没有真正引起任何问题,但我不想让它运行我的ng-view两次。我是不是在结构上做错了什么,或者我是否缺少解决此问

  6. javascript - Bootstrap : Multiple pages (divs) and navbar - 2

    我想使用这个流行的模板:http://getbootstrap.com/examples/navbar/我不想链接到about.htm或contact.htm,此内容应该在模板内(多页/div)。这一定是这个样子:home...about...contact...但是如何从导航标签“链接”到div?这行不通:HomeAboutContact非常感谢! 最佳答案 您需要使用JavaScript和JQuery来执行此操作。有多种方法可以实现这一目标。选项1创建一个index.html,指定一个并将其留空。然后用jQuery加载home.

  7. javascript - 语义 UI 边栏和下拉菜单 - 2

    我正在尝试使用语义ui创建一个简单的webui。我想要一个带有菜单的侧边栏,在某些项目中会有子项目......应该不会那么难吧?http://jsfiddle.net/ycm8ctfx/ExampleMessages如何让子项目在正常页面内容上“飞出”侧边栏?如果您在示例中单击“消息”,将出现菜单(观察底部出现的滚动条),但由于它们是侧边栏的子项,因此它们显示在侧边栏中。但我希望它们漂浮在正常内容上!我没有通过摆弄z-index来让它工作。 最佳答案 如果侧边栏被配置为使用overlay过渡,它可以通过指定来修复.ui.sideba

  8. javascript - 如何检查是否支持 javascript 类型的数组? - 2

    想用javascript测试如果浏览器支持类型化数组http://caniuse.com/#feat=typedarrays我试过了,但似乎不是好方法,因为有些浏览器只提供部分支持..:if(window.ArrayBuffer){alert('typedarraysupported')} 最佳答案 似乎有些浏览器(IE10)不支持Uint8ClampedArray,如果这是您打算使用的功能,您可以检查一下if('Uint8ClampedArray'inwindow){...如果检查返回false,则不支持类型化数组和/或限定数组。

  9. javascript - 使用 Jasmine 测试异步回调 - 2

    我正在使用Jasmine2.1。我正在尝试使用Jasmine2.1来测试模块。我的模块之一具有异步执行代码的功能。当应用程序完成执行时,我需要测试函数的结果。有没有办法做到这一点?目前,我的模块看起来像这样:varotherModule=require('otherModule');functionMyModule(){}MyModule.prototype.state='';MyModule.prototype.execute=function(callback){try{this.state='Executing';varm=newotherModule.Execute(funct

  10. javascript replaceChild 不起作用 - 2

    我是计算机科学专业的学生,​​我们正在用javascript做练习,练习是:“用ID为“numberFour”且文本为“Mistreatment”的新项目替换项目编号4。”这是我做练习之前的样子:第一:寻找伴侣第二:无聊第三:缺乏服从第四:虐待第五点:寻求伙伴关系然后我写了这段js代码来完成作业:varvier=document.createElement("li");vier.innerHTML="Numberfour:Mistreatment";vier.setAttribute("id","numberFour");varlijst=document.querySelector(

随机推荐