I am using react-chartjs-2 to render charts and on clicking the active point it gets redirected to some other page.
<Line
id={'chartid'}
data={data}
options={options}
getElementAtEvent={dataset => {
// redirects to some other page
}}
/>
Sample chart
We are doing automation testing and need to check if click is working or not.
Is there any option to add id/class to active elements inside the rendered canvas. Can anyone help?
AFAIK every element has got datasetIndex and index properties related to the drawn dataset.
Emitting the click event on the canvas (a specific point) you could check that dataset index and index are what you are expecting
Related
I am using react bootstrap table and decided to customize a cell. My changes, however, do not render until I click into the cell. This is shown in the image below:
Button doesn't render
Button now renders now that I clicked into the cell
My goal is to have the button render automatically in the cell.
I defined it as this:
<TableHeaderColumn dataField='knowledgeReference.0.docUrl'
width="200px"
hiddenOnInsert
dataFormat={urlFormatter}
tdStyle={{whiteSpace: 'normal'}}
customEditor={ { getElement: createUrlEditor, customEditorParameters: {
}} }>
Resource URL</TableHeaderColumn>
Has anyone seen an issue like this before? How did you resolve it?
Resolved the issue by using dataFormat instead of customEditor. The bootstrap table doc doesn't clarify the distinction adequately.
<TableHeaderColumn dataField='knowledgeReference'
width="200px"
editable={false}
hiddenOnInsert
dataFormat={urlFormatter}
tdStyle={{whiteSpace: 'normal'}}
dataFormat={createUrlEditor}
>
References</TableHeaderColumn>
I am trying to select the radio button for the freelancer the code is as follows (when we inspect the element on browser)
<label for="registration_payer_type_business"><input checked="checked" id="registration_payer_type_business" name="registration[payer_type]" type="radio" value="business">
Company
</label>
<label for="registration_payer_type_freelancer"><input id="registration_payer_type_freelancer" name="registration[payer_type]" type="radio" value="freelancer">
Freelancer
</label>
I have tried
page.choose("registration_payer_type_freelancer")
This doesn't give any error but when and save and open page in capybara still the radio box is not selected against freelancer. I would appreciate if people can give example using xpath and choose.
The real issue you're most likely having is that save_and_open_page saves the HTML with the current attribute values NOT the current property values . This means the fact that you've selected a radio button (which changes the checked property value, not attribute value, won't necessarily be shown). You're better off using save_and_open_screenshot if you want to see the current state of a page. That being said below is ways you can select radio buttons.
To select a specific radio button with Capybara you can use the id, name, label text, and value too if needed to make unique (with name for instance)
choose('registration_payer_type_freelancer') # id
choose('registration[payer_type]', option: 'freelancer') # name and value to make unique
choose('Freelancer') # label text
choose(option: 'freelancer') # just value if the only radio button with that value
In all those cases, if the actual radio button input element is non-visible (for styling purposes, etc) on the page and you want to instead click the visible label you can pass allow_label_click: true
choose('registration_payer_type_freelancer', allow_label_click: true) # find by id and select by clicking the label if input is non-visible
Other options you could use is to just find by CSS (the :css argument can be ignored if your default selector type is the default :css)
find(:css, '#registration_payer_type_freelancer').click
You could also use XPath queries to locate the element, but they're really not necessary 98% of the time (more people correctly understand CSS and with scoping of finders it can generally be used to get any element), and have issues to be aware of - https://github.com/teamcapybara/capybara/blob/master/README.md#beware-the-xpath--trap
find(:xpath, './/input[#value="freelancer"]').click
I have navbar component which I have placed in an application.hbs so that it should be visible always.But I want to change the title of the navbar with each page I visit ( say I am on index page it should say "Home" , if I am on profile page it should say profile,etc).Right now what is happening is navbar title always remains "Home" for all the page.This is happening because the navbar gets rendered onlu during the time it loads the page in browser and after that it doesn't change according to page.
application.hbs
{{top-navbar dp_url=model.profile.dp_url first_name=model.profile.first_name title=title}}
{{outlet}}
Here the I am computing the value of title depending upon which page the user is.
application.js(controller)
if (currentPage === "" || currentPage === "#"){
currentState.set('title',"Home")
}
else if(currentPage === "Userprofile"){
console.log('myStudio');
currentState.set('title',"UserProfile");
}
In here the currentpage has the current url of app and I am comparing it and deciding the value of title for navbar.
But the top-navbar title value gets calculated only for the first time when user load the app in browser and not when I move ffrom one route to another.
I have also tried the Ember.Evented but not able to solve it.
I don't know what Ember.js and Ember-data version are you using, currentState is deprecated since 2.1, anyway looks like you're using a private method intended for Ember internals and not meant to be used in an application.
A possible (but maybe unnecessary complicated) way to accomplish what you want is:
Create a model with the information you want to mutate in the navbar (e.g. navbar-data).
In the route where the navbar is rendered, create and return a record for it using a fixed numeric ID (e.g. store.createRecord('navbar-data', { id: 1, title: "index" })).
Pass the created record to the component (instead of just a string).
Whenever you want to change, peek the record with store.peekRecord('navbar-data', 1) and change the value you want to change in the navbar.
Of course, the record you use for that must not be saved with record.save().
Sitecore 6.6 Update 4
We're using CustomItemGenerator 1.0 and I was using this to help build a primary navigation menu for a site. This worked as expected and everything was rendered properly.
My problem is when I attempt to edit the menu via Page Editor; I don't even see the menu.
I use a repeater and repeat over a list of links to include in the nav. Due to the way the HTML was created, each LI element needs to have its own, specific ID ("Nav Id" Field in Sitecore) that ties into the CSS. Code inside of my repeater's ItemDataBound event:
// Cast the item using CustomItemGenerator-generated class
GenericContentPageItem navItem = (GenericContentPageItem)e.Item.DataItem;
liMenuItem.ID = navItem.NavId.Rendered; // I tried "navItem.NavId" by itself as well
So while this renders properly in the browser, it doesn't when I'm in Page Editor:
<li id="<input id='fld_B72EB6696DCF41A49671972D5EA5DEB8_2163B90C08AB4A18970A7F3ECE79DCFC_en_1_f71bd37d18d146c19e222e89fcffe278_3' class='scFieldValue' name='fld_B72EB6696DCF41A49671972D5EA5DEB8_2163B90C08AB4A18970A7F3ECE79DCFC_en_1_f71bd37d18d146c19e222e89fcffe278_3' type='hidden' value=" Home?="">
... instead of it rendering like this:
<li id="Home">...</li>
Now, that having been said, I can change my code to not use the CustomItemGenerator and it works fine in the browser and Page Editor as follows:
GenericContentPageItem navItem = (GenericContentPageItem)e.Item.DataItem;
Item nav = Sitecore.Context.Database.GetItem(navItem.ID);
liMenuItem.ID = nav.Fields["Nav Id"].ToString();
I would like to avoid having to hardcode field names in my code, which is why I am using CustomItemGenerator. Is there something that I'm doing wrong with my code that it doesn't want to work in Page Editor?
Thanks!
If you need the actual value out of the field regardless of if you are in the page editor or not, you want to use the Raw property:
liMenuItem.ID = navItem.NavId.Raw;
How can i execute a dynamic action when i click in the button of a report to change to another page of vale ?
First, change the report template so that it assigns an ID to the next and previous buttons. For example:
Next Page Template:
-------------------
<a href="#LINK#" class="t20pagination" id="#REGION_STATIC_ID#next">
#PAGINATION_NEXT# ></a>
Previous Page Template:
-----------------------
<a href="#LINK#" class="t20pagination" id="#REGION_STATIC_ID#previous">
<#PAGINATION_PREVIOUS#</a>
Then give your report region a Static ID e.g. 'MYREP'. The next and previous links will then have IDs 'MYREPnext' and 'MYREPprevious'.
You can now create dynamic actions referencing those IDs as DOM objects or jQuery selectors.
Be sure to set the dynamic action's Event Scope to "live" so that the actions still work after the report has been refreshed due to pagination.