I have this fixture that stamps out <page-welcome>:
<test-fixture id="fixture-one">
<template>
<page-welcome></page-welcome>
</template>
</test-fixture>
Within <page-welcome>, I import <paper-button> and give it a class of big-btn. It's important this button exists on the <page-welcome> element, so I want to test it with:
test('does the custom cmponent exist', function() {
var test = fixture('fixture-one').shadowRoot.querySelector('.big-btn');
assert.exists(test);
});
It's my understanding that I should be able to use all of the Chai API, and therefore assert.exists should be available.
But why do I get the following error?
assert.exists is not a function
web-component-tester uses chai 3.5.0, which does not include assert.exists.
Note that chai's git history shows the introduction of assert.exists in 4.0.0-canary-2 (it seems undocumented in the release notes). You can install this version of chai as a devDependency without breaking anything:
bower i -D chai
Select the newer/4.x version (currently 4.0.2) when bower prompts for version resolution:
Unable to find a suitable version for chai, please choose one by typing one of the numbers below:
1) chai#^3.2.0 which resolved to 3.5.0 and is required by web-component-tester#6.0.0
2) chai#^4.0.2 which resolved to 4.0.2
Prefix the choice with ! to persist it to bower.json
? Answer
Related
Previously I've been using following in my JS entry points:
require('coffeescript/register');
module.exports = require('./entry.coffee');
What is the corresponding ES6 syntax of this?
Following does not seem to register anyhing.
import 'coffeescript/register';
export * from 'entry.coffee';
Error is:
Cannot find module 'entry.coffee'
Tested on Coffeescript 2.0 beta2.
Update:
Changing path to relative:
import 'coffeescript/register';
export * from './entry.coffee';
finds the entry.coffee, but treats it as JS. Hence, Coffeescript is not handled by transpiler.
You don't need to use coffeescript/register if you're transpiling the CoffeeScript as part of your bundling process (which you need to, if you're using Rollup) — that's just a way to enable Node to run CoffeeScript files without having to first convert them.
Instead, try adding rollup-plugin-coffee-script to your rollup.config.js file.
I am trying to test lodash, and apparently the following line won't work in the REPL:
import curry from 'lodash/curry';
See, e.g., babel-node es6 "Modules aren't supported in the REPL"
Why does babel-node not support module loading in the REPL?
Is there a way that I can pre-load a module like lodash into babel-node? (e.g. via a command line option or a configuration file)
If not, is there another way of evaluating ES6 with lodash preloaded?
So far, I've tried the online REPL at https://babeljs.io/repl/, and evaluation in the Console in Firefox. None worked.
import surely won't work, because the package should be installed first and bundled in order to be imported, which isn't the duty of Babel REPL.
Lodash is already loaded and used in Babel REPL, it can be used in REPL as _ global:
const { curry } = _;
If the question isn't limited to Lodash, the quickest way to get third-party library in REPL is to load the script manually. And since Babel website has jQuery loaded (as almost any website), the shortest way to do this is jQuery.getScript, in console:
$.getScript('https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js');
After that Lodash _ global becomes available in REPL.
The whole code can be wrapped with callback to skip console part:
$.getScript('https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js', () => {
console.log(_.VERSION);
});
babel-node REPL doesn't support imports, as the links in the original post say. Instead, require should be used, like anywhere else in Node.
var { curry } = require('lodash')
This requires to have lodash installed in node_modules that exists in current working directory.
I cannot figure out how to get this code to transform to compatible code in Node.js v4 env: [].includes('anything')
Becuase this throws an error in Node.js v4 Error: includes is not a function...
Can anyone help me understand why babel does not transform .includes()? I have tried using babel-preset-es2015 and babel-preset-es2016 as well as the babel repl: Example babel repl code usage
You need to import babel-polyfill to use static methods like Array.from or Object.assign, instance methods like Array.prototype.includes.
If you don't want to modify globals, checkout the transform-runtime plugin. This means you won't be able to use the instance methods mentioned above like Array.prototype.includes.
starting with polymer-starter-kit 1.1.0 I modified all existing code in the kit to ES6/ES2015, including the following: gulpfile.js, app.js, routing.html, my-greeting.html, my-list.html, my-greeting-basic.html and my-listing-basic.html. After following the instructions of the es6 babel recipe, found in the docs folder, I ran gulp serve to verify application works correctly and it does, except all of the existing tests fail with the following message ...
chrome 48 ✖ Test Suite Initialization
Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
chrome 48 Tests failed: 2 failed tests
the above is true for chrome 41, firefox 44 and safari 9.0 as well
it seems like wct runs the uncompiled code and i can't find any options that will allow the wct gulp tasks to compile first or for that matter point to either the .tmp or dist folders to test.
here is one of the modified examples ...
<!--
#license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../bower_components/polymer/polymer.html">
<dom-module id="my-list">
<template>
<style>
:host {
display: block;
}
</style>
<ul>
<template is="dom-repeat" items="{{items}}">
<li><span class="paper-font-body1">{{item}}</span></li>
</template>
</ul>
</template>
<script>
(() => {
'use strict';
class MyList {
beforeRegister() {
let is = this.constructor.name
.replace(/\W+/g, '-')
.replace(/([a-z\d])([A-Z])/g, '$1-$2')
.toLowerCase();
this.is = is;
this.properties = {
items : {
type : Array,
notify : true,
}
};
}
ready() {
this.items = [
'Responsive Web App boilerplate',
'Iron Elements and Paper Elements',
'End-to-end Build Tooling (including Vulcanize)',
'Unit testing with Web Component Tester',
'Routing with Page.js',
'Offline support with the Platinum Service Worker Elements'
];
}
}
Polymer(MyList);
})();
</script>
</dom-module>
Until the offical Polymer-Starter-Kit adds documentation to the Add ES2015 support through Babel document, describing the prefered method of testing ES6/ES2015 code, my fork Polymer-Starter-Kit has a modified gulpfile.js and wtc.conf.js that allows ES6/ES2015 Elements, Tests & Code to test correctly.
Basically I modified the wtc.conf.js configuration file to point to dist instead of app for test suites and thebower_components path mapping. To make sure the project is built properly the wct gulp tasks, in gulpfile.js, were injected with the same dependencies as the gulp serve task.
DISCLAIMER - Let me say that I don't think is the ideal method, it's only a temporary patch solution so I can continue working with tests and ES2015.
I personally like how WTC currently doesn't require a build, making the development process more fluid and dynamic. Maybe, it can inject Babel browser support when it detects ES2015.
Some old Javascript libraries directly attach an object to the global scope (no AMD, no UMD, no commonJS).
Is there a nice way to "include" a global module in ECMAScript 6 code?
I'm just aware of the following line:
import './globallib.js';
And then access the global variable directly.
Example: to load QUnit test function:
import 'qunit';
test('my test', function () {
ok(true, 'QUnit loaded');
});
Is this the right way?
PS. I encountered this problem while working with QUnit 1.8 in a project that compiles to ES 5 using Babel and Browserify. In QUnit 2 they're gonna avoid globals. But I have this question in general.
As far the QUnit exports its methods into window (according source code), you right, import expression is enough.
But anyway, you can't use raw imports in browsers, so you have to use some preprocessing. Webpack and browserify will work for you, but it would not be so for another build systems.