I am trying to set rules to control buttons that are inside of v-text-area on Vue2/Vuetify. How can I do this?
I tried several things, please do not judge me i am beginner of coding concept
In order to use Vuetify validation rules, you need to wrap all elements on which you want to perform validation in a <v-form> element.
On your input components, you need to provide an array to the rules prop with the names of functions you define which perform validation.
The functions which validate take the value as an input and return true if the input is valid and false or a failure string if the input is invalid.
An example of such a function defined in the methods section would be:
isNumber(input) {
return /[0-9]+/g.test(input) || "input must be a number";
}
Passing it to your v-text-area would look like this:
<v-text-area :rules="[isNumber]" />
More info is available in the #rules section of Vueitfy's Form docs.
Related
I got 2 step definitions in Cypress that check if an input field is empty or not (depends on how I build the sentence I setup with RegEx).
First my problem was, that cypress said the test failed because the input field is empty while it was not.
My defined steps:
/** We check if the input field with the given name is empty */
Given(/^The input field "(.*)" is (not )?empty$/, (inputFieldName, negation) => {
if (negation === 'not ') {
CypressTools.getByName(inputFieldName).should('not.be.empty');
} else {
CypressTools.getByName(inputFieldName).should('be.empty');
}
});
/** We check if the input field with the given name is visible and empty */
Given(/^The input field "(.*)" is visible and empty$/, (inputFieldName) => {
CypressTools.getByName(inputFieldName).should('be.visible').should('be.empty');
});
In my specific test cypress should check a value filled input field and the step is defined like that:
The input field "XYZ" is not empty
I can see, that the if-condition is working fine, so no problems on the definition or RegEx site.
But the test fails because Cypress say the input field is empty but it's not.
I suspect, that Cypress test the input fields for values between the input tags, but doesn't check for a value attribute in the input tag.
At least, I tried to add an invoke('val') in the step definition:
CypressTools.getByName(inputFieldName).invoke('val').should('not.be.empty');
and it works for the first step definition, but when I do that for the 2nd one aswell, cypress tests fail and tell me this:
Timed out retrying: You attempted to make a chai-jQuery assertion on an object that is neither a DOM object or a jQuery object.
The chai-jQuery assertion you used was:
> visible
The invalid subject you asserted on was:
>
To use chai-jQuery assertions your subject must be valid.
This can sometimes happen if a previous assertion changed the subject.
I don't understand the problem here. Is this method valid with invoke() or is there a better solution to cover all cases?
Thanks a lot for your help.
The problem your error message is pointing to is that the subject being passed along the command chain in not appropriate for the next step,
CypressTools.getByName(inputFieldName)
.invoke('val') // changes subject to the text of the input
// (not a DOM element)
.should('be.visible') // needs a DOM element
.should('not.be.empty');
The surest way around it is to break the testing into two steps
CypressTools.getByName(inputFieldName).should('be.visible');
CypressTools.getByName(inputFieldName)
.invoke('val')
.should('not.be.empty');
but I think a simple reordering will also work
CypressTools.getByName(inputFieldName)
.should('be.visible') // check the DOM element, passes it on as subject
.invoke('val') // changes subject to the text of the input
.should('not.be.empty'); // check the text is not empty
I need to create some filters to use with v-bind and not on {{ }}. It works if the filter does character to character modifications like uppercase, lowercase, etc. But for things like trim it does't, the input value updates but not the data attached.
Here is an example (https://jsfiddle.net/3nkmjc0c/), I changed the trim to a letter change because witespace are not easy to see for test. To reproduce, just type a on the input field, the field contains aZ but the data still have a.
I don't want to use watchers because I need it in multiples inputs on different form, it would make like 15 watchers to write. The filter make it reusable. Hope you can help or give an other road to change the input value but keeping it reusable
I believe this is working correctly, just not the way you intended it to. I think this is happening in an order differently than you think.
Type in "z"
v-on:input triggers, which sets name = z
name changed, so Vue updates the value of the input box to name | trim
name | trim is equal to "zA", which displays in the input box
name itself doesn't change again until you type something
Therefore, in one case you're displaying name | trim and in another you're displaying name and wanting them to be the same.
For what it's worth, this used to work in Vue 1, but they changed it in Vue 2 with no real replacement (except computed properties).
If you're trying to just use trim, you can use the .trim modifier, like so:
<input type="text" v-model.trim="name" />
Or if you want more customization, you'll have to use a computed property:
<input type="text" v-model="trimmedName" />
computed: {
trimmedName: {
get: function() {
return this.name
},
set: function(value) {
this.name = value.trim() + "A"
}
}
}
Unfortunately, Vue doesn't support custom form modifiers for some reason, despite a lot of demand. Weigh in here if you think it's an important feature: https://github.com/vuejs/vue/issues/3666
I want to create components which have input which two-way bind to the local scope of the component.
Without a component, I would create a new Vue instance and then set my data to what I need. Then using v-model, bind an input to that data and it can be manipulated from the input.
However, converting the same code to a component, I cannot for the life of me get any input in a component to bind to its data. I have tried props, :data.sync, data attributes but no matter what I have tried, the input within a component does nothing.
I have created a JSFiddle to illustrate this:
https://fiddle.jshell.net/f0pdmLhy/2/
What I would like to happen is the input in the component to two way bind to the err variable, just like the non component version underneath.
How would I accomplish this?
I basically want to create components that I can instansiate with ajax data and then populate the inputs. The inputs could then update the data and I can use a save method to send the data to the server. Can this even be done using components?
So there are a couple of things:
The external resource you were using was somehow faulty. I've used
jsfiddle default Vue instance and it works fine.
When you declare a component, you should not define the data as an object, but as a function returning an object. Read here: https://vuejs.org/guide/components.html#Component-Option-Caveats
A working example here: https://fiddle.jshell.net/by4csn1b/1/
Yes, with components, the reactivity can be accomplished just like with an instance.
One catch with components, is that data must be a function that returns an object.
Also, to maintain the two way binding, use v-model in your input.
Vue.component('ii', {
template: '<span>{{err}}</span><input type="text" v-model="err"><hr>',
data: function () {
return {
err: 123
}
}
})
Fiddle: https://fiddle.jshell.net/f0pdmLhy/25/
I am creating a script that involved searching for a record and then updating the record. On the search screen, the user has the option of viewing advanced search options. To toggle showing or hiding advanced search is controlled by one button.
<a title="Searches" href="javascript:expandFilters()"><img border="0" align="absmiddle" alt="Advanced" src="****MASKED URL****"></a>
The only difference between the properties of the search button when it is showing or hiding the advanced search is the img src:
When advanced search is hidden the IMG src ends with "/Styles/_Images/advanced_button.jpg", when advanced search is visible, the IMG src ends with "/Styles/_Images/basic_button.png"
When I open the page, sometimes the Advanced search options are showing, sometimes they aren't. The value that I want to search on appears in the Advanced section, so for my script to work I have added an IF statement.
<input type="text" value="" maxlength="30" size="30" name="guiSystemID">
The IF statement looks for the fields that I need to enter data into, and if the field does not exist then that would indicate that the Advanced options are not visible I need to click on the button to expand the search option.
I created the following IF statement.
if (!driver.findElement(By.name("guiSystemID")).isDisplayed()) {
driver.findElement(By.cssSelector("img[alt='Advanced']")).click();
}
When I run the script and the Advanced search is expanded then the script runs successfully. However, when I run the script and the Advanced search is not expanded, the script fails, advising me that it could not find the object "guiSystemID". This is frustrating because if it can't find it then I want the script to continue, entering into the True path of the IF statement.
Has anyone got any suggestions about how else I could assess if the field is appearing without having the script fail because it can't find the field.
Thanks in advance
Simon
I might be late in answering this, but it might help someone else looking for the same.
I recently faced a similar problem while working with isDisplayed(). My code was something like this
if(driver.findElement(By.xpath(noRecordId)).isDisplayed() )
{
/**Do this*/
}
else
{
/**Do this*/
}
This code works pretty well when the element that isDisplayed is trying to find is present. But when the element is absent, it continues looking for that and hence throws an exception "NosuchElementFound". So there was no way that I could test the else part.
I figured out a way to work with this(Surround the {if, else} with try and catch block, say something like this.
public void deleteSubVar() throws Exception
{
try
{
if(driver.findElement(By.xpath(noRecordId)).isDisplayed() )
{
/**when the element is found do this*/
}
}
catch(Exception e)
{
/**include the else part here*/
}
}
Hope this helps :)
I've had mixed results with .isDisplayed() in the past. Since there are various methods to hide an element on the DOM, I think it boils down to a flexibility issue with isDisplayed(). I tend to come up with my own solutions to this. I'll share a couple things I do, then make a recommendation for your scenario.
Unless I have something very specific, I tend to use a wrapper method that performs a number of checks for visibility. Here's the concept, I'll leave the actual implementation approach to you. For general examples here, just assume "locator" is your chosen method of location (CSS, XPath, Name, ID, etc).
The first, and easiest check to make is to see if the element is even present on the DOM. If it's not present, it certainly isn't visible.
boolean isPresent = driver.findElements(locator).size() > 0;
Then, if that returns true, I'll check the dimensions of the element:
Dimension d = driver.findElement(locator).getSize();
boolean isVisible = (d.getHeight() > 0 && d.getWidth() > 0);
Now, dimensions, at times, can return a false positive if the element does in fact have height and width greater than zero, but, for example, another element covers the target element, making it appear hidden on the page (at least, I've encountered this a few times in the past). So, as a final check (if the dimension check returns true), I look at the style attribute of the element (if one has been defined) and set the value of a boolean accordingly:
String elementStyle = driver.findElement(locator).getAttribute("style");
boolean isVisible = !(elementStyle.equals("display: none;") || elementStyle.equals("visibility: hidden;"));
These work for a majority of element visibility scenarios I encounter, but there are times where your front end dev does something different that needs to be handled on it's own.
An easy scenario is when there's a CSS class that defines element visibility. It could be named anything, so let's assume "hidden" to be what we need to look for. In this case, a simple check of the 'class' attribute should yield suitable results (if any of the above approaches fail to do so):
boolean isHidden = driver.findElement(locator).getAttribute("class").contains("hidden");
Now, for your particular situation, based on the information you've given above, I'd recommend setting a boolean value based on evaluation of the "src" attribute. This would be a similar approach to the CSS class check just above, but used in a slightly different context, since we know exactly what attribute changes between the two states. Note that this would only work in this fashion if there are two states of the element (Advanced and Basic, as you've noted). If there are more states, I'd look into setting an enum value or something of the like. So, assuming the element represents either Advanced or Basic:
boolean isAdvanced = driver.findElement(locator).getAttribute("src").contains("advanced_button.jpg");
From any of these approaches, once you have your boolean value, you can begin your if/then logic accordingly.
My apologies for being long winded with this, but hopefully it helps get you on the right path.
Use of Try Catch defies the very purpose of isdisplayed() used as If condition, one can write below code without using "if"
try{
driver.findElement(By.xpath(noRecordId)).isDisplayed();
//Put then statements here
}
Catch(Exception e)
{//put else statement here.}
I have a Dojo UI widget that has a widget embedded within it. I need to pass an object to this embedded widget for it to set itself up correctly, but I'm not sure how to do it.
I have been templating in the embedded widget in the template for the wrapper widget, for example:
...<div class="thing"
data-dojo-type="mycompany.widgets.ComplexEmbeddedWidget"
data-dojo-props="stuff: '${stuff}'"></div>...
but this doesn't seem to work, I guess the data is passed as a string maybe?
I'm pulling out this data by setting it to a property in the embedded widget and then referencing it in my postMixInProperties function.
Doubtless this is the wrong approach, what should I be doing to set up an embedded widget such as this?
I think if you are going to use this approach, you want to convert the javascript object json before it is passed to the templated embedded widget.
You can easily do this by requiring 'dojo/json' and doing
this.stuff=jsonModule.stringify(this.stuffAsObject);
As you have already discovered, if you are setting more complex properties, programmatic instantiation is probably the way to go.
If your mycompany.widgets.ComplexEmbeddedWidget is desperate to have the object 'stuff' set allready once it is initialized (in constructor), then im not sure this approach will do, however a simple fix could be removing the ' quotes around ${stuff}?
What happens is basically that you derive the widget with dijit/_TemplatedMixin. This in turn, during buildRendering, calls _stringRepl on 'this' (the widget). I am not completely certain of the flow, since youre working with WidgetsInTemplate..
lets as example, set a widgets attribute to an array via markup:
<div
data-dojo-type="dijit.form.Select"
data-dojo-props="options:[ 'val1', 'val2']">
</div>
As you see, no quotes around the value - or it will render as a string. Lets then change your ComplexEmbedded template to
dojo.declare("exampleName", [_WidgetsInTemplateMixin, _TemplatedMixin], {
templateString: '<div class="outerWidgetDomNode">
...
<div class="thing"
data-dojo-type="mycompany.widgets.ComplexEmbeddedWidget"
data-dojo-props="stuff: ${stuff}"></div>
...
'
});
To instantiate the ComplexEmbeddedWidget.stuff with an object, this needs to be a string. _Templated uses dojo.string.substitute, which probably would fail if given deep nested object.
Markup example:
<div data-dojo-type="exampleName" data-dojo-props="stuff: '{ json:\'Representation\', as:\'String\'}'"></div>
Or via programmatic
var myObj = { obj:'Representation', as:'Object' };
var anExampleName = new exampleName({
stuff: dojo.toJson(myObj) // stringify here
}, 'exampleNode');
Lets know how goes, ive been wanting to look into the presendence of flow with this embedding widgets into template stuff for a while :)
You can programmatically insert widgets. This seems to be be the way to go if the inserted widget requires JavaScript objects to be passed to it.