I'm currently using something like this:
gulp.task('js', gulp.series('js-a', 'js-b', 'js-c'));
The task js-c requieres js-a and js-b to be executed first and to generate 2 files than then I combine in js-c.
However, no matter if I use gup-series, the function js-c gets executed before the two files from the previous two tasks are created.
How can I tell gulp series to wait for those?
I've read other related issues but they tend to rely on external scripts to accomplish this.
I manually managed to fix this by adding a setTimeout on js-b, but seems like a hacky solution.
Is there any proper way to accomplish this with gulp.series?
To put you in context, the task js-a looks like this:
var gp_concat = require('gulp-concat');
gulp.task('js-a', function(done) {
gulp.src([
'file1.js',
'file2.js'
])
.pipe(gp_concat('tmp.js'))
.pipe(gulp.dest('./'));
done();
});
And I am now forced to use a timeout to fix this issue:
setTimeout(function(){
done();
}, 500);
done() shouldn't be used in this case and the task should return the stream (see here). Please try this:
var gp_concat = require('gulp-concat');
gulp.task('js-a', function() {
return gulp.src([
'file1.js',
'file2.js'
])
.pipe(gp_concat('tmp.js'))
.pipe(gulp.dest('./'));
});
Related
I have an async watch that fetches some data from the server. It will batch process the Response in a blocking operation. I am trying to update the view before kicking off the blocking operation, like so:
Vue.component("foo-bar", {
...
watch: {
async things() {
const response = await API.getThings();
this.someUIMessage = `processing ${response.length} things...`;
someBlockingOperation(response);
}
}
}
But this.someUIMessage is not updated in the view until after someBlockingOperation. I stuck an await Vue.nextTick() in between setting the string and calling the blocking op, and this.$forceUpdate(), but without success.
What does work (sometimes! depends on what else is going on in the app) is calling setTimeout(() => someBlockingOperation(response), 0), but that seems like a kludge. Is there a step I'm missing?
You may need to show some more code because your use case is exactly described in the docs - Async Update Queue and await Vue.nextTick() should work
If your someBlockingOperation take too long, it may be worth to think about UI responsiveness anyway and maybe apply a strategy of splitting up you workload into smaller chunks, process only one at a time and use setTimeout(nextBatch, 0) to schedule "next chunk" processing. See this SO question for more details...
I have tried every single thing to perform dragAndDrop using webdriverio but nothing works. I have also posted a question in the webdriverio gitter but no response. below posted code is one of the ways I tried and its supposed to work but it just doesn't!
` await this.driver.moveToObject(source);
await sleep(2000);
await this.driver.buttonDown(0);
await sleep(2000);
await this.driver.moveToObject(destination);
await sleep(2000);
await this.driver.buttonUp(0);`
I'm not sure what properties are on the source and destination objects you are using but here is an example of how I was able to get it to work using the same commands you are trying.
In my example I have a table with columns that can be re-ordered by dragging and dropping them wherever I want them to be. First I get the two column headers I want to switch
let docIdHeader = browser.element('div[colid="documentid1"]');
let pageCountHeader = browser.element('div[colid="_PAGE_COUNT1"]');
If I log these objects out to the console I can see the properties stored in them.
> docIdHeader
{ sessionId: 'e35ae3e81f1bcf95bbc09f120bfb36ae',
value:
{ ELEMENT: '0.3568346822568915-1',
'element-6066-11e4-a52e-4f735466cecf': '0.3568346822568915-1' },
selector: 'div[colid="documentid1"]',
_status: 0 }
> pageCountHeader
{ sessionId: 'e35ae3e81f1bcf95bbc09f120bfb36ae',
value:
{ ELEMENT: '0.3568346822568915-2',
'element-6066-11e4-a52e-4f735466cecf': '0.3568346822568915-2' },
selector: 'div[colid="_PAGE_COUNT1"]',
_status: 0 }
Now using the same technique you are using and the selector property off of these objects I can get it to work in two ways.
browser.dragAndDrop(docIdHeader.selector, pageCountHeader.selector);
Or
browser.moveToObject(docIdHeader.selector)
browser.buttonDown(0)
browser.moveToObject(pageCountHeader.selector)
browser.buttonUp(0)
I ran this in the REPL interface so I know it works as I could see each step being executed after I sent the commands. If you are not familiar with how to use the REPL I highly recommend learning. You can play around with commands in the console until you figure something out and then add those commands to your tests.
Also, as I stated in my comments above. dragAndDrop() and moveToObject() are going to be deprecated soon and you will likely see a lot of warnings about it when you use these. The correct way to implement a drag and drop action going forward is to use browser.actions(). Unfortunately, I don't have an example of how to do it that way as I haven't played with it yet. If no one provides an example by tonight I will try to get one together for you.
Even I faced this issue wherein the cursor doesn't move to the destination object after buttonDown and using moveToObject twice worked for me.
await this.driver.moveToObject(source);
await this.driver.buttonDown(0);
await this.driver.moveToObject(destination);
await this.driver.moveToObject(destination);
await this.driver.buttonUp(0);
I'm trying to verify that an account was created successfully, but after clicking the submit button, I need to wait until the next page has loaded and verify that the user ended up at the correct URL.
I'm using pollUntil to check the URL client side, but that results in Detected a page unload event; script execution does not work across page loads. in Safari at least. I can add a sleep, but I was wondering if there is a better way.
Questions:
How can you poll on something like this.remote.getCurrentUrl()? Basically I want to do something like this.remote.waitForCurrentUrlToEqual(...), but I'm also curious how to poll on anything from Selenium commands vs using pollUntil which executes code in the remote browser.
I'm checking to see if the user ended up at a protected URL after logging in here. Is there a better way to check this besides polling?
Best practices: do I need to make an assertion with Chai or is it even possible when I'm polling and waiting for stuff as my test? For example, in this case, I'm just trying to poll to make sure we ended up at the right URL within 30 seconds and I don't have an explicit assertion. I'm just assuming the test will fail, but it won't say why. If the best practice is to make an assertion here, how would I do it here or any time I'm using wait?
Here's an example of my code:
'create new account': function() {
return this.remote
// Hidden: populate all account details
.findByClassName('nextButton')
.click()
.end()
.then(pollUntil('return location.pathname === "/protected-page" ? true : null', [], 30000));
}
The pollUntil helper works by running an asynchronous script in the browser to check a condition, so it's not going to work across page loads (because the script disappears when a page loads). One way to poll the current remote URL would be to write a poller that would run as part of your functional test, something like (untested):
function pollUrl(remote, targetUrl, timeout) {
return function () {
var dfd = new Deferred();
var endTime = Number(new Date()) + timeout;
(function poll() {
remote.getCurrentUrl().then(function (url) {
if (url === targetUrl) {
dfd.resolve();
}
else if (Number(new Date()) < endTime) {
setTimeout(poll, 500);
}
else {
var error = new Error('timed out; final url is ' + url);
dfd.reject(error);
}
});
})();
return dfd.promise;
}
}
You could call it as:
.then(pollUrl(this.remote, '/protected-page', 30000))
When you're using something like pollUntil, there's no need (or place) to make an assertion. However, with your own polling function you could have it reject its promise with an informative error.
I'm trying to test an angularJS directive that uses a templateURL. For the life of me I can't get the compiler to actually load the templateURL, even when it has been put into the templateCache. I realize karma preprocesses all the template contents and creates modules for each that preloads the templateCache, but I expected that this would have been equivalent.
Here is a http://jsfiddle.net/devshorts/cxN22/2/ that demonstrates whats going on.
angular.module("app", [])
.directive("test", function(){
return {
templateUrl:"some.html",
replace:true
}
});
//--- SPECS -------------------------
describe("template url test", function() {
var element, scope, manualCompiledElement;
beforeEach(module('app'));
beforeEach(inject(function($rootScope, $controller, $compile, $templateCache){
$templateCache.put("some.html", "<div>hello</div>");
scope = $rootScope.$new();
element = $compile(angular.element('<test></test>'))(scope);
manualCompiledElement = $compile(angular.element($templateCache.get('some.html')))(scope);
scope.$digest();
}));
it("has hello", function() {
expect(element.text()).toContain('hello');
});
it("template cache has contents", function(){
expect(manualCompiledElement.text()).toContain('hello');
});
});
What am I missing?
I realise you no longer necessarily need to know, but it looks to me like there are two problems contributing to this.
The first was pointed out by #Words-Like-Jared. You are defining the directive as restricted to attributes (default) but using it as an element. So you need restrict: 'E'.
The second problem is that your template is never actually retrieved and your compile/link never completes. The request for the contents of the template within the directive are asynchronous so a digest on the root scope is needed to resolve the promise and return them, similar to this answer for another question.
When you perform your manual compilation, the results are not asynchronous and the template is retrieved immediately. Actually the compilation in your manual compilation doesn't do a lot as you are compiling the contents of your template, which doesn't have any directives in.
Now at the end of your beforeEach where you use
$scope.$digest()
you are digesting on the current scope and its children. When you use $rootScope.$digest() or $scope.$apply() you will perform a digest across all scopes. So changing this to
$rootScope.$digest()
// or
$scope.$root.$digest()
in the line after your compilation means both of your tests will now pass. I have updated the fiddle here.
Here is a variation of the solution in coffeescript
expect = chai.expect;
app = angular.module('TM_App')
app.directive "test", ()->
templateUrl:"some.html",
replace :true
describe '| testing | templateUrl',->
element = null
beforeEach ->
module('TM_App')
beforeEach ->
inject ($compile,$rootScope, $templateCache)->
$templateCache.put "some.html", "<div>hello {{name}}</div>"
scope = $rootScope.$new();
element = $compile('<test/>')(scope);
scope.name = 'John'
scope.$digest()
it "has hello", ()->
expect(element.text() ).to.equal 'hello John'
expect(element[0].outerHTML).to.equal '<div class="ng-binding">hello John</div>'
I saw there is somes questions related to mine (like this interesting one), but what I wonders is how to do it correctly, and I couldn't find it via the others questions or the RequireJS documentation.
I'm working on a quite heavy web application that will run in only one html page.
Before RequireJS, I used to do a lot of JS modules with public methods and connecting them via the on event on the Dom READY method, like this :
var DataList = function () {
this.base = arguments[0];
this.onUpdate = function (event) { ... }
}
$(function () {
var dataList = {}; DataList.apply(dataList, [$('#content')]);
$('table.main', dataList.base).on ('update', dataList.onUpdate);
});
With RequireJS, I can easily see that I can split DataList and all others classes like this on individual files, but what about the $(function () {}); part?
Can I still keep it this way, but instead of the DOM ready function of jQuery, I put the events on the main function() of the RequireJS, when my primary libs are loaded?
Or do I have to change the way I create JS "classes", to include a init function maybe, that will be called when I do a, for example :
require(['Datalist'], function(dataList) {
dataList.init($('#content'));
});
What annoys me the most is that since I have only one html file, I'm afraid the require() will have to load a huge list of files, I'd prefer it to load just libs that, them, would load sub libs required to work.
I don't know, the way of thinking with RequireJS lost me a bit :/
How would you do?
"Can I still keep it this way, but instead of the DOM ready function of jQuery, I put the events on the main function() of the RequireJS, when my primary libs are loaded?"
If you separate the functions or 'classes' into modules then you can use the RequireJS domReady function:
require(['module1'], function(module1) {
domReady(function(){
// Some code here ftw
})
});
The benefit here is the domReady function will allow downloading of the modules instantly but won't execute them until your DOM is ready to go.
"Or do I have to change the way I create JS "classes", to include a init function maybe, that will be called when I do a, for example"
You won't need to change the way you interact with your code this way, but you can probably improve it. In your example I would make DataList a module:
define(function(require) {
var $ = require('jquery');
var DataList = function () {
this.base = arguments[0];
};
DataList.prototype.onUpdate = function() {
};
return DataList;
});
require(['data-list'], function(DataList) {
var data = {};
// Call DataList with new and you won't need to set the context with apply
// otherwise it can be used exactly as your example
new DataList(data);
});
"What annoys me the most is that since I have only one html file, I'm afraid the require() will have to load a huge list of files, I'd prefer it to load just libs that, them, would load sub libs required to work."
Make your code as modular as you want/can and then use the optimiser to package it into one JS file.