I'm doing a test of an autocomplete component.
The problem is when I want to select an option from the dropdown, it shows me any option. When I did the test manually there are options but with cypress no. It worked and after no. I couldn't see the problem.
Does anyone know how to do it please?
(In cypress it didn't show any error)
Here the code of the autocomplete in js file
<Autocomplete
id={"name-label-" + label.customId}
options={options}
getOptionLabel={option => (option && option.name) ? option.name:''}
noOptionsText="No options"
renderInput={params => (
<TextField {...params} label="Select the name" fullWidth />
)}
data-cy="fichaSelectname"
onChange={(event, value) => handleOptionChange(event, value)}
value={option}
classes={classesAutocomplete}
/>
And here's the cypress code I used
cy.get('[data-cy=fichaSelectname]').click().type('{downarrow}').type('{enter}');
Did you try by selecting one element instead of just using the arrow buttons?
cy.get('[data-cy=fichaSelectname]').type('value{downarrow}{enter}');
Cypress did now show any stacktrace/error/info at all?
Well, first of all your code is wrong:
cy.get should be used like that: cy.get('[data-cy="fichaSelectname"]')
Try this.
Related
I am using Select from native-base and I'm having problem with trying to customize the selectable options from Select.Item.
react-native: 0.70.5,
native-base": "^3.4.25
<Select>
<Select.Item value="one" label="one" />
</Select>
where it will only render the label, which expects a string. I am not able to render any other component from Select.Item
what I'm trying to achieve looks a lot like the picture below:
Desired Select.Item
Edit: not a solution as it breaks the component value. You have to use leftIcon and rightIcon properties instead
You can use the label attribute to customize the item content.
Something like:
<Select>
<Select.Item
value="one"
label={
<Row>
<Icon as={MaterialCommunityIcons} name="information" />
<Text>one</Text>
</Row>
}
/>
</Select>
In my opinion, the attribute name is misleading. You can also use leftIcon and rightIcon properties on Select.Item. If you can't achieve the customization level you want with these, I'm afraid you will have to create your own Select component based on ActionSheet elements.
Note that this will not be web compatible, so if you need web support it won't be an option. I'm also not sure to which extent other components are supported within this item element.
In my form, I want toggle buttons. The following code is copied from react-bootstrap docs on toggle buttons. However, the radio-button circles are displaying when they should be hidden. How do I hide them?
import ButtonGroup from 'react-bootstrap/ButtonGroup'
import ToggleButton from 'react-bootstrap/ToggleButton
'
<ButtonGroup>
{radios.map((radio, idx) => (
<ToggleButton
key={idx}
id={`radio-${idx}`}
type="radio"
variant={idx % 2 ? 'outline-success' : 'outline-danger'}
name="radio"
value={radio.value}
checked={radioValue === radio.value}
onChange={(e) => setRadioValue(e.currentTarget.value)}
>
{radio.name}
</ToggleButton>
))}
</ButtonGroup>
Use the <ToggleButtonGroup /> component as the container. Set type to radio. Note that name is required when type is radio
See code below
<ToggleButtonGroup type="radio" name="radio">
{radios.map((radio, idx) => (
<ToggleButton
key={idx}
id={`radio-${idx}`}
variant={idx % 2 ? 'outline-success' : 'outline-danger'}
value={radio.value}
checked={radioValue === radio.value}
onChange={(e) => setRadioValue(e.currentTarget.value)}
>
{radio.name}
</ToggleButton>
))}
</ToggleButtonGroup>
The accepted answer didn't work for me, but adding this to my CSS did the trick:
[type='radio'] {
display: none;
}
h/t to this answerer
The issue appears to occur temporarily when upgrading to new react-bootstrap (v1=>v2): https://github.com/react-bootstrap/react-bootstrap/issues/5782
Some steps that can solve the issue:
Restart your react app
Clear cache (Google Chrome right click on refresh gives this option)
Restart docker container if applicable
Run npm list react-bootstrap to see if version is correct
Run npm ci for clean slate with your packages
If no combination of these works, file a separate issue or reply to issue linked above.
Alternative solution (not recommended)
.btn-group input[type='radio'] {
display: none;
}
The issue is actually related to failing to include the stylesheet. I had this problem and the other answers didnt help but including the stylesheet fixed it for me
import 'bootstrap/dist/css/bootstrap.min.css';
React-Bootstrap CSS
I am working with react-admin and in the functionality.. I need to display the original picture in an ImageField but if i choose to drag and drop a new picture then i need to update that ImageField with the new picture. I can't seem to see any examples of what would seem to be a pretty common use case for Image related Edit functionality..
<ImageInput source="src" label="Product Image" accept="image/*" >
<ImageField source="imageUrl"/>
</ImageInput>
Seems to be similar to this
question
but obviously i am new to this and after some frigging with it, i'm no closer to getting it to go... The behaviour i would have expected i guess was that because imageUrl does exist on the form, that the ImageField above would already be populated with the existing pic when the form opened but it's not because it's inside the .. If anyone could point me in the right direction it would be a big help
I have done it like this:
<ImageInput source="src" label="Billede" accept="image/*" mulitple={false}>
<ImageField source="thumbnail" title="title" />
</ImageInput>
<FormDataConsumer>
{({formData, dispatch, ...rest}) => {
if (!formData.src) {
return (
<div>
<Labeled label="Original image">
<ImageField source="thumbnail" {...rest}/>
</Labeled>
</div>
);
}
}}
</FormDataConsumer>
This will display the original image, as long as no new image is selected.
When a new image is selected, this will be displayed, and the original will be hidden.
I have problem with selecting value from combobox in Cypress.
It allways writes me that:
CypressError: cy.select() can only be called on a <select>. Your subject is a: <span unselectable="on" class="k-select" aria-label="select" role="button" tabindex="-1" aria-controls="fabric_listbox">...</span>
Types text into numeric inputs
My code looks like this:
describe('KendoUI', () => {
it('types text into numeric inputs', () => {
cy.visit('https://demos.telerik.com/kendo-ui/combobox/index');
cy.get(':nth-child(4) > .k-dropdown-wrap > .k-select').select('Polyester')
})
})
Can you please give me some help?
You could try it on this page: https://demos.telerik.com/kendo-ui/combobox/index
Thank you.
I resolved it.
Make cy.click() on the element
Found with cy.contains() text what is in the box and then click on it (cy.contains('text').click)
cy.select() will only work for native HTML <select> elements. In your case you should simply cy.click() on the element you want to select. This is the way for all custom plugins which mimic select behaviour.
cy.get('kendo-popup').contains('Foobar').click({force:true})
You might need to force click as the element might not be visible
cy.get('combobox').contains('value').click()
I found that Cypress scrolling the viewport to the chosen option caused the dropdown to close. This command tells Cypress to wait for the dropdown to become non-disabled, scroll to the dropdown, click on the dropdown, wait for the dropdown to finish animating, then click on the item without further scrolling.
Tested with Kendo UI v2016.1.226
Declaration in commands.js:
Cypress.Commands.add('selectKendoDropdownItem', (dropdownName, item) => {
cy.get(`span[aria-disabled="false"][aria-owns="${dropdownName}_listbox"]`)
.click()
.get(`div#${dropdownName}-list li.k-item`)
.contains(item)
.click({ waitForAnimations: true, scrollBehavior: false, force: true });
});
Use in a spec:
cy.selectKendoDropdownItem('dropdownElementId', 'Text of option to select');
I have a problem here which i am working quite a while but do not have any ideas left for a solution. I will try to make it short:
I use the eColumns extension for the admin and the view module in yii. I added a combobox to select views which are saved in the database so that users can build their own selection of select columns for each table, however:
In eColumns i added a button to delete an already created selection and an input field to give the selection a name
CHtml::button('', array('type' => 'submit','name' => 'btn_delete','value' => 'Ansicht löschen', 'onclick' => '$("#'.$this->getId().'").dialog("close");', 'style' => 'align: left', 'confirm'=>'Sind sie sicher das sie diese Ansicht löschen möchten?'));
CHtml::textField('input_name', substr($this->selectedView,strpos($this->selectedView,"##")+2), array('size'=>30,'maxlength'=>200));
If i click the button in the view-module everything works as expected. $_POST is filled with "input_name" and "btn_delete". However if i this same code included in the admin-module only input_name is filled - btn_delete is simply not set if i click the button.
Anybody can i give me any hint what i can check?
Thanks in advance! :)
If you are using jQuery serialize() to collect form elements in your admin-module, jQuery serialize() will not serialize any submit button value.
See also serialize example, hope this will help. :)
=== links to jsfiddle must be accompanied by code.. ===
html
<form>
<input type="text" name="text" value="text-value">
<input type="submit" name="submit-btn" value="button-value">
</form>
<span name="result-serialize"></span>
jQuery
var serializeString = $("form").serialize();
$("span[name=result-serialize]").text(serializeString);