I have an Ember object that has as attribute a boolean field that I want to validate with ember-changeset-validations.
It is the typical "Agree to terms" checkbox.
Here is the hbs code:
{{one-way-checkbox changeset.agree_terms
class="form-control"
update=(action (mut changeset.agree_terms))}}
{{#each changeset.error.agree_terms.validation as |error|}}
<span class="text-danger help-block m-l-3">{{t (concat 'bookings.error.' error)}}</span>
{{/each}}
I have a validations file, where the particular validation for this member of changeset is:
agree_terms: validateFormat({
regex: /^(true)$/,
message: 'You need to agree on Terms!'
})
Thing is, for some reason this never validates to TRUE correctly, I always get the error message...any ideas what I'm doing wrong here?
This is a bit tricky; but I figured that out. ember-change-set-validations do make use of ember-validators underneath. Since; you are using validateFormat; the following code is being run at the end. If you look at the link I have provided; there is a check !canInvoke(value, 'match') causes you the problem. Since the checked value of a checkbox is a boolean and you cannot invoke match on booleans you always end up having an invalid validation.
What can you do? Well; I am not an expert at ember-change-set-validations and ember-validators but it is pretty easy to write a custom validator. This is what I did in the following twiddle. It seems to be working pretty fine.
What I understood is; it is not a good idea to use boolean values with format type validator (it clearly does not work); I only wished it was documented. I hope this helps you.
Related
Tried cy.get(#Username) , doesn't work- cypress says it can't find it. could it be related to uppercase letter?
Installed Xpath plugin and used this
cy.xpath('//input[#id="Username"]') but it didn't work.
<input type="email" class="form-control" autocomplete="off" data-gd="identity-login-local-form-username" autofocus="" data-val="true" data-val-required="The Username field is required." id="Username" name="Username" value="">
Please before giving -1 , please explain what I need to improve. Thanks!
After downloading xpath plugin, did you add require('cypress-xpath') in your project's cypress/support/index.js file?
According to your example, code below should find the Username
cy.xpath('//input[#id="Username"]')
cy.get('#Username')
The capital letter may be causing the problem. Usually ids have a small letter.
Try using the data-gd attribute instead.
cy.get('[data-gy="identity-login-local-form-username"]')
If that does not work, you may have some shadow DOM before the <input> that blocks the search, in which case you can search inside the shadow like this
it('tests the input', {includeShadowDom:true}, () => {
cy.get('[data-gy="identity-login-local-form-username"]')
})
I tested with a capital letter cy.get('#Username') and cy.xpath('//input[#id="Username"]') - both worked for me, so likely there is shadow DOM or an <iframe> on your page.
Is it possible that the page has a default namespace? If the page is served as XHTML, it may have a default XML namespace, in which case the input's name is not simply input.
If that is the problem, then you could declare the http://www.w3.org/1999/xhtml namespace and associate it with a prefix, e.g. xhtml (I don't know cypress so not sure how you'd do that), and then query for //xhtml:input[#id="Username"]. An alternative is to query for an element whose local name is input in any namespace at all, e.g. //*[local-name()='input'][#id="Username"]
In case your username field is under a shadow DOM which means other fields will also be under the shadow Dom, it would be advisable to write includeShadowDom: true in your cypress config file to avoid repetition(cypress.json if cypress version < 10; cypress.config.js if cypress version > 10), then directly use the command:
cy.get('#Username').type('username-text')
In case your username field is under an iframe, you can get the cypress iframe plugin
To install npm install -D cypress-iframe
Go to cypress/support/commands.js file, add the following:
import 'cypress-iframe';
// or
require('cypress-iframe');
In your test write:
cy.iframe('#my-frame')
.find('#Username')
.should('be.visible')
.type('username-text')
I can also confirm the way you are selecting the Username input element is correct.
If you suspect shadow DOM is interfering with your test, the best way to debug IMO is to
inspect your DOM around the <input>
look for a parent element that has #shadow-root below it (in bold)
change the test to include this parent
add the .shadow() command after the parent to break through the barrier
cy.get('parent-with-shadow-root')
.shadow()
.find('#Username')
This debugs and confirms your issue. Everything else, e.g setting global config etc can be done after you know what you have to deal with.
After I tried suggestions and people's confirmation that my xpath was correct, I shifted my focus on the error I got while Cypress was trying to find the element. The error I got was uncaught exception.https://stackoverflow.com/questions/53845493/cypress-uncaught-assertion-error-despite-cy-onuncaughtexception
This error occurs when a module fails to load due to some exception. The error message above should provide additional context. A common reason why the module fails to load is that you've forgotten to include the file with the defined module or that the file couldn't be loaded.
Using ngRoute In AngularJS 1.2.0 and later, ngRoute has been moved to its own module. If you are getting this error after upgrading to 1.2.x or later, be sure that you've installed ngRoute.
For example if user dont fill this field and press "continue" button, this error message will pop up.
I wonder is there a way with Cypress that I check that error message was displayed?
Kind regards
You can make this assert : cy.get('input:invalid').should('have.length', 1)
See https://github.com/cypress-io/cypress-documentation/pull/1919/files how to assert the validation message
I know this is an older question but here is another solution.
cy.get(`[data-testid="XXXX"]`)
.invoke('prop', 'validationMessage')
.should((text: string) => {
expect(text).to.contain(YYYY);
});
Using the above code here is what happens:
You grab the input / textarea element using cy.get Note: it is recommended to use a data-testid or obtain the element by something less brittle so the test doesn't fail if the text changes etc.
Using the invoke method, you can check validationMessage against prop then then, obtain the inner text and use expect to check if it's valid. This is very handy if you use custom validation messages.
I am building my first ever Wicket project and I find that the amount of properties files in my code base is growing rapidly. Ideally I would like to contain all internationalization in a single file for each language/region. Just so I can find things easily.
I found out that my application properties file could be ideal for this. My application properties file is called ApiAdminApplication.properties. Now I am trying to add my translatables to this file, without making a mess of things.
According to the javadoc of ComponentStringResourceLoader this should be possible. Apparently the lookup order is as follows:
page1.properties => form1.input1.Required
page1.properties => Required
form1.properties => input1.Required
form1.properties => Required
input1.properties => Required
myApplication.properties => page1.form1.input1.Required
myApplication.properties => Required
The second to last line contains the behavior I am looking for, but cannot get to work.
I have a page called CustomerEditPage which in turn contains a form with id customerForm
So here is what I am adding to ApiAdminApplication.properties, and what I think should work according to the snippet above:
CustomerEditPage.customerForm.name=Customer name
Sadly, this does not work. I can however get this to work by leaving out the page name, and starting with customerForm, but that is not what I want. I want per page internationalization contained in a single file.
Can anyone give me some pointers on this? Thanks.
I think the javadoc of ComponentStringResourceLoader is just wrong and should be fixed.
To accomplish what you need you will need to extend ClassStringResourceLoader and override getResourcePath(). In your impl you will have to prepend the result with the name of the page that owns the Component passed as a parameter.
Then you will need to register your loader at ApiAdminApplication#init() method with:
getResourceSettings().getStringResourceLoaders().add(new MyClassStringResourceLoader(ApiAdminApplication.class))
see the defaults.
Please file a bug report at https://issues.apache.org/jira/projects/WICKET/issues so that the javadoc issue is fixed (or someone else who knows better than me how to accomplish this can explain us).
After reporting the bug I ended up doing what martin-g suggested, and extended ClassStringResourceLoader. For your convenience, here is what I did:
public class PrefixedStringResourceLoader extends ClassStringResourceLoader {
public PrefixedStringResourceLoader(Class<?> clazz) {
super(clazz);
}
protected String getResourcePath(final Component component) {
final Class<? extends Page> parentClass = component.getPage().getClass();
final String resPath = super.getResourcePath(component);
if (!resPath.isEmpty())
return String.format("%s.%s", parentClass.getSimpleName(), resPath);
return parentClass.getSimpleName();
}
}
There is a small gotcha to this. It always requires you to work with complete resource paths. This can be a bit tricky, I had some problems with the snippet below:
<input type="submit" wicket:id="save" wicket:message="value:save" />
This evaluated to CustomerEditPage.customerForm.save.save, where I expected it to become: CustomerEditPage.customerForm.save. This is not the case because the wicket:message actually becomes a child of the save form input.
I ended up going for:
<input type="submit" wicket:id="save" wicket:message="value:caption" />
Which evaluates to CustomerEditPage.customerForm.save.caption, which I find somewhat more readable. Of course, you could roll your own more advanced resource loader, but this one is good enough for me.
I'm using Aurelia-validation, and I've created a validation-controller that can on demand run validate( object: myObj, propertyName: "myProp", rules : MyRules)
Documentation:
https://aurelia.io/docs/plugins/validation#validation-controller
For some reason I get, what I can only describe as a conflict, in my validation result object. The only rule I validate on is "required()", and it returns true. However, the result object as a whole returns false. Why is that?
Take a look (using my real data):
Take a close look to your "valid" type. One is Boolean and the other is a String! Check if you can take control of that!
I suppose it has something to do with chrome dev tools, because it seem to happen only when I inspect it while it's running, and not when I console.log() the values and let it finish, Then they correspond to each other. Oh well!
I'm trying to write a login form with ember.js/emblem.js. Everything works, unless I try I18ning the placeholders like so:
Em.TextField valueBinding="view.username" placeholder="#{t 'users.attributes.username}"
Em.TextField valueBinding="view.password" placeholder="#{t 'users.attributes.password'}" type="password"
I get the same response if I try:
= input value=view.username placeholder="#{t 'users.attributes.username}"
= input value=view.password placeholder="#{t 'users.attributes.password'}" type="password"
In both cases, I get this error message:
Pre compilation failed for: form
. . . .
Compiler said: Error: Emblem syntax error, line 2: Expected BeginStatement or DEDENT but "\uEFEF" found. Em.TextField valueBinding="view.username" placeholder="#{t 'users.attributes.username}"
I assume this is happening because I'm trying to compile something from within a statement that's already being compiled. In evidence of this, I don't get the runtime error if I change the code to:
input value=view.username placeholder="#{t 'users.attributes.username}"
input value=view.password placeholder="#{t 'users.attributes.password'}" type="password"
But the downside is that the value bindings no longer work, which still leaves the form nonoperational. Is there another way of approaching this problem that I haven't considered?
As Alexander pointed out, this is a limitation of Ember and Handlebars. The workaround that I've been using is to make the placeholder refer to a controller property which then returns the translated string. For example:
{{input
type="text"
value=controller.filterText
placeholder=controller.filterPlaceholder }}
And then in the controller:
filterPlaceholder: function () {
return i18n.t('players.filter');
}.property('model.name'),
This is beyond the scope of what Emblem can do because it's an inherent limitation of Ember+Handlebars. What you're trying to do is use the input helper and, inside the helper invocation, use another helper t to get the value for the placeholder option. You can't (presently) do this in Ember, so Emblem's not going to be able to do that for you.
edit: you should try the Ember i18n library. I haven't used it yet, but it seems like what you'll want to do is to mix in the TranslateableAttributes mixin into Ember.View, like:
Ember.View.reopen(Em.I18n.TranslateableAttributes)
and then in your emblem template you can do something like
= input placeholderTranslation="button.add_user.title"
I noticed a typo in the first placeholder="#{t 'users.attributes.username}". It's missing the closing single quote.
The Emblem syntax error, line 2: Expected BeginStatement or DEDENT but "\uEFEF" found. can be misleading. I've found that the error is somewhere else entirely to what was being reported. For instance, linkTo without a | for plain text reports a similar error.
You should use the views to format things and drop them into the template. Controllers are not meant to know what happens at the template.
You would also want that to be a property, so i18n will work just once and then you can use the cache version.
Templete:
{{input value=view.username placeholder=view.usernamePlaceholder}}
{{input value=view.password placeholder=view.passwordPlaceholder type="password"}}
View:
export default Ember.View.extend({
usernamePlaceholder: function() {
return Ember.I18n.t('users.attributes.username');
}.property(),
passwordPlaceholder: function() {
return Ember.I18n.t('users.attributes.password');
}.property()
});