Best practice testing return value from a function with Jest + React Testing Library - reactjs

I have a very simple salary calculator function that receives as parameters input values ​​inside a form and that in the end returns the result with its calculations.
Logic Function
export function calcAnnualSalary(
monthlySalary: string,
healthPlan?: string,
transpostationTicket?: string,
mealTicket?: string,
valueSaturday?: boolean
) {
const annualSalary =
parseFloat(monthlySalary.replace(/\./g, '').replace(',', '.')) * 12
const thirteenth = parseFloat(
monthlySalary.replace(/\./g, '').replace(',', '.')
)
const extraHoliday =
parseFloat(monthlySalary.replace(/\./g, '').replace(',', '.')) / 3
const totalAnnualCrude = annualSalary + thirteenth + extraHoliday
return {
annualSalary,
thirteenth,
extraHoliday,
totalAnnualCrude,
}
}
Testing
With that, I created a very simple test with hardcoded values, I would like to know if this is the best practice to test function calculation logic. To avoid hardcoded for example, I should get the value inside the form, what would it suggest?
import {CalcAnnualSalary} from '~src/components/app/Calculators/CalcAnnualSalary'
import * as Calc from '~src/utils/calculators/'
import * as Lib from '~src/utils/testing-library'
describe('CalculatorAnnualSalary', () => {
it('expect return gross annual salary', () => {
const {annualSalary} = Calc.calcAnnualSalary('1.000,00')
expect(annualSalary).toEqual(12000)
})
})

In the test, you should provide the test double and test data as simply as possible. That reduces the complexity and facilitates testing.
Whether you use static data or dynamically generated test data, keep it simple. With simple test data, you can also more easily predict the desired results.
The test is predictable, when writing test cases, you should provide the desired result before running the test cases, if your input is complicated, the desired result is difficult to calculate, you need to execute the code in your brain with this data.
Use simple test data to test every code branch, the logical fragment of a function.

Related

In fp-ts what is the advantage of using Option instead of typescript's optional (question mark)

I am getting started with fp-ts and was wondering what is the advantage of using Option type over typescript's default notion of optional values represented by question mark?
Typescript tells you whether or not you have the value or not with the question mark. However, often you'll want to perform some sort of computation on them and this is when the Option type from fp-ts shines.
For example, let's say we have two items in a shop and they optionally have prices and we want to write a function to get the price of both of them otherwise we return some value that represents "not for sale". First we'll see how we would do this in vanilla typescript
type ShopItem = {
price?:number
}
const getPrice = (item1: ShopItem, item2: ShopItem):number | null => {
const price1 = item1.price;
const price2 = item2.price;
if (price1 && price2) {
return price1 + price2;
}
return null;
}
This has a few problems. First, there's a bug in there because if the price was 0, then the item should be for sale but instead our falsey check would short circuit out and return null. Secondly, it doesn't scale very well. If we wanted to add multiple ShopItems or even other types of items with optional values, we'll need to keep checking whether or not those values were null.
Now let's compare this to the fp-ts example
https://codesandbox.io/s/laughing-wu-pffe3
import { some, none, ap, Option } from "fp-ts/lib/Option";
import { pipe } from 'fp-ts/lib/pipeable'
type ShopItem = {
price:Option<number> //this type will either be a Some<number> or None
}
const getPrice = (item1: ShopItem, item2: ShopItem): Option<number> =>
pipe(
some((a:number) => (b:number) => a + b),
ap(item1.price),
ap(item2.price)
);
The way this works is that we get the item1 price and the item2 price and we feed it into the addition function inside the some. Notice how there aren't any null checks as this has been abstracted away into our None type.

How to check an array with regular expression in GraphQL

I need to check the existence of some elements in an array as such
I have an array as such
ar = ['one','two','three']
I want to know how I can individually check the elements in the regular expression code below instead of "/something/" that would map through my array and check if they exist in graphQL one by one.
similar : allCockpitHello (filter: {Association : {value : {regex: "\/something/" }}} limit:2){
nodes{
Name{
value
}
}
You need to have the regex string as an input parameter to be used by the resolver, GraphQL is not going to do the filter for you, you need to do/call that logic in the resolver based on your inputs.
Based on your example, you could have something like this on the schema and resolver:
type Node {
name: String!
}
type NodeQueries {
nodes (filterRegEx :String): [Node]!
}
Once you have the input string on the resolver, the implementation of the filter mechanism is up to you.
const resolvers = {
...
NodeQueries: {
nodes: (parent, params) => {
const {filterRegEx} = params; // regex input string
const ar = ['one','two','three'];
// Create a RegExp based on the input,
// Compare the with the elements in ar and store the result...
// You might end up with ... res = ['one', 'three'];
// Now map the result to match your schema:
return _.map(res, name => ({name}) ); // to end up with [{name: 'one'}, {name: 'three'}]
}
}
...
}
GraphQL is not a magic bullet - it's only a query language, it 'transports' your needs to the engine (local client, remote server ...) where all the necessary processing takes place.
In this case you probably need to pass your array and expression as variables to the server (resolver). If processing is expensive results (similar relation) should be already defined, cached, preprocessed, etc.
If dataset is small you can do this entirely client-side - iterate over an array (fetched using graphql).

Tensorflow.js print() and dataSync methods on model.predict not working

I've distilled this down to as few lines of code as I could to get to the bottom of this issue.
currently these are the config constants below (I'm using a array of length 1 to represent tokenised words I'm doing semantic analysis on.
export const top_words = 10000;
export const max_review_length = 1
export const embedding_vector_length = 32
Here is the code, I've substituted the tensors with mock tokens or one word length for now. I'm getting typescript linting errors showing that .print() or .dataSync()[0] will fail on the basis that they do not exist. the line of code in question (.predict) is returning a tensor which has no print or datasync method
const x_train = tf.tensor([[80], [86], [10], [1], [2]]);
const y_train = tf.tensor([[1],[1],[1],[0],[0]])
const x_val = tf.tensor([[1], [3], [102], [100], [104]]);
const y_val = tf.tensor([[0],[0],[1],[1],[1]])
const model = tf.sequential();
model.add(tf.layers.embedding({ inputDim: dictionary.size, inputLength: max_review_length, outputDim: 1 }))
model.add(tf.layers.lstm({units: 200, dropout: 0.2, recurrentDropout: 0.2}))
model.add(tf.layers.dense({units: 1, activation:'sigmoid'}))
model.compile({ loss:'binaryCrossentropy', optimizer:'rmsprop', metrics:['accuracy'] })
const history=model.fit(x_train, y_train,{epochs: 12, batchSize: 5})
history.then(hist => console.log(hist.history.loss)) // Show error loss vs epoch
const predictOut = model.predict(tf.tensor2d([10]))
predictOut.print() or predictOut.dataSync()[0]
returns
If you are using TypeScript you need to specify what predict() returns in such way:
(model.predict(...) as tf.Tensor).print()
since predict() can return either a Tensor or Tensor[]
Ok, so one thing thats easy to forget if you're not used to dealing with Python. Python is syncronous!
the model is async so to solve this problem in this code.
history (the result)
history.then(result => {
model.predict(tftensor2d([10)).print()
console.log('loss ', result.history.loss)
}
otherwise the model doesnt yet have a predict method as it is still calculating.
Gotta love async.

how to code the utility functions in React without cluttering the component it'self

I have build this small react app with 3 components showing weatherforcaset from an api.
I am not sure how I have handled the utils functions in a separate node module is the correct way as it's pretty adhoc, mainly to do with the date handling and creating another 5 arrays with the data received from the api.
https://github.com/c-science1/weatherForecastReact/
Please can someone advise me if there is a better way if doing the same?
Many Thanks!
It looks like you can minimize the code in the function while keeping the DRY principle. You should refactor the following method:
this.createNewLists = function (dayName, itemP){
let itemDate = new Date(itemP.dt_txt);
let currentDate = new Date();
let nextDate = new Date(); ;
if (itemDate.getDate() == currentDate.getDate() ){
this.day1.push(itemP);
this.day1Name = dayName;
}
nextDate.setDate(nextDate.getDate() + 1);
if (itemDate.getDate() === nextDate.getDate()){
this.day2.push(itemP);
this.day2Name = dayName;
}
nextDate.setDate(nextDate.getDate() + 1);
if (itemDate.getDate() === nextDate.getDate()){
this.day3.push(itemP);
this.day3Name = dayName;
}
nextDate.setDate(nextDate.getDate() + 1);
if (itemDate.getDate() === nextDate.getDate()){
this.day4.push(itemP);
this.day4Name = dayName;
}
nextDate.setDate(nextDate.getDate() + 1);
if (itemDate.getDate() === nextDate.getDate()){
this.day5.push(itemP);
this.day5Name = dayName;
}
}
The pattern in this function are repeating them and you can better organize this code.
You can iterate from 1 to 5 (for the weekdays) and minimize your code and keep clean code and the DRY principle.
I would say for the size of your app it is just fine. Regarding things I might do differently, I would not use utils function wrapper, since you already have module serving as namespace.
As for weatherImage function I would probably put it into component file that uses it. If more than one component uses it, I would probably put it into components/common.js. createNewLists would probably also go to this module.

In Firebase, is there a way to get the number of children of a node without loading all the node data?

You can get the child count via
firebase_node.once('value', function(snapshot) { alert('Count: ' + snapshot.numChildren()); });
But I believe this fetches the entire sub-tree of that node from the server. For huge lists, that seems RAM and latency intensive. Is there a way of getting the count (and/or a list of child names) without fetching the whole thing?
The code snippet you gave does indeed load the entire set of data and then counts it client-side, which can be very slow for large amounts of data.
Firebase doesn't currently have a way to count children without loading data, but we do plan to add it.
For now, one solution would be to maintain a counter of the number of children and update it every time you add a new child. You could use a transaction to count items, like in this code tracking upvodes:
var upvotesRef = new Firebase('https://docs-examples.firebaseio.com/android/saving-data/fireblog/posts/-JRHTHaIs-jNPLXOQivY/upvotes');
upvotesRef.transaction(function (current_value) {
return (current_value || 0) + 1;
});
For more info, see https://www.firebase.com/docs/transactions.html
UPDATE:
Firebase recently released Cloud Functions. With Cloud Functions, you don't need to create your own Server. You can simply write JavaScript functions and upload it to Firebase. Firebase will be responsible for triggering functions whenever an event occurs.
If you want to count upvotes for example, you should create a structure similar to this one:
{
"posts" : {
"-JRHTHaIs-jNPLXOQivY" : {
"upvotes_count":5,
"upvotes" : {
"userX" : true,
"userY" : true,
"userZ" : true,
...
}
}
}
}
And then write a javascript function to increase the upvotes_count when there is a new write to the upvotes node.
const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp(functions.config().firebase);
exports.countlikes = functions.database.ref('/posts/$postid/upvotes').onWrite(event => {
return event.data.ref.parent.child('upvotes_count').set(event.data.numChildren());
});
You can read the Documentation to know how to Get Started with Cloud Functions.
Also, another example of counting posts is here:
https://github.com/firebase/functions-samples/blob/master/child-count/functions/index.js
Update January 2018
The firebase docs have changed so instead of event we now have change and context.
The given example throws an error complaining that event.data is undefined. This pattern seems to work better:
exports.countPrescriptions = functions.database.ref(`/prescriptions`).onWrite((change, context) => {
const data = change.after.val();
const count = Object.keys(data).length;
return change.after.ref.child('_count').set(count);
});
```
This is a little late in the game as several others have already answered nicely, but I'll share how I might implement it.
This hinges on the fact that the Firebase REST API offers a shallow=true parameter.
Assume you have a post object and each one can have a number of comments:
{
"posts": {
"$postKey": {
"comments": {
...
}
}
}
}
You obviously don't want to fetch all of the comments, just the number of comments.
Assuming you have the key for a post, you can send a GET request to
https://yourapp.firebaseio.com/posts/[the post key]/comments?shallow=true.
This will return an object of key-value pairs, where each key is the key of a comment and its value is true:
{
"comment1key": true,
"comment2key": true,
...,
"comment9999key": true
}
The size of this response is much smaller than requesting the equivalent data, and now you can calculate the number of keys in the response to find your value (e.g. commentCount = Object.keys(result).length).
This may not completely solve your problem, as you are still calculating the number of keys returned, and you can't necessarily subscribe to the value as it changes, but it does greatly reduce the size of the returned data without requiring any changes to your schema.
Save the count as you go - and use validation to enforce it. I hacked this together - for keeping a count of unique votes and counts which keeps coming up!. But this time I have tested my suggestion! (notwithstanding cut/paste errors!).
The 'trick' here is to use the node priority to as the vote count...
The data is:
vote/$issueBeingVotedOn/user/$uniqueIdOfVoter = thisVotesCount, priority=thisVotesCount
vote/$issueBeingVotedOn/count = 'user/'+$idOfLastVoter, priority=CountofLastVote
,"vote": {
".read" : true
,".write" : true
,"$issue" : {
"user" : {
"$user" : {
".validate" : "!data.exists() &&
newData.val()==data.parent().parent().child('count').getPriority()+1 &&
newData.val()==newData.GetPriority()"
user can only vote once && count must be one higher than current count && data value must be same as priority.
}
}
,"count" : {
".validate" : "data.parent().child(newData.val()).val()==newData.getPriority() &&
newData.getPriority()==data.getPriority()+1 "
}
count (last voter really) - vote must exist and its count equal newcount, && newcount (priority) can only go up by one.
}
}
Test script to add 10 votes by different users (for this example, id's faked, should user auth.uid in production). Count down by (i--) 10 to see validation fail.
<script src='https://cdn.firebase.com/v0/firebase.js'></script>
<script>
window.fb = new Firebase('https:...vote/iss1/');
window.fb.child('count').once('value', function (dss) {
votes = dss.getPriority();
for (var i=1;i<10;i++) vote(dss,i+votes);
} );
function vote(dss,count)
{
var user='user/zz' + count; // replace with auth.id or whatever
window.fb.child(user).setWithPriority(count,count);
window.fb.child('count').setWithPriority(user,count);
}
</script>
The 'risk' here is that a vote is cast, but the count not updated (haking or script failure). This is why the votes have a unique 'priority' - the script should really start by ensuring that there is no vote with priority higher than the current count, if there is it should complete that transaction before doing its own - get your clients to clean up for you :)
The count needs to be initialised with a priority before you start - forge doesn't let you do this, so a stub script is needed (before the validation is active!).
write a cloud function to and update the node count.
// below function to get the given node count.
const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp(functions.config().firebase);
exports.userscount = functions.database.ref('/users/')
.onWrite(event => {
console.log('users number : ', event.data.numChildren());
return event.data.ref.parent.child('count/users').set(event.data.numChildren());
});
Refer :https://firebase.google.com/docs/functions/database-events
root--|
|-users ( this node contains all users list)
|
|-count
|-userscount :
(this node added dynamically by cloud function with the user count)

Resources