导入带有量角器和相对路径的香草/纯JS测试 [英] Imports in vanilla/pure JS testing with protractor and relative paths

问题描述

直到现在，我仍在使用Jasmine，Karma和Travis CI测试我的非Angular网站(我只有JS，没有节点，甚至没有ES6).

Until now, I was testing my non-Angular website (I only have JS, no node, not even ES6) using Jasmine, Karma and Travis CI.

我现在正尝试编写功能测试(以防万一，我的意思是要测试视觉/用户界面"测试的场景测试)，并且google将我定向至量角器.

I am now trying to write functional tests (in case my vocabulary is off, I mean scenario tests for which I want to test "visual/UI" tests) and google directed me to Protractor.

目前，我将完全忽略Travis CI .我发现到达"我的页面的唯一方法是使用本地路径browser.get('file:///C:/local/path/to/project/index.html');

For now, I will completely disregard Travis CI. The only way I have found to "reach" my page was with a local path browser.get('file:///C:/local/path/to/project/index.html');

现在，我有这个测试

describe('The main page', function () {

  beforeEach(function () {
    // jasmine.Ajax.install();  // unabled to reuse that
    dv.ignoreSynchronization = true;
  });
  /*
  afterEach(function () {
    jasmine.Ajax.uninstall();
  });
  // */

  it('should display an error message in the alert if no parameters are provided', function () {
    browser.waitForAngularEnabled(false);
    get('/index.html'); // edited
    browser.sleep(500);
    element(by.tagName('ajs-content')).getText().then(console.log);
    expect(element(by.className('ajs-content')).getText()).toEqual(new EXCEPTIONS.NoParametersDetectedInURI().description);

  });
});

在这里，我得到一个错误Failed: EXCEPTIONS is not defined，但是，与业力不同，我将源文件原样包含在protractor.conf.js中

Here, I get an error Failed: EXCEPTIONS is not defined but, unlike in karma, if I include my source files in the protractor.conf.js as such

specs: [
    'src/lib/**/*.js',
    'src/js/**/*.js',
    'test/protractor/**/*.spec.js',
],

我收到类似document is not defined的错误，并且自index.html托管"以来，我认为根本不应该导入这些错误(甚至不确定，我的意思是我使用的是本地绝对路径. ..我对此声明感到困惑)在Selenium Webdriver上是导入所有这些内容以供其自身使用的(感谢console.log，我可以看到它的工作).

I get errors like document is not defined and I don't think I'm supposed to import these at all since the index.html "hosted" (not even sure, I mean I am using a local, absolute, path... I am confused by this statement) on the Selenium webdriver is what imports all of these for it's own usage (I can see it working thanks to the console.log).

我想使用( import )自己的代码来使用EXCEPTIONS对象，而不是对toEqual("<some error message that I should never ever update in the exception.js file>")进行硬编码，但是，由于我既未使用节点也不使用ES6，从来没有一种module.export.

I want to use (import) my own code in order to use the EXCEPTIONS object and not hard-code toEqual("<some error message that I should never ever update in the exception.js file>") but, since I'm neither using node or ES6, I never once have some kind of module.export.

如您所见，我的导入不是绝对必要的，但与对象的常量(而不是字符串重复项)进行比较，感觉更干净".而且，也许这些UI测试本来是硬编码的"，但我仍在尝试寻找一种以普通JS"方式导入文件的方法.如果不是故意的话，那就这样吧.

As you can see, my import isn't absolutely necessary but it felt "cleaner" to compare to the object's constant and not a string duplicate. And, maybe, these UI tests are meant to be "hard-coded" but I am still trying to find a way to import a file in a "vanilla JS" kinda way. If it's not meant to, so be it.

我需要拦截ajax请求和模拟响应，但jasmine.Ajax is undefined.我完全可以在常规"测试(Jasmine + Karma)中使用它，因此我想知道是否应该安装其他npm软件包，例如

I need to intercept ajax requests and mock responses but jasmine.Ajax is undefined. I am perfectly able to use it in my "regular" tests (Jasmine+Karma) so I would like to know if I'm supposed to installed other npm-packages like protractor-http-client for instance, or if there is a special configuration needed to use jasmine.Ajax.

最后，我相对确定使用绝对(windows)路径不适用于Travis CI，并且

Lastly, I am relatively certain that using an absolute (windows) path won't work with Travis CI and, based on this SO question, I updated my code to try and reach the index.html with a relative path using global.basePath = __dirname; and use browser.get(global.basePath + '/index.html'); (also tried with '\\', with an initial file:/// etc... but, if I make the page sleep for a few second, I am always at the basePath, unlike when I use an absolute one).

我意识到这些路径不是相对"路径，而是动态"绝对路径，但最后，即使将"\"替换为"/"，并且从字面上与我自己键入的字符串完全相同:

I realise these wouldn't be "relative" paths but rather a "dynamic" absolute path but, in the end, even when replacing the "\" with "/" and literally having the exact same string as when I type it in myself:

let pagePath = global.indexPath.replace(/\\/g, "/");
console.log("trying to get", pagePath);
browser.get(basePath);
browser.sleep(5000);

您遇到过这个问题吗?一旦在Travis中运行，'file:///C:/local/path/to/project/index.html'会自动解析"到正确的路径吗?如何使用相对路径?

Have you been confronted to this ? Will 'file:///C:/local/path/to/project/index.html' automatically be "parsed" into the proper path once running in Travis ? How can I use a relative path ?

我应该将每个标题分成一个问题吗?

Should I separate each title into a question ?

exception.js示例. 它们基本上是错误的构造函数，其中总是定义description属性. 我知道我发布ahah时忘记了一些东西

exception.js sample. They are basically constructors for errors where the description attribute is always defined. I knew I forgot something when I posted ahah

let EXCEPTIONS = {
  DefaultException: function(_type, _description, _msg) {
    this.type = _type;
    this.description = _description;
    this.message = _msg || undefined;
  },

  NoParametersDetectedInURI: function (msg) {
    EXCEPTIONS.DefaultException.call(this,
      "NoParametersDetectedInURI",
      "No URI parameters detected",
      msg);
  },
  .
  .
  .
};

解答了相对路径部分(尽管尚未在Travis上进行测试).我必须设置`baseUrl:

Answered the relative path part (though haven't tested on Travis yet). I had to set `baseUrl:

exports.config = {
    baseUrl: 'file:///' + __dirname,
    .
    .
}

在配置文件中，然后get('/index.html');在测试中.

in the config file and then get('/index.html'); in the test.

推荐答案

我不确定，这是与Node.js相关的语法，但是对于导入/导出，您可以像这样使用export/require

I'm not sure, is it Node.js related syntax, but as for import/export you can either use export/require like this

export let EXCEPTIONS = {
---- your code ----
}

const EXCEPTIONS = require(pathToExceptionsFile)

describe('The main page', function () {
    ---- Test code here ---
    expect(element(by.className('ajs-content')).getText()).toEqual(new EXCEPTIONS.NoParametersDetectedInURI().description);
})

或类似的

let EXCEPTIONS = {
---- your code ----
}

module.exports = EXCEPTIONS

const EXCEPTIONS = require(pathToExceptionsFile)

describe('The main page', function () {
    ---- Test code here ---
    expect(element(by.className('ajs-content')).getText()).toEqual(new EXCEPTIONS.NoParametersDetectedInURI().description);
})

我认为它也应该在vanila JS中工作.但是，只要您使用量角器，您就已经在使用Node.js，因此我认为它应该仍然可以工作.

I think it's should work in vanila JS as well. But as long as you using Protractor, you already use Node.js, so i think it should work anyway.

这篇关于导入带有量角器和相对路径的香草/纯JS测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！