Develop Reference

Net Core: Write Unit Test Case for Slideshow Carousel

I created a Bootstrap Slideshow and several card components. How would I even begin testing that the slideshow works with Xunit? I need to ensure that the slider, left right arrows actually work, that they render the same picture, that the captions show. I added some custom code. How would I write a webtest to ensure that slide arrows work for example?
https://getbootstrap.com/docs/4.0/components/carousel/
.imgcarousel {
width:100%;
}
.carouselleftarrow {
font-family: Material Icons;
position: absolute;
bottom: 5px;
content: "\e408";
}
.carouselrightarrow {
font-family: Material Icons;
position: absolute;
bottom: 5px;
content: "\e409";
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="carousel slide" data-ride="carousel" id="Carouselid0efe5f93f1734c5a967cf4ff7c47775a" style=" width: 500px;
height: 500px;">
<ol class="carousel-indicators">
<li data-slide-to="0" data-target="#Carouselid0efe5f93f1734c5a967cf4ff7c47775a" class=""></li>
<li data-slide-to="1" data-target="#Carouselid0efe5f93f1734c5a967cf4ff7c47775a" class=""></li>
<li data-slide-to="2" data-target="#Carouselid0efe5f93f1734c5a967cf4ff7c47775a" class="active"></li>
</ol>
<div class="carousel-inner">
<div class="item"><img class="imgcarousel mCS_img_loaded" src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&preset=gallery-tab-main-image"></div>
<div class="item"><img class="imgcarousel mCS_img_loaded" src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg?itok=YmYkBfY7"></div>
<div class="item active"><img class="imgcarousel mCS_img_loaded" src="https://www.mcpl.us/sites/default/files/styles/large/public/bookstack.jpg?itok=pHICdzg9"></div>
</div>
<a class="left carousel-control" data-slide="prev" href="#Carouselid0efe5f93f1734c5a967cf4ff7c47775a"><span class="carouselleftarrow">navigate_before</span></a><a class="right carousel-control" data-slide="next" href="#Carouselid0efe5f93f1734c5a967cf4ff7c47775a"><span class="carouselrightarrow">navigate_next</span></a>
</div>

Something like:
public class MyTests
{
private IWebDriver _webdriver = new ChromeDriver();
[Fact]
public void CarouselWithMultipleItems_ClickRightButton_NavigatesToNextItem()
{
// Arrange
// Load page
_webdriver.Url = "your-url-here";
// Wait until right button is clickable
WebDriverWait wait = new WebDriverWait(_webdriver, new TimeSpan(0, 0, 30));
WebElement rightArrow = wait.Until(SeleniumExtras.WaitHelpers.ExpectedConditions.ElementToBeClickable(By.CssSelector("a.right.carousel-control")));
// Act
rightArrow.Click();
// Assert
WebElement caption = wait.Until(SeleniumExtras.WaitHelpers.ExpectedConditions.ElementIsVisible(By.CssSelector("<caption-selector-here>")));
// You might need another wait here
WebElement picture = _webdriver.FindElement(By.CssSelector(".imgcarousel.active"));
// Do your assert logic here
}
}
Should get you started. It goes without saying that you will need to include the relevant xUnit NuGet pacakges
along with the Selenium.WebDriver, Selenium.Support, SeleniumChrome.WebDriver, and DotNetSeleniumExtras (there might be some other required ones too).

Bootstrap v3 and Kendo UI Grid 100% height

I recently started working on a new project and this time around, I started off with a clean INSPINIA v2.7 theme. I used an empty page template from that theme and started building a simple search page with some filters and a functioning Kendo Grid.
Now, this website will be published to two orientation of screens: Landscape 1920 x 1080 and Portrait 1600 x 2560. I need to make the Kendo Grid behave accordingly. I google myself to this guide: Resize and Expand the Kendo UI Grid to 100% Height. I see that the first case is what I need. But there is a very simple container hierarchy there and the demo works very well.
In a bootstrap powered website, the hierarchy is not that simple.
Here is the _Layout.cshtml:
#using DA.Services.IBS.Web.FinancePortalFull.Helpers
<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#">
<head>
<title>#ViewBag.Title | Finance System</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
<!-- Add local styles, mostly for plugins css file -->
#if (IsSectionDefined("Styles"))
{
#RenderSection("Styles", required: false)
}
<!-- Add jQuery Style direct - used for jQGrid plugin -->
<link href="#Url.Content("~/Scripts/plugins/jquery-ui/jquery-ui.min.css")" rel="stylesheet" type="text/css" />
<!-- Primary Inspinia style -->
#Styles.Render("~/Content/css")
#Styles.Render("~/font-awesome/css")
</head>
<body class="md-skin">
<!-- Wrapper-->
<!-- PageClass give you ability to specify custom style for specific view based on action -->
<div id="wrapper" class="#Html.PageClass()">
<!-- Navigation -->
#Html.Partial("_Navigation")
<!-- Page wraper -->
<div id="page-wrapper" class="gray-bg #ViewBag.SpecialClass">
<!-- Top Navbar -->
#Html.Partial("_TopNavbar")
<!-- Main view -->
#RenderBody()
<!-- Footer -->
#Html.Partial("_Footer")
</div>
<!-- End page wrapper-->
</div>
<!-- End wrapper-->
<!-- Section for main scripts render -->
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#Scripts.Render("~/bundles/kendo")
#Scripts.Render("~/plugins/slimScroll")
#Scripts.Render("~/bundles/inspinia")
<!-- Handler for local scripts -->
#RenderSection("scripts", required: false)
</body>
</html>
And below is the View itself. I have tried to follow the guide on the kendo link by adding the parent div at different levels but the div and the grid within doesn't render 100% at all.
#model DA.Services.IBS.Web.FinancePortalFull.Models.EpayTransactionFilterViewModel
#{
ViewBag.Title = "Filter";
}
<div class="row wrapper border-bottom white-bg page-heading">
<div class="col-lg-10">
<h2>#ViewBag.Title</h2>
<ol class="breadcrumb">...</ol>
</div>
<div class="col-lg-2">...</div>
</div>
<div class="wrapper wrapper-content animated fadeInRight">
<form method="post" action="#Url.Action("FilterReport", "EpayReconcile")">
<div class="ibox-content m-b-sm border-bottom">
<div class="row">
<div class="col-sm-4">...</div>
<div class="col-sm-4">...</div>
<div class="col-sm-4">...</div>
</div>
<div class="row">...</div>
<div class="row">...</div>
</div>
<div id="parent">
<div class="ibox">
<div class="ibox-content m-b-sm border-bottom">
<div class="row">
<div class="col-lg-12">
#(Html.Kendo().Grid(Model.SearchResults).Name("GridSearchResults")...)
</div>
</div>
</div>
</div>
</div>
</form>
</div>
#section Styles {
#Styles.Render("~/plugins/dataPickerStyles")
#Styles.Render("~/Content/plugins/chosen/chosenStyles")
<style>
html,
body,
#parent,
#GridSearchResults {
margin: 0;
padding: 0;
border-width: 0;
height: 100%; /* DO NOT USE !important for setting the Grid height! */
}
html
{
overflow: hidden;
font: 13px sans-serif;
}
</style>
}
#section Scripts {
#Scripts.Render("~/plugins/dataPicker")
#Scripts.Render("~/plugins/chosen")
<script type="text/javascript">
var gridElement = $("#GridSearchResults");
function resizeGrid() {
gridElement.data("kendoGrid").resize();
}
$(window).resize(function(){
resizeGrid();
});
</script>
}
Also, just for reference, the two screenshots from respective screens:
I need to know how to make the grid and the required containers and divs expand vertically as per viewport
If this is successful, I'll attempt to deal with dynamic page sizing so that maximum data can be displayed
Update:
I have this dojo: http://dojo.telerik.com/#DoomerDGR8/owoSeN
It works perfectly keeping performance in mind. I just need to make it work for all the containers and panels starting from _Layout.cshtml all the way down to my cshtml.
Update 2:
I added this style to the target view with the grid:
<style>
#GridSearchResults {
border-width: 0;
width: 100%;
height: 100%;
min-height: 100%;
}
html, body {
height:100%;
}
.fill {
min-height: 100%;
height: 100%;
}
html
{
overflow:hidden;
}
</style>
Also, modified script, view with grid only:
<script type="text/javascript">
$(document).ready(function () {
setPageSize();
});
function resizeGrid() {
var gridElement = $("#GridSearchResults");
// console.log(gridElement);
gridElement.data("kendoGrid").resize();
setPageSize();
}
function setPageSize(){
var grid = $("#GridSearchResults").data("kendoGrid");
var windowHeight = $(window).height();
//Custom Logic for pageSize
if (windowHeight >= 1200) {
grid.dataSource.pageSize(40);
}
else if (windowHeight >= 1000) {
grid.dataSource.pageSize(35);
}
else if(windowHeight >= 900){
grid.dataSource.pageSize(30);
}
else if(windowHeight >= 700){
grid.dataSource.pageSize(25);
}
else if(windowHeight >= 400){
grid.dataSource.pageSize(20);
}else{
grid.dataSource.pageSize(10);
}
}
$(window).resize(function(){
resizeGrid();
});
</script>
I still get no resizing effect and the grid remains fixed width as shown in earlier screenshots yet the JS is working. Here is what chrome inspects and it is all wrong as my height directives are being overridden at various places:
You'll notice I added the fill class to the page wrapper in _layout.cshtml that will only get applied if user is on the target view where .fill is defined.
No avail.

