Here's my html:
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<i class="fa fa-user"></i> Register / Login <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<i class="fa fa-fw fa-circle-o"></i> login
</li>
<li>
<i class="fa fa-fw fa-circle-o-notch"></i> Register
</li>
<li class="divider"></li>
</ul>
</li>
Here's my expectation:
it { should have_link 'Register', href: registration_path }
However, the spec fails, even though the register link clearly exists. If I move the link out of the<ul> like this:
<i class="fa fa-fw fa-circle-o-notch"></i> Register
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<i class="fa fa-user"></i> Register / Login <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<i class="fa fa-fw fa-circle-o"></i> login
</li>
<li>
</li>
<li class="divider"></li>
</ul>
</li>
The spec passes. Why is this?
I guess you're using capybara.
Capybara will not detect hidden elements.
You need to click on a '.dropdown-toggle' element and then check the 'Register' link.
And this will only work when javascript driver is used (selenium, poltergeist, etc)
It's the good way - you're simulating a real user behavior.
However, you can try to change capybara's behavior
it "should have Register link", js: true do
find('.dropdown-toggle').click
expect(page).to have_link('Register', href: registration_path)
end
Related
I have this code in bootstrap 5 and it works as expected.
when clicking the tag the appropriate divs collapsed/hiden.
However i want to prevent the closing of other divs when you open the other one, how to prevent this in bootstrap 5?
<li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" role="button" href="#ui-basic" aria-expanded="false" aria-controls="ui-basic">
<i class="icon-layout menu-icon"></i>
<span class="menu-title">Listing Management</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="ui-basic">
<ul class="nav flex-column sub-menu">
<li class="nav-item"> 1<li>
<li class="nav-item"> 2<li>
<li class="nav-item"> 3<li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" role="button" href="#ui-enquiries" aria-expanded="false" aria-controls="ui-enquiries">
<i class="icon-grid-2 menu-icon"></i>
<span class="menu-title">Inquiries</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="ui-enquiries">
<ul class="nav flex-column sub-menu">
<li class="nav-item"> 1<li>
<li class="nav-item"> 2<li>
<li class="nav-item"> 3<li>
</ul>
</div>
</li>
I am using a sidebar using HTMLTemplateProcessor
<nav id="sidebar">
<h1>Side</h1>
<ul class="list-unstyled components mb-5">
<li class="active">
<span class="fa fa-home"></span> Home
</li>
<li>
<span class="fa fa-user"></span>
{%IWFrameRegion_FRAME_Menu.lnkBF_FRAME_Menu%}
</li>
<li>
<span class="fa fa-sticky-note"></span> Reports
</li>
<li>
<span class="fa fa-cogs"></span> Tools
</li>
<li>
<span class="fa fa-paper-plane"></span> Contacts
</li>
</ul>
</nav>
The {%IWFrameRegion_FRAME_Menu.lnkBF_FRAME_Menu%} is the TIWLink reference part, but how do I put the span class (for the logo of link) correctly like the sidebar template.
Now it look something like this because can't put the span class into the rendered <a> tag for {%IWFrameRegion_FRAME_Menu.lnkBF_FRAME_Menu%}.
I am trying to figure out the best way to use authentication to control which ul tag is displayed
Curent html
//wrap all this is authentication razor code?
<!-- START Profile button menu -logged in -->
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-header">Profile</li>
<li>
<a tabindex="-1" asp-area="" asp-controller="Manage" asp-action="Index">
<i class="si si-envelope-open pull-right"></i>
<span class="badge badge-primary pull-right">3</span>Inbox
</a>
</li>
<li>
<a tabindex="-1" asp-area="" asp-controller="Manage" asp-action="Index">
<i class="si si-user pull-right"></i>
<span class="badge badge-success pull-right">1</span>Profile
</a>
</li>
<li>
<a tabindex="-1" href="javascript:void(0)">
<i class="si si-settings pull-right"></i>Settings
</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Actions</li>
<li>
<a tabindex="-1" asp-area="" asp-controller="Account" asp-action="Lockout">
<i class="si si-lock pull-right"></i>Lock Account
</a>
</li>
<li>
<a tabindex="-1" asp-area="" asp-controller="Account" asp-action="Logout">
<i class="si si-logout pull-right"></i>Log out
</a>
</li>
</ul>
<!-- END Profile button menu -logged in-->
<!-- START Profile button menu - not logged in-->
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-header">Actions</li>
<li>
<a tabindex="-1" asp-area="" asp-controller="Account" asp-action="Login">
<i class="si si-logout pull-right"></i>Login
</a>
</li>
<li>
<a tabindex="-1" asp-area="" asp-controller="Register" asp-action="Register">
<i class="si si-lock pull-right"></i>Register
</a>
</li>
</ul>
<!-- END Profile button menu - not logged in -->
I found a blog post by Dave Paquette on custom tag helpers to accomplish this, but I couldn't get it to work. This html is in my partial view of my header navigation so I can't (or don't know how to check for this in the controller) so I opted to test for logged in user using Razor.
I don't see any blogs or tuorials on simple logged in user check. They all have to do with policy's, claims, etc. I just simply want to know if the user is logged in or not and display the ul dependent on that.
I think you need to use SignInManager to see if there is any user logged in. This will use Claims. If you are using the AplicationUser model you can do the following.
On your razor page use:
inject SignInManager<ApplicationUser> SignInManager
And then:
#if (SignInManager.IsSignedIn(User))
{
//some html...
}
I am trying to get a Shopping glyphcon near the "Shop" ActionLink, and this is what I get:
I want the home icon to be before the "Shop" and in the same line.
I'm using MVC5 .cshtml file
This is the Code:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
#* Glasses Menu *#
<li class="dropdown">
Glasses <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>#Html.ActionLink("InfinityAR", "InfinityAR", "Glasses")</li>
<li>#Html.ActionLink("Google Glass", "GoogleGlass", "Glasses")</li>
#*<li class="divider"></li> //TODO: Enter here something
<li>Separated link</li>*#
</ul>
</li>
#* SDK's Menu *#
<li class="dropdown">
Developers <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li style="margin-left:10px">SDK</li>
<li class="divider"></li>
<li>#Html.ActionLink("METAIO", "Metaio", "Developers")</li>
</ul>
</li>
<li>
<span class="glyphicon glyphicon-home" />
</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
#Html.Partial("_LoginPartial")
</div>
I think you've confused what HTML.ActionLink() does. It generates the anchor link with tags.
So if you inspect the generated HTML code of this line:
#Html.ActionLink("Shop", "Shop", "Glasses")
It will produce something like this:
Shop
Your code will produce something like this:
Shop"><span class="glyphicon glyphicon-home" /></a>
You want to use the URL.Action() helper:
<span class="glyphicon glyphicon-home"></span> Shop
The following item list code is inside of a navbar with navbar-fixed-top. The code below is output that was originally written as haml code.
Why does the "Manage Teams" item close the dropdown menu, but "Add sale ..." does not?
<li class="dropdown open" id="settings-drop">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">
<span class="glyphicon glyphicon-plus"></span>
</a>
<ul aria-labelledby="settings-drop" class="dropdown-menu" role="menu">
<li role="presentation">
<a data-remote="true" href="http://localhost:3000/sales/new?referer=notifications" role="menuitem">Add sale ...</a>
</li>
<li role="presentation">
Manage Teams
</li>
</ul>
</li>
It seems like the data-remote="true" hash is somehow interfering with bootstraps ability to detect the item being clicked on and close it.