I have a simple question which I'm hoping someone will nail in not time.
I'm just running through some Acceptance tests with Codeception and I'm attempting to click a submit button of type image:
<div id="payment">
<input name="submit" type="image" value="" alt="Review your order" src="/images/buttons/pay-securely.png">
</div>
Simply using $I->click() results in a failing test:
$I->click('#payment > input[name=submit]');
Any ideas?
I too have run into trouble with unambiguously specifying what I want to be clicked. Here are two workarounds I have found:
Use a CSS class, or better, an ID, as a selector:
$I->click(['id'=>'myButtonID']);
Use JavaScript / JQuery to trigger the click:
$I->executeJS("$('input[name=submit]').click();");
I prefer the former, because it is easier to do, but I use the latter for cases e.g. where I don't have much control over the code being tested.
I've been in touch with Codeception directly with no reply on the matter. With no way of testing this (and the obvious design flaw in using an image submit button - I mean, are we in the 90s or what?!) I've now changed the input to a proper submit button and CSS that bad boy!
Thought I'd answer my own question and leave it here in the (hopefully unlikely) event that another poor soul has inherited shoddy work.
Related
I just upgraded my Ember addon from version 3.0 to version 3.8, and I get this warning now:
Interaction added to non-interactive element no-invalid-interactive
An example of this is something like:
<div class="some-class" onclick={{action "selectDate" "today"}}>
<div> more content </div>
</div>
When you click the action, it should take you to a new route.
What are my options to fix it the right way, so that it is accessible?
The solution here depends on what the action should do.
Refactoring an action that triggers a transition
Since this action takes the user to a new route, it should be a link element, <a> and not a button. This gives assistive technology/screen reader users a clue that interacting will take them somewhere new in the app.
This can be refactored to a link-to in Ember, which will wrap the content in <a>:
{{#link-to someRoute}}
<div> more content </div>
{{/link-to}}
someRoute could be a computed property if it needs to be informed by multiple pieces of data. Otherwise, it could be a string.
Refactoring an interaction that keeps you on the same page
In cases where the action does not take you to a different page, it may be appropriate to use a <button>. An example of this would be a button that expands a collapsible container or toggles a setting. However, the w3 validator tells us that you can't put divs inside of buttons. You can use Phrasing Content that is non-interactive, such as <span>.
<button class="some-class" onclick={{action "toggleSomething"}}>
<span> more content </span>
</button>
Learn More
To catch more accessibility problems in an app, try out ember-a11y-testing which audits your app for problems and gives you a report of how to fix them.
This question was answered as part of "May I Ask a Question" Season 2 Episode 3. If you would like to see us discuss this answer in full you can check out the video here: https://youtu.be/nQsG1zjl8H4
I'm new in Ember.
As I know, the Ember is consist of [.js/.hbs(handlebars)].
when I search the component in the google, I got 2 kinds of source.
1st is like 'HTML'
<input type="checkbox" class="btn btn-success active" />CheckBox01<br />
and 2nd is like more 'Ember'.
{{input type="checkbox" checked=true}}CheckBox02
but I think these are same.. so I don't select what I use.
Frankly I want to follow 2nd style, but when I try it('https://www.npmjs.com/package/ember-cli-toggle'), I got failed.
so I just use 1st style these days. and It is more easy to me because I used to handle HTML.
Anyway, the question is what are the different between Ember Style and HTML Style.
Thanks.
Value binding is the main difference. You can as well do dynamic value binding and since they are handlebars, you get the sophistication of many more helpers.
Please read Ember documentation here, if you have not so.
https://guides.emberjs.com/v2.10.0/templates/input-helpers/
Thanks
I have an Ember.js component called table-viewer. It has a toolbar which is a div with buttons. I have another ember component called report-viewer. It contains a variety of things including a table-viewer.
I want to have report-viewer add some buttons to the toolbar. What I have works but breaks the Ember connection with the element so I can't change the button text after moving it. Is there a better way to do this?
I have a lot more components than I just said, so defining the complete toolbar in table-viewer and setting flags for what to show would be annoying to manage.
Below is what I currently have in table-viewer so that any component can add additional buttons to the toolbar:
Ember.$('#toolbar').append(Ember.$('#additionalToolbar').html());
Ember.$('#additionalToolbar').remove();
I figured it out! The following works without breaking Ember connections:
Ember.$('#additionalToolbar > button').appendTo(Ember.$('#toolbar'));
It's hard to say what the best approach is without seeing the relevant code. That said, my first suggestion would be a simple yield:
report-viewer/template.hbs
{{#table-viewer}}
<button>
Some button from the report viewer...
</button>
{{/table-viewer}}
table-viewer/template.hbs
<nav>
<button>
Button one
</button>
<button>
Button two
</button>
{{yield}}
</nav>
<table>
...
</table>
If you need more that one yield, you can achieve multiple named yields with this approach.
I'd also suggest splitting the toolbar out into its own component if you haven't already. It feels wrong to put a toolbar button as the block contents of the table-viewer component as I've done above.
I have a page that culminates in three buttons: a checkout button, a change-qty button, and a cancel button:
<button name="checkout" onclick="location.href='/checkout/'" >checkout </button>
<button name="change" onclick="location.href='/change-qty/'" >change qty</button>
<button name="cancel" onclick="location.href='/cancel-order/'">cancel </button>
I'm doing these redirects in this fashion, instead of using a form, because I want each button to redirect to a different Django view. The code above works fine, but isn't RESTful: "checkout" and "cancel-order" change the system's state, and so I'd like these to be POSTs.
I could achieve this by having the "checkout" and "cancel" views auto-post special-purpose forms to two new views that take POSTs. But that's so much screwing around and complexity-adding. I could also add some jQuery to the page, and have each of those buttons trigger a POST on a hidden form pointed toward the appropriate views, and achieve the same thing. But that, too, is an awful lot of extra code for something that seems pretty simple.
Really, if there was something like a 'method="post"' on a button, that would be perfect. But there isn't. Is there some elegant pattern for achieving what I want? Or am I doing something very stupid and I just don't know it?
Use jquery-ujs, and add "data-" attributes to your links:
change qty
etc. the unobtrusive JavaScript will inject the correct code into your link/button/whatever.
Quick question.
I found handling site navigation (not the routing aprt, just a simple nav bar) with ember.js a little complex.
So I thought I will just code this aprt with jQuery, push history into location url and hope that Ember.js will detect this change and the router take action.
Scenario :
1) ember.js will use a DIV for rootElement and the navbar is declared in the body.
<body>
<div id="nav">
<ul><li><a>Item1</a></li></ul>
</div>
<div id="rootEmberApp"></div>
</body>
2) then a jQuery script will be bound to the links (item1) of the nav div and push changes to the URL but preventing default action without stopping the propgation (I didn't want to reload all the scripts). Something like :
$(document).ready(function(){
$("#navigation a").click(function(event){
App.router.location.setURL('/ember/listItems');
event.preventDefault();
});
3) I was hoping that Ember.js will fire at this time and take action.
I didn't succeed.
Is it silly ? Any idea how to do that ?
Thanks a lot.
Update 1 : thanks for the answer. Yes you're right. I was just not fully pleased with the solutions I tried or found about a nav bar. I will look again the todoMVC example and its use of the CollectionView. From a beginner point of view, the CollectionView seems a good way to describe (declare) the View and at the same times it's not easy to read (it's easier when the view is written with pure html and the js is bound to it ala jQuery).
Thanks again
This will probably not be a satisfactory answer, but... this is not the Ember Way. A core concept of Ember routing is that once the app loads, the source of truth is in Javascript. As you move through an Ember app, the router transitions from state to state and the URL is updated as a side effect. You're trying to turn that on it's head. It's not impossible -- you can definitely get what you're trying to do to work. However, I wanted you to know that it goes against the intention the designers had in mind.