Imports in vanilla/pure JS testing with protractor and relative paths

问题

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

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.

Importing

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');

For now, I have this test

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);

  });
});

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',
],

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).

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.

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 mocking

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.

Travis

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);

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 ?

Edit:

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);
  },
  .
  .
  .
};

Edit 2:

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

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

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

回答1:

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);
})

or like this

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);
})

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.

来源：https://stackoverflow.com/questions/56751624/imports-in-vanilla-pure-js-testing-with-protractor-and-relative-paths