I am trying to getByRole where I have an <li />, which is a child of a styled component.
The styled component is by default display: none, then under a min-width media query it's set to display: flex.
Running getByRole('listitem') works without the display: none but not with it, indicating that styled-components is telling the DOM that because it is set to display: none it doesn't exist.
This is despite the debug HTML output actually showing the <li /> being rendered:
TestingLibraryElementError: Unable to find an accessible element with the role "listitem"
Here are the accessible roles:
document:
Name "":
<body />
--------------------------------------------------
<body>
<div>
<div>
<ul
class="sc-gzVnrw sc-VigVT kjwzNy"
>
<li><!-- bunch of stuff --></li>
</ul>
</div>
</div>
</body>
I have tried mocking the media query matching using jest-matchmedia-mock, with no luck.
I don't care about testing the media query or styles at all, so is there a way I can tell styled components to not apply the styles during testing?
I found a kind of solution which is a feature of dom-testing-library:
getByRole('listitem', { hidden: true })
This includes hidden items.
There is a commit detailing this change here: https://github.com/testing-library/dom-testing-library/pull/352/files/7cdfcfa466774ca78940330fe95d00c9e744b673
Related
I write a website with Vue.js and to handle user interface, I want to use Vue Formulate. All in all it works, but I have trouble to style input errors. So, I tried to make a very simple example to change the background color from the error list, but it doesn't work.
That is my easy component:
<template>
<div>
<p>Test for VueFormulate</p>
<FormulateInput
type="text"
validation="required"
/>
</div>
</template>
<script>
export default {
name: 'HelloWorld'
}
</script>
<style scoped>
li.formulate-input-error {
background-color:green;
}
</style>
After the site is loaded and the error list element is there, I can change the background-color in the Google Chrome devtools. But not bevor.
I hope somebody can explain what I have to do to make it work.
Your style block is scoped meaning you cannot style elements that are not in your immediate <template> (that's the point of scoping). You have three options:
Remove the scoped portion of your <style> block. I don't really recommend this.
Move your general form styles to a global css file. I would recommend this if you use more than 1 input.
Use a deep selector like ::v-deep. This is great for case-by-case overrides, and allows you to select elements that are deeper than your current "scope". Here's an example:
<style scoped>
.formulate-input::v-deep li.formulate-input-error {
background-color: green;
}
</style>
Hi we've recently started making custom elements in Aurelia. One of the rules we have established is that we cannot put class names on custom elements when using them.
This is causing problems for me because the custom element itself doesn't have any properties so it breaks a lot of styling.
In particular it breaks when put inside a flex-container.
I have read on developers.google.com that you can style the custom element using the :host selector, but I can't find any mention of this for Aurelia and I'm struggling to get it to work.
I have a codepen to demonstrate the problem here.
You can style custom elements f.i. by referencing the element itself, like this:
o-custom-element {
color: white;
background: green;
flex-grow: 1;
}
I've forked your codepen to show the change: http://codepen.io/anon/pen/ZeEdLL
Put your custom element in the flex-item div:
<div class="half-container">
<p>Breaking because of custom element (Flex container is yellow)</p>
<div class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item green">
<o-custom-element></o-custom-element>
</div>
</div>
</div>
If you want to use :host, you'll have to put it in a <style> element inside the Shadow DOM of your custom element: http://codepen.io/anon/pen/LWYwxK
The problem is that you'll have to duplicate the rules and it's worse than adding classes to custom element...
Trying to get started with a simple app using WinJS 4.3 and SplitView. I am following the sample in the winjs playground which is fine but it's lacking the information required to change the content area. I don't see any documentation for SplitViewCommand although I've seen various failed attempts at using it (via searching). So I'd like to have a multi page app (or a single page app that loads in the requested page). What power does SplitViewCommand have? Can I just point it at something like pages/page2/page2.html or do I have to use WinJS.Navigation.navigate(). I'm missing the glue between the command and the content area. Thanks.
Take a look at the WinJS Playground. You basically need to have your contentHost in the content area of the SplitViewPanel. The, when you "navigate" to a new page, you just render that page on you contentHost div.
<div class="splitView" data-win-control="WinJS.UI.SplitView">
<!-- Pane area -->
<div>
<div class="header">
<button
class="win-splitviewpanetoggle"
data-win-control="WinJS.UI.SplitViewPaneToggle"
data-win-options="{ splitView: select('.splitView') }"
></button>
<div class="title">SplitView Pane area</div>
</div>
<div class="nav-commands">
<div data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{ label: 'Home', icon: 'home'}"></div>
<div data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{ label: 'Favorite', icon: 'favorite'}"></div>
<div data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{ label: 'Settings', icon: 'settings'}"></div>
</div>
</div>
<!-- Content area -->
<div id="contentHost" class="contenttext"><h2 class="win-h2">SplitView Content area</h2>
<!-- this is where pages are rendered -->
</div>
</div>
Edit: Take a look at this article on how to navigate. SplitView is no difference than with no control at all. You just need to handle the WinJS.Navigation events
After a lot of digging (I guess winjs is still quite new) I found the answer on the codefoster website. In a nutshell, you can use the PageControlNavigator as your contenthost and use WinJS.Navigation.navigate("/pages/page2/page2.html") as the trigger to change the page.
I recently developed a website that looks good on 1024 resolution but gets messed up on larger resolutions. Here are the links to the files you will probably need to review: CSS for the site, CSS for the menu bar. It's a PHP file but I've already linked to the included HTML files.
I have a regular 17' screen while the client has a widescreen. She sees white space on the right side that I don't. I've only seen it as I have used the website viewlike.us to test on different resolutions. How can I make it so it resizes proportionality? Thanks.
This is because you set the body to be 1024 px
body {
width:1024px;
background-image:url(images/top_background.jpg);
background-repeat:no-repeat;
background-color:#FFF;
}
You don't want to do that, what you usually do is to have a page wrapper where you set the size to be 1024px.
For instance you can have this in html
<html>
<head>...</head>
<body>
<div id="pageWrapper">
<!-- all your content here -->
</div>
</body>
</html>
Then in the css you can have something like this:
#pageWrapper {
width:1024px;
margin: 0 auto;
}
You usually have an structure like this:
<html>
<head>...</head>
<body>
<div id="header-wrapper>
<div id="header>
<!-- header content here -->
</div>
</div>
<div id="pageWrapper">
<!-- all your content here -->
</div>
</body>
</html>
Then you can set an image for the header and another for the body, or an image for the header and a background color for the body. It all depends on what are you doing.
The background images usually are not that big. What you usually have are images or patterns that can be repeated either on X or Y or both. On the css you can have something like:
#headerWrapper {
width:100%;
height: 100px;
background: url("/img/background.png") repeat-x;
}
With this the image will repeat horizontally on the header. Then you can set another background for the body, or just a background color.
Again, it depends a lot on what are you trying to achive.
Good luck!!
I have a JSF form that needs to upload a file via an icon click (i.e. without showing the textfield/browse button of the file upload component).
Is it possible to trigger the file-open dialog and uploading functionality of the upload component via some other component type?
No, the file upload dialog is meant to be pretty much unchangeable as a security feature.
I don't think there's any other "off the shelf" component you could use to trigger the file-open dialog (which, after all, results from a <input type=file> written by the renderer).
However, if you're willing to develop your own renderer, it could write both the <input> and your icon's <img> (one right after the other). Give the <input> a css class that uses absolute positioning to place it on top of the <img> and reduces it's opacity to 0 (you could also set the cursor to 'pointer').
Now, when the user clicks on the icon, they're also clicking on the invisible input, which pops up your dialog.
(Now that I think of it, I'm almost positive you can do this without writing your own renderer by just applying the same kind of css to off the shelf components...)
With HTML5, there is new way to styling the css with bootstrap for example and replace image by a glyphicon.
.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
filter: alpha(opacity=0);
opacity: 0;
outline: none;
cursor: inherit;
display: block;
width:32px;
font-size:24pt;
height:12px;
}
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<form>
<span class="btn btn-default btn-file btn-lg">
<span class="glyphicon glyphicon-upload"> </span> <input type="file">
</span>
</form>
</body>
</html>