How ignore snapshot generated by jest on jest's coverage? - javascript

I'm setting some new configurations to jest, I got ignore some files like *.stories.js, but when I use *.js.snap or *.snap, the jest don't work well.
I'm using react-scripts, where the same use jest
So for example, if I only ignore *.stories.js like this below command:
react-scripts test --coverage --collectCoverageFrom=!src/**/*.stories.js
------------------------------------------------|----------|----------|----------|----------|-------------------|
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
------------------------------------------------|----------|----------|----------|----------|-------------------|
All files | 92.98 | 90 | 96.43 | 94.34 | |
components/atoms/grid | 100 | 100 | 100 | 100 | |
Grid.js | 100 | 100 | 100 | 100 | |
index.js | 0 | 0 | 0 | 0 | |
components/atoms/grid/__snapshots__ | 0 | 100 | 100 | 0 | |
Grid.test.js.snap | 0 | 100 | 100 | 0 | 1 |
components/atoms/grid/components | 100 | 100 | 100 | 100 | |
Cell.js | 100 | 100 | 100 | 100 | |
index.js | 0 | 0 | 0 | 0 | |
components/atoms/grid/components/__snapshots__ | 0 | 100 | 100 | 0 | |
Cell.test.js.snap | 0 | 100 | 100 | 0 | 1 |
components/atoms/grid/helpers | 0 | 0 | 0 | 0 | |
calcOffset.js | 0 | 0 | 0 | 0 | |
index.js | 0 | 0 | 0 | 0 | |
components/atoms/text | 100 | 100 | 100 | 100 | |
Text.js | 100 | 100 | 100 | 100 | |
index.js | 0 | 0 | 0 | 0 | |
components/atoms/text/__snapshots__ | 0 | 100 | 100 | 0 | |
Text.test.js.snap | 0 | 100 | 100 | 0 | 1 |
helpers | 100 | 100 | 100 | 100 | |
breakpoints.js | 100 | 100 | 100 | 100 | |
calcPercent.js | 100 | 100 | 100 | 100 | |
index.js | 0 | 0 | 0 | 0 | |
provider | 100 | 50 | 100 | 100 | |
style.js | 100 | 50 | 100 | 100 | 9 |
theme | 87.5 | 100 | 50 | 100 | |
GlobalStyle.js | 100 | 100 | 100 | 100 | |
colors.js | 100 | 100 | 100 | 100 | |
index.js | 83.33 | 100 | 50 | 100 | |
------------------------------------------------|----------|----------|----------|----------|-------------------|
But if I add *.js.snap don't find the other files that doesn't is snap
react-scripts test --coverage --collectCoverageFrom=!src/**/*.stories.js --collectCoverageFrom=!src/**/*.js.snap
----------|----------|----------|----------|----------|-------------------|
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files | 0 | 0 | 0 | 0 | |
----------|----------|----------|----------|----------|-------------------|

I solved did add the configuration inside package.json
"jest": {
"collectCoverageFrom": [
"!<rootDir>/src/**/*.stories.js",
"src/**/*.{js,jsx}",
"!<rootDir>/node_modules/"
]
},

Related

Improve debugging output of a recursive function

