These are chat archives for FreeCodeCamp/HelpJavaScript

3rd
Jan 2019
Jason Luboff
@JLuboff
Jan 03 00:02
@ke1echi No, I learned it from FCC and just using it. But there is another method http://api.jquery.com/jQuery.getJSON/ which used ajax under the hood but simpler format (and only GET method, no POST)
Kelechi Chinaka
@ke1echi
Jan 03 00:08
ok, not gotten to the fcc section that introduces it, but i'll check it out
Amit Patel
@AmitP88
Jan 03 00:21
hey guys, this is probably a dumb question, but is it possible to still edit a react project after publishing it to gh-pages? (I'm using create-react-app)
Jason Luboff
@JLuboff
Jan 03 00:22
GitHub pages?
image.png
tundeiness
@tundeiness
Jan 03 00:26
@JLuboff :thumbsup:
@AmitP88 I don't know if github will allow you host a react-app though. best thing is to use Heroku
Amit Patel
@AmitP88
Jan 03 00:29
@tundeiness ah ok, thanks bro. I haven't used heroku yet, but I suppose now is a good a time as any :)
@JLuboff lol I know you can make changes to gh-pages normally, but I wasn't sure if it could be done when publishing a react app
tundeiness
@tundeiness
Jan 03 00:30
@AmitP88 yes it is :thumbsup:
Amit Patel
@AmitP88
Jan 03 00:31
@tundeiness ah ok, thanks bro :)
Jason Luboff
@JLuboff
Jan 03 00:31
Looks like it can be done, but not easily
Amit Patel
@AmitP88
Jan 03 00:31
I'll give heroku a go though
I see
Stevegolden12
@Stevegolden12
Jan 03 05:33
@tundeiness @AmitP88 I heard that if you have a github portfolio and want to publish React one way is to have that React on another site like Heroku?
Kinda like this? ;p
I still gotta add more polish to it though lol
Donnie
@Donnie-D
Jan 03 06:18

I am trying to understand javascript behaviour here:

var abc = 'global';

function exam(){
   abc = 'local';
   return abc;
}
console.log(abc);
exam();
console.log(abc);
//console.log(exam());
//exam();

In above code i get

global
local
=> undefined

as a result on the console. Why is the function call showing undefined?

Donnie
@Donnie-D
Jan 03 06:32

Also when I uncomment the function call in the last line then I get the following result on the console

global
global
=> 'local'

which means that the function is behaving as expected now. Could someone explain this behaviour? because when I try to write console log after the functin call then the function call seems to return undefined in above case

