Is it possible to have IntelliJ run Polymer's unit tests? They have plugins for Mocha and Karma, but how to use them with these HTML based tests is non-obvious.
Polymer Team has created a tool called web-components-tester which is built on top of Mocha and Chai. But I am not sure how this too might be compatable with IntelliJ.
Below is a simple test:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="../../webcomponentsjs/webcomponents.min.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<link rel="import" href="../awesome-element.html">
</head>
<body>
<awesome-element id="fixture"></awesome-element>
<script>
suite('<awesome-element>', function() {
test('is awesomest', function() {
assert.isTrue(document.getElementById('fixture').awesomest);
});
});
</script>
</body>
</html>
More resource about testing Polymer elements at:
https://www.polymer-project.org/0.5/articles/unit-testing-elements.html
https://github.com/Polymer/web-component-tester
https://www.polymer-project.org/0.5/resources/tooling-strategy.html
https://www.polymer-project.org/0.5/docs/polymer/debugging.html
Please vote for:
https://youtrack.jetbrains.com/issue/IDEA-142833
IDEA-142833 Support wct (web-components-tester) in Polymer 1.0 plugin.
Polymer 1.0 default way of testing web components is via a tool called
web-components-tester (or wct) which is built on top of Mocha (as a
test framework), Chai assertions, Async, Lodash, Sinon and sinon-chai.
Some more info:
• https://github.com/Polymer/web-component-tester •
https://github.com/PolymerElements/polymer-starter-kit/blob/master/README.md
The Polymer and Web Components Plugin could:
- Make all this install and just work.
- By default, wct tests on all installed browsers. We should be able to select the browsers to test from IntelliJ debug window.
- Output from wct could be presented in a readable way in IntelliJ debug window, just like JUnit tests.
Related
I'm trying to run DOM tests that I have written using Mocha and Chai for assert on Browserstack.
I have an HTML file test.html that looks like this:
<body>
<div id="mocha"></div>
<script src="https://unpkg.com/chai/chai.js"></script>
<script src="https://unpkg.com/mocha/mocha.js"></script>
<script class="mocha-init">
mocha.setup('bdd');
mocha.checkLeaks();
assert = chai.assert;
</script>
<script src="MY_DOM_TESTS.js"></script>
<script class="mocha-exec">
mocha.run();
</script>
</body>
When I open this file in the browser locally, it runs through and shows me that all tests pass. My question now is how I can run it in one of the testing clouds, for example Browserstack.
They seem to have many adapters and plugins, but nothing explains this simple use case of DOM tests in an HTML file. Everything seems to be about js files exclusively, but not for HTML files.
I have tried using Karma with their plugins karma-mocha and karma-browserstack-launcher, to no avail. I tried having Karma run this simple test file but not even that seems to work:
module.exports = function (config) {
config.set({
frameworks: ['mocha', 'chai'],
files: [
'./tests/test.html',
],
client: {
mocha: {
reporter: 'html',
ui: 'bdd',
},
},
Question: How can I run DOM tests using above HTML file in Browserstack (or any other Selenium testing cloud for that matter)?
I have figured it out. You need to use their local testing (the name is misleading), which basically opens a local server and pipes through local files to browserstack. I created a minimum example here on how to run mocha dom tests inside an HTML file on browserstack:
https://github.com/fritzfr/mocha-html-browserstack-bridge
Thank you for showing your interest in running tests on the remote cloud using Browserstack.
I did read through your query and could find that you want to run HTML DOM Tests on Browserstack, however, that is NOT supported and would require you to use a JS testing framework and write your tests accordingly in order to run tests.
Also, the documents you have referred are the required necessity in order to run JS Tests.
Please note you can use different Javascript unit testing frameworks such as QUnit, Jasmine, Mocha, and others to write our first unit test, and the same you can refer to the following documentation:
https://www.browserstack.com/docs/automate/javascript-testing/getting-started
Regards,
Browserstack Support
https://v3.vuejs.org/guide/installation.html#download-and-self-host
https://v3.vuejs.org/guide/installation.html#from-cdn-or-without-a-bundler
how do I import vue without CDN?
so what I care about is not having a build step. everything in pure human-legible js.
I found this https://github.com/maoberlehner/goodbye-webpack-building-vue-applications-without-webpack
I'm going to try and implement it inside unity Embedded browser https://assetstore.unity.com/packages/tools/gui/embedded-browser-55459
the challenge is that my interface cannot load things from the web and it can't be compiled.
Create index.html
index.html (using Vue 3 - important!)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Minimalistic Vue JS</title>
<script type="text/javascript" src="./vue.global.prod.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
<script>
var app = Vue.createApp({
data() {
return {
message: "Hello world"
}
}
})
app.mount("#app")
</script>
</html>
Download vue.global.prod.js from https://unpkg.com/browse/vue#3.0.11/dist/vue.global.prod.js and save it along index.html
Open index.html in browser
Works just fine in Chrome or Firefox.
Notes
for the record my code is the repo I linked plus the vue libraries I downloaded and added in the root
Note: following is related to the repo linked before question was changed
The code in repo is written for Vue 2 (just try to open https://unpkg.com/vue in the browser). So if you downloaded distros for Vue 3 (for example the link I'm using above) the code from repo will not work
Even if you download Vue 2 version, the code in the repo will not work when opened from file system as it is using native ES6 modules - problem I described in the previous version of my answer:
As described here and here ES6 modules are always loaded with CORS. So just opening the index.html in the browser (without using server) will not work (definitely does not work in Chrome). Maybe Unity Embeded Browser has this restrictions weakened (as it's purpose is to be embeded) but without possibility to use desktop browser to develop and test your app, your experience will be terrible. I would reconsider the decision not to use bundler...
Update 1
Building Vue.js Applications Without webpack (sample project) will not help you either as it is again using native ES6 modules
To use Vue as a module from a local installation, you don't want to explicitly include it in a script tag in your page. Instead, import it in the scripts that use it. The whole idea of modules is that you can import them which makes explicitly including them in your page obsolete.
In https://bitbucket.org/letsdebugit/minimalistic-vue/src/master/index.js, import Vue:
import * as Vue from "./local/path/to/vue.esm-browser.prod.js";
Vue Devtools works on all demos/examples online but not on my local pages. Even with the following, the Vue Devtools icon remains gray ("Vue.js not detected"). Why?
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app"></div>
<script>
Vue.config.devtools = true;
</script>
</body>
</html>
The Vue source you are using there looks to be minimized / production build to me. You need to use the non minimized / non-production build. Try https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js instead.
Also if you are working with local files i.e. accessing a page like file://... then "you need to check "Allow access to file URLs" for this extension in Chrome's extension management panel." see https://github.com/vuejs/vue-devtools
You must add at-least 1 instance of vue, for the devtools to detect it. So, do:
new Vue({el: '#app'})
You can try to refresh the browser first.
If didn't work, make sure that if you're compiling CSS and JavaScript to have have development compilation for both not a compilation for production with minified files
If at least one file is minified for prod, devtools will not show up
I'm using Hippo CMS and trying to implement SEO plugin. I did everything by manual but I don't see any changes and meta tags in rendered results.
My basic layout is:
<#include "/WEB-INF/freemarker/include/imports.ftl">
<html lang="en">
<head>
<meta charset="utf-8"/>
<#hst.headContributions/>
<link rel="stylesheet" href="<#hst.link path="/css/bootstrap.css"/>" type="text/css"/>
<#hst.defineObjects/>
<#if hstRequest.requestContext.cmsRequest>
<link rel="stylesheet" href="<#hst.link path="/css/cms-request.css"/>" type="text/css"/>
</#if>
</head>
And I just enable plugin over Hippo Setup -> features. And sure then rebuild and run all again.
Then I'm going to Channel Editor -> Edit Page -> Add Component. The drag n drop component on page.
I did all changes by clicking on component. But anyway I don't see any changes on published page.
I didn't find any documentation about that, but maybe somebody resolve this issue and can help to me!
Thanks
I tried it out as well. It indeed does not work out of the box as you would expect. The component uses a template specific of the Setup feature, the seo.ftl. This makes it work as a draggable component in the channel manager. What it does not do is add the configured data to the html head.
If you check the seohelper.ftl [1] of the forge plugin, there you see the code that does this job. What you can do to make it work in your project is add the headcontribution tags as in [1] to seo.ftl. Also make sure you have a <#hst.headcontributions/> tag in the html head section of the base-layout.ftl of your project.
I will create a jira issue for this so.
[1] http://forge.onehippo.org/gf/project/hst-seo-support/scmsvn/?action=browse&path=%2Fcheckout%2Fhst-seo-support%2Fbranches%2Fhst-seo-support-1.01.xx%2Fsrc%2Fmain%2Fjava%2Forg%2Fonehippo%2Fforge%2Fseo%2Fsupport%2Fseohelper.ftl&revision=157
The PhantomJS API claims to allow access to 'fs' and a few other built-in commonJS modules through the standard require interface. grunt-contrib-jasmine claims to run all specs using phantomJS. But when I use grunt-contrib-jasmine the require method doesn't seem to be available?
fs = require('fs')
describe 'DesignService', ->
it 'test loadFromJSON', ->
jsonFile = fs.read("resources/sample_pole.json")
Gives me the error:
ReferenceError: Can't find variable: require at
>> target/spec/Spec.js:3
What am I doing wrong?
In case it isn't clear, I am compiling from coffeescript, and then pointing the grunt-contrib-jasmine to the output of the compilation. The other specs are all running fine.
Cause
require method is only available on server side (Nodejs/PhantomJS), but all jasmine tests (specs) are executed on the client side.
Possible solution
You could create a JavaScript file in helpers folder with the content like this:
window.jsonFile = { some : json_object }
And use a jsonFile reference in your spec files.
Explanation
From the PhantomJS description:
PhantomJS is a headless WebKit scriptable with a JavaScript API.
From grunt-contrib-jasmine description:
Run jasmine specs headlessly through PhantomJS.
grunt-contrib-jasmine is automatically creating _SpecRunner.html file (see below for example) with all user specs and passing it to the PhantomJS. PhantomJS is a separate executable, that in Nodejs is only wrapped as a package. This is the same executable as if downloaded from Phantomjs.org page.
In the end this line is executed: .\node_modules\grunt-contrib-jasmine\node_modules\grunt-lib-phantomjs\node_modules\phantomjs\lib\phantom\phantomjs .\node_modules\grunt-contrib-jasmine\node_modules\grunt-lib-phantomjs\phantomjs\main.js .\_SpecRunner.html.
Here main.js file is to open the page and bind alerts (alert(jsonString)) that are thrown to the grunt logging.
So PhantomJS API is available in main.js, but not in _SpecRunner.html and jasmine spec files.
The result is the same as if opened _SpecRunner.html with the browser, except all messages will be intercepted by jasmine reporter and displayed on screen.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Jasmine Spec Runner</title>
<link rel="stylesheet" type="text/css" href=".grunt/grunt-contrib-jasmine/jasmine.css">
<!-- Jasmine test suite -->
<script src="./.grunt/grunt-contrib-jasmine/jasmine.js"></script>
<script src="./.grunt/grunt-contrib-jasmine/jasmine-html.js"></script>
<!-- Some vendor libraries -->
<script src="./test/vendor/jquery.js"></script>
<!-- Some helpers -->
<script src="./test/helpers/ts.js"></script>
<!-- Your spec files -->
<script src="./test/main_spec.js"></script>
<!-- Jasmine reporter that displays the result-->
<script src="./.grunt/grunt-contrib-jasmine/reporter.js"></script>
<script src="./.grunt/grunt-contrib-jasmine/jasmine-helper.js"></script>
</head>
<body>
</body>
</html>