I am going to write tests in cypress. The component which I going to test is below mentioned.
import Layout from "../../components/layout"
import ActionAreaCard from '../../components/card'
import Grid from '#mui/material/Grid';
export default function HomePage() {
return (
<Layout id='layout'>
<Grid container spacing={2}>
<Grid item xs={6}>
<ActionAreaCard
id='action-card-submit'
title='Submit Damage Report'
href="/view/data-submission"
imagePath='/assets/images/car-damage.jpg'
/>
</Grid>
<Grid item xs={6}>
<ActionAreaCard
id='action-card-view'
title='View Damage Reports'
href="/view/view-reports"
imagePath='/assets/images/damage-report.jpg' />
</Grid>
</Grid>
</Layout>
)
}
I need to test navigation after clicking 'ActionAreaCard'. I have done it so far as follows.
it('should navigate to the data submissions page', () => {
// Start from the index page
cy.visit('http://localhost:3000/')
// Find a button with an href attribute containing "/view/data-submission" and click it
cy.get('a[href*="/view/data-submission"]').click()
})
But I need to find the component by 'id'.
Why not use the id.
cy.get('#action-card-submit').click()
You can directly use the text to identify and click the element as well.
cy.contains('Submit Damage Report').click()
cy.contains('View Damage Reports').click()
You have a couple of options when searching by id
use the attribute syntax cy.get('id=["action-card-submit"]')
use shorthand cy.get('#action-card-submit'), but this can fail if special characters are in the id
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'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.
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.
Can anyone help me? I can't load div tag partially!
The flow, I run is like that:
When I click submit btn, it call imporUrl and go to action "import" and then call the importAction in ActionBean.
After that set 'AAA' and 'BBB' to the List.
Finally it is all working , but it reload the whole form, not only div, I want to reload only div partially. Please help thank !
<s:url id="importUrl" action="import">
<s:param name="id" value="%{id}" />
</s:url>
<sx:submit href="%{importUrl}" value="Import" targets="selectedDiv" />
String importAction(){
List.add("AAA");
List.add("BBB");
return SUCCESS;
}
<s:div id="selectedDiv">
<s:iterator value="List">
<s:property/>
</s:iterator>
</s:div>
I think you directly load the div on same page.But you have to do like this.
<sx:submit href="%{importUrl}" value="Import" targets="selectedDiv"
onclick="javascript:show_details();return false;"/>
And put javascript
<script>
function show_details() {
dojo.event.topic.publish("show_detail");
}
</script>
And make ur div tag like :
<sx:div id="details" listenTopics="show_detail" formId="frm_demo" showLoadingText="">
</sx:div>