Brad
@bradtaniguchi
Jan 03 06:38
@Donnie-D I assume when running on the console you mean either the browser, or nodejs right?
Donnie
@Donnie-D
Jan 03 06:39
@bradtaniguchi yes
browser console precisely
Brad
@bradtaniguchi
Jan 03 06:39
usually you see undefined if you call a function that doesn't return anything. If you do this: console.log('hi') you will notice it prints out hi and under than undefined
you could be seeing that behavior possibly
Donnie
@Donnie-D
Jan 03 06:40
but my function includes a return statement
Brad
@bradtaniguchi
Jan 03 06:42
When you run in the browser console, it appears as tho the last line is executed differently, the prinout will be returned as the "value" returned from the function
Heres a simplified example:
function test() { 
  console.log('test1'); 
  return 'test2'
} 
test();
This will prinout test1 then on the final line test2;
Donnie
@Donnie-D
Jan 03 06:44
so why in my example the position of the function call / console.log is affecting the result from the function? :confused:
Brad
@bradtaniguchi
Jan 03 06:45
Finally here's why the "last line" is special:
function test() { 
  console.log('test1'); 
  return 'test2'
} 
test();
'hi'
That will printout test1 then 'hi'
@Donnie-D If your refering to your repl, this line means the "value" is local only to the exam function: var abc = 'local';
Donnie
@Donnie-D
Jan 03 06:46
why wouldn't it print out test2?
Brad
@bradtaniguchi
Jan 03 06:48
@Donnie-D What would print out test2? The code doesn't care about the return from the function. When using the console (node or otherwise) it usually prints out the return from the function for you, in this case I put 'hi' at the end, which is what is printed out to the console, but just like actual JS code being ran on the page the test() function is called, and the value is returned.... but not used by anyone
Donnie
@Donnie-D
Jan 03 06:52
@bradtaniguchi so do you mean that it is not always essential that the value returned by the function would be displayed on console? like in your case above 'test2' is not showing on console (where as I was under the impression that if a function returns a string, then it is shown on the console. Obviously if I was passing that function's returned value to a variable and then calling a variable then that should show up on the console too)
Brad
@bradtaniguchi
Jan 03 06:54
It depends on how you call the variable. You can think of the console as a place where you can code ON THE RUN. So you can easily write the code I wrote above. Talk to me, and now type in test() which will print out 'test2'. It's like your talking with the javascript instance directly, as it's running
that's why its called a runtime
Now if your using some tool, which "wipes" the previous run-time instance this won't work. I am considering your typing this directly into the built-in console of your browser
this only "refershes" when the page refreshes.
Donnie
@Donnie-D
Jan 03 06:58

I just ran into this while having a random thought :laughing: but now its bugging me that

var abc = 'global';

function exam(){
  var abc = 'local';
  return abc;
}
console.log(abc);

returns

global
=> undefined

which is quite understandable. I am getting undefined because I haven't called the function yet BUT

Brad
@bradtaniguchi
Jan 03 07:00

I am getting undefined because I haven't called the function yet

This is incorrect, your getting undefined because console.log('whatever') returns undefined

just doing console.log() will return undefined, or write a function like: function someFunc() {} then call it with someFunc() and you will get undefined again, its becuase the console.log method doesn't return anything, thus your getting undefined
Donnie
@Donnie-D
Jan 03 07:01
var abc = 'global';

function exam(){
  var abc = 'local';
  return abc;
}
console.log(abc);
exam();

returns

global
=> 'local'

which is also clear because now the function has been executed and called. The problem I am trying to get my head round is below

var abc = 'global';

function exam(){
  var abc = 'local';
  return abc;
}
console.log(abc);
exam();
//console.log(exam());
console.log(abc);

because this returns

global
global
=> undefined

I am getting undefined because I haven't called the function yet

This is incorrect, your getting undefined because console.log('whatever') returns undefined

Got this bit clear. Thanks. What about the resst of the problem above? :smile:
Brad
@bradtaniguchi
Jan 03 07:05
I already mentioned why your "change" doesn't work, its due to var abc = 'local' line. The exam function has its own "ab" variable, and theres the global one. they aren't the same, thus when you call the two console.logs they are BOTH refering to the same global, abc variable. No one is using or caring about the 'local' version
Donnie
@Donnie-D
Jan 03 07:08
So its the last line that matters in the console? I mean If I call the function in the last line then I would get a result or else if I call the function in a line and then in the next / last line I do something else then the function call is ignored?
sorry i really dont mean to drag this. huge thanks for bearing with me
i did a course on console and debugging a while back :laughing: never stumbled into this tricky bit
Brad
@bradtaniguchi
Jan 03 07:11
I need to hit the hay, I will re-iterate the say the returned value from the last line put into the console will be printed out. This includes things that don't really "print out nicly", like an object: new Map()-> Map(0)
Donnie
@Donnie-D
Jan 03 07:12
damn you can rap :thumbsup:
Brad
@bradtaniguchi
Jan 03 07:12
When I say "printed out" I think it performs a specific method on the object, this is why the new map operation looks the way it does, as it's implemented to printout a certain way, and also depends on browser implmentations. Goodluck and night, I recommend learning how the console itself works/functions and should be used. It will prevent you getting confused with how JS works in general
Donnie
@Donnie-D
Jan 03 07:13
I need to hit the hay, I will re-iterate the say
@bradtaniguchi thanks a lot
Amit Patel
@AmitP88
Jan 03 07:14
hey guys, what do you think of my revamped portfolio site? I still need to polish it up and get it fully responsive, but overall this is what it'll look like: https://portfolio-site-react.herokuapp.com/
btw I know I have to add some links to some of the buttons too
Karma Drukpa
@coderkarma
Jan 03 07:15
very impressive Amit
Amit Patel
@AmitP88
Jan 03 07:16
@coderkarma thank you :)
Donnie
@Donnie-D
Jan 03 07:16
@AmitP88 nice page
Amit Patel
@AmitP88
Jan 03 07:17
@Donnie-D thanks! :D
Donnie
@Donnie-D
Jan 03 07:22
@Donnie-D What would print out test2? The code doesn't care about the return from the function. When using the console (node or otherwise) it usually prints out the return from the function for you, in this case I put 'hi' at the end, which is what is printed out to the console, but just like actual JS code being ran on the page the test() function is called, and the value is returned.... but not used by anyone
could anyone explain a little what @bradtaniguchi meant here? I think the solution to my confusion is in this explanation but I failed to ask him further
hamsterbox84
@hamsterbox84
Jan 03 07:25
Hey @Donnie-D , can you post again the sample code that is confusing you, I can try to explain but I am not sure which part is confusing you
Donnie
@Donnie-D
Jan 03 07:52

@hamsterbox84 I think I can narrow down the confusion to the below:

function test(){
  return 'test';
}
test();
console.log('hi');

this gives the following result

hi
=> undefined

Why does the function call not do what it should be. i.e. return 'test'

hamsterbox84
@hamsterbox84
Jan 03 07:54
what do you expect the output of that code to be @Donnie-D ?

do you expect it to be

test
hi

?

Donnie
@Donnie-D
Jan 03 07:55

I think what brad tried to expplain to me was that the function does retrun 'test' but that is not being used anywhere in the code. I can buy this answer but then I would like to know that why does the following code show the function retrun

function test(){
  return 'test';
}
console.log('hi');
test();

the result in this case is

