How to test tr(table row) has onclick and style={{ cursor: "pointer" }} in react testing library - enzyme

<tbody data-testid="offers-list-tablebody">
{ offers.map((Offer) => (
<tr onClick={this.handleTermsAndConditionsBtnClick} style={{ cursor: "pointer" }} key={index}>
}
I tried in this way
const tableBody = list.find("[data-testid='offers-list-tablebody']");
const tableRow1 = tableBody.childAt(0);
const clickElement1 = (tableRow1.key());
expect(clickElement1.onclick).toBeTruthy();
expect(clickElement1).toHaveStyle("cursor: pointer");
The error is Property "onclick does not exist on type string" and it is hsowing value of index when tested.
How to test this?

it is because you are assigning clickElement1 to tableRow1.key() which returns a string.
Replace clickElement with tableRow1 like below
expect(tableRow1.onclick).toBeTruthy();

Related

Apache Velocity - if clause

I use Apache Velocity for create an e-mail template.
I have a mail message that contain a table with a list of elements, for create it I had used a #foreach.
In this table I'll add a column contained a conditional string, If the element is empty the string are string1 if is not empty are string2.
This is my code:
#foreach( $item in $list )
<td style="max-width: 140px; word-wrap: break-word;">
#if(${value} not null) 'String1' #else 'String2'#end</td>
#end
Error log:
org.apache.velocity.runtime.parser.ParseException: Encountered "null" at line 25, column 131. Was expecting one of:
"[" ...
"{" ...
"(" ...
<STRING_LITERAL> ...
"true" ...
"false" ...
<INTEGER_LITERAL> ...
<FLOATING_POINT_LITERAL> ...
<IDENTIFIER> ...
"{" ...
"[" ...
at org.apache.velocity.runtime.parser.Parser.generateParseException(Parser.java:3679)
I don't find any help in stack... anyone can help me?
I think this can run in your case:
#if( $value)
<td style="max-width: 140px; word-wrap: break-word;">String1</td>
#else
<td style="max-width: 140px; word-wrap: break-word;">String2</td>
#end
Try to read this question

converting Wildcard to Regex

I'm new in MVC, I want to perform Wildcard (*, ?) search on database. This is what I have done by using Regex:
Controller:
using System.Linq;
using System.Text.RegularExpressions;
using System.Web.Mvc;
using WebApplication1.Models;
namespace WebApplication1.Controllers
{
public class HomeController : Controller
{
CrossWord_dbEntities db = new CrossWord_dbEntities();
public ActionResult Index(string searching)
{
if (searching == null)
{
searching = "*";
}
string regEx = WildcardToRegex(searching);
return View(db.tbl_values.ToList().Where(x => Regex.IsMatch(x.Name, regEx, RegexOptions.Singleline)));
}
public static string WildcardToRegex(string pattern)
{
return "^" + Regex.Escape(pattern).
Replace("\\*", ".*").
Replace("\\?", ".") + "$";
}
}
}
View:
#model IEnumerable<WebApplication1.Models.tbl_values>
<br /><br />
#using (Html.BeginForm("Index", "Home", FormMethod.Get))
{
#Html.TextBox("searching") <input type="submit" value="Search" />
}
<table class="table table-striped">
<thead>
<tr>
<th>Results</th>
</tr>
</thead>
<tbody>
#if (Model.Count() == 0)
{
<tr>
<td colspan="3" style="color:red">
No Result
</td>
</tr>
}
else
{
foreach (var item in Model)
{
<tr>
<td>
#item.Name
</td>
</tr>
}
}
</tbody>
</table>
i have in my database three recordes: Hello, Hero, Shalom
when i type " H* " i get the result: Hello, Hero - this works great
but when i type " *lom " i get "No Result" instead of "Shalom"
or when i type " Hell?" i get "No Result" instead of "Hello"
what i did wrong ?
You can use the following
Expression<Func<tbl_value, bool>> query = m =>
SqlFunctions.PatIndex(searching.ToLower().Replace("*", "%"), m.Name.ToLower()) > 0;
var details = db.tbl_values.Where(query);
Hope this will help you

How to select only inline style in html file using regex?

I tried to select the inline styles in p tag and div tag only. But no need to select td, inline styles
regex style=[\"\w\d\.\:\-\'\s\#\;]+
Input:
<p class="Test"><span style="font-family:Verdana">?</span><span style="font:7.0pt 'Times New Roman'">  </span><span>AAA</span></p>
<table cellspacing="0" cellpadding="0" style="border-collapse:collapse; margin-left:0pt">
<tr>
<td style="border-bottom-color:#808080; border-bottom-style:solid; border-bottom-width:0.5pt; border-top-color:#808080; border-top-style:solid; border-top-width:0.5pt; padding-bottom:2.85pt; padding-top:2.85pt; vertical-align:top; width:81pt">
<p class="Tabelle" style="margin-top:3pt; margin-bottom:3pt"><span style="font-family:Tahoma; font-size:9pt">Detail</span></p>
</td>
output:
style="margin-top:3pt; margin-bottom:3pt in p tag
Note:
I need to select only p tag, div tag tags inline styles.
You can try this:
Find by:
(<(?:p|div)[^<]*)(style="[^"]*")([^>]*>)
replace by:
$1$3
C# Code Sample:
using System;
using System.Text.RegularExpressions;
public class Test
{
public static void Main()
{
string pattern = #"(<(?:p|div)[^<]*)(style=""[^""]*"")([^>]*>)";
string substitution = #"$1$3";
string input = #"<p class=""Test""><span style=""font-family:Verdana"">?</span><span style=""font:7.0pt 'Times New Roman'"">  </span><span>AAA</span></p>
<table cellspacing=""0"" cellpadding=""0"" style=""border-collapse:collapse; margin-left:0pt"">
<tr>
<td style=""border-bottom-color:#808080; border-bottom-style:solid; border-bottom-width:0.5pt; border-top-color:#808080; border-top-style:solid; border-top-width:0.5pt; padding-bottom:2.85pt; padding-top:2.85pt; vertical-align:top; width:81pt"">
<p class=""Tabelle"" style=""margin-top:3pt; margin-bottom:3pt""><span style=""font-family:Tahoma; font-size:9pt"">Detail</span></p>
</td>
";
RegexOptions options = RegexOptions.Multiline;
Regex regex = new Regex(pattern, options);
string result = regex.Replace(input, substitution);
System.Console.WriteLine(result);
}
}
Explanation
You get yoru data in group 1

Google Polymer: google-map-search doesn't work

<paper-dialog id="post" entry-animation="scale-up-animation" exit-animation="fade-out-animation">
<div class="find-area">
<paper-textarea on-input="find" id="find_textarea" class="find-place-text" label="Find your place" maxlength="250"></paper-textarea>
</div>
<div class="map-area">
<google-map id="[[map]]"
api-key="000000000myapi000000"
latitude="[[lat]]"
longitude="[[lon]]"
fit-to-markers>
</google-map>
<google-map-search id="google_search"
globalSearch="true"
map="[[map]]"
results="[[results]]">
</google-map-search>
</div>
<paper-button on-tap="[[upload]]">Accept</paper-button>
<label>coords:[[ results::lat ]], [[ results::lon ]]</label>
<label>query:[[ query ]]</label>
<label>map:[[ map ]]</label>
<label>results:[[results]]</label>
</paper-dialog>
<script>
function _showPosition(position) {
try {
x.latitude = position.coords.latitude;
x.longitude = position.coords.longitude;
}catch (err){
alert(err+'; position:'+position)
}
}
function showError(error) {
alert('error:'+ error)
}*/
function _submit(event) {
Polymer.dom(event).localTarget.parentElement.submit();
}
Polymer({
is: 'profile-new-post',
properties: {
enable : {
type: Boolean,
value: true
},
lat : {
value : 37.77493
},
lon : {
value : -122.41942
},
query : {
type : String,
value : ""
},
results : {
type : Array
},
map : {
type : Object
}
},
func : function (e) {
this.map = this.$.map;
post.open();
},
find : function (e) {
this.$.google_search.query = this.$.find_textarea.value;
this.query = this.$.google_search.query;
this.$.google_search.search();
this.lat = this.$.google_search.results.latitude;
this.lon = this.$.google_search.results.longitude;
//alert(this.$.google_search.results.latitude + '; ' + this.$.google_search.results.longitude)
},
I'm trying to use [[]] brackets because of django use {{}}. Map, results and coords are empty at output lables. It shows map with San Francisco but when i try to print text in input it doesn't want to search. The aren't any errors in console. I've saw tutorial video from google about this, but there was old version of Polymer and many things like {{ $.element.atribute }} inside element head doesn't work (it doesn't know what '$' is). Maybe someone can explain for me what's the biggest difference between [[ ]] and {{ }}, because i can't understand it from official tutorial?
Solve: to solve it, i must put source from inside dialog to new template with property is="dom-bind.
<p><paper-button raisedButton on-tap="upload">Upload</paper-button></p>
<paper-button id="dialogbutton" on-tap="func">Post</paper-button>
<paper-dialog id="post" entry-animation="scale-up-animation" exit-animation="fade-out-animation">
<template is="dom-bind">
<div class="find-area">
<paper-input value="{{ input_query }}" on-input="find" id="find_textarea" class="find-place-text" label="Find your place" maxlength="250"></paper-input>
</div>
<div class="map-area">
<google-map-search
id="google_search"
map="{{ map }}"
query="{{ input_query }}"
results="{{results}}"
on-google-map-search-results="searchingComplite">
</google-map-search>
<google-map
map="{{map}}"
latitude="{{results[0}.latitude}}"
longitude="{{results[0}.longitude}}">
</google-map>
</div>
<paper-button on-tap="upload">Accept</paper-button>
<label>coords:{{ lat }}, {{ lon }}</label>
<label>query:{{ query }}</label>
<label>map:{{ map }}</label>
<label>results:{{ results }}</label>
</template>
There are a couple of issues here:
Yes, the [[]] brackets are the problem here because they enforce one-way binding. That means that the results from the google-map-search can't propagate upwards and the labels are empty. You need to change the results=[[results]] to results={{results}} to enable two-way binding
For declerative event handlers, you don't need any brackets. So this line <paper-button on-tap="[[upload]]">Accept</paper-button> should be ?<paper-button on-tap="upload">Accept</paper-button>
To access sub-properties of an data bound object you need to use dot notation (.). This line <label>coords:[[ results::lat ]], [[ results::lon ]]</label> should be changed to <label>coords:[[ results.lat ]], [[ results.lon ]]</label>
I would also change lat and lon to computed properties which either return default values (alternatively just use attributes on your google-map element for that) or the values from your search result.

Is it possible to override form helpers?

Using the doc, I can set my own helper for the layout surrending my field, but I'd like to personalize also some fields given by play.
The main reason is for Twitter Bootstrap 2, where I need to change (in checkbox.scala.html)
#input(field, args:_*) { (id, name, value, htmlArgs) =>
<input type="checkbox" id="#id" name="#name" value="#boxValue" #(if(value == Some(boxValue)) "checked" else "") #toHtmlArgs(htmlArgs.filterKeys(_ == 'value))>
<span>#args.toMap.get('_text)</span>
}
to :
<label class="checkbox">
<input type="checkbox" name="#name" id="#id" value="#boxValue" #(if(value == Some(boxValue)) "checked" else "") #toHtmlArgs(htmlArgs.filterKeys(_ == 'value)) />
#args.toMap.get('_text)
</label>
How can I do that ?
Thanks for your help!
I finally did it like this :
I created a package views.helpers.form, that contains :
bootstrap.scala.html :
#(elements: helper.FieldElements)
<div class="control-group#if(elements.hasErrors) { error}">
<label class="control-label" for="#elements.id">#elements.label(elements.lang)</label>
<div class="controls">
#elements.input
#elements.infos(elements.lang).map { info =>
<span class="help-inline">#info</span>
}
#elements.errors(elements.lang).map { error =>
<span class="help-block">#error</span>
}
</div>
checkbox.scala.html :
#**
* Generate an HTML input checkbox.
*
* Example:
* {{{
* #checkbox(field = myForm("done"))
* }}}
*
* #param field The form field.
* #param args Set of extra HTML attributes ('''id''' and '''label''' are 2 special arguments).
* #param handler The field constructor.
*#
#(field: play.api.data.Field, args: (Symbol,Any)*)(implicit handler: helper.FieldConstructor, lang: play.api.i18n.Lang)
#boxValue = #{ args.toMap.get('value).getOrElse("true") }
#helper.input(field, args:_*) { (id, name, value, htmlArgs) =>
<label class="checkbox">
<input type="checkbox" id="#id" name="#name" value="#boxValue" #(if(value == Some(boxValue)) "checked" else "") #toHtmlArgs(htmlArgs.filterKeys(_ == 'value))>
#args.toMap.get('_text)
</label>
div>
</div>
And in my template, all I have to do is :
#import helper.{FieldConstructor, inputText, inputPassword} #** Import the original helpers *#
#import helpers.form.checkbox #** Import my helpers *#
#implicitField = #{ FieldConstructor(helpers.form.bootstrap.f) }
And voilà! It works!
It will be simpler to just write your own tag with the code you want and use it instead of the provided helper. It will simplify potential issues related to overwritting platform tags.