I have below code in nodejs for selenium using soda script.
If you see my script below, look for verifyData()
There is row testing happening for fixed columns values. I want to generate these asserts dynamically, only row number will vary column will always same, how to achieve this. I can pass row number to this methods.
Second thing, if you see with assert I used function(), can we capture err/assertfail here?
var browser = soda.createClient({
.....
});
browser
.chain
.session()
.setSpeed(speed)
.setTimeout(2000)
.open('/')
.and(login('dev#dev.com', 'x1212GQsdtpS'))
.and(verifyData())
.end(function(err){
console.log('error');
});
function login(user, pass) {
return function(browser) {
browser
.click('css=a#loginButton')
.type('css=input.input-medium.email',user)
.type('css=input.input.pwd',pass)
.clickAndWait('css=a.btn.login')
.assertTextPresent('Clients',function(){ console.log('logged in ok')})
}
}
function verifyData() {
return function(browser) {
browser
//Row 1 testing
.assertText('css=div.keyYears table tbody tr:nth-child(1) td:nth-child(3)','some text',function(){ console.log('looks good')})
.assertText('css=div.keyYears table tbody tr:nth-child(1) td:nth-child(5)','some text')
.assertText('css=div.keyYears table tbody tr:nth-child(1) td:nth-child(6)','some text')
.assertText('css=div.keyYears table tbody tr:nth-child(1) td:nth-child(7)','some text')
//Row 2 testing
.assertText('css=div.keyYears table tbody tr:nth-child(2) td:nth-child(3)','some text1',function(){ console.log('looks good')})
.assertText('css=div.keyYears table tbody tr:nth-child(2) td:nth-child(5)','some text1')
.assertText('css=div.keyYears table tbody tr:nth-child(2) td:nth-child(6)','some text1')
.assertText('css=div.keyYears table tbody tr:nth-child(2) td:nth-child(7)','some text1')
}
}
I got the solution, we have to do something like below:
browser
.chain
.setSpeed(200)
.session()
.open('/')
.click("id=save")
.focus(editor)
.and(function (browser) {
for (var i = 0; i < 10; i++) {
browser.keyDown(editor, '\\40')
}
})
...
Related
I followed the recommendations I found here
jQuery(document).ready(function($) {
jQuery.fn.dataTable.Api.register( 'sum()', function ( ) {
return this.flatten().reduce( function ( a, b ) {
if ( typeof a === 'string' ) {
a = a.replace(/[^\d.-]/g, '') * 1;
}
if ( typeof b === 'string' ) {
b = b.replace(/[^\d.-]/g, '') * 1;
}
return a + b;
}, 0 );
} );
$("#crudTable tfoot").css("display", "table-footer-group");
crud.table.on("draw.dt", function ( row, data, start, end, display ) {
total = crud.table.rows( function ( idx, data, node ) {
return data[11].includes('Cancelado') ? false : true;} ).data().pluck(10).sum();
total = "$" + total.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
$("#crudTable tfoot tr th").html(
" <br> "
);
$("#crudTable tfoot tr").children().eq(10).html(
"Total <br>"+ total
);
});
});
And I added some modifications to get the total of the column by skipping the items that have canceled status, but I have not been able to get the total of the records but without paging. With Datatable I get the records that are being drawn, but I can't find how to intercept the ajax query or modify it to get the full total on that column including filter modifications.
Currently if in the pagination I request "show all records" obviously I get the value I need. But the requirement is that this value is displayed even if the table is visually paginated.
one way to achieve that would be to overwrite the search() function of the ListOperation (it's the table ajax endpoint).
You would need do do the full query without the pagination part to get the full data, and then pass the calculation along with the paginated response for display.
Cheers
So, I have a DataTable with left fixed column but wanted to add a Select like filter, which is not supported by datatables.
I created the select filter and it works just fine withouth the fixed column as it filters from the original table. The thing is when I fix the left column, it doesn't apply the filter into the cloned table
I've tried adding and 'id' into the cloned table and then applying the filter into it too, but it won't work
As it is seen in the picture, the filter 'Externas' it's applied and should only show the orange rows, but the fixed columns shows every row
Fixed column not filtering
This is my select
<select id="filtrarTipo" onclick="filtradoTipo(); filtradoTipoC();">
<option value="" selected disabled>Seleccione</option>
<option value="">Todas</option>
<option value="Interna">Interna</option>
<option value="Externa">Externa</option>
</select>
And my jquery
function filtradoTipo() {
// Declare variables
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("filtrarTipo");
filter = input.value.toUpperCase();
table = document.getElementById("dtBecas");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[4];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
I am trying to get multi-table with pagination, sorting, filtering in a single component.
I can get pagination for one table, unable to get pagination for multiple tables in a single component.
I also received the data from all tables. I am receiving the data from the backend so it takes a few seconds.
I Couldn't find any multi-data table example in angular7 material
This is my code
displayedColumns: string[] = ['name', 'id', 'products_count', 'domain'];
public dataSource = new MatTableDataSource<PeriodicElement>(this.ELEMENT_DATA);
public NONAR_ELEMENT_DATA: NonARElement[];
displayedColumns1: string[] = ['pro_id', 'name', 'd_image'];
public dataSource1 = new MatTableDataSource<NonARElement>(this.NONAR_ELEMENT_DATA);
#ViewChild('paginator') paginator: MatPaginator;
#ViewChild('paginator1', { read: MatPaginator }) paginator1: MatPaginator;
_setDataSource(indexNumber) {
console.log("indexNumber", indexNumber)
setTimeout(() => {
switch (indexNumber) {
case 0:
!this.dataSource1.paginator ? this.dataSource1.paginator = this.paginator1 : null;
console.log("this.dataSource-NON AR.paginator", this.dataSource.paginator)
break;
case 1:
!this.dataSource.paginator ? this.dataSource.paginator = this.paginator : null;
console.log("this.dataSource-Storelist.paginator", this.dataSource1.paginator)
}
},1000);
}```
Can you share your html page. Have you used this #name in your paginator?
<mat-paginator #paginator length="100"
pageSize="20"
pageSizeOptions="[10,20,30]"
(page)="pageChanged($event)">
</mat-paginator>
#ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
I have a list of category names that are written in Jade.
ul
li Discussion
li Movie
li Music
li Performance
li Dance
li Theatre
And I have some json, that shows what kind of categories are added to a specific event:
…
values: [
{
ordinal: 50469,
db_value: 626,
id: 50469,
value: "Discussion"
},
{
ordinal: 50470,
db_value: 623,
id: 50470,
value: "Dance"
}
],
…
I have a route, that gets the category values:
res.render("event", {
categories: data.result.properties.category.values
})
How can I achieve an outcome like this, that an if/else checks if the value equals the same thing that's in the li tag and by this adds a class .unactive, if it doesn't exhist in the json array:
<ul>
<li>Discussion</li>
<li class="unactive">Movie</li>
<li class="unactive">Music</li>
<li class="unactive">Performance</li>
<li>Dance</li>
<li class="unactive">Theatre</li>
</ul>
First, as Andrew did, i would simplify the data format. You could either do this in Node before sending it to the template, or using some JS in the template itself. I'll only edit the template here:
- categoryNames = categories.map(function(c){return c.value});
This will create an array of just the names. (And, it doesn't even need underscore.js. ;))
Now, you can simply check if a given name is in the array using indexOf():
ul
li(class=(categoryNames.indexOf("Discussion") > -1 ? "" : "inactive")) Discussion
li(class=(categoryNames.indexOf("Movie") > -1 ? "" : "inactive")) Movie
li(class=(categoryNames.indexOf("Music") > -1 ? "" : "inactive")) Music
li(class=(categoryNames.indexOf("Performance") > -1 ? "" : "inactive")) Performance
li(class=(categoryNames.indexOf("Dance") > -1 ? "" : "inactive")) Dance
li(class=(categoryNames.indexOf("Theatre") > -1 ? "" : "inactive")) Theatre
I would first massage the data a bit to a format that's easier to render, like this:
var _ = require('underscore');
var categoryNames = _.map(data.result.properties.category.values, function(value) {
return value.value;
});
// categoryNames is an array like this: ['Discussion', 'Dance']
res.render("event", {
categoryNames: categoryNames
})
Now you can get the behavior you're looking for like this:
ul
each category in categoryNames
li category
But if you really want to keep the "disabled" cateogry tags around, you can do it with an inline conditional like this:
ul
each category in ['Discussion', 'Movie', 'Music', 'Performance', 'Theatre']
li(class=(categoryNames.indexOf(category) === -1) ? "" : "inactive") #{category}
Folks, trying to follow example here http://jsfiddle.net/yF45N/. I have JADE file below, which should open up a modal once a table item is clicked. What am I missing?
Thanks!!!!
block Content
if (pendingArray)
legend Pending Requests
table.table-hover.table-condensed
thead
tr
th id
th Email
th foo
th bar
tbody
- each val in pendingArray
tr
data-toggle="modal"
data-id="#{val.id}"
data-target="#orderModal"
href='someModal'
td #{val.id}
td #{val.Email}
td #{val.foo}
td #{val.bar}
orderModal.modal.fade
.modal-dialog
.modal-content
.modal-header
button.close(type='button', data-dismiss='modal', aria-hidden='true') ×
h4.modal-title Title
.modal-body
p body
.modal-footer
button.btn.btn-default(type='button', data-dismiss='modal') Close
button.btn.btn-primary(type='button') Save changes
body
script.
$(function(){
$('#orderModal').modal({
keyboard: true,
backdrop: "static",
show:false,
}).on('show', function(){
var getIdFromRow = $(event.target).closest('tr').data('id');
//make your ajax call populate items or what even you need
$(this).find('#orderDetails').html($('<b> Order Id selected: ' + getIdFromRow + '</b>'))
});
});
Very Simple, even for a front-end idiot like myself:
tbody
- each val in pendingArray
tr(data-toggle='modal', href='#mvrDisplayModal', data-target="#foo")
td #{val.email}
td #{val.blah}
#mvrDisplayModal.modal.fade
.modal-dialog
.modal-content
.modal-header
button.close(type='button', data-dismiss='modal', aria-hidden='true') ×
h4.modal-title Title
.modal-body
p body
p #{foo}
.modal-footer
button.btn.btn-default(type='button', data-dismiss='modal') Close
button.btn.btn-primary(type='button') Save changes