Image flashing on mouse over

I have an image from a map and I have several other images from few regions (which are blue) on the image map. The other images represent the blue regions that should show on mouse over. But I have a problem. When I put the mouse over the regions on the image map, they start flashing. For example, I want to activate the blue region WITHOUT THE FLASHING onmouseover and onmousemove when I hover over the specific region. I'll put a .gif picture(the cursor is not showing) to show what I'm having problem with when i get the mouse cursor over the image and I'll post the code also to see if there's anything missing or has to be changed.
Picture:blue regions flashing onmouseover
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<%--<link href="css/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" />
<link href="css/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" type="text/css" />--%>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<%--<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>--%>
</head>
<body id="uiBody" class="regions" dir="ltr">
<form id="form2" runat="server">
<asp:PlaceHolder ID="PlaceHolder1" runat="server">
<div class="world_map_container">
<img src="Sliki/maptransparent.gif" usemap="#the_world_map" id="transparent_map" />
<map name="the_world_map" id="the_world_map">
<area shape="poly" coords="167,335,168,321,166,318,161,313,156,308,148,308,146,304,143,302,137,301,136,293,133,283,130,277,127,273,127,270,129,266,133,261,133,253,132,248,128,242,124,240,121,240,118,243,114,248,108,254,100,258,94,261,92,261,91,268,87,274,83,279,81,281,81,286,81,291,81,295,75,298,69,304,67,308,66,316,69,318,79,319,86,319,88,321,91,324,94,326,100,325,102,322,103,317,100,315,95,314,88,312,85,308,87,303,90,300,94,297,98,294,104,293,109,293,113,295,119,303,124,311,127,318,130,327,131,335,132,338,135,336,140,332,144,331,148,331,151,333,155,336,162,336,167,335" href="Default2.aspx" id="area_resen" alt="Resen" />
<area shape="poly" coords="171,45,167,47,161,47,162,50,167,50,167,53,164,55,157,64,161,68,169,88,172,89,175,102,175,105,179,105,180,109,187,116,187,118,202,121,202,124,212,124,216,121,216,116,245,116,253,113,255,110,254,104,253,103,259,103,265,104,269,105,272,103,272,95,274,90,277,87,282,86,285,84,287,78,288,76,280,75,274,74,270,72,265,67,263,63,257,63,254,60,251,57,250,56,247,57,241,56,237,55,234,52,229,49,227,44,227,38,231,35,233,33,231,31,226,29,225,28,225,21,220,20,216,22,213,24,212,26,210,28,207,28,205,26,202,26,200,28,199,31,196,33,192,39,188,43,189,45,189,47,185,50,179,52,175,52,172,50,171,47,171,45" href="Default2.aspx" id="area_skopje" alt="Skopje" />
<area shape="poly" coords="397,47,388,47,383,56,384,61,384,66,382,70,379,71,375,71,375,76,373,82,372,88,372,94,377,96,389,109,408,109,409,98,405,92,409,89,406,80,412,80,421,77,424,74,423,68,429,66,425,63,415,53,398,53,397,47" href="Default2.aspx" id="area_kocani" alt="Kocani" />
</map>
<ul>
<li id="resen" style="">resen</li>
<li id="skopje">skopje</li>
<li id="kocani">kocani</li>
</ul>
</div>
<script type="text/javascript">
$('.world_map_container area').each(function () {
// Assigning an action to the mouseover event
$(this).mouseover(function (e) {
var country_id = $(this).attr('id').replace('area_', '');
$('#' + country_id).css('display', 'block');
});
// Assigning an action to the mouseout event
$(this).mouseout(function (e) {
var country_id = $(this).attr('id').replace('area_', '');
$('#' + country_id).css('display', 'none');
});
});
</script>
<style type="text/css">
div.world_map_container #transparent_map {
position: absolute;
z-index: 20;
width: 530px;
height: 380px;
border: none;
}
div.world_map_container {
margin-right:15px;
width:530px;
height:380px;
position:absolute;
padding-right:0px !important;
}
div.world_map_container ul li {
display: none;
position: absolute;
text-indent: -9999px;
z-index: 30;
}
#resen {
background: url("Sliki/resen.gif") no-repeat scroll 0 0 transparent;
height: 380px;
right: 0;
top: 0px;
width: 530px;
}
#skopje {
background: url("Sliki/skopje.gif") no-repeat scroll 0 0 transparent;
height: 380px;
right: 0;
top: 0px;
width: 530px;
}
#kocani {
background: url("Sliki/kocani.gif") no-repeat scroll 0 0 transparent;
height: 380px;
right: 0;
top: 0px;
width: 530px;
}
</style>
</asp:PlaceHolder>
</form>
</body>
</html>

