Unable to utilize page objects inside before hook with webdriverIO - automated-tests

Page object:
class Product {
get button() { return (".element"); }
}
module.exports = new Product();
Code
var pageObject = require('../pageObjects/product.page.js');
describe("Test", function () {
before( function () {
browser.url();
pageObject.button.click();
});
This returns an error when the test is ran of
pageObject.button.click is not a function
I have other page objects being utilized in the test outside of the before hook that are working fine. When I move the above object outside of the hook and into the main test, it still returns the same error. It appears to be setup the same as my other page objects, so I'm not sure what I am doing wrong.

Based on what i can see from you Product class, the getter button() is not returning the webElement. It is returning just a string .element.
Please try by updating the code as like below:
class Product {
get button() { return $(".element"); }
}
module.exports = new Product();
Thanks, Naveen

Related

Switching feature in Handlebars Templates

So, we have created many templates using handlebars. Out of the many, we have one handlebar where we would like to make some changes that should only go live after a certain date. To do so, we wanted to create sort of a toggle switch, something like:
{{if switch on}}
display new content
{{else}}
display old content
Below is the generic template parser where I am trying to create a switch that I can inject in the if part of my template. Any suggestions?
/**
* Creates HTML output of the specified context for the given templateId and templateVersion combination
* we implicitly assume certain json fields (template specific) to be present in the content
*/
#Timed("handlebarsService.parseTemplateToHtml")
fun parseTemplateToHtml(htmlTemplateLocation: String, model: Map<String, Any>, locale: Locale): String {
val modelWithLanguage = model.toMutableMap()
modelWithLanguage[languageTag] = locale.language
//modelWithLanguage[switch] = "off"
val context = Context.newBuilder(modelWithLanguage)
.resolver(MapValueResolver.INSTANCE)
.build()
val template = try {
handlebars.compile(htmlTemplateLocation)
} catch (e: IOException) {
throw PdfGenerationException(e, "Internal error while compiling template")
}
return try {
template.apply(context)
} catch (e: IOException) {
throw PdfGenerationException(e, "Internal error while applying template")
}
}
}
private const val languageTag = "languageTag"
//private const val switch ="off"

Event Listeners and Global Variables that are defined = "Uncaught TypeError is not a function" when set as function before invoking

I ran into an interesting issue when defining a global variable (as null in this case), and having a function change that global variable to a callback that was passed to that function---then trying to invoke the global variable (which is now the function) from a click event listener. However if that global variable wasn't defined (var globalCallback; as opposed to var globalCallback = null;) then everything is okay. I was under the assumption that the updated variable reference is always accessible by event listeners regardless of the variable's initial value---this doesn't seem to be the case.
See code below:
TypeError
document.addEventListener("DOMContentLoaded", function(){
//...
theSettingFunction(function(){
//...
});
var globalCallback = null; //creates TypeError when invoked after assigned to function
//var globalCallback = function(){}; //tried this too to test
function theSettingFunction(callback)
{
//...
globalCallback = callback;
//...
}
/* This event listener doesn't need removing it's a core UI element
This event gets triggered only after theSettingFunction() has been invoked first */
document.querySelector('#myButtonDiv').addEventListener('click', function(){
//...
globalCallback(); //invoking sees globalCallback as null still = TypeError
});
//...
});
Everything Okay
document.addEventListener("DOMContentLoaded", function(){
//...
theSettingFunction(function(){
//...
});
var globalCallback;
function theSettingFunction(callback)
{
//...
globalCallback = callback;
//...
}
/* This event listener doesn't need removing it's a core UI element
This event gets triggered only after theSettingFunction() has been invoked first */
document.querySelector('#myButtonDiv').addEventListener('click', function(){
//...
globalCallback(); //invoking... hey I see you---you're a function! Invoked.
});
//...
});
Is this because of the way the JS engine optimizes? Why else are event listeners not getting the updated references to global variables when they're defined?
No, this is not an engine optimization. It's an effect of JavaScript's funny hoisting rules, and the order in which the various things appear in your code.
The JavaScript language specifies that certain declarations are "hoisted" to the beginning of the program. I guess the idea was to make programming easier by not forcing programmers to pay attention to the order of things -- except, as it turns out, automatic reordering only gets you so far...
For example, you can call a function before defining it. Let's look at an example:
func(); // No error, because "func" is defined later.
variable = 1; // No error, because "variable" is declared later.
function func() {}
var variable;
console.log(variable); // Will print "1".
Under the hood, this is implemented by the engine reordering things as follows:
function func() {}
var variable;
func();
variable = 1;
console.log(variable); // Will print "1".
(Again, this is not an optimization, it's a requirement of the JavaScript language.)
An additional detail is that a combined declaration+initialization of a variable is split into two steps, and only the declaration is hoisted. So this:
console.log(variable); // Prints "undefined".
var variable = 1;
after internal re-ordering becomes this:
var variable;
console.log(variable); // Prints "undefined".
variable = 1;
Now, if we simplify your code a bit, we can see that this is exactly what happens. By inlining theSettingFunction, and assuming that the body of the onclick-handler is invoked directly, we get:
// This is what `theSettingFunction` does:
globalCallback = function() { /*...*/ }
var globalCallback = null;
// This is what the click-handler does:
globalCallback();
which the engine is required to reorder to:
var globalCallback; // hoisted declaration
globalCallback = function() { /*...*/ }
globalCallback = null;
globalCallback(); // TypeError, of course!
So you can easily fix the problem by moving the declaration+initialization of globalCallback before its first assignment, i.e. the call site of theSettingFunction:
document.addEventListener("DOMContentLoaded", function(){
var globalCallback = null; // Declare and initialize...
//...
theSettingFunction(function(){ // ...before assigning.
//...
});
function theSettingFunction(callback)
{
//...
globalCallback = callback;
//...
}
document.querySelector('#myButtonDiv').addEventListener('click', function(){
//...
globalCallback();
});
//...
});
Arguably, this will also make your code easier to read, because it's easier for humans to understand in which order things are happening when they don't have to take any invisible reordering into account. For this reason, personally, I would also move the definition of theSettingFunction before its first call.

Get ReactiveVar in anonymous function

I am using meteor reactive-var package. How can i get reactive variable in a anonymous function that is defined in templates's js file?
viewer.js:
Template.viewer.helpers({
counter: function () {
return Template.instance().counter.get();
}
});
Template.viewer.onCreated(function() {
this.counter = new ReactiveVar(0);
});
Template.viewer.onRendered(function(e){
viewerRendered();
});
function getCounter() {
// !!Return reactive counter variable
}
function viewerRendered() {
var counter = getCounter();
$(document).trigger("ViewerCreated",counter);
}
Thanks.
If you need to access the current template in an external function through the onRendered() callback, you have multiple ways:
Using the external function as a direct callback :
Template.viewer.onRendered(viewerRendered)
function viewerRendered() {
let currentTemplate = this
//...
}
Passing the current template as parameter :
Template.viewer.onRendered(function() {
viewerRendered(this)
})
function viewerRendered(currentTemplate) {
//...
JavaScript functions are quite flexible since this is dynamic, there is other ways to access the data.
The two above are simple use-cases.
You may do whatever you want with the template such as accessing its data, using subscriptions...

Symfony2 set class variable with init or construct methods

Have recently been using Symfony2 after using ZF for some time.
I am having problems trying to do something relatively simple, I think.
The following code is within a controller:
private $current_setid = "";
public function __construct() {
$current_set = $this->getCurrentSet();
if ($current_set == "") {
return $this->redirect($this->generateUrl('selectset'));
}
$this->current_setid = $current_set;
}
public function getCurrentSet() {
$session = $this->get("session");
$set = $session->get('set');
return $set;
}
public function setCurrentSet($setid) {
$session = $this->get("session");
$session->set('set', "$setid");
}
If I use __construct() I get errors like:
Fatal error: Call to a member function get() on a non-object in
I have tried using __init() and init() both of which do not seem to get called.
Can anyone point me in the right direction? Is there a simple way to do this or do I have to look into event listeners?
Have you tried getting your session like they do in official documentation?
$session = $this->getRequest()->getSession();
$foo = $session->get('foo');
Basically get fetch dependencies from container and container in the Controller is injected using setter dependency injection. You just not have container in the time of __construct yet.
Just ended up opting for placing a check in every method in the class. Seems silly to have to do that but I find I often have to do that in Symfony2 with the lack of init, postDispatch type methods like ZF has.
Even trying to remove the check to another method was counter productive as I still had to check the return from that method as $this->redirect does not seem to work unless it is within an Action method. For example:
public function isSetSet() {
$current_set = $this->getCurrentSet();
if ($current_set == "") {
$url = $this->generateUrl('selectset');
return $this->redirect($url);
}
return TRUE;
}
public function someAction() {
$check = $this->isSetSet();
if($check != TRUE){
return $check;
}
...
}
So each method needs that 4 line check but the whole check can be done in 4 lines anyway so no need for that extra method:
public function anotherAction() {
$current_setid = $this->getCurrentSet();
if ($current_setid == "") {
return $this->redirect($this->generateUrl('selectset'));
}
...
}

flex upload file component - problems with filereference

The following code is used in a component I name FileUpload.mxml which is used in two three different sections of the flex application.
private var uploadURL:URLRequest = new URLRequest;
private var file:FileReference = new FileReference;
private var media:MediaFacade;
public function browse():void
{
var uUrl:String=""; // force
uploadURL=new URLRequest();
file=new FileReference();
configureListeners();
file.browse(getTypes());
}
private function configureListeners():void
{
file.addEventListener(Event.CANCEL, cancelHandler);
...
if (!Application.application.hasEventListener("uploadFileEvent")) {
Application.application.addEventListener("uploadFileEvent", uploadFile);
}
}
When it is used in the first instanced, it works fine, but when it is used in different sections it gets the following error from the code below:
Error #2037: Functions called in incorrect sequence, or earlier call was unsuccessful.
private function doUploadFile():void
{
try
{
file.upload(uploadURL);
}
catch (e:Error) {
trace(e.message);
}
}
It follows the same sequence every time, i.e., file=new FileReference; configureFileListeners(file); file.browse(); file.upload(uploadURL) but only works on the first instance of the component being created.
Any ideas would be appreciated.
Thanks in advance.
Angus.
browse method only can be call directly from "User-Interaction" event such as CLICK event. If you wrap it in a function or class than that error will occur.
I'm a noob at Flex, but from what I've read:
Try calling .cancel() before .browse() to ensure no event is conflicting.

Resources