I have the following recursive function to count the number of ways change can be returned given various coin denominations:
function makeChange(amount, coins) {
// Note: using Floats here will not work
console.log(`Amount: ${amount}, Coins: ${coins}`);
return (amount === 0) ? 1 :
(amount < 0) ? 0 :
(!coins.length) ? 0 :
makeChange(amount-coins[0], coins)
+ makeChange(amount, coins.slice(1));
}
console.log(
makeChange(11, [7,3,1])
);
However, I'd like to improve the visual-aspect of the debugging to really see what might be going on behind the scenes of the recursive function -- almost like each level of the stack and how to show that. I've improved it to pass a level parameter so I can do indentation and I then have:
function makeChange(amount, coins, level=0) {
console.log(`${' '.repeat(level)}Amount: ${amount}, Coins: ${coins}`);
return (amount === 0) ? 1 :
(amount < 0) ? 0 :
(!coins.length) ? 0 :
makeChange(amount-coins[0], coins, level+1)
+ makeChange(amount, coins.slice(1), level+1);
}
console.log(
makeChange(10, [5,1])
);
But even this is a bit difficult to understand as it has so much superfluous input. What might be a better way to add in various debug helpers to better visualize this?
One possibility is just to also track the returns and use a bit more formatting to group together the events at a single level.
You can run this here, but you will need to open the browser console to see the results, as there are too many lines for StackOverflow's one:
function makeChange(amount, coins, level=0) {
console.log(`${'| '.repeat(level)}makeChange(${amount}, [${coins.join (', ')}])`);
const result = (amount === 0) ? 1 :
(amount < 0) ? 0 :
(!coins.length) ? 0 :
makeChange(amount-coins[0], coins, level+1)
+ makeChange(amount, coins.slice(1), level+1);
console.log(`${'| '.repeat(Math .max(level - 1, 0))}${level > 0 ? '| ' : ''}+--> ${result}`);
return result;
}
console .log (
makeChange(11, [7, 3, 1])
);
.as-console-wrapper {max-height: 100% !important; top: 0}
It will give you output like this:
makeChange(11, [7, 3, 1])
| makeChange(4, [7, 3, 1])
| | makeChange(-3, [7, 3, 1])
| | +--> 0
| | makeChange(4, [3, 1])
| | | makeChange(1, [3, 1])
| | | | makeChange(-2, [3, 1])
| | | | +--> 0
| | | | makeChange(1, [1])
| | | | | makeChange(0, [1])
| | | | | +--> 1
| | | | | makeChange(1, [])
| | | | | +--> 0
| | | | +--> 1
| | | +--> 1
| | | makeChange(4, [1])
| | | | makeChange(3, [1])
| | | | | makeChange(2, [1])
| | | | | | makeChange(1, [1])
| | | | | | | makeChange(0, [1])
| | | | | | | +--> 1
| | | | | | | makeChange(1, [])
| | | | | | | +--> 0
| | | | | | +--> 1
| | | | | | makeChange(2, [])
| | | | | | +--> 0
| | | | | +--> 1
| | | | | makeChange(3, [])
| | | | | +--> 0
| | | | +--> 1
| | | | makeChange(4, [])
| | | | +--> 0
| | | +--> 1
| | +--> 2
| +--> 2
| makeChange(11, [3, 1])
| | makeChange(8, [3, 1])
| | | makeChange(5, [3, 1])
| | | | makeChange(2, [3, 1])
| | | | | makeChange(-1, [3, 1])
| | | | | +--> 0
| | | | | makeChange(2, [1])
| | | | | | makeChange(1, [1])
| | | | | | | makeChange(0, [1])
| | | | | | | +--> 1
| | | | | | | makeChange(1, [])
| | | | | | | +--> 0
| | | | | | +--> 1
| | | | | | makeChange(2, [])
| | | | | | +--> 0
| | | | | +--> 1
| | | | +--> 1
| | | | makeChange(5, [1])
| | | | | makeChange(4, [1])
| | | | | | makeChange(3, [1])
| | | | | | | makeChange(2, [1])
| | | | | | | | makeChange(1, [1])
| | | | | | | | | makeChange(0, [1])
| | | | | | | | | +--> 1
| | | | | | | | | makeChange(1, [])
| | | | | | | | | +--> 0
| | | | | | | | +--> 1
| | | | | | | | makeChange(2, [])
| | | | | | | | +--> 0
| | | | | | | +--> 1
| | | | | | | makeChange(3, [])
| | | | | | | +--> 0
| | | | | | +--> 1
| | | | | | makeChange(4, [])
| | | | | | +--> 0
| | | | | +--> 1
| | | | | makeChange(5, [])
| | | | | +--> 0
| | | | +--> 1
| | | +--> 2
| | | makeChange(8, [1])
| | | | makeChange(7, [1])
| | | | | makeChange(6, [1])
| | | | | | makeChange(5, [1])
| | | | | | | makeChange(4, [1])
| | | | | | | | makeChange(3, [1])
| | | | | | | | | makeChange(2, [1])
| | | | | | | | | | makeChange(1, [1])
| | | | | | | | | | | makeChange(0, [1])
| | | | | | | | | | | +--> 1
| | | | | | | | | | | makeChange(1, [])
| | | | | | | | | | | +--> 0
| | | | | | | | | | +--> 1
| | | | | | | | | | makeChange(2, [])
| | | | | | | | | | +--> 0
| | | | | | | | | +--> 1
| | | | | | | | | makeChange(3, [])
| | | | | | | | | +--> 0
| | | | | | | | +--> 1
| | | | | | | | makeChange(4, [])
| | | | | | | | +--> 0
| | | | | | | +--> 1
| | | | | | | makeChange(5, [])
| | | | | | | +--> 0
| | | | | | +--> 1
| | | | | | makeChange(6, [])
| | | | | | +--> 0
| | | | | +--> 1
| | | | | makeChange(7, [])
| | | | | +--> 0
| | | | +--> 1
| | | | makeChange(8, [])
| | | | +--> 0
| | | +--> 1
| | +--> 3
| | makeChange(11, [1])
| | | makeChange(10, [1])
| | | | makeChange(9, [1])
| | | | | makeChange(8, [1])
| | | | | | makeChange(7, [1])
| | | | | | | makeChange(6, [1])
| | | | | | | | makeChange(5, [1])
| | | | | | | | | makeChange(4, [1])
| | | | | | | | | | makeChange(3, [1])
| | | | | | | | | | | makeChange(2, [1])
| | | | | | | | | | | | makeChange(1, [1])
| | | | | | | | | | | | | makeChange(0, [1])
| | | | | | | | | | | | | +--> 1
| | | | | | | | | | | | | makeChange(1, [])
| | | | | | | | | | | | | +--> 0
| | | | | | | | | | | | +--> 1
| | | | | | | | | | | | makeChange(2, [])
| | | | | | | | | | | | +--> 0
| | | | | | | | | | | +--> 1
| | | | | | | | | | | makeChange(3, [])
| | | | | | | | | | | +--> 0
| | | | | | | | | | +--> 1
| | | | | | | | | | makeChange(4, [])
| | | | | | | | | | +--> 0
| | | | | | | | | +--> 1
| | | | | | | | | makeChange(5, [])
| | | | | | | | | +--> 0
| | | | | | | | +--> 1
| | | | | | | | makeChange(6, [])
| | | | | | | | +--> 0
| | | | | | | +--> 1
| | | | | | | makeChange(7, [])
| | | | | | | +--> 0
| | | | | | +--> 1
| | | | | | makeChange(8, [])
| | | | | | +--> 0
| | | | | +--> 1
| | | | | makeChange(9, [])
| | | | | +--> 0
| | | | +--> 1
| | | | makeChange(10, [])
| | | | +--> 0
| | | +--> 1
| | | makeChange(11, [])
| | | +--> 0
| | +--> 1
| +--> 4
+--> 6
6
It's not beautiful, but it's not too bad.
It seems like the following would be useful to potentially print depending on the verbosity level of the script:
The stack level. Of this can be done using tabs or something similar rather than just "Level=1".
Whether the base case is reached or not. For example, the above function might only reach the base case three times out of 1000 recursive function calls.
The variables that the function is applied with.
With the above, we can improve the function to something like the following:
function makeChange(amount, coins, verbose) {
console.log(`Changing ${amount}...`);
return (function _makeChange(amount, coins, verbose, debugLevel=0, debugCoinsUsed=[]) {
if (verbose || amount===0)
console.log(`${' '.repeat(debugLevel)}Amount: ${amount}, Coins: ${coins}${ amount===0? ' ==> ['+ debugCoinsUsed + ']' :''}`);
return (amount === 0) ? 1 :
(amount < 0) ? 0 :
(!coins.length) ? 0 :
_makeChange(amount-coins[0], coins, verbose, debugLevel+1, [...debugCoinsUsed, coins[0]])
+ _makeChange(amount, coins.slice(1), verbose, debugLevel+1, [...debugCoinsUsed]);
})(amount, coins, verbose);
}
console.log(
makeChange(10, [5,1]),
makeChange(10, [5,1], true)
);
And the non-verbose call would log:
makeChange(10, [5,1], false)
Changing 10...
Amount: 0, AvailableCoins: 5,1 ==> [5,5]
Amount: 0, AvailableCoins: 1 ==> [5,1,1,1,1,1]
Amount: 0, AvailableCoins: 1 ==> [1,1,1,1,1,1,1,1,1,1]
3

How to group by month and year from Date field using Sequelize ORM

I need to group by month or year in the Date column of the table. and I currently used the group function also. I need to add an additional group condition. Is it possible having two grouping conditions and grouping monthly, yearly in Sequelize? Please if someone is using it, share it with me.
Table
-----------------------------------------------------------
| bulk_id | date | grade_GL | gross_weight | lot_id |
-----------------------------------------------------------
| 100 | 2020-10-02 | A | 100 | 1000 |
| 100 | 2020-10-02 | B | 120 | 1002 |
| 100 | 2020-10-02 | C | 140 | 1004 |
| 101 | 2020-10-22 | A | 210 | 1006 |
| 101 | 2020-10-22 | B | 230 | 1008 |
| 101 | 2020-10-22 | C | 250 | 1010 |
| 102 | 2020-11-03 | A | 110 | 1013 |
| 102 | 2020-11-03 | B | 130 | 1015 |
| 102 | 2020-11-03 | C | 200 | 1017 |
| 103 | 2020-11-23 | A | 220 | 1019 |
| 103 | 2020-11-23 | B | 240 | 1021 |
| 103 | 2020-11-23 | C | 150 | 1023 |
Expected Result
------------------------------------------------
| grade_GL | month | sum_of_gross_weight |
------------------------------------------------
| A | October | 310 |
| B | October | 350 |
| C | October | 390 |
| A | November | 330 |
| B | November | 370 |
| C | November | 350 |
** When bulk_Id 100,101,102,103 is given expected result should be above table.
Here is my current Sequeilize:
const gradeWiseTotalLots = await Lot.findAll({
attributes: ['grade_GL', [sequelize.fn('sum', sequelize.col('gross_weight')), 'total_Gross_weight'],],
where: {BulkBulkId: bulk_id_ele.dataValues.bulk_id,},
group: ['grade_GL']
});
Select statement I would expect is:
SELECT `grade_GL`, sum(`gross_weight`) AS `total_Gross_weight` FROM `Lots` AS `Lot` WHERE `Lot`.`BulkBulkId` = 103 GROUP BY `grade_GL`,`month`;

How to enforce integer sizes in JS? (TypeScript?)

I'm working on a JavaScript project that would benefit hugely from being able to have some very specific integer types enforced (uint8, int256, int20...). I was tempted to use TypeScript but the more I explore it seems to be a bit of misnomer.
I expect a number of responses along the lines of 'don't use JavaScript'. This is a JS implementation of a spec and thus must conform the to spec. I believe that by enforcing these types I can achieve more robust and readable code. I do wonder if someone can make an argument for why this would not be worth the benefits.
For typical machine bit-sizes, you could use typed arrays.
For example,
const typedArray1 = new Int8Array(8);
typedArray1[0] = 32;
This array will store 8-bit signed integers.
For each integer type, you have a corresponding typed array.
See MDN for more details.
For other bit-sizes, I do not have an easy solution.
Typescript allows numbers to be types, and those types can be combined with a type union:
type uint8 = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254;
let works: uint8 = 5;
let doesntWork: uint8 = 2000;
Now those types are only enforced at conpile time, to mitigate this you could use a function that performs a runtime check:
function toUint(n: number): uint8 {
if(!Number.isInteger(n) || n < 0 || n > 255) throw new RangeError("Number is out of Uint8 range");
return n as uint8;
}
const works: uint8 = toUint(Math.random() * 100);
It might get better in the future, there is a proposal to support range types which will beautify the whole thing to:
type uint8 = 0..255;
It is not possible with build-in types so just create a class wrapper with getter and setter for each of your types. Like this:
class Uint8 {
private _value: number;
get value(): number {
return this._value;
}
set value(newValue: number) {
if (newValue < 0 || newValue >255 || Math.round(newValue) !== newValue) return;
this._value = newValue;
}
}

Data optimize using MySQL query or javascript

I have these data in mysql.
| code | date | value |
| A | 2016-04-04 00:00:00 | 0.1 |
| B | 2016-04-04 00:00:02 | 0.5 |
| C | 2016-04-04 00:00:05 | 1 |
| A | 2016-04-04 00:11:00 | 0.2 |
| B | 2016-04-04 00:12:25 | 0.6 |
| C | 2016-04-04 00:15:30 | 0.4 |
and i want adjust and send a data to json using nodejs/expressjs
with daily, monthly, yearly sum.
First i try this query.
SELECT date, value FROM 'table'
WHERE code = 'A'
AND date >= '2016-04-05 00:00:00'
GROUP BY DATE_FORMAT(date, "%y-%m-%d-%H") // or "%y-%m-%d", "%y-%m"
ORDER BY date;
this query runs well. but this is wasteful i think.
because repeatedly querying for number of codes.
Output:
+---------------------+-------+
| date | value |
+---------------------+-------+
| 2016-04-05 00:01:56 | 0 |
| 2016-04-05 01:01:56 | 0 |
| 2016-04-05 02:01:58 | 0 |
| 2016-04-05 03:01:57 | 0 |
| 2016-04-05 04:01:58 | 0 |
| 2016-04-05 05:01:58 | 0 |
| 2016-04-05 06:01:59 | 0 |
| 2016-04-05 07:01:58 | 0 |
| 2016-04-05 08:01:58 | 0 |
| 2016-04-05 09:01:59 | 0 |
| 2016-04-05 10:01:59 | 0.009 |
| 2016-04-05 11:02:00 | 0.007 |
+---------------------+-------+
Can i get all data with one query?
Finally, i want send this form of data with expressjs.
[
A: [{ date: '2016-04-04 00:00:00', sum: 4},
{ date: '2016-04-04 00:01:00', sum: 6}],
B: [{ date: '2016-04-04 00:00:00', sum: 4},
{ date: '2016-04-04 00:01:00', sum: 6}]
]
or this form
[
{ date: '2016-04-04 00:00:00', A: 4, B: 4 },
{ date: '2016-04-04 00:01:00', A: 4, B: 4 }
]
i've try mysql query, sequelize, lodash.
but i can't find right way.
You can use a subquery to format your date so you can group on it. Example with daily sums:
SELECT code, date, sum(value) as value
FROM (select code, DATE_FORMAT(date, "%y-%m-%d") as date, value from t1) as t2
GROUP BY code, date
ORDER BY date
The result:
"A";"16-04-04";"0.30000000447034836"
"B";"16-04-04";"1.100000023841858"
"C";"16-04-04";"1.4000000059604645"

