I have question about Cypress.
I have an element on page which doesn't appear allways. There is no logic when it shows and when not.
Is in Cypress some IF/THEN function or something how do you check if the element is displayed (so fill it up) and when you don't see it than skip that step?
My code:
if (Cypress.$('[data-bind="validationElement: interestInsurable"]').length > 0) {
cy.get('[for="p4-conditional-csob-interest-insurable-1"]').click()
}
else {cy.get('#car-info-serie')}
This is how it looks like in playground:
Picture
And there is HTML of that checkbox:
<label class="z-radio z-radio-inline primary" for="p4-conditional-csob-interest-insurable-1" data-bind="popover: { content: VehicleInsuranceTooltips.conditionalDataCsobInterestInsurable1Tooltip }" data-original-title="" title="">
<input id="p4-conditional-csob-interest-insurable-1" name="p4-conditional-csob-interest-insurable" type="radio" class="custom-radio" data-toggle="radio" data-bind="checkedValue: 1, checked: interestInsurable" value="1">
<span class="icons">
<span class="icon-unchecked"></span>
<span class="icon-checked"></span>
</span>
Patří vozidlo zájemci o pojištění?
</label>
There is no built in way to do this in cypress. I am using this in my tests:
if (Cypress.$("#yourElement").length > 0) {
// element exists, do something
} else {
// element does not exist, do something else
}
You have to click on the input element instead of the label:
cy.get('#p4-conditional-csob-interest-insurable-1').click();
Anyways have a look at the Cypress Docs as conditional testing is strongly discouraged.
Related
I have collection of permission_types which i can access in my view. I am looping the permission_types to show each one in check box. all the checkboxes are binded to permission_resource, which is defined as a public property array. I want all the checkboxes to be preselected for which i used checked attribute but it won't work, as soon as i remove the wire:model attribute from input all the checkboxes are preselected. which narrows down the problem to wire:model binding.
What i am trying to achieve:
All i want to do is preselect the checkboxes binded to public property $permission_resource. Can anyone please help me out. I really cannot figure out what am i doing wrong here. Appreciate any effort to solve this problem in advance.
Relevent Component Code:
public $permission_types;
public $permission_resource = [];
public function render()
{
$this->permission_types = PermissionType::all();
// dd($this->permission_types->toArray());
return view('livewire.permissions.create-permission-component')
->extends('layouts.app')
->section('content');
}
Relevant View Code:
<div class="row">
#foreach($this->permission_types as $permissionType)
<div class="col-md-3">
<input wire:model="permission_resource" type="checkbox" class="filled-in chk-col-green form-control" id="{{$permissionType['name']}}" value="{{ $permissionType['name'] }}" checked />
<label for="{{ $permissionType['name'] }}" class="p-r-30">{{ ucfirst($permissionType['name']) }} Resource</label>
</div>
#endforeach
</div>
Permission Types Dump
What i have tried so far:
so far i have tried following but none of it worked for me.
1: defining public $permission_resource; instead of public $permission_resource = [];
2: wire:model="permission_resource.{{$permissionType["id"]}}"
3: wire:model="permission_resource.{{$permissionType["name"]}}"
4: wire:model.defer="permission_resource.{{$permissionType["id"]}}"
5: wire:model.defer="permission_resource.{{$permissionType["name"]}}"
6: name="permission_resource.{{$permissionType["id"]}}"
You are binding all the inputs to the same (array) variable, what you want to do is bind each to an element in that array, not to the array itself.
So you would need to prepopulate that array, and then bind each input using $loop->index.
Not sure if you have a good reason for populating permission_types in the render method, better in mount if it is not highly dynamic (likely to change from render to render).
Populating permission_resource in mount might look like this:
public function mount() {
$this->permission_types = PermissionType::all();
$this->permission_resource = $this->permission_types->pluck('name');
}
Then in the blade, bind to elements of the array, and don't set checked yourself, wire:model will always override this anyway, checking your checkbox if the thing you have bound to is truthy, and unchecking if bound var is falsey (this is why everything is unchecked for you with the wire:model binding them to the array, because empty($array) == false, if you just fix the casing of permission_type in the blade you will find the checkbox all come on when you check one, because they are all bound to the same thing).
<input wire:model="permission_resource.{{$loop->index}}" type="checkbox" class="filled-in chk-col-green form-control" id="{{$permission_type['name']}}" value="{{$permission_type['name']}}" />
PS: That will at least get to what you wanted, depending on what you are ultimately trying to do with permission_resource, it may not be a very good/useful representation for the purpose.
try this
public $permission = [];
protected $rules = [
...
'permission' => 'required|array',
];
public function create()
{
if ($this->validate()) {
$data = [
'name' => $this->name,
....
];
$model = Model::create($data);
if (!empty($this->permission)) {
$permissionId = PermissionType::whereIn('id', $this->permission)->pluck('id');
$model->permission()->attach($permissionId); // add name relation instead 'permission' , of create 'attach' of update 'sync'
}
}
}
public function render()
{
return view('livewire.permissions.create-permission-component', [
'permissions' => PermissionType::select('id', 'name')->get()
])
->extends('layouts.app')
->section('content');
}
in View
<div class="row">
#foreach($permissions as $permission)
<div class="col-md-3">
<input wire:model.defer="permission" wire:key="permission{{$permission->id}}" type="checkbox" value="{{$permission->id}}" class="filled-in chk-col-green form-control" />
<label for="{{ $permission->name }}" class="p-r-30">{{ ucfirst($permission->name) }} Resource</label>
</div>
#endforeach
</div>
I am using Angular 7 and would like to disable a button whenever two inputs are not matching specified criteria.
I have the following code:
HTML:
<input type="text" pInputText [(ngModel)]="name" placeholder="placeholder"/>
<input type="text" pInputText [(ngModel)]="identifier" placeholder="identifier"/>
<button pButton type="button" class="ui-button-raised ui-button-rounded" label="Click me!" disabled="{{validateIdentifier() && name.length > 0}}"></button>
TS:
private identifier: string = "";
private name: string = "";
validateIdentifier(): boolean {
const REGEXP = new RegExp(/[EHIS]-[0-9]{9}/);
return REGEXP.test(this.identifier);
}
So when I insert a string matching the following regex: (E|H|I|S)-[0-9]{9} and the length of the inserted name-attribute is at least 1, I'd like to have my button enabled, else not.
Sadly my button is (and stays) disabled on any input. What did I do wrong on that?
I think you have a slight error in your boolean logic. I think you want to negate the result of validateIdentifier() and say if not vailidateIdentifier or the length is 0 then disable. E.G.
<button
pButton
type="button"
class="ui-button-raised ui-button-rounded"
label="Click me!"
[disabled]="!validateIdentifier() || name.length === 0">
</button>
On this page there is a slider updating a input box with example HTML code. You can also see that same code in the source.
I would like to use this in my application so I transplanted it into my code and converted it to Jade (aka Pug). The source now looks like:
div.row
div.small-10.columns
div.range-slider(data-slider data-options="display_selector: #days-off-count; initial: 28;")
span.range-slider-handle(role="slider" tabindex="0")
span.range-slider-active-segment
div.small-2.columns
input(type="number" id="days-off-count" value="28")
And the resulting html looks like this (after prettifying it):
<div class="row">
<div class="small-10 columns">
<div data-slider data-options="display_selector: #days-off-count; initial: 28;" class="range-slider">
<span role="slider" tabindex="0" class="range-slider-handle"></span>
<span class="range-slider-active-segment"></span>
</div>
</div>
<div class="small-2 columns">
<input type="number" id="days-off-count" value="28">
</div>
</div>
Which is very close that shown on in the docs. However on the resulting page the input box is not updated. If I change the input box to a span like in the
'With Label' example it updates.
span(id="days-off-count" value="28")
becomes
<span id="days-off-count" value="28"></span>
I have the foundation.js and the .slider.js included at the bottom of the page.
In addition, if I manually change the value of the input box via the keyboard the slider will jump to that position, so there is some sort of link there.
The software being used:
Ubuntu 14_04
Chrome
Node v0.10.25
Express 4.14.0
Jade 1.11.0
Foundation v5.5.0
Other things to note:
The page has more than one slider so any javascript solutions need to take this into account.
I think this is a bug (hasOwnProperty instead of hasAttribute #6221) in the version of Foundation (5.5.0) you're using. It seems that while it initially applied only to Firefox, it now applies to Chrome too.
Example with (broken) sliders from 5.5.0: jsfiddle.net/tymothytym/jth99pkw/3
Example with (working) sliders from 5.5.3: jsfiddle.net/tymothytym/tw1we8fk/3
The bug was fixed here: https://github.com/zurb/foundation-sites/commit/896e81f1275eefbbdb84ce4da9004ab059b26d45
Basically, go to foundation.slider.js and change this (line 157):
if (settings.display_selector != '') {
$(settings.display_selector).each(function(){
if (this.hasOwnProperty('value')) { // this is the mistake / bug
$(this).val(value);
} else {
$(this).text(value);
}
});
}
to this:
if (settings.display_selector != '') {
$(settings.display_selector).each(function(){
if (this.hasAttribute('value')) { // this should fix it
$(this).val(value);
} else {
$(this).text(value);
}
});
}
This is not my fix, it's the same as the patch, but it should mean that when you do upgrade you don't need to modify your application code to account for a workaround.
1) Maybe I be wrong... but you didn't specify the version, you give an example from Foundation v5... are you not have installed Foundation v6?
Try this example : https://foundation.zurb.com/sites/docs/slider.html
2) After you include your js files, you need to have this:
<script>
$(document).foundation();
</script>
Edit: Sorry, first time I didn't read all, maybe the problem is that the Foundation use the "value" attribute, which is an attribute designed for <input> tags:
value <button>, <input>, <li>, <option>, <meter>, <progress>, <param> Specifies the value of the element
Source: https://www.w3schools.com/tags/ref_attributes.asp
I saw an example of linking directly to a form element using JsViews, which I found to be preferable to encapsulating the whole form in a template. Here is a jsfiddle example of what I'm trying to do, which partially works:
http://jsfiddle.net/30jpdnkt/
var app = {
selections: {
things: [
{ Name: "thingName1", Value: "thingValue1" },
{ Name: "thingName2", Value: "thingValue2" },
{ Name: "thingName3", Value: "thingValue3" }
]
},
formData: {
selectedThing: "thingValue1",
}
};
//how do I reference this template in-line, outside of another wrapping template?
$.templates({
theTmpl: "#theTmpl"
});
$("#content").link(true, app);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.jsviews.com/download/jsviews.js"></script>
<script id="theTmpl" type="text/x-jsrender">
<select id="thingChoice" data-link="formData.selectedThing">
<option value="-">Please select</option>
{^{for selections.things}}
<option data-link="value{:Value} {:Name} selected{:~selected === Value}"></option>
{{/for}}
</select>
</script>
<div id="content">
<!--this part works-->
<input data-link="formData.selectedThing trigger=true"/>
<!--this part does not display-->
<span {{for data tmpl="theTmpl"/}}></span>
</div>
The data-linked INPUT tag is correctly bound to the object, but I cannot find a working example of how to reference a compiled template in-line without encapsulating the entire form in another template. That it's possible to use data-link syntax outside of a template gives hope that it may be possible with correct syntax.
Is this possible?
Yes it is possible - it is what I call top-level data-linking. There will be new documentation topics on this coming very soon, but meantime you have this sample:
http://www.jsviews.com/#samples/editable/toplevel-for
And your jsfiddle - which I updated to make it work fully: http://jsfiddle.net/30jpdnkt/1/
<div id="content">
<input data-link="formData.selectedThing trigger=true"/>
<span data-link='{for tmpl="theTmpl"}'></span>
</div>
UPDATE
You finally decide it's time to post on SO, you do so, and then you find a stupid error. Taken care of. Remove -> from Ember.Table.HeaderCell.extend ->.
I am attempting to customize my header cells for sorting purposes using the example in #183. Unfortunately, The template I'm passing to headerCellViewClass is not being rendered.
I added in a random class and "asdf" just to prove to myself that my booleans weren't the issue. I can access out headerCellName, sorted, and supportSort through the console, and they all have their expected values.
Columns created in a loop in my controller
Ember.Table.ColumnDefinition.create App.SortableColumnMixin, {
columnWidth: 100
textAlign: 'text-align-left'
tableCellViewClass: 'App.ReportValueCell'
headerCellName: columnName
contentPath: columnName
isSortable: yes
}
You'll notice here that I set a custom tableCellViewClass. That one functions perfectly.
SortableColumnMixin
App.SortableColumnMixin = Ember.Object.create(
supportSort: true
sorted: false
headerCellViewClass: 'App.SortableHeaderCell'
)
App.SortableHeaderCell
App.SortableHeaderCell = Ember.Table.HeaderCell.extend ->
templateName: 'table/sortable-header-cell'
table/sortable-header-cell.hbs
<div class="ember-table-content-container" {{action sortByColumn view.content}}>
<span class="ember-table-content" class="21340987235">
asdf
{{view.content.headerCellName}}
{{#if view.content.supportSort}}
<div style="float:right;">
{{#if view.content.sorted}}
{{#if sortAscending}}
<div style="cursor:s-resize;" title="Ascending">
↑
</div>
{{else}}
<div style="cursor:n-resize;" title="Descending">
↓
</div>
{{/if}}
{{else}}
⇅
{{/if}}
</div>
{{/if}}
</span>
</div>
Inspector
Inspector
Does anyone know better than I why this might be?
UPDATE
You finally decide it's time to post on SO, you do so, and then you find a stupid error. Taken care of. Remove -> from Ember.Table.HeaderCell.extend ->.