hi
=> 'test'
hamsterbox84
@hamsterbox84
Jan 03 07:55
its mostly a quirk of how you are running the code - I assume you're running it in a nodejs repl or in a browser console?
Donnie
@Donnie-D
Jan 03 07:56
I am doing this in repl.it
hamsterbox84
@hamsterbox84
Jan 03 07:56
so repl.it nodejs console?
is this nodejs console? sorry i dont know
hamsterbox84
@hamsterbox84
Jan 03 07:58
hmm I think thats just a browser console since it says "Native Browser JavaScript" but anyway, lets me try and explain
Donnie
@Donnie-D
Jan 03 07:58
thanks
hamsterbox84
@hamsterbox84
Jan 03 07:59
when you run code in the browser console, it will output the result of the last expression as well as any side effects from running the code
that might be a bit confusing so let me try and make a simpler example
sry just a sec my cat is blocking my keyboard lol
Donnie
@Donnie-D
Jan 03 08:01
no worries. I am way too slow to understand things anyway so take your time with the cat
hamsterbox84
@hamsterbox84
Jan 03 08:02
okay cat is gone for a seocnd - have you ever heard the term "side effect" for programming?
Donnie
@Donnie-D
Jan 03 08:02
cant say if i have
hamsterbox84
@hamsterbox84
Jan 03 08:02
well lets take the term "function" - you might be familiar with mathmatical functions like sin or cos right?
Donnie
@Donnie-D
Jan 03 08:02
yes
hamsterbox84
@hamsterbox84
Jan 03 08:03
so for a function, you give it input and get output right?
sin(90) probably 1 or something I can't remember :)
Donnie
@Donnie-D
Jan 03 08:04
yes a function takes your input and is intended to process and give you a result
hamsterbox84
@hamsterbox84
Jan 03 08:04
but a lot of programming languages have kind of a looser definition of what a function is then a pure math version - function can do stuff besides just giving you a result
for example:
function sideEffectfulFunction(int a) {
  console.log('im a function side effect');
  return math.sin(a);
}
that is a function, but running it does more than just return a value - it has a "side effect" which is a way of saying it affects the global scope beeyond ust returning a value,
the side effect in this case is "im a function side effect" is written to the console
its like if calling sin(90) withdrew a dollar from your bank account and then returned 1
does that kind of make sense as what a side effect is?
Donnie
@Donnie-D
Jan 03 08:09
sorry but could we skip the math functions for this explanation if possible?
hamsterbox84
@hamsterbox84
Jan 03 08:09
sure - I'm not saying sin is important here, just trying to explain what a side effect is
Donnie
@Donnie-D
Jan 03 08:09
i do apologise
hamsterbox84
@hamsterbox84
Jan 03 08:09
np, don't mean to confuse and I am not greatest explainer
anyway, moving on - lets say a side effect is anything a function does beyond the value it returns
you know that console.log is a function right?
Donnie
@Donnie-D
Jan 03 08:10
@hamsterbox84 you obviously know what you aresaying. you just have to come down pretty low to my level to make thigs clear :laughing:
abraham anak agung
@padunk
Jan 03 08:11

@Donnie-D TLDR, your last line will get print in repl.it console return value or =>

var abc = 'global'

function f() {
  abc = 'local'
  return abc;
}
console.log(abc);
exam();

it will print global and => local
comment the console.log(abc) and you get =>local

Donnie
@Donnie-D
Jan 03 08:11
i know that console.log is a function that logs info on the browser console
hamsterbox84
@hamsterbox84
Jan 03 08:11
right, but it also has a return value - every function in javascript has a return value
Donnie
@Donnie-D
Jan 03 08:11
hmm ok
hamsterbox84
@hamsterbox84
Jan 03 08:12
so lets say we have code
var a = console.log('abc');
what do you think the value of the variable "a" will be?
its not a quiz - it will be undefined - but the point is that it is a value. not every programming language is like this (some programming langauges have the concept of void function, but thats a topic for another day)
so - console.log is a function that
1) will print its arguement to the console
2) will return undefined
does this kinda make sense so far? at least the last statement?
Donnie
@Donnie-D
Jan 03 08:15
sorry i quickly left to sort something out. i am back. let me read and then answer
so console.log will print its argument onto the console and ALSO return undefined
thanks. i didnt know this
ok. I am following so far
tundeiness
@tundeiness
Jan 03 08:17
@Stevegolden12 yes it is true. You can setup the repo in github first then when setting up heroku, you can pass the github codes to heroku. That's the way to do it.
hamsterbox84
@hamsterbox84
Jan 03 08:18
okay - so the point of this was to get into how the browser console works, which is what your repl.it is running
when you run a block of code in the repl.it script you have, it runs the code and will print any side effects, and finally it will print the value of the last statemet

so if you ran the code

console.log('abc');

in the repl you should see

'abc'
=> undefined

the

=>

is the return value part of the last statement

Donnie
@Donnie-D
Jan 03 08:20
ok
hamsterbox84
@hamsterbox84
Jan 03 08:20
with me so far?
Donnie
@Donnie-D
Jan 03 08:21
I sure am
hamsterbox84
@hamsterbox84
Jan 03 08:21
okay so if I ran this in the repl, can you try and guess what the output would be?
tundeiness
@tundeiness
Jan 03 08:21
@AmitP88 awesome Amit!!! Till date I haven't set up my portfolio site yet and it's mostly about what tech to use. However I know I am setting it up soon enough.
hamsterbox84
@hamsterbox84
Jan 03 08:22
hmm I cant type rn weird
function test() {
  return 42;
}

test()
okay @Donnie-D can you guess what the output of that would be?
Donnie
@Donnie-D
Jan 03 08:22
I think this should simply print =>42 on console
hamsterbox84
@hamsterbox84
Jan 03 08:23
right, nice
how about
function test() {
  return undefined;
}
sorry bad example
how about
function test() {
  return undefined;
}
test()
Donnie
@Donnie-D
Jan 03 08:23
not sure. I think this should print =>undefined ? maybe
Amit Patel
@AmitP88
Jan 03 08:23
@tundeiness Thank you :) What are you currently working on atm?
hamsterbox84
@hamsterbox84
Jan 03 08:24
@Donnie-D nice, okay lets do another example
function test() {
  return 42;
}

