Friends, I have a menu named GAR with the items: GAR Rules, GAE Rules and Gar/Gae Processes log. How to validate if only these items should be there?. If a different item is entered, the test must fail.
If I use expect to validate the items and another item is implemented, the test will continue to pass.
I tried that:
page.all('select#tbm2').map(&:value).should == %w(Regras GAR Regras GAE Log Processamentos GAR/GAE)
<div id="tbm2" class="tb">
<div id="TBH_tbm2" onclick="javascript:showMenu('tbm2','tbm2', true, true)" class="tbh">GAR</div>
<div id="TBB_tbm2" class="tbb">
<div onclick="sendEvent(0,event,this,searchImage(this),0,'','1370','Menu','','','.13.3','',''); " class="tbi tbiSel">
<div>
<div class="tbiIcon"><img src="r/std/static/pixel.gif" class="icon icon_config" draggable="false"></div>
</div>
<div>Regras GAR</div>
</div>
<div onclick="sendEvent(0,event,this,searchImage(this),0,'','1370','Menu','','','.13.4','',''); " class="tbi">
<div>
<div class="tbiIcon"><img src="r/std/static/collapse16.gif" class="icon" draggable="false"></div>
</div>
<div>Regras GAE</div>
</div>
<div onclick="sendEvent(0,event,this,searchImage(this),0,'','1370','Menu','','','.13.6','',''); " class="tbi">
<div>
<div class="tbiIcon"><img src="r/std/icons/listini64.png" class="icon" draggable="false"></div>
</div>
<div>Log Processamentos GAR/GAE</div>
</div>
</div>
</div>
</td>
Related
I have vue.js components in my app. This is the first time ever receiving this message in the console.
The picture where 3 boxes are shown is the local machine, where it works and shows the users info.
The next picture only show 1 out of 3 boxes, with the "example" component.
Code:
The component:
<template>
<div>
<loading-spinner v-if="!data_is_fetched"></loading-spinner>
<div v-else-if="data_is_fetched">
<!-- Modalbox -->
<div>
<div v-if="modalbox" #close="modalbox = false">
<edit-user-information-modal v-if="modalboxType === 1" #close="modalbox = false" #postSucces="fetchData()"
:student="record.user">
</edit-user-information-modal>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-sm-12">
<div class="card box-shadow border-0">
<div class="card-header bg-transparent justify-content-between d-flex align-text-center">
Min bruger
</div>
<div class="card-body">
<div class="row">
<div class="col-6">
<p><span class="font-weight-bold">Navn:</span></p>
<p><span class="font-weight-bold">Fødselsdato:</span></p>
<p><span class="font-weight-bold">Email:</span></p>
<p><span class="font-weight-bold">Telefonnummer:</span></p>
<p><span class="font-weight-bold">Brugertype:</span></p>
<p><span class="font-weight-bold">Vejnavn & husnummer:</span></p>
<p><span class="font-weight-bold">Postnummer og by:</span></p>
<p><span class="font-weight-bold">Land:</span></p>
</div>
<div class="col-6">
<p>
<span v-if="record.user.name">{{ record.user.name }}</span>
<span v-else class="font-italic">Intet navn</span>
</p>
<p>
<span v-if="record.user.birthday">{{ record.user.birthday }}</span>
<span v-else class="font-italic">Ingen fødselsdato</span>
</p>
<p>
<span v-if="record.user.email">{{ record.user.email }}</span>
<span v-else class="font-italic">Ingen email</span>
</p>
<p>
<span v-if="record.user.phone">{{ record.user.phone }}</span>
<span v-else class="font-italic">Intet telefonnummer</span>
</p>
<p>
<span v-if="record.user.role_id = 1">Elev</span>
<span v-else-if="record.user.role_id = 2">Kørelærer</span>
<span v-else-if="record.user.role_id = 3">Køreskoleadministrator</span>
<span v-else-if="record.user.role_id = 4">MitKørekort - Support</span>
<span v-else-if="record.user.role_id = 5">MitKørekort - Superbruger</span>
</p>
<p>
<span v-if="record.user.address_1">{{ record.user.address_1 }}</span>
<span v-else class="font-italic">Ingen addresse</span>
</p>
<p>
<span v-if="record.user.zip_code">{{ record.user.zip_code }}</span>
<span v-else class="font-italic">Intet postnummer</span>
</p>
<p>
<span v-if="record.user.country">{{ record.user.country }}</span>
<span v-else class="font-italic">Intet land</span>
</p>
</div>
</div>
<button class="btn btn-primary" #click="modalbox = true; modalboxType = 1">Rediger</button>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12">
<div class="card box-shadow border-0">
<div class="card-header bg-transparent">Ny adgangskode?</div>
<div class="card-body text-center">
<a class="mt-2 btn btn-primary btn-block" href="/nulstil/kodeord">Nulstil min adgangskode</a>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import FormMixin from '../../FormMixin.js';
export default {
mixins: [ FormMixin ],
data() {
return {
record: {},
fetchUrl: 'v1/account/fetch',
data_is_fetched: false,
modalbox: false,
modalboxType: 0,
}
},
mounted() {
console.log('Component mounted.')
this.fetchData()
},
methods: {
fetchData() {
axios.get(this.fetchUrl)
.then(response => (
this.record = response.data
))
.finally( this.data_is_fetched = true)
},
},
}
</script>
The component registration
// Account
// Profile page
Vue.component('page-show-account', require('./pages/account/Show.vue').default);
My issue was that the server had the newest compiled files in "public" and not "public_html".
So there wasn't anything missing or wrong in the code itself, but the server didn't use the correct files.
Can you drop your code?
I guess maybe you have a problem with registering the component, maybe you did not type correct path, or etc.
My advice is to read carefully
https://v2.vuejs.org/v2/guide/components-registration.html
I am doing a small project with vue.js and laravel. I have a list of products, when I click on a specific product on "Quick view" button I want to show all data about that product in a modal but the data is not showing in the modal.
Can you help me please. Here is my code:
#extends('app')
#section('content')
<div id ="crud" class="row">
<div class="col-xs-12">
<h1 class="page-header">Lista de Articulo</h1>
</div>
<div class="wrap-icon right-section col-md-12" data-toggle="modal" data-target="#list" >
<div class="wrap-icon-section wishlist">
<a href="#" class="link-direction">
<i class="fa fa-heart" aria-hidden="true"></i>
<div class="left-info">
<span class="index">0 item</span>
<br>
<span class="title">Wishlist</span>
</div>
</a>
</div>
</div>
<div class="row">
<div v-for="keep in keeps" class="col-md-4" style="width:25%;" #mouseover="showByIndex = keep" #mouseout="showByIndex = null">
<div class="container">
<img :src="keep.foto" style="width:100%; max-width:150px;">
<button class="btn" v-show="showByIndex === keep" v-on:click.prevent="showKeep(keep)">Quick view</button>
</div>
<h3>
<b> #{{keep.nombre}}</b>
</h3>
<p> #{{keep.descripcion}}</p>
I fixed it. The error was because I called the modal file outside the div. Thanks to everybody.
you can't send data directly from vue in blade structure, you need to write a component for that.
https://v3.vuejs.org/examples/modal.html#modal-component
I'm using Capybara to test that my Ruby/Sinatra application renders the pages correctly.
I been able to test that the page contains certain values, with statements like the following:
expect(page).to have_content('Campaign_1')
However, what I want to do is check that specific elements of the page contain the expected values.
For instance, the various 'child' elements of:
<li id="campaign_1" style="margin-bottom:25px">
such as the 'media-heading name' child element has the value 'Campaign_1', as per the code snippet below:
<h6 class="media-heading name">Campaign_1</h6>
or that the 'media-heading country' child element has the value 'United Kingdom' as per the code snippet below:
<h6 class="media-heading country">United Kingdom</h6>
Below is a copy of the .erb file contents.
<ul class="list-group" >
<% #all_campaigns.each do |campaign| %>
<a href="/campaign/<%= campaign.name %>" style="text-decoration: none">
<li id="<%= campaign.name.downcase %>" style="margin-bottom:25px">
<div class="media">
<div class="media-left">
<img src="/images/<%= campaign.image %>.jpeg" class="media-object">
</div>
</div>
<br>
<div class="media-body">
<h6 class="media-heading name"><%= campaign.name %></h6>
<br>
<div class="left_right_Container">
<h6 class="media-heading country"><%= campaign.country %></h6>
<h6 class="media-heading sector"><%= campaign.sector %></h6>
</div>
<br>
<br>
<h5 class="media-heading target_amount">Target Amount: £<%= campaign.target_amount %></h5>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
aria-valuemin="0" aria-valuemax="100" style="width:<%= campaign.percentage %>%">
<span class=""><%= campaign.percentage %>% Funded</span>
</div>
</div>
</li>
</a>
<% end %>
</ul>
The above .erb file results in the HTML below (there's more, this is just a snippet) being created when the app runs:
<li id="campaign_1" style="margin-bottom:25px">
<div class="media">
<div class="media-left">
<img src="/images/Image_1.jpeg" class="media-object">
</div>
</div>
<br>
<div class="media-body">
<h6 class="media-heading name">Campaign_1</h6>
<br>
<div class="left_right_Container">
<h6 class="media-heading country">United Kingdom</h6>
<h6 class="media-heading sector">Automotive</h6>
</div>
<br>
<br>
<h5 class="media-heading target_amount">Target Amount: £1000000</h5>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:93%">
<span class="">93% Funded</span>
</div>
</div>
</li>
You just need to expect on the element you wish to check inside - for instance
heading = page.find('li#campaign_1 .media-heading.name')
expect(heading).to have_content('Campaign_1')
Another option (more useful when you have a few things to check) is the within method which scopes what page refers
within 'li#campaign_1 .media-heading.name' do
# here page will refer to the .name element
expect(page).to have_content('Campaign_1')
end
Finally, you could just do it all in one expectation using the text or exact_text options
expect(page).to have_css('li#campaign_1 .media-heading.name', text: 'Campaign_1')
Combining a couple of those methods together would give
within 'li#campaign_1' do
expect(page).to have_css('.media-heading.name', text: 'Campaign_1'
expect(page).to have_css('.media-heading.country', text: 'United Kingdom')
end
i have the below code that everything runs fine except the check to see if the value is null. I know the value being returned is null, yet it still doesn't work. I've tried having == null both within and outside the {} to no avail.
Maybe it has something to do with how hibernate is returning the value? When i print out the object returned from the db it says null.
<div th:each="timecardLast: ${timecardLast}">
<a th:href="#{/timecardin}">
<div th:if="${timecardLast.status == null}" style="width: 100%" class="waves-effect card-panel green darken-1 z-depth-4">
<div class="card-content center-align">
<i class="medium material-icons white-text">timer</i>
<h5 class="white-text">SIGN IN TO WORK</h5>
</div>
</div>
</a>
<a th:href="#{/timecardin}">
<div th:if="${timecardLast.status} == 1" style="width: 100%" class="waves-effect card-panel green darken-1 z-depth-4">
<div class="card-content center-align">
<i class="medium material-icons white-text">timer</i>
<h5 class="white-text">SIGN IN TO WORK</h5>
</div>
</div>
</a>
<a th:href="#{/timecradin}">
<div th:if="${timecardLast.status} == 2" style="width: 100%" class="waves-effect card-panel deep-orange darken-2 z-depth-4">
<div class="card-content center-align">
<i class="medium material-icons white-text">timer</i>
<h5 class="white-text">SIGN IN TO WORK</h5>
</div>
</div>
</a>
<a th:href="#{/timecardout}">
<div th:if="${timecardLast.status} == 0" style="width: 100%" class="waves-effect card-panel deep-orange darken-2 z-depth-4">
<div class="card-content center-align">
<i class="medium material-icons white-text">timer_off</i>
<h5 class="white-text">SIGN OUT OF WORK</h5>
</div>
</div>
</a>
</div>
The syntax for lists in Thymeleaf is naming the element and naming the list. You have both names for the same thing. So you may want instead:
<div th:each="timecard: ${timecardList}">
...
<div th:if="${timecard.status == null}"...>
...
After adding a list of objects called timecardList to the model.
Took a step back and looked at how i was creating the object. I was not initializing the object first i.e.
Timecard timecardLast = timecardService.getLastTimecardByIdusers(staff);
So, a simple initialization of the object properly did the job followed by the db request i.e.
timecardLast = new Timecard();
timecardLast = timecardService.getLastTimecardByIdusers(staff);
this might be simple, but I would like to select everything within <div class="rc-box-citations-body"> under the condition that it must belong to <div class="definitionBox" id="meaning-1-1">, thereby uniquely identifying it. How can I do that with xpath? Thanks.
<div class="definitionIndent">
<div class="definitionNumber">1.a</div>
<div class="definitionIndent">
<div class="definitionBox" id="meaning-1-1">
<span class="textmedium">
<span class="stampNoBorder">text</span>
<span class="definition">text</span>
</span>
</div>
<div class="definitionBox">
<div class="rc-box-citations">
<div class="rc-box-citations-top">
<span class="rc-citations-north-west"> </span>
<span class="rc-citations-north-east"> </span>
</div>
<div class="rc-box-citations-body"><span class="citat">text</span> <a class="sourcepop" href="javascript:void(0);"><span class="source">text</span><span class="popup">text</span></a></div>
<div class="rc-box-citations-bot">
<span class="rc-citations-south-west"> </span>
<span class="rc-citations-south-east"> </span>
</div>
</div>
</div>
</div>
</div>
If I modify your xml slightly, and take under the condition that it must belong to to mean that is a descendant of.... then this xpath works
//div[#class='definitionBox'][#id='meaning-1-2']//div[#class='rc-box-citations-body']
The XML is
<?xml version="1.0" encoding="utf-16"?>
<div class="definitionIndent">
<div class="definitionNumber">1.a</div>
<div class="definitionIndent">
<div class="definitionBox" id="meaning-1-1">
<span class="textmedium">
<span class="stampNoBorder">text</span>
<span class="definition">text</span>
</span>
</div>
<div class="definitionBox" id="meaning-1-2">
<div class="rc-box-citations">
<div class="rc-box-citations-top">
<span class="rc-citations-north-west"></span>
<span class="rc-citations-north-east"></span>
</div>
<div class="rc-box-citations-body">
<span class="citation">text</span>
<a class="sourcepop" href="javascript:void(0);">
<span class="source">text</span>
<span class="popup">text</span>
</a>
</div>
<div class="rc-box-citations-bot">
<span class="rc-citations-south-west"></span>
<span class="rc-citations-south-east"></span>
</div>
</div>
</div>
</div>
</div>
The tool I used is XPathVisualizer: