We have a LESS codebase with code like
// my-theme.less
#brand-color: #c0ffee;
#button-background: #brand-color;
and (JavaScript/mocha) tests that assert that the "mappings" in this codebase are correct, e.g. that #button-background is mapped to #brand-color, like
import {parameterValueInTheme} from './my-test-utils.mjs';
describe('button-background', function() {
it('should be mapped to "#brand-color"', function() {
assert.equal(parameterValueInTheme('#button-color', 'my-theme'), '#brand-color');
});
});
Now we would like to measure the actual coverage of our tests, i.e. the percentage of LESS lines/statements covered by our unit tests.
Has this already been done? Is there a coverage tool for LESS (like nyc/istanbul for JavaScript)? The question could be broadened to CSS instead of LESS (or SCSS or any precompiler), as the problem seems to be really similar.
Related
Current situation:
We are using cypress for test automation. We have a folder named 'integration' which contains several 'spec' files. These spec files can contain one or more tests related to each other.
Problem:
I want to organize the cypress test automation on bamboo properly. What I want to do is have test suites e.g.
Playground_suite contains: 1) slide_tests_spec.js
2) teeter_totters_tests_spec.js ...
Road_suite contains: 1) car_tests_spec.js 2) truck_tests_spec.js ...
The I have the option of running Playground_suite that will only run the spec files defined in this suite.
Is this possible in cypress, if yes, how? Please help.
We had faced this same type of issue. What we had come up to solve the same issue was the following:
00_suite.example.js:
import Test01 from './e2e_test01.example.js';
import Test02 from './e2e_test02.example.js';
import Test03 from './e2e_test03.example.js';
describe('Cypress_PreTest_Configuration', function() {
console.log(Cypress.config());
});
// This is an example suite running tests in a specified order -
// All tests contained in each of these files will be run before the next
// file is processed.
describe('Example_E2E_Test_Suite', function() {
Test01();
Test02();
Test03();
});
describe('Example_Reverse_Ordered_E2E_Test_Suite', function() {
Test03();
Test02();
Test01();
});
The key in the actual test files is that they contain the "export default function() {}" option prior to the describe suite definition(s):
e2e_test01.example.js:
export default function() {
describe('Example_Tests_01', function() {
it('TC01 - Example Tiger Tests', function() {
doNothingOne();
console.log(this.test.parent.parent.title);
cy.visit(this.commonURIs.loginURI);
})
})
}
When attempting to run the e2e_test*.example.js files within the Cypress UI, you will find that the UI will report that there are no tests found. You will have to execute the tests through through the suite definition files. We had approached this limitation with only using the 'suite' approach for E2E tests while we utilize the standard spec files for regression and minimum acceptance testing.
I hope that this example is helpful for you and perhaps someone else may have an other solution.
I'm having a strange issue I haven't seen occur. I am trying to do some basic addition to some variables like this:
#screen-break-sm: 768px;
#screen-break-md: 992px;
#screen-max-mobile: #screen-break-sm;
#screen-min-desktop: #screen-break-sm + 1;
Then, those values are being used in some media queries. When it is compiled using gulp-less (version ~3.0.0 in package.json) via Gulp, the output ends up being something like:
#media (min-width:768px + 1) {
// CSS
}
I'm expecting:
#media (min-width:769px) {
// CSS
}
I have tried doing the addition as both #screen-break-sm + 1 and also screen-break-sm + 1px. I've also tried removing the px part of the original values and doing the add and appending the px afterwards, but that doesn't add either.
In case it is relevant, this is one of the gulp scripts that builds a section where I first ran into this issue:
module.exports = function (build) {
return function () {
var pagesPath = build.options.styles.buildPath + '/pages/';
return build.gulp.src('./resources/assets/less/pages/**/*')
.pipe(build.plugins.less({
paths: [ build.plugins.path.join(__dirname, 'less', 'vendor', 'theme', 'bootstrap') ]
})).on('error', build.errorHandler)
.pipe(build.plugins.minifyCss()).on('error', build.errorHandler)
.pipe(build.plugins.extReplace('.min.css')).on('error', build.errorHandler)
.pipe(build.gulp.dest(pagesPath));
};
};
Any ideas why LESS is concatenating/appending instead of performing addition?
[EDIT]
While the solution is the same as the other question that was identified as a possible duplicate, that question does not discuss the problem that users will encounter directly, and therefore I think this question is much better suited for searching purposes. I never found that solution after an hour of Googling and only after getting the answer and the "strict math" verbiage did that other question show up.
Look at strict math option which default value is OFF. Are you sure that for some reason you don't have it set to ON?
lessc -sm=on
lessc --strict-math=on
I have a gulp workflow with a simple less task like so:
gulp.task('less', function() {
gulp.src(source_less)
.pipe(sourcemaps.init())
.pipe(less({
sourceMap: true
}))
.pipe(sourcemaps.write())
.pipe(gulp.dest(dest_less));
});
I want the gulp-sourcemaps module to display source maps as inline comments in my CSS file.
But whenever gulp compiles my LESS, the gulp-sourcemaps isn't displaying a path to my source file.
Instead, it displays something like this:
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2
VzIjpbIm1haW4ubGVzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNJLG1DQUFBIiwi
ZmlsZSI6Im1haW4uY3NzIiwic291cmNlc0NvbnRlbnQiOlsibmF2IHtcclxuICAgIGJhY2tncm91bmQtY29
sb3I6IHllbGxvdyAhaW1wb3J0YW50O1xyXG59Il0sInNvdXJjZVJvb3QiOiIvc291cmNlLyJ9 */
I dramatically simplified my gulpfile, removing livereload, autoprefixer and such.
But even in this stripped down version I can't get the source URL to be right.
Been over this thing for quite some time now, any help would be very much appreciated!
You already have sourcemaps inline there. If you base64 decode what comes after sourceMappingURL=data:application/json;base64, you'll get this:
{"version":3,"sources":["main.less"],"names":[],"mappings":"AAAA;EACI,mCAAA","file":"main.css","sourcesContent":["nav {\r\n background-color: yellow !important;\r\n}"],"sourceRoot":"/source/"}
Try it yourself here: https://www.base64decode.org/
For those who stumble upon this post and are wondering how to get a separate file for the map that's is not in base64 format - you can pass a path relative to the destination.
For example:
.pipe(sourcemaps.write('./'))
I needed to create a function for some big color work on my Bootstrap variables. Unfortunately LESS doesn't allow you to create functions that can be called like theirs (ex. #myvar: darken(#color, 20%);).
The option provided on the doc site is to use a mixin that returns a variable. This worked well for me when I used it where the variable was declared as the property value, but I need to run my new mixin on many variables in the Bootstrap variable.less file. If I call the mixin multiple times there, it always returns the first color.
Part that works:
.mixin(#color) {
#var: #color;
}
.caller-1 {
.mixin(blue);
color:#var;
}
.caller-2 {
.mixin(red);
color:#var;
}
CSS
.caller-1 {
color:blue;
}
.caller-2 {
color:red;
}
What does not work:
.mixin(blue);
#color-1: #var; // My value is now blue
.mixin(red);
#color-2: #var; // My value is also blue
I thought I could get around this by building a unique variable in the mixin, but I can't find anyway to build one.
.mixin(#color; #num)
#var+#{num}: #color;
}
.mixin(blue; 1);
#color-1: #var1;
.mixin(red; 2);
#color-2: #var2;
Any idea on how to create a variable name in a mixin or other ideas on how to make one work like the LESS functions?
You can't define variables dynamically in LESS right now, but you can dynamically define selectors (as you probably knew). I will just give an example of that and leave it to you to apply it to the color/variables issue.
.towerMaker (#index) when (#index > 0) {
.block-#{index} {
z-index: #{index};
}
.towerMaker(#index - 1);
}
.towerMaker (7);
Variables are actually constants, and their scope is based only on context (where they appear in the block doesn't matter). It's only different when you call it within a selector block because of context. When you call the mixin at top-level, you define #var once for that level and it won't be overriden.
If you have to use variables, I suggest you try to find a solution taking advantage of the context. For example, you might be able to try something with mixin guards & when(condition) {...} (it's actually even simpler, as #seven-phases-max commented below). This is a way to run a mixin outside the context of a selector but still inside a context (updated example):
& {
.mixin(red);
.test1 { color: #var; }
}
& {
.mixin(blue);
.test1 { color: #var; }
}
You actually can define functions that will be called using Less by your Less runtime, but they can't be defined using Less. This is possible if you run your processor using Node.js, for example. But it's quite a hack and not trivial since you have to write them in JavaScript and wrap values in undocumented less.js types.
You can also call core JavaScript enclosing it within backticks (this is also undocumented). It's good for small blocks of code and for core functions:
length: unit(`Math.log(#{value})`, px);
If you run your Less processor from a Node.js app you can call your own functions that way.
I'm starting with paper.js. I like the fact that it introduces the possibility to have a script with a text/paperscript mime type, which runs in its on scope. However, scripts can become large pretty soon, so I want to be able to divide it in multiple scripts for readability. I thought I could just add more than one script tag and have them all run in the same scope, but apparently this isn't the case.
Both scripts are loaded and do run, but the second script doesn't seem to be in the paper scope.
I've set up an example here: http://barbata.nl/SO/Maps/ This example has some code, but I'll point out the important bits.
It contains two paperscripts:
Maps.js is the main script, which rasterizes the image and allows moving it around. You can ignore the code in this script, for it works fine so far.
Zoom.js is the script in which I wanted to isolate zooming functionality. It uses jq.mobi to capture the scroll wheel of the mouse, since Paper.js doesn't seem to have that event. It then translates that to a call to onMouseScroll, in a similar way Paper does it.
So far so good. The actual problem arises with the zoomIn and zoomOut functions in zoom.js.
It works if I explicity use the paper object to reference the view I want to zoom:
function zoomIn()
{
if (paper.view.zoom < 2)
{
paper.view.zoom = paper.view.zoom * 2;
}
}
But it fails when I remove paper and just reference the view:
function zoomIn()
{
if (view.zoom < 2)
{
view.zoom = view.zoom * 2;
}
}
This surprises me, as I expected the script to be a Paperscript, running in the Paperscope. It works fine if I put this code in Maps.js, so it seems that although zoom.js is loaded by Paper.js (the developer tools in the browser confirm this), it isn't run in the Paperscope.
My question is: are my findings correct? Am I doing something wrong? What is the right way to divide a Paper.js application into multiple units for readability?
Of course I can get it running, but I want to make sure I do it right.
This is indeed how it works. I've opened an issue on GitHub
I found that the "cleanest" way is to do it with this.install(window). It also makes error finding with Chrome developer tools easier since it is more adapted to reporting on the line errors in java-script than "paperscript".
in index.html (for example):
<script type="text/javascript" src='js/other_lib.js'></script>
<script type="text/paperscript" canvas="canvas">
this.install(window);
/*no code 'required' here */
</script>
<body>
<canvas id="canvas" width="1500" height="500"></canvas>
</body>
Then in the js/other_lib.js i just add code as normal:
var r = new Path.Rectangle([100,100],[200,200]);
r.fillColor = 'black';
/*more code here*/
This should generate a rectangle.
What DOES'T NOT WORK for me (as of Paper.js v0.10.2 Release Date: 9. July 2016) is the object operators. Such as adding vecrots pointc = pointa + pointb; for me this is giving a lot of NaN values.
I have had to edit a few libs to get this working, but the change is simple:
var pointc = new Point(pointa.x+pointb.x,pointa.y + pointb.y);