Configure Polymer web-component-tester to use a Selenium Grid server - unit-testing

I need to configure the Polymer web-component-tester to use a Selenium Grid running at http://jenkins.myapp.corp.web:4444/wd/hub so I can run my tests on Jenkins. What is the Grunt config for this? I guessing something like this:
'wct-test': {
local: {
options: {
activeBrowsers: [{
browserName: 'chrome',
url: 'http://jenkins.myapp.corp.web:4444/wd/hub'
}]
}
}
}

It turns out there was a bug with web-component-tester that has been fixed in the latest release. We ended up getting it working with our grid using this config:
var os = require('os');
...
'wct-test': {
local: {
options: {
remote: false,
activeBrowsers: [{
browserName: "chrome",
url: "http://jenkins.myapp.corp.web:4444/wd/hub"
}],
webserver: {
hostname: os.hostname()
}
}
}
}

It seems that you can modify your wct.conf.js and set your grid configuration:
module.exports = {
// See https://github.com/Polymer/web-component-tester/blob/master/runner/config.js#L47-54
activeBrowsers: [
{
// Accepts anything wd does: https://github.com/admc/wd#browser-initialization
url: 'http://user:apiKey#your.selenium.server/wd/hub',
// ... any other capabilities you like:
browserName: 'theBrowser',
}
],
plugins: {
local: false,
sauce: false,
}
};

The correct configuration for wct.conf.json should be as follows. You should change url of the sample to your selenium grid url.
{
"....":"....",
"activeBrowsers": [{
"browserName": "chrome",
"url": "http://selenium-hub-selenium.apps.com.tr/wd/hub"
}],
"plugins": {
"local": {
"disabled": true
},
"sauce":{
"disabled": true
}
}
}

Related

VueJS - jest: How to test/spy the methods which are getting called inside the watcher?

Sample Code from the VueJs components. Note that I'm trying to cover the watcher as well as the method
computed: {
...mapGetters({
resourceLinks: `tools/${storeGetters.resourceLinks}`,
}),
},
methods: {
formatData(data) {
this.setSocialLinks();
},
},
},
watch: {
resourceLinks(data) {
this.formatData(data);
},
},
expect(wrapper.vm.$options.watch.resourceLinks.call(wrapper.vm, resourceLinks1));

webpack 4 images in node_modules : module not found

The problem
Im using webpack 4 to compile scss to css and MiniCssExtractPlugin to save the css into a different file. The problem is, that i dont manage to load images and fonts, that are included via url() inside of the scss files. It also makes no difference between running development or production.
Scss is compiled perfectly and without any problems. Also the scss-loader has no problems loading .scss-files from node_modules.
Why does this error occur and how can i fix it?
error-message when running npm
ERROR in ./ui/index.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./ui/index.scss)
Module not found: Error: Can't resolve '../webfonts/fa-solid-900.woff' in '/home/asdff45/Schreibtisch/Programme/GO/src/factorio-server-manager/manager/ui'
# ./ui/index.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./ui/index.scss) 7:336881-336921
ERROR in ./ui/index.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./ui/index.scss)
Module not found: Error: Can't resolve '../webfonts/fa-solid-900.woff2' in '/home/asdff45/Schreibtisch/Programme/GO/src/factorio-server-manager/manager/ui'
# ./ui/index.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./ui/index.scss) 7:336799-336840
And multiple more, but all have the same error, just the filename changes.
webpack-Config
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: {
// js: './ui/index.js',
sass: './ui/index.scss'
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'app')
},
resolve: {
alias: {
Utilities: path.resolve(__dirname, 'ui/js/')
},
extensions: ['.js', '.json', '.jsx']
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader"
]
},
{
test: /(\.(png|jpe?g|gif)$|^((?!font).)*\.svg$)/,
loaders: [
{
loader: "file-loader",
options: {
name: loader_path => {
if(!/node_modules/.test(loader_path)) {
return "app/images/[name].[ext]?[hash]";
}
return (
"app/images/vendor/" +
loader_path.replace(/\\/g, "/")
.replace(/((.*(node_modules))|images|image|img|assets)\//g, '') +
'?[hash]'
);
},
}
}
]
},
{
test: /(\.(woff2?|ttf|eot|otf)$|font.*\.svg$)/,
loaders: [
{
loader: "file-loader",
options: {
name: loader_path => {
if (!/node_modules/.test(loader_path)) {
return 'app/fonts/[name].[ext]?[hash]';
}
return (
'app/fonts/vendor/' +
loader_path
.replace(/\\/g, '/')
.replace(/((.*(node_modules))|fonts|font|assets)\//g, '') +
'?[hash]'
);
},
}
}
]
}
]
},
performance: {
hints: false
},
plugins: [
new MiniCssExtractPlugin({
filename: "bundle.css"
})
]
}
Project Repo/Branch
You need to add resolve-url-loader to your build, like this:
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"resolve-url-loader",
"sass-loader?sourceMap"
]
}
resolve-url-loader is resolving paths to assets based on the original file that is importing the asset.
I tried it locally and the build is now passing :) Cheers!