modelling data from rows to columns in Angular dynamically for multiple store locations

hello all i'm very new to angular js.i'm having the stores with different id i need to show the report by date followed by the store id.here is the json data i'm having.i went to the previous questions from stack over flow,but i didn't get the required o/p.help me
My Controller Code
var app = angular.module('app',[]);
app.controller('TestCtrl',['$scope',function($scope){
var items =[
{store:'116',date: "14/11/2015", deptnames : "alchol", value : "-7" },
{store:'116',date: "14/11/2015", deptnames : "tobacoo", value : "98" },
{store:'116',date: "14/11/2015", deptnames : "beer", value : "-5" },
{store:'116',date: "14/11/2015", deptnames : "candy", value : "93" },
{store:'116',date: "15/11/2015", deptnames : "alchol", value : "-7" },
{store:'116',date: "15/11/2015", deptnames : "tobacoo", value : "98" },
{store:'116',date: "15/11/2015", deptnames : "beer", value : "-5" },
{store:'116',date: "15/11/2015", deptnames : "candy", value : "93" },
{store:'117',date: "14/11/2015", deptnames : "alchol", value : "2" },
{store:'117',date: "14/11/2015", deptnames : "tobacoo", value : "8" },
{store:'117',date: "14/11/2015", deptnames : "beer", value : "5" },
{store:'117',date: "14/11/2015", deptnames : "candy", value : "9" },
{store:'118',date: "15/11/2015", deptnames : "alchol", value : "-7" },
{store:'118',date: "15/11/2015", deptnames : "tobacoo", value : "98" },
{store:'118',date: "15/11/2015", deptnames : "beer", value : "-5" },
{store:'118',date: "15/11/2015", deptnames : "candy", value : "93" },
]
$scope.headCells = _.keys(_.groupBy(items, function(item){ return item.deptnames}));
$scope.rows = _.groupBy(items, function(item){ return item.date});
$scope.rowsstore = _.groupBy(items, function (item) { return item.store });
$scope.sortByYearProp = function(values){
return _.sortBy(values, function(value){
return values.deptname;
});
}
}])
My HTML
<table ng-controller="TestCtrl as test">
<tr><th>BDate</th><th>location</th><th ng-repeat="deptnames in headCells">{{deptnames}}</th></tr>
<tr data-ng-repeat="(date, value) in rows">
<td>{{date}}</td>
<td data-ng-repeat="(store,value) in rowsstore">{{store}} </td>
<td ng-repeat="obj in sortByYearProp(value)">{{obj.value}}</td>
</tr>
</table>
actual op like dis
+
| | | | | | | | | | | | |
+------------+----------+--------+---------+------+-------+----+----+----+----+----+----+
| BDate | location | alchol | tobacoo | beer | candy | | | | | | |
| 14/11/2015 | 116 | 117 | 118 | -7 | 98 | -5 | 93 | 2 | 8 | 5 | 9 |
| 15/11/2015 | 116 | 117 | 118 | -7 | 98 | -5 | 93 | -7 | 98 | -5 | 93 |
+------------+----------+--------+---------+------+-------+----+----+----+----+----+----+
my required op is
+----------------------------+----------------+--------+---------+------+-------+--+--+--+--+--+--+
| BDate | location | alchol | tobacoo | beer | candy | | | | | | |
| 14/11/2015 | 116 | -7 | 98 | -5 | 93 | | | | | | |
| 14/11/2015 | 117 | 2 | 8 | 5 | 9 | | | | | | | | |
| 15/11/2015 | 116 | -7 | 98 | -5 | 93 | | | | | | |
| 15/11/2015 | 118 | -7 | 98 | -5 | 93 | | | | | | |

Categories