test();
test();
what do you think that will output?
Donnie
@Donnie-D
Jan 03 08:24
=>42
=>42
hamsterbox84
@hamsterbox84
Jan 03 08:25
so thats where the quirk of the repl (and browser console comes in) that is the root of your original question
tundeiness
@tundeiness
Jan 03 08:25
@AmitP88 a lot of stuff bro. markdown project for now.
Donnie
@Donnie-D
Jan 03 08:25
ok?
hamsterbox84
@hamsterbox84
Jan 03 08:25
when you run in repl.it (or if you had copy pasted the whole block into your browser console), you'll see it only outputs the value of the last expression
so for the last statement you'd merely see
=> 42
Amit Patel
@AmitP88
Jan 03 08:26
@tundeiness ah cool. So you're diving into React :)
Donnie
@Donnie-D
Jan 03 08:26
so would it not print the result twice
?
hamsterbox84
@hamsterbox84
Jan 03 08:26
ya
basically you can imagine your last statement gets turned into a return and what happens is
Donnie
@Donnie-D
Jan 03 08:27
but didnt we call the function twice
?
hamsterbox84
@hamsterbox84
Jan 03 08:27
sure, but only the last statement value gets printed
Aditya
@ezioda004
Jan 03 08:27
@AmitP88 Did you start applying?
hamsterbox84
@hamsterbox84
Jan 03 08:27
again, its just a quirk of the environment

basically if you have code

function test() {
  return 42;
}

test();
test();

what it runs as is

