How to select a radio button in and a particular select option with ember integration tests? I know how to use the click one and the fillIn for inputs.
http://guides.emberjs.com/v1.10.0/testing/test-helpers/
Radio button:
click('css selector');
For the select say you have:
<select>
<option>red pill</option>
<option>blue pill</option>
</select>
In your test:
fillIn('css selector', 'red pill');
Related
Trying to build a D.R.Y. list of vocabulary terms with React Bootstrap (v.2.2.3) using Bootstrap 5.1.
I bring in my data:
import vocData from '../data/vocData'
My component:
const VocList = () => {
const [show, setShow] = useState(false)
const handleClose = () => setShow(false)
return (
<ul className="list-inline">
{Object.keys(vocData).map((item, key) => (
<React.Fragment key={key}>
<li className="list-inline-item voc-item">
<Button>
<small>{vocData[item].title}</small>
</Button>
</li>
<Modal
show={show}
onHide={handleClose}
backdrop="static"
keyboard={false}
aria-labelledby={`contained-modal-title-${vocData[item].href}`}
centered
>
<Modal.Header closeButton>
<Modal.Title id={`contained-modal-title-${vocData[item].href}`}>
{vocData[item].title}
</Modal.Title>
</Modal.Header>
<Modal.Body>{vocData[item].content}</Modal.Body>
</Modal>
</React.Fragment>
))}
</ul>
)
}
I can see my list of vocabulary terms is working but my modal is not appearing when I click the button. I've tried to research and read through:
React-Bootstrap Multiple Modal
React-bootstrap Modal component opens/closes all modals when I map through a list
How do I get my react app to display object information in my bootstrap modal when they click on a list item?
How to use React-Bootstrap modals inside a map array method to display AJAX data on button click in React?
how to show react bootstrap modal inside the function
but I'm unable to find an answer.
How can I dynamically setState and be able to render my modal for that vocabulary term in my list?
Try to use Modal only once and not render it many times. You can show only one Modal at time anyway. I have created a subcomponent for clarity.
There are many ways how to play with state. Here the initial state is null and hides the modal. When we click on button we set state with one vocData entry. This also toggles the visibility of Modal.
Finally, when we close its again, we set our state to null. In this way we use one state for two purposes - control vision and rendering of Modal and holding data for it.
Tell me please, how to handle onclick action by ID. For example, i’ve something in hbs template:
<button id="myButton" {{action "myAction"}} >OK</button>
it has CSS:
button {color: "red";}
How to do two things by onclick action:
1. Set property to clicked object (only to clicked), eg to set CSS colour “green”,
2. Get some property of clicked (eg CSS colour), and console log or alert.
Thanks in advance!
You can connect the action to the "onclick" event of the button like this
<button id="myButton" onclick={{action "myAction"}} >OK</button>
And then the first argument of the action will be the click event, from which you can take the target DOM element.
Check out this example twiddle:
https://ember-twiddle.com/1d14560e0e979dbbdddbfee57c84601c?openFiles=templates.application.hbs%2C
I have an accordion title that consists of the carat, some text, and a div with some other stuff. I want the accordion to only expand when the user clicks the carat or the text, but not the extra div. Clicking on the div will do something else entirely.
I noticed that in the base Semantic-UI, you can specify a CSS selector to trigger on, but that seems JQuery specific and not doable in the react version.
Is this possible?
<Accordion.Title
active={activeIndex === 0} index={0} onClick={this.handleClick}
>
<Icon name="dropdown" />
<span className="name">{data.name}</span>
<div>some extra junk - don't expand on this</div>
</Accordion.Title>
Your onClick event is attached to the Accordion.Title itself. That means when you click that component, your handleClick function will fire. If you want the handleClick function to fire when clicking the Icon then you need to move your handler function to that component instead.
<Icon
name='dropdown'
onClick={this.handleClick}
/>
I want to perform some action when the user has lost focus from the input fields.
The focus-out property works well for the input fields but has no effect on the select input.
{{view "select" class="form-control"
content=options
optionValuePath="content.id"
optionLabelPath="content.value"
selection= value
focus-out=submitAction}}
How can I get the focus out event for select inputs?
If I have a custom ember select (or any ember select) like:
App.SelectGender = Ember.Select.extend
content: ['Gender', 'Male', 'Female']
And I want to set attributes on the first option like:
<option value="false" disabled="disabled" selected="selected">Gender</option>
How can I go about doing that? Thank you in advance for the help.
Since understandably you wanted to add a prompt label for your Select component you can pass it as a property to Ember.Select like below.
{{view Ember.Select
content=sexArray
value=SelectedSex
prompt="Gender"
}}
Docs link for same http://emberjs.com/api/classes/Ember.Select.html#toc_supplying-a-prompt