Uncaught Syntax Error when running Vue.Js Unit Tests with Karma

I'm trying to get unit testing set up for my Vue JS project with Karma and Mocha (with vue-cli, I originally used Jest but I'm switching to Karma). I try to run my test with karma start; karma run and I keep getting:
09 03 2018 17:02:49.778:INFO [karma]: Karma v2.0.0 server started at http://0.0.0.0:9876/
09 03 2018 17:02:49.786:INFO [launcher]: Launching browser Chrome with unlimited concurrency
09 03 2018 17:02:49.797:INFO [launcher]: Starting browser Chrome
09 03 2018 17:02:54.410:INFO [Chrome 64.0.3282 (Windows 10.0.0)]: Connected on socket mvbOII8qli3NiwBMAAAA with id 62867001
Chrome 64.0.3282 (Windows 10.0.0) ERROR
{
"message": "Uncaught SyntaxError: Unexpected identifier\nat specs/PdfView.spec.js:3:8\n\nSyntaxError: Unexpected identifier",
"str": "Uncaught SyntaxError: Unexpected identifier\nat specs/PdfView.spec.js:3:8\n\nSyntaxError: Unexpected identifier"
}
The test runner starts, but I'm guessing some config issue is preventing the test from running properly. Also, it's not this just one component that will give me those errors.
My karma.conf.js file:
var webpackConfig = require('../../build/webpack.test.conf')
module.exports = function karmaConfig (config) {
config.set({
browsers: ['Chrome'],
frameworks: ['mocha'],
reporters: ['spec', 'coverage'],
files: ['specs/**/*.spec.js'],
preprocessors: {
'test/unit/spec/**/*.spec.js': [ 'webpack', 'sourcemap' ]
},
plugins: [
// Launchers
'karma-chrome-launcher',
// Test Libraries
'karma-mocha',
// 'karma-sinon-chai',
// Preprocessors
'karma-webpack',
'karma-sourcemap-loader',
// Reporters
'karma-spec-reporter',
'karma-coverage'
],
webpack: webpackConfig,
webpackMiddleware: {
noInfo: true
},
singleRun: true,
coverageReporter: {
dir: './coverage',
reporters: [
{ type: 'lcov', subdir: '.' },
{ type: 'text-summary' }
]
}
})
}
My .babelrc file:
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"],
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
}
}
}
My webpack.test.conf.js:
'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const webpackConfig = merge(baseWebpackConfig, {
// use inline sourcemap for karma-sourcemap-loader
module: {
rules: utils.styleLoaders(),
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
devtool: '#inline-source-map',
resolveLoader: {
alias: {
// necessary to to make lang="scss" work in test when using vue-loader's ?inject option
// see discussion at https://github.com/vuejs/vue-loader/issues/724
'scss-loader': 'sass-loader'
}
},
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/test.env')
})
]
})
delete webpackConfig.entry
module.exports = webpackConfig
PdfView.spec.js
import Vue from 'vue';
import Test from '#/components/Submission/PdfView';
describe('Test', () => {
it(`should render`, () => {
const Constructor = Vue.extend(Test);
const comp = new Constructor({}).$mount();
expect(comp.$el.textContent)
.to.equal('Test Text');
});
});
Webpack ^3.6.0,
Karma ^2.0.0,
Vue ^2.5.2
It looks to me like the # in import Test from '#/components/Submission/PdfView'; is not being resolved. Try adding this to your webpack.test.conf.js:
resolve: {
alias: {
'#': resolve('src')
}
}

Browsersync doesn't detect file changes with Drupal Basic Theme Grunt config

