Jasmine and Karma, latest version, testing an AngularJS instance.
I tried
expect(element('a.topic-heading-link-10')).toBeDefined();
but it responds
expect undefined toBeDefined undefined
http://example.com/test/e2e/scenarios.js:16:7
expected undefined but was undefined
Not doesn't look very good. What is a better way to test the presence of a CSS selector?
You can use count to ensure your "look up" found something. For instance:
expect(element('a.topic-heading-link-10').count()).toEqual(1);
If the element doesn't exists or it doesn't have that specific class, count() will equal 0.
Related
I started working with CSS variables to try out making a modular sizing scale. But I quickly ran into problems where CSS values were ignored but I did not see any indication on what was wrong.
Let's see a minimal reproduction of the problem:
:root {
--ratio: 1.25;
--font-size-medium-heading: calc(var(--ratio) * 1rem);
--font-size-large-heading: calc(var(--font-medium-heading) * var(--ratio)); /* note the typo in the var */
}
h1 {
font-size: var(--font-size-large-heading);
}
I made a typo on purpose to see what will happen (I have left out -size from the variable name). Since my heading got mini I tried querying the value of my new CSS variable:
getComputedStyle(document.documentElement).getPropertyValue('--font-size-large-heading') === ''
It returned an empty string.
Let's head to Chrome's style inspector and see if I get the warning sign ⚠️:
MDN advises to use a CSS validator. So let's try out this: https://jigsaw.w3.org/css-validator/validator
My guess is that this validator is not really up-to-date (if anyone using it still).
Update
I understood that according to the spec it is a valid statement, but the computed-time value of it is invalid. I want to know about these as it is just hiding the true problem in a very frequent mistake (if you have ever spent a day on finding out that Angular expected a "'thing'" instead of "thing" in a template, you will understand how bad is having no output about invalid values).
Is there a way to get an error output about computed-time invalid CSS vars and calc values?
First the spec
If a property contains one or more var() functions, and those functions are syntactically valid, the entire property’s grammar must be assumed to be valid at parse time. It is only syntax-checked at computed-value time, after var() functions have been substituted.
This why you don't see the yellow triangle in chrome devtool, because syntax wise it's valid.
From the spec focus on the fourth rule
Otherwise, the property containing the var() function is invalid at computed-value time
Also
A declaration can be invalid at computed-value time if it contains a var() that references a custom property with the guaranteed-invalid value
The third line in your code contains a var() that references a css variable with the guaranteed-invalid value
Why?
The initial value of a custom property is a guaranteed-invalid value. As defined in § 3 Using Cascading Variables: the var() notation, using var() to substitute a custom property with this as its value makes the property referencing it invalid at computed-value time.
A none-existing css variables basically creates it and it's initial value is the guaranteed-invalid value.
What's that initial value compute to ?
This value serializes as the empty string, but actually writing an empty value into a custom property, like --foo: ;, is a valid (empty) value, not the guaranteed-invalid value. If, for whatever reason, one wants to manually reset a variable to the guaranteed-invalid value, using the keyword initial will do this.
This is why getComputedStyle(document.documentElement).getPropertyValue('--font-size-large-heading') returns an "empty string" (guaranteed-invalid value)
I have stumbled upon this pen.
In it's code there are fragments using var(--tx, 0)
Then variable --tx is referenced and set in JS via
document.documentElement.style.setProperty('--tx', 'valueForProperty');
I searched google, mdn etc. and found out css3 variables. But what I understood, about them, is that one declares variables in :root pseudo element then use them with var keyword (mdn).
I didn't find information about second variable to var. I guess var(name, value) initializes variable in place, yet I couldn't replicate this in my pen.
The original author uses SCSS preprocesor, it might be the catch, but it declares variables with $ sign.
So I ask if somebody can explain, what's going on in this pen in regards to var statements.
In DalekJS you can assert that an element has a class with
test.assert.attr('#logOutButton', 'class').to.contain('ng-hide')
Is it possible to somehow detect if an element does not have a class? When I write
test.assert.attr('#logOutButton', 'class').to.not.contain('ng-hide')
the test just ends without an error (just a warning that done() was not called). So this is maybe a bug and a feature request!?
I have a flex4 applciation (mx+spark). When I use:
FlexGlobals.topLevelApplication.styleManager.loadStyleDeclarations(skinName, true);
This works fine: new style is applied.
The trouble is when I apply a new style, it mixes both: this happens because I need to Unload style first.
I try to unload it with:
FlexGlobals.topLevelApplication.styleManager.unloadStyleDeclarations("style/normal.swf",false);
And I always got an error:
ReferenceError: Error #1069: La property 0 cannot be found on Number
and there is no default value.
at normal/unloadOverrides()[null/normal-generated.as:721]
at normal/unload()[null/normal-generated.as:676]
Any idea on how to load/unload swf css in Flex4?
The styles will be updated the next time one of the following methods is called with the update property set to true:
clearStyleDeclaration()
loadStyleDeclarations()
setStyleDeclaration()
unloadStyleDeclarations()
Typically, if you call the one of these methods multiple times, you set this property to true only on the last call, so that Flex does not call the styleChanged() method multiple times.
More information here.
I have an observer to a value "App.selectedValue". I also have another Ember object that has a binding (App.someObj.appValueBinding) to App.selectedValue. However, when my observer is called, the binding of App.someObj is not updated.
This is illustrated in http://jsfiddle.net/Ur2Qj/8/
In the jsfiddle, you can see in the Chrome debugger or FireBug, that App.selectedValue and App.someObj.appValue have different values, even tho' the latter is bound to the former.
Seems like the binding should be updated when the observer is called. Is this expected behavior in Emberjs or is it a bug? Is there a work-around?
Thanks for looking at this!
Take a look at this: http://jsfiddle.net/ud3323/GUHCD/ (in JavaScript; I don't like CoffeeScript... sorry).
The two main things you've got wrong here is not using get() and set() properly and in your observer you need to set App.someController.content after the end of the current runloop (which means after all the other bindings have taken place). You do this by using Ember.run.next(). You could also use Ember.run.sync() there as well.
Oh and you need to use jQuery 1.7.1. Version 1.5.2 is not compatible with Ember.