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 - 如何减小 Angular 2、4、6、7、8、9、10 中 vendor.js 的大小? - 2

    AngularCLI创建vendor.js我不知道为什么以及它有什么用??对于新应用,此文件的大小约为3.2MB!!此文件是否包含Angular6Javascript源?您不认为这是在低速连接上加载到Internet上的大文件吗? 最佳答案 此文件包含您添加到项目中的所有库。如果您在生产模式下构建应用,文件大小会更小。ngbuild--prod 关于javascript-如何减小Angular2、4、6、7、8、9、10中vendor.js的大小?,我们在StackOverflow上找到

  2. javascript - NestJS 在生产中启用 cors - 2

    我在theofficialtutorial之后在我的NestJS应用中启用了CORS,所以我的main.ts看起来像下面这样:import{FastifyAdapter,NestFactory}from'@nestjs/core';import{AppModule}from'./app.module';asyncfunctionbootstrap(){constapp=awaitNestFactory.create(AppModule,newFastifyAdapter(),{cors:true});awaitapp.listen(3000);}boot

  3. javascript - js中的 session 存储 - 2

    您好,我是JavaScript的初学者,我想问一下是否可以session我从服务器获取的数据。我想要session的数据是我在网上搜索到的“data.xhr.response”,大多数人都使用SessionStorage函数,但我不确定如何处理它,我们将不胜感激。$(function(){Dropzone.autoDiscover=false;$('#file-upload').dropzone({maxFiles:1,acceptedFiles:".pdf,.doc,.docx,.html",dataType:"json",succes

  4. javascript - Chrome : Simulate keypress events on input text field using javascript - 2

    stackoverflow中有很多关于此的内容,但似乎没有一个适合我的情况。我有一个输入文本字段,我想模拟按键事件来填充文本字段。原因:我在不提供API的网络界面上自动执行大量数据输入任务。使用.value更改输入字段不会触发界面的JS端(Angular)。这就是为什么我要模拟按键事件。首先我尝试了这个:varinp=document.getElementById('rule-type');inp.dispatchEvent(newKeyboardEvent('keypress',{'key':'a'}));然后我了解到在

  5. javascript - Internet Explorer 11 上的 SweetAlert2 语法错误 - 2

    我正在使用SweetAlert2examplespage的确切代码:swal({title:'Areyousure?',text:"Youwon'tbeabletorevertthis!",type:'warning',showCancelButton:true,confirmButtonColor:'#3085d6',cancelButtonColor:'#d33',confirmButtonText:'Yes,deleteit!'}).then((result)=>{if(

  6. javascript - 任何人都可以生成 opencv.js 吗? - 2

    我无法使用以下说明生成OpenCV.js:https://docs.opencv.org/master/d4/da1/tutorial_js_setup.html我有这个错误:CMakeError:CMakewasunabletofindabuildprogramcorrespondingto"UnixMakefiles".CMAKE_MAKE_PROGRAMisnotset.Youprobablyneedtoselectadifferentbuildtool.当我尝试执行时:python./platforms/js/build_js.pybuild_js好的,伙计们!

  7. javascript - "$attrs is readonly", "$listeners is readonly", "Avoid mutating a prop directly" - 2

    我是Vue新手。我正在尝试开发一个聊天应用程序,其中好友列表将显示在左侧菜单上,聊天框将显示在正文中。我正在使用ajax调用加载好友列表,并根据好友ID路由到聊天框。这是代码示例。<divclass="chat-containerclearfix"id="chat"><divclass="people-list"id="people-list"><chatlist-component></chatlist-component></div><divclass=

  8. javascript - 在 Angular 中导航时,将 child 路由到 parent 不起作用 - 2

    我使用的是angular5.1.0,路由系统有问题,让我解释一下:在我的应用程序路由模块中,我有一个url/api那个延迟加载另一个模块,在那个延迟加载的模块中我有下一个路由实现:api-routing.module.tsconstroutes:Routes=[{path:'',component:ApisComponent,data:{breadcrumbs:'APIs',},children:[{path:'',component:ApiListComponent,},{path:':id',component:Api

  9. javascript - Visual Studio -> Shared TypeScript Library -> TS6059 文件 '' 不在 'rootDir' '' 下。 'rootDir' 应该包含所有源文件 - 2

    我们正在使用VisualStudio2017并且有两个独立的Web项目,它们应该共享一些用TypeScript编写的React组件。还可以共享JavaScript文件和CSS文件。为此,我们在VisualStudio中创建了一个共享项目。WhatisthedifferencebetweenaSharedProjectandaClassLibraryinVisualStudio2015?目前该项目只有一个包含此信息的文件。exportconstTypes={Type1:'1',Type2:'2',Type3:'3'}为了测试,我可以像这样引

  10. javascript - Vue - 使用 refs 来聚焦元素目标 - 2

    点击spanclass="before-click"时,我想隐藏它,而是显示inputclass="after-click"。并且出现的输入标签必须是焦点!问题是当我尝试使用$refs.afterClick访问那个DOM并给它.focus()时,一个意外错误显示.focus()不是一个函数。如何解决这个问题?谢谢。varmyApp=newVue({el:'#app',data:{onEdit:false,msg:'Somethinginhere',},methods:{switchAndFocus(){if(!this.onEdit){this.onEd

随机推荐

  1. javascript - 如何减小 Angular 2、4、6、7、8、9、10 中 vendor.js 的大小? - 2

    AngularCLI创建vendor.js我不知道为什么以及它有什么用??对于新应用,此文件的大小约为3.2MB!!此文件是否包含Angular6Javascript源?您不认为这是在低速连接上加载到Internet上的大文件吗? 最佳答案 此文件包含您添加到项目中的所有库。如果您在生产模式下构建应用,文件大小会更小。ngbuild--prod 关于javascript-如何减小Angular2、4、6、7、8、9、10中vendor.js的大小?,我们在StackOverflow上找到

  2. javascript - NestJS 在生产中启用 cors - 2

    我在theofficialtutorial之后在我的NestJS应用中启用了CORS,所以我的main.ts看起来像下面这样:import{FastifyAdapter,NestFactory}from'@nestjs/core';import{AppModule}from'./app.module';asyncfunctionbootstrap(){constapp=awaitNestFactory.create(AppModule,newFastifyAdapter(),{cors:true});awaitapp.listen(3000);}boot

  3. javascript - js中的 session 存储 - 2

    您好,我是JavaScript的初学者,我想问一下是否可以session我从服务器获取的数据。我想要session的数据是我在网上搜索到的“data.xhr.response”,大多数人都使用SessionStorage函数,但我不确定如何处理它,我们将不胜感激。$(function(){Dropzone.autoDiscover=false;$('#file-upload').dropzone({maxFiles:1,acceptedFiles:".pdf,.doc,.docx,.html",dataType:"json",succes

  4. javascript - Chrome : Simulate keypress events on input text field using javascript - 2

    stackoverflow中有很多关于此的内容,但似乎没有一个适合我的情况。我有一个输入文本字段,我想模拟按键事件来填充文本字段。原因:我在不提供API的网络界面上自动执行大量数据输入任务。使用.value更改输入字段不会触发界面的JS端(Angular)。这就是为什么我要模拟按键事件。首先我尝试了这个:varinp=document.getElementById('rule-type');inp.dispatchEvent(newKeyboardEvent('keypress',{'key':'a'}));然后我了解到在

  5. javascript - Internet Explorer 11 上的 SweetAlert2 语法错误 - 2

    我正在使用SweetAlert2examplespage的确切代码:swal({title:'Areyousure?',text:"Youwon'tbeabletorevertthis!",type:'warning',showCancelButton:true,confirmButtonColor:'#3085d6',cancelButtonColor:'#d33',confirmButtonText:'Yes,deleteit!'}).then((result)=>{if(

  6. javascript - 任何人都可以生成 opencv.js 吗? - 2

    我无法使用以下说明生成OpenCV.js:https://docs.opencv.org/master/d4/da1/tutorial_js_setup.html我有这个错误:CMakeError:CMakewasunabletofindabuildprogramcorrespondingto"UnixMakefiles".CMAKE_MAKE_PROGRAMisnotset.Youprobablyneedtoselectadifferentbuildtool.当我尝试执行时:python./platforms/js/build_js.pybuild_js好的,伙计们!

  7. javascript - "$attrs is readonly", "$listeners is readonly", "Avoid mutating a prop directly" - 2

    我是Vue新手。我正在尝试开发一个聊天应用程序,其中好友列表将显示在左侧菜单上,聊天框将显示在正文中。我正在使用ajax调用加载好友列表,并根据好友ID路由到聊天框。这是代码示例。<divclass="chat-containerclearfix"id="chat"><divclass="people-list"id="people-list"><chatlist-component></chatlist-component></div><divclass=

  8. javascript - 在 Angular 中导航时,将 child 路由到 parent 不起作用 - 2

    我使用的是angular5.1.0,路由系统有问题,让我解释一下:在我的应用程序路由模块中,我有一个url/api那个延迟加载另一个模块,在那个延迟加载的模块中我有下一个路由实现:api-routing.module.tsconstroutes:Routes=[{path:'',component:ApisComponent,data:{breadcrumbs:'APIs',},children:[{path:'',component:ApiListComponent,},{path:':id',component:Api

  9. javascript - Visual Studio -> Shared TypeScript Library -> TS6059 文件 '' 不在 'rootDir' '' 下。 'rootDir' 应该包含所有源文件 - 2

    我们正在使用VisualStudio2017并且有两个独立的Web项目,它们应该共享一些用TypeScript编写的React组件。还可以共享JavaScript文件和CSS文件。为此,我们在VisualStudio中创建了一个共享项目。WhatisthedifferencebetweenaSharedProjectandaClassLibraryinVisualStudio2015?目前该项目只有一个包含此信息的文件。exportconstTypes={Type1:'1',Type2:'2',Type3:'3'}为了测试,我可以像这样引

  10. javascript - Vue - 使用 refs 来聚焦元素目标 - 2

    点击spanclass="before-click"时,我想隐藏它,而是显示inputclass="after-click"。并且出现的输入标签必须是焦点!问题是当我尝试使用$refs.afterClick访问那个DOM并给它.focus()时,一个意外错误显示.focus()不是一个函数。如何解决这个问题?谢谢。varmyApp=newVue({el:'#app',data:{onEdit:false,msg:'Somethinginhere',},methods:{switchAndFocus(){if(!this.onEdit){this.onEd