When I use BrowserSync directly from the command line it works fine. But when I use the Grunt file from the Drupal Basic theme, BrowserSync is not detecting changes being made to the SASS and CSS files. Whereas the SASS to CSS conversion is working fine...
EDIT: when I use 'css/base/*.css' instead of 'css/{,*/}*.css' it works. So this must be a syntax issue. Any idea for the right syntax?
/**
* #file
*/
module.exports = function(grunt) {
// This is where we configure each task that we'd like to run.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
// This is where we set up all the tasks we'd like grunt to watch for changes.
scripts: {
files: ['js/source/{,*/}*.js'],
tasks: ['uglify'],
options: {
spawn: false,
},
},
images: {
files: ['images/source/{,*/}*.{png,jpg,gif}'],
tasks: ['imagemin'],
options: {
spawn: false,
}
},
vector: {
files: ['images/source/{,*/}*.svg'],
tasks: ['svgmin'],
options: {
spawn: false,
}
},
css: {
files: ['sass/{,*/}*.{scss,sass}'],
tasks: ['sass']
}
},
uglify: {
// This is for minifying all of our scripts.
options: {
sourceMap: true,
mangle: false
},
my_target: {
files: [{
expand: true,
cwd: 'js/source',
src: '{,*/}*.js',
dest: 'js/build'
}]
}
},
imagemin: {
// This will optimize all of our images for the web.
dynamic: {
files: [{
expand: true,
cwd: 'images/source/',
src: ['{,*/}*.{png,jpg,gif}' ],
dest: 'images/optimized/'
}]
}
},
svgmin: {
options: {
plugins: [{
removeViewBox: false
}, {
removeUselessStrokeAndFill: false
}]
},
dist: {
files: [{
expand: true,
cwd: 'images/source/',
src: ['{,*/}*.svg' ],
dest: 'images/optimized/'
}]
}
},
sass: {
// This will compile all of our sass files
// Additional configuration options can be found at https://github.com/sindresorhus/grunt-sass
options: {
sourceMap: true,
// This controls the compiled css and can be changed to nested, compact or compressed.
outputStyle: 'expanded',
precision: 5
},
dist: {
files: {
'css/base/base.css': 'sass/base/base.sass',
'css/components/components.css': 'sass/components/components.sass',
'css/components/tabs.css': 'sass/components/tabs.sass',
'css/components/messages.css': 'sass/components/messages.sass',
'css/layout/layout.css': 'sass/layout/layout.sass',
'css/theme/theme.css': 'sass/theme/theme.sass',
'css/theme/print.css': 'sass/theme/print.sass'
}
}
},
browserSync: {
dev: {
bsFiles: {
src : [
'css/{,*/}*.css',
'templates/{,*/}*.twig',
'images/optimized/{,*/}*.{png,jpg,gif,svg}',
'js/build/{,*/}*.js',
'*.theme'
]
},
options: {
watchTask: true,
// Change this to "true" if you'd like the css to be injected rather than a browser refresh. In order for this to work with Drupal you will need to install https://drupal.org/project/link_css keep in mind though that this should not be run on a production site.
injectChanges: true,
proxy: "dev.localhost"
}
}
},
});
// This is where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-svgmin');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-browser-sync');
// Now that we've loaded the package.json and the node_modules we set the base path
// for the actual execution of the tasks
// grunt.file.setBase('/')
// This is where we tell Grunt what to do when we type "grunt" into the terminal.
// Note: if you'd like to run and of the tasks individually you can do so by typing 'grunt mytaskname' alternatively
// you can type 'grunt watch' to automatically track your files for changes.
grunt.registerTask('default', ['browserSync','watch']);
};
So, I found the solution. Apparently the official Grunt pattern should be like this:
'css/**/*.css'

How to load babel-plugin-react-intl using babel-loader?

I recently initialized a react app using create-react-app.
I ejected the app and I now have all the files exported to my main directory.
This set up creates a babel.dev.js instead of using .babelrc (it uses babel-loader).
I am trying to figure out how do I configure react-intl and babel-plugin-react-intl without the .babelrc file.
The documentation says .babelrc is recommended
Via .babelrc (Recommended)
.babelrc
{
"plugins": [
["react-intl", {
"messagesDir": "./build/messages/"
}]
]
}
What is the syntax to have this behavior with babel-loader? Right now the plugins in babel.dev.js look like this:
plugins: [
// class { handleClick = () => { } }
require.resolve('babel-plugin-transform-class-properties'),
// { ...todo, completed: true }
require.resolve('babel-plugin-transform-object-rest-spread'),
// function* () { yield 42; yield 43; }
[require.resolve('babel-plugin-transform-regenerator'), {
// Async functions are converted to generators by babel-preset-latest
async: false
}],
// Polyfills the runtime needed for async/await and generators
[require.resolve('babel-plugin-transform-runtime'), {
helpers: false,
polyfill: false,
regenerator: true,
// Resolve the Babel runtime relative to the config.
// You can safely remove this after ejecting:
moduleName: path.dirname(require.resolve('babel-runtime/package'))
}]
]
My components currently have the strings defined as follows:
const messages = defineMessages({
summaryTitle: {
"id": "checkout.section.title.summary",
"description": "Summary Section Title",
"defaultMessage": "Summary"
},
shippingTitle: {
"id": "checkout.section.title.shipping",
"description": "Shipping Section Title",
"defaultMessage": "Shipping"
}
});
Add the babel-plugin-react-intl to your plugins array like this:
plugins: [
..., // some plugins here
[require.resolve('babel-plugin-react-intl'), { messageDir: "./build/messages"}]
]
This will load the plugin passing the messageDir as an option to it.