function MYCODE() {

  function test() {
    return 42;
  }

  test();
  return test();
}
console.log('=> ' + MYCODE());
so your code runs, and the value of the last statement gets printed
does that make sense?
theres nothing that says the value of the last statement needs to get printed, its just how the browser console decided to implement things to make it easier for people to debug - normally they want to see the output of functions
tundeiness
@tundeiness
Jan 03 08:30
@AmitP88 sure, and angular by the side but I just want to take it one thing at a time. I have actually learnt angular but I haven't done any project with it yet except the one I joined a team to start.
Amit Patel
@AmitP88
Jan 03 08:30
@ezioda004 not yet, getting ready to though. Just gotta polish up my portfolio site and some of my previous projects
@tundeiness For sure. I do the same thing
Donnie
@Donnie-D
Jan 03 08:32
sorry you last example was a little complicated to take in
tundeiness
@tundeiness
Jan 03 08:33
@AmitP88 the react projects look easy. I have set a timeline of january ending to finish it all or 3rd week in january.
Amit Patel
@AmitP88
Jan 03 08:34
@tundeiness yeah, they are pretty straightforward for the most part. I'd say have a go at building the tic tac toe and Simon games for more of a challenge if you want
Aiight guys, I'm off to bed. Have a good one :)
tundeiness
@tundeiness
Jan 03 08:36
@AmitP88 sure. I am relishing the challenge already :wink:
Jason Luboff
@JLuboff
Jan 03 16:03
Morning
Blauelf
@Blauelf
Jan 03 16:10
Evening. You are always behind :P
If it was in the summer, I'd probably call it "late afternoon" instead. But it's dark times on the northern hemisphere. Winter is coming.
Jason Luboff
@JLuboff
Jan 03 16:11
Just a wee-bit behind :P
It's dark just a bit after 5 PM here... I don't like it.
Jason Luboff
@JLuboff
Jan 03 17:06
I'm going through FCC's Testing with Chai... and.. its..not very good. It doesn't really tell you anything about the assertions just the bare minimum... and so far I haven't reached anything that actually explains HOW to setup tests.. like am I supposed to run it every time i restart my Dev server? What values am I supposed to pass? etc etc
Aditya
@ezioda004
Jan 03 17:31
Yep, those challenges are :poop:
Jason Luboff
@JLuboff
Jan 03 17:32
@ezioda004 Ya... I mean..I guess I have a slightly better idea of how to the tests work..but still have no idea how to set them up in my environment :(
Aditya
@ezioda004
Jan 03 17:32
Time to research :P
Jason Luboff
@JLuboff
Jan 03 17:34
@ezioda004 Have any good resources?
Aditya
@ezioda004
Jan 03 17:36
I have only used Jasmine and Jest, their docs did for me
If you are familiar with other testing tools then for reference you can use this
Jason Luboff
@JLuboff
Jan 03 17:37
This is kind of my first forte into testing. I get the idea of it, but I don't know how I'm actually supposed to set it up
Nate Mallison
@NJM8
Jan 03 17:38
I have some stuff I did with mocha and chai but the tutorial it's from switched to Jasmine
Jason Luboff
@JLuboff
Jan 03 17:38
I assume its roughly the same idea though?
there is the mocha and chai stuff
Updated course to Jasmine
Haven't done it myself
Jason Luboff
@JLuboff
Jan 03 17:41
Cool, thanks!
Nate Mallison
@NJM8
Jan 03 17:43
:thumbsup:
Karma Drukpa
@coderkarma
Jan 03 17:57
question
I want to change the color of each letter of h1 , let's say my <h1> Karma Drukpa </h1> is this.
What would be good way of changing colors of each letter of that h1 tag.
_
Brad
@bradtaniguchi
Jan 03 18:04
@coderkarma AFAIK You will need to add css to each letter, thus you need elements to "style", so you will end up with like: <h1><span>K</span><span>a</span> <!-- rest of letters--></h1>or something similar I would think, with or without classes on each element, but I removed them to make it easier to type out
Karma Drukpa
@coderkarma
Jan 03 18:04
[...document.querySelector('h1').innerText].map(char => `<span> classs="${char}> ${char} </span>`)
@bradtaniguchi I tried doing this
Brad
@bradtaniguchi
Jan 03 18:05
@coderkarma whats the resulting html code?
Karma Drukpa
@coderkarma
Jan 03 18:08
@bradtaniguchi but that is not working..
Brad
@bradtaniguchi
Jan 03 18:08
and what is the resulting html? It looks to me like you have a typo
<span> classs="${char}> ${char} </span> -> <span> classs="${char}">${char}</span>
Karma Drukpa
@coderkarma
Jan 03 18:12
@bradtaniguchi hmm that's right. I want my h1 to be colorful with different random colors. I have random colors function already but wondering how would I implement that.
Jason Luboff
@JLuboff
Jan 03 18:15
@bradtaniguchi Back to work?
Brad
@bradtaniguchi
Jan 03 18:23
@JLuboff Yea, finally back from vacation
Jason Luboff
@JLuboff
Jan 03 18:24
@bradtaniguchi Have a good time?
Brad
@bradtaniguchi
Jan 03 18:24
Yea it was good, super cold tho
How was your holiday break, even without using any vacation time haha?
Jason Luboff
@JLuboff
Jan 03 18:24
Where'd you go?
It was decent, no complaints :)
Brad
@bradtaniguchi
Jan 03 18:27
I went with my GF with her fam to Lake Havasu in Arizona, they have a house out there. The hottest it got was like 55
Jason Luboff
@JLuboff
Jan 03 18:27
Never been to Lake Havasu, but have heard good things
Brad
@bradtaniguchi
Jan 03 18:30
Yea its part-time retirement city, and crazy during spring break
Jason Luboff
@JLuboff
Jan 03 18:31
Ya maybe one day I'll check it out
Jason Luboff
@JLuboff
Jan 03 18:54
@bradtaniguchi Hey...lets talk testing...
Brad
@bradtaniguchi
Jan 03 18:54
i like testing
Jason Luboff
@JLuboff
Jan 03 18:54
I want to test. So.. let me ask some questions :)
first.. whats the normal process for getting started? Should I have a folder test with a test.js file? Do I run it every time while in dev mode?
Brad
@bradtaniguchi
Jan 03 19:07
@JLuboff Youd be testing your nodejs backend right?
Jason Luboff
@JLuboff
Jan 03 19:07
Correct
Brad
@bradtaniguchi
Jan 03 19:08
Ok, so you have a few choices, you can do higher level-tests where you make fake requests to your server and possibly mock some of your application (like database calls) so every time you run the server, you aren't relying on some external state
IE if you run the test to create something, and run a test to return a search result, the results are always the same since you faked each return
plus its faster, and uses less resources instead of calling some real db/external resource
Jason Luboff
@JLuboff
Jan 03 19:10
Ok so instead of say having to fill out my form on the front end, I can create a mock example to use for the test?
Brad
@bradtaniguchi
Jan 03 19:10
It depends on what your sending to your backend, it would be a JSON post request or something right?
Jason Luboff
@JLuboff
Jan 03 19:10
Ya, JSON post
Brad
@bradtaniguchi
Jan 03 19:11
You COULD test the actual form for a full integration test, but then you'd be also testing/dealing with the front-end aswell, which makes things more complicated, brittle, and could prevent you from mocking anything. I wouldn't go with this route since its the most work
Jason Luboff
@JLuboff
Jan 03 19:11
Ok, I'm good with that
Brad
@bradtaniguchi
Jan 03 19:11
But yea, you'd setup a post request to your server and check to see what sort of response is returned
Oh, if you want todo the integeration test where you run everything you could use something like protractor, I think react has one built for it, I know protractor since its used for angular
alpox
@alpox
Jan 03 19:12
@JLuboff We are only talking about testing the api?
Jason Luboff
@JLuboff
Jan 03 19:13
@alpox API and functions within it..ya
alpox
@alpox
Jan 03 19:14
If its testing the api I would not even touch the frontend and write the tests in the backend directly. There are request testers as example there is (if you use chai) chai-http . With that you can directly call your api for testing what it returns. Be aware that if you run your server in normal state you will test with direct access to the database (state-full).
I usually suggest to test within transactions which you never commit but only rollback. This keeps the database state clean and the tests run isolated in a transactionstate
Jason Luboff
@JLuboff
Jan 03 19:16
Tests should only be ran in dev mode though, right? i.e it'll hit my dev database, not staging or production
alpox
@alpox
Jan 03 19:16
@JLuboff Yes you'd test in dev mode (or test mode - many projects use a seperate mode for testing)
Jason Luboff
@JLuboff
Jan 03 19:17
So..lets talk setup then. I should have a folder tests and in there have a file with all my tests?
alpox
@alpox
Jan 03 19:18
Tests should always be as fast as possible (As they should be run often) and reproducible (same state after the tests as before)
There are two ways of organizing tests - one is to put test files directly together with the module which is tested
mailer.js
mailer.mock.js (If needed)
mailer.test.js
Another possibility is to put the tests seperate in a test or tests folder as you say
Jason Luboff
@JLuboff
Jan 03 19:19
So mailer.js is the actual file, where as mailer.test.js is the test file
alpox
@alpox
Jan 03 19:19
Yes
mailer.js would be the module and mailer.test.js the tests for that module.
This is done when doing unit testing and the module is always tested in isolation
When you say you test an api its often better to use the test or tests folder as you likely test more than only one module
Jason Luboff
@JLuboff
Jan 03 19:21
Ok, so create my test file(s) in a test folder. Then..how do I make them run?
alpox
@alpox
Jan 03 19:21
Btw. my personal favourite is https://jestjs.io/ but everyone likes something else :D
Hmm how you run them depends on the test tools you are using
Mocha? Jasmine? Jest?
Jason Luboff
@JLuboff
Jan 03 19:22
I went through a small tutorial for Jasmine..but.. I don't like their docs. So wont be using that. FCC uses Chai, so went through those so have a little bit of an understand for that
But I am open to trying Jest as well
I'm not sold on any one tool at the moment
alpox
@alpox
Jan 03 19:24
Chai alone is only an assertion framework. You'd need mocha in addition
Jest has assertions and is a testrunner the same time (A strong one)
Jason Luboff
@JLuboff
Jan 03 19:25
Lets go with Jest then :)
Looks like Jest actually has a decent setup guide lol
alpox
@alpox
Jan 03 19:25
Yes jest is very streight forward
Also you just install it globally, make test files in your project and run jest
If you want it to watch the sources and rerun the tests when something changed its jest --watchAll
For request testing I suggest to use https://www.npmjs.com/package/supertest
Jason Luboff
@JLuboff
Jan 03 19:27
So you would suggest using that in addition to jest?
Yes - almost no test framework has http testing integrated
If you use chai you'd need the plugin or supertest. If you use jest you need supertest. Or ofc. you can also roll your own :D
Brad
@bradtaniguchi
Jan 03 19:28
FYI, were currently using chai+mocha+sinon for our testing, which is more or less unit-testing level. We could use them for integration level testing, but where not there yet, as I want to run the database in a docker-container so we can wipe it
Jason Luboff
@JLuboff
Jan 03 19:29
This tutorial looks like what I need, thanks
alpox
@alpox
Jan 03 19:29
@bradtaniguchi Jest = Chai + Mocha + Sinon :D So they are about the same
Brad
@bradtaniguchi
Jan 03 19:29
We used jest for our nestjs project, but we couldn't figure out a clean way to run single tests using like fdescribe or .only. @alpox You know of a way todo that?
alpox
@alpox
Jan 03 19:30
@bradtaniguchi single tests? Very easy. it.only(...)
it and test are synonyms in jest
So test.only - test.skip etc. exist
Or describe.only ofc.
I used them extensively :D
Brad
@bradtaniguchi
Jan 03 19:32
Damn I can't believe we couldn't figure it out -__-, but then again the nestjs project wasn't mine
Jason Luboff
@JLuboff
Jan 03 19:32
Ok, so install jest globally, npm i -g jest and then supertest should be dev dependency npm i --save-dev supertest
alpox
@alpox
Jan 03 19:32
@bradtaniguchi :) Can happen
@JLuboff Yes
Jason Luboff
@JLuboff
Jan 03 19:35
Alright! Lets see what I can do with it :)
Brad
@bradtaniguchi
Jan 03 19:36
@JLuboff Oh before I forget, make sure you don't deploy your test's if you can help it, no need and less bloat haha
Jason Luboff
@JLuboff
Jan 03 19:36
Meaning, in production don't have my tests folder?
Brad
@bradtaniguchi
Jan 03 19:37
@JLuboff Yea, idk how you doing your production builds/deployments, but you wont need your tests there, or any other "development" stuff like the README and lint files
I cut our prod build in half by removing the test-files, and other random junk.
Jason Luboff
@JLuboff
Jan 03 19:38
Right now... I push everything from dev to my repo, then pull the repo down on the server without ignoring any files/folders
but thats a good idea
Brad
@bradtaniguchi
Jan 03 19:40
Oh man so many ways to optimize the flow, but I digress haha. I mean if you have the HD to spare, and the "download" isn't anything significant its a minor gripe
Jason Luboff
@JLuboff
Jan 03 19:42
Ya...we got HD space but ya...my one production app is 50 MB.... most of that is node_modules (43 MB)
alpox
@alpox
Jan 03 19:43
Js dependencies... what a hell
Brad
@bradtaniguchi
Jan 03 19:43
ya I'd figure, node_modules is a black hole,
alpox
@alpox
Jan 03 19:45
Thats one thing I started to hate about the js ecosystem :D
Everyone praises the availability of thousands of modules but the problem is that it just gets hard to find good ones (Too much crap) and dependency hell becomes real
Jason Luboff
@JLuboff
Jan 03 19:56
If I was smarter...I wouldn't have to depend on modules :joy:
Brad
@bradtaniguchi
Jan 03 19:57
I'm fine with standing on the shoulder that came before. I don't have time to re-invent all this crap haha
Jason Luboff
@JLuboff
Jan 03 19:58
I guess sometimes I feel "Imposter Syndrom" because I use modules to facilitate certain actions
alpox
@alpox
Jan 03 19:59
@bradtaniguchi I'm fine with that too - if the thing I'm standing on is stable enough :D
Brad
@bradtaniguchi
Jan 03 19:59
Yea I can see that, but hell were always standing on someone's shoulder until were talking about building circuits haha
and even then :P, all this work is done on such a high level of abstraction its instanne
Jason Luboff
@JLuboff
Jan 03 20:01
Thats true.. and..I don't want to reinvent the wheel..
Jason Luboff
@JLuboff
Jan 03 20:15
tests fail to run :( error
Cannot find module 'source-map' from 'source-map-support.js'
Brad
@bradtaniguchi
Jan 03 20:21
@JLuboff You got a stack trace?
Jason Luboff
@JLuboff
Jan 03 20:22
FAIL //server/Private/JLuboff/Programming/app/tests/routes.test.js
‚óŹ Test suite failed to run
Cannot find module 'source-map' from 'source-map-support.js'

  at Resolver.resolveModule (P:/Programming/app/node_modules/jest-resolve/build/index.js:221:17)
Thats what I get
eh..I'll take a look after lunch
Brad
@bradtaniguchi
Jan 03 20:25
@JLuboff Have you tried/found this?: facebook/jest#6514
Brad
@bradtaniguchi
Jan 03 20:37
hehe my turn to go to lunch
Jason Luboff
@JLuboff
Jan 03 21:27
@bradtaniguchi I saw that..but originally I didn't have a config file but I'll give it a try. Looking a little closer..it might be an issue with my require statement
That....or becuase this is part of a CRA app..
Brad
@bradtaniguchi
Jan 03 21:31
whats a CRA?
Jason Luboff
@JLuboff
Jan 03 21:31
Create-React-App
Brad
@bradtaniguchi
Jan 03 21:34
Ahhh
I always forget about that guy haha
Jason Luboff
@JLuboff
Jan 03 21:35
hmmm...I might have an idea
Jason Luboff
@JLuboff
Jan 03 21:43
Nope..my idea didn't work.. lol
Brad
@bradtaniguchi
Jan 03 21:45
I would think this issue is documented somewhere, but its out of my element
Jason Luboff
@JLuboff
Jan 03 21:46
Ya... still looking
Brad
@bradtaniguchi
Jan 03 21:54
Damn I'm having a hell of a time thinking about my side-project database design....
Jason Luboff
@JLuboff
Jan 03 21:54
what DBE are you using?
Brad
@bradtaniguchi
Jan 03 21:55
its for googles firestore real-time database. I'm taking an approach where basically everything is nested collections
Jason Luboff
@JLuboff
Jan 03 21:56
ew nested collections :P
Brad
@bradtaniguchi
Jan 03 21:56
But the key kink is the user's collection has nested collections that are filled with just ID's of all the things they have access to like:
user = {
  cards: {
    'cardId123': true,
    'cardId124': true
  }
};
Jason Luboff
@JLuboff
Jan 03 21:58
How scabable is that?
scalable*
Brad
@bradtaniguchi
Jan 03 21:58
@JLuboff What's your concern with the setup?
Jason Luboff
@JLuboff
Jan 03 21:58
hell I still don't know if thats the right spelling lol
Eh.. I guess at a certain point I wonder why use a non-relational database when you're effectively designing a relational database
Brad
@bradtaniguchi
Jan 03 21:59
That's the thing, in some places I see some clear places where denormalization can be added
But idk how performance will be affected with any of this right now, a key thing I see is I can "cache" everything on the user's side. So think of having part of your database on the client-side, so If I already have a cached version of cardId123 I wouldn't "watch" it again
idk, its an interesting challenge, the fact its a "real-time database" really changes things
Jason Luboff
@JLuboff
Jan 03 22:04
Sounds interesting for sure
ah fuck.. I guess jest is already installed with CRA... so.. I probably jacked it up.. :joy:
Brad
@bradtaniguchi
Jan 03 22:15
lol haha. I think with my current database design I would "read" the exact number of required elements+1 for the user. So if a user has access to 50 groups, i'd "read" the user's list of groups 1 time, and read exactly 50 groups from the db based upon the key. The issue is adding a user to a group. I'd end up writing to the user, the added groups,decks, and cards
I just found something called batchwrites, which I think are key. If it works out I think the DB is optimized "correctly", and would allow me to de-normalize here and there to prevent redundant extra reads here and there, I'll need to double check haha
Brad
@bradtaniguchi
Jan 03 22:20
Welp, back to actual work. I'll be working on my side project lata
Jason Luboff
@JLuboff
Jan 03 22:20
Sounds good
Brad
@bradtaniguchi
Jan 03 22:20
whats the best way to make requests from nodejs? I know of axios and requests
idk which is "better" tho
Jason Luboff
@JLuboff
Jan 03 22:21
Who asked that?
Brad
@bradtaniguchi
Jan 03 22:23
I am asking that XD I need to write up something that makes async requests in nodejs, and I was just wondering what other people are using ATM.
Jason Luboff
@JLuboff
Jan 03 22:24
requests to other API's?
Brad
@bradtaniguchi
Jan 03 22:29
Yea like make fetch requests from nodejs to a website, or another server
Jason Luboff
@JLuboff
Jan 03 22:32
I've used nodes https module but as a stream
I guess you could make the outer function be an async function though
or the calling function
Brad
@bradtaniguchi
Jan 03 22:38
Yea, the no lib option could be used, but would it create a lot of boilerplate if I want to use promises?
Jason Luboff
@JLuboff
Jan 03 22:39
https://github.com/JLuboff/StockChartApp/blob/master/services/requestStock.js here's where I used it. I didn't make it into a promise or async...and.. this was still pretty early on with my nodejs work lol
Brad
@bradtaniguchi
Jan 03 22:45
Hmm its looking too barebones for me. I was digging into axios more, and it looks to be the current front-runner still since it's easy to use and has some cool features
Jason Luboff
@JLuboff
Jan 03 22:46
so...if i move out of my project folder (i.e instead of being C:\Programming\myApp, I'm in C:\Programming)... jest tests run fine..
@bradtaniguchi I'm pretty sure there's a lot more to do with it but ya...axios is there for a reason heh
Brad
@bradtaniguchi
Jan 03 22:48
what the, so its a path issue?
Jason Luboff
@JLuboff
Jan 03 22:48
er..I guess... Doesn't make any sense to me.. and its annoying becuase it takes a while to run because it searched through every project folder for test files
But...I think I found part of the problem. For some reason, its not able to find supertest module
Brad
@bradtaniguchi
Jan 03 22:54
did you install all of this stuff globally?
Are you running the global one? even tho the CRA comes with it locally?
Jason Luboff
@JLuboff
Jan 03 22:54
I've been trying both global and local
Jason Luboff
@JLuboff
Jan 03 23:03
Ya...something is fucked up in node_modules.. I wonder if I just blow the whole folder away and reinstall if it'll work
Brad
@bradtaniguchi
Jan 03 23:04
do it
Jason Luboff
@JLuboff
Jan 03 23:05
I am!
Brad
@bradtaniguchi
Jan 03 23:05
and remove package-lock for good measure haha
Jason Luboff
@JLuboff
Jan 03 23:05
should I remove it?
package-lock is normally created (if it doesn't exist) on first execution of the app right
Christopher McCormack
@cmccormack
Jan 03 23:09
should be on npm install
Brad
@bradtaniguchi
Jan 03 23:10
package-lock is a file to help speed up installation, it can cause issues since its basically a layer of caching for npm install
Jason Luboff
@JLuboff
Jan 03 23:10
oh look who decided to show up!
Christopher McCormack
@cmccormack
Jan 03 23:10
who?
Jason Luboff
@JLuboff
Jan 03 23:10
You
Christopher McCormack
@cmccormack
Jan 03 23:10
oh
hi!
sorry busy day at the office. Very distracting place
Jason Luboff
@JLuboff
Jan 03 23:10
Well shit. Let me delete package-lock and rerun npm i and wait another 5 minutes lol
Christopher McCormack
@cmccormack
Jan 03 23:10
will be happy to be back home in the snow soon
Jason Luboff
@JLuboff
Jan 03 23:11
There's snow in Arizona?
Christopher McCormack
@cmccormack
Jan 03 23:11
Yeah it's pretty cold here right now, and Flagstaff is 7000+ feet, we get snow
Jason Luboff
@JLuboff
Jan 03 23:12
oh ci looks nice
Christopher McCormack
@cmccormack
Jan 03 23:12
yeah just heard of it the other day, will need to play with it
Jason Luboff
@JLuboff
Jan 03 23:13
doesn't recognize it :( Wonder if I need to update my npm
Christopher McCormack
@cmccormack
Jan 03 23:13
think you need to have your package lock file
couldn't hurt to update though
Jason Luboff
@JLuboff
Jan 03 23:14
I do, I didn't delete it
Christopher McCormack
@cmccormack
Jan 03 23:14
what you on?
I just ran it and it worked fine, may need to update
Jason Luboff
@JLuboff
Jan 03 23:15
I need to update. I'm running 5.6.0, and it looks like it became available 5.7.1
Christopher McCormack
@cmccormack
Jan 03 23:15
npm i -g npm
Jason Luboff
@JLuboff
Jan 03 23:15
Now I'm running 6.5
I was a little behind heh
Damn.. I'm running node 8.9.4 LTS... and the current LTS is 10.15.0
Brad
@bradtaniguchi
Jan 03 23:19
@JLuboff I'm on 8.9.4 too, so don't feel to behind haha
Jason Luboff
@JLuboff
Jan 03 23:19
Alright cool cool hah
Christopher McCormack
@cmccormack
Jan 03 23:19
I update every other command! gotta keep up with Joneses or something
Jason Luboff
@JLuboff
Jan 03 23:20
Man..removing node_modules takes forevveerr (partially because its on a network location)
Jason Luboff
@JLuboff
Jan 03 23:29
Lol..what a joke. I go to the first IS project..and the example doesn't even work (its just a directory listing..)
Christopher McCormack
@cmccormack
Jan 03 23:32
yeah we talked about adding a new one but that conversation dropped off
which one is it again?
Jason Luboff
@JLuboff
Jan 03 23:32
And the boilerplate link for it is wrong
Christopher McCormack
@cmccormack
Jan 03 23:34
I always copy the user stories, hope it helps
Jason Luboff
@JLuboff
Jan 03 23:34
:thumbsup: thanks bud
15 minutes later...and npm ci is supposedly still removing the current node_modules folder :joy:
Christopher McCormack
@cmccormack
Jan 03 23:35
weird it deleted mine almost instantly
Jason Luboff
@JLuboff
Jan 03 23:36
Local or network storage
?
Christopher McCormack
@cmccormack
Jan 03 23:38
local
Jason Luboff
@JLuboff
Jan 03 23:38
Ya..mines network...and my phone has cut out a few times..so I'm thinking its stuck
Christopher McCormack
@cmccormack
Jan 03 23:38
yikes - why not do it local
Jason Luboff
@JLuboff
Jan 03 23:38
Yup. It was stuck. Just stopped and restarted it and its going blazing fast
Christopher McCormack
@cmccormack
Jan 03 23:38
you seem to have a lot of network issues lol
Jason Luboff
@JLuboff
Jan 03 23:43
Network location = backed up (although I do use a repo) and I'm pretty much out of local storage
Network issues are related to our phones.
I could fix it by plugging my phone into another data drop in my office, but that would cause issues with other things lol
Brad
@bradtaniguchi
Jan 03 23:48
damn what a setup
Jason Luboff
@JLuboff
Jan 03 23:48
Fuck. Jest still fails.. different module not find now though.. Cannot find module '@babel/code-frame' from 'index.js'
@bradtaniguchi Ya...they're new phones.. but our old phones were better lol (these are VOIP the prior ones were not)
Christopher McCormack
@cmccormack
Jan 03 23:52
@JLuboff what are you working on that's giving you these errors?
Jason Luboff
@JLuboff
Jan 03 23:53
My React app. Just trying to be able to run Jest for the backend portion
Christopher McCormack
@cmccormack
Jan 03 23:59
you get that error when running jest against the directory?