On your hover images, add the usemap to use the same map. That way they won't trigger a mouseout event when they are displayed.
See this fiddle: http://jsfiddle.net/NPFWm/4/
<img src="https://www.google.com/images/srpr/logo4w.png" usemap="#theMap_map" />
<map id="theMap_map" name="theMap_map">
<area shape="poly" coords="1,1,1,50,50,50,50,1,1,1" id="area1" style="background: #FF0000;" href="#" />
</map>
<img src="https://www.google.com/images/srpr/logo4w.png" id="hover" usemap="#theMap_map" />

How I get a div opacity effect if I have a mouseover

I have a ASP.NET Application and I want a effect with divs. If I make a mouseover about a div a Want that this opacity is 0.9 and if I make a mousedown I want a opacity of 0.6. I use two divs. The one div is in the other div and in this I use Controls.
if My Mouse is not in the div:
If My Mouse is in the div:
My Code:
<asp:Content ID="Content2" ContentPlaceHolderID="lw_content" runat="server">
<div class="createuser">
<div class="create_box">
<div class="newUser">
Benutzer Anlegen <br/>
<br/>
<table>
...
</table>
<br/>
<asp:Button ID="btnAnlegen" runat="server" Text="Benutzer anlegen"
onclick="btnAnlegen_Click" />
</div>
</div>
</div>
</asp:Content>
My CSS:
div.createuser {
background-image: url(../images/bg_createuser.jpg);
filter:alpha(opacity=50);
width: 1000px;
height: 450px;
z-index: n;
}
div.create_box {
width:400px;
height:350px;
margin:30px 100px;
background-color:#ffffff;
border:1px solid black;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
div.newUser {
margin:30px 40px;
font-weight:bold;
color:#000000;
font-size: small;opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
I have in my div.createuser a image as Background with opacity 0.7

Try this, hope it helps
div.newUser {
filter:alpha(opacity=50);
opacity: 0.5;
}
div.newUser:hover {
filter:alpha(opacity=90);
opacity: 0.5;
}

You can do it by using the opacity in background rgba color. it works at all browsers: i used black background to notice the opacity in your example. Also use this meta tag so it works at IE
<meta http-equiv="X-UA-Compatible" content="IE=9" />
div.newUser{
background:rgba(0,0,0,0.5);
}
div.newUser:hover{
background:rgba(0,0,0,0.9);
}
or you can do it with opacity like that:
div.newUser{
opacity: 0.5;
}
div.newUser:hover{
opacity:0.9;
}

image in div via codebehind

I'm trying to achieve setting my image inside my div id =test this has became extremely problematic:
cn.Open();
using (OdbcCommand cmd = new OdbcCommand("SELECT Wallpostings FROM WallPosting WHERE UserID=" + userId + " ORDER BY idWallPosting DESC", cn))
{
using (OdbcDataReader reader = cmd.ExecuteReader())
{
var divHtml = new System.Text.StringBuilder();
while (reader.Read())
{
Image img = new Image();
img.ImageUrl = "~/userdata/2/uploadedimage/batman-for-facebook.jpg";
divHtml.Append("<div id=test>");
divHtml.Append(img + String.Format("{0}", reader.GetString(0)));
// how can I append an img inside my div id=test?
// the image must stay at the start of the div id=test + the contents(text) from my database (in that order)
divHtml.Append("</div>");
}
test1.InnerHtml = divHtml.ToString();
}
}
}
}
css:
* { padding: 0; margin: 0; outline: 0; }
body {
font-size: 12px;
line-height: 1.2;
font-family: Arial, "Trebuchet MS", sans-serif;
color: #a0a0a0;
background: url(images/bg.gif) repeat 0 0;
text-align: left;
}
div#test1 {
}
div#test
{
width:90%;
z-index:1;
padding:27.5px;
border-top: thin solid #736F6E;
border-bottom: thin solid #736F6E;
color:#ffffff;
margin:0 auto;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
}
Asp html:
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<link href="css/style.css" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js" type="text/javascript"></script>
<p>
<asp:TextBox ID="TextBox1" name="TextBox1" runat="server" Rows="3"
Height="47px" Width="638px"></asp:TextBox>
</p>
<p>
<asp:Button ID="Button1" runat="server" Text="Post Message" Width="98px"
onclick="Button1_Click" />
</p>
<p>
</p>
<div id="test1" runat="server" />
// contents from my code go inside this div as div id=test
</asp:Content>
Firebug output:
<div id="ctl00_ContentPlaceHolder1_ContentPlaceHolder2_test1"><div id="test">System.Web.UI.WebControls.Imageweeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</div><div id="test">System.Web.UI.WebControls.Imagehello</div><div id="test">System.Web.UI.WebControls.Imagestill trying</div><div id="test">System.Web.UI.WebControls.Imageback to front on comments</div><div id="test">System.Web.UI.WebControls.Imageback to front on comments</div><div id="test">System.Web.UI.WebControls.Imageback to front on comments</div><div id="test">System.Web.UI.WebControls.Imageback to front on comments</div><div id="test">System.Web.UI.WebControls.Imagelets try this again</div><div id="test">System.Web.UI.WebControls.Imagehair marry went up the hill</div><div id="test">System.Web.UI.WebControls.Imagewedfwedwe</div><div id="test">System.Web.UI.WebControls.Imagewedfwedwe</div><div id="test">System.Web.UI.WebControls.Imagekjgfkjh</div><div id="test">System.Web.UI.WebControls.Imageanother comment</div><div id="test">System.Web.UI.WebControls.Imagebla bla hope this works</div></div>
I know the reason why my code outputs the actual text of the web ui controls, I have had in another post code that actually gets the image up but it adds the image onto the "END" of the test div so rather than it look like this:
<div id="ctl00_ContentPlaceHolder1_ContentPlaceHolder2_test1">
<div id="test"><img src=blabla></img> the text goes after the image </div>
It looks like this:
<div id="ctl00_ContentPlaceHolder1_ContentPlaceHolder2_test1">
<div id="test"> text comes before image </div>
<img src=blabla></img>
<div id="test">hello</div>
<img src=blabla></img>
Which isn't what I want, the code I've added although I know the reasons why it outputs the web controls text is just a demonstration of "how" I'm trying to get it to work.
divTest.Append on img THEN text;
Of course I cant append I would have to use controls.add but I still couldn't get it to work.
Previous post is here so you can see some images and some ideas:
My code below gives me a problem, the image comes after the text

Image is a web control. You can't stick it in a StringBuilder.