These are chat archives for angular/angular.js

25th
Jan 2017
Adrian Kopytko
@adriankopytko
Jan 25 2017 06:16 UTC
Hello, firstly I want to say thanks @frederikprijck for help last time.
Secondly I want to ask if it is any sense to make a unit test to this method:
getVideoObject(date, currentVideo) {
    let { snippet, statistics } = currentVideo.info.data.items[0];

    return { 
      id: currentVideo.id,
      title: snippet.title,
      thumbnailUrl: snippet.thumbnails.medium.url,
      rating: { 
        likes: statistics.likeCount, 
        dislikes: statistics.dislikeCount
      },
      views: statistics.viewCount,
      addDate: date.display,
      addDateFilter: date.filter,
      fav: false,
      videoFrom: 'Youtube'
    };
  }
Should I test all public methods?
Frederik Prijck
@frederikprijck
Jan 25 2017 07:04 UTC
You're welcome @Shimizo .
There is nobody forcing you to test methods like this. But you should ask yourself: Is it a bad thing to write tests for methods like this?
I don't think so, and it's still better to have tests than to not have tests for a particular method.

@CodeLiftSleep @Matmo10

OK, but you aren't checking it against anytjhing
false isn't an expression its a boolean value

This makes no sense. ng-if works fine with false. There's no need to ask him to introduce a variable and set it to false in order to bind to ng-if.

@Matmo10 It does work when you move the ng-if to the tbody or table. Which makes sense imho.
Adrian Kopytko
@adriankopytko
Jan 25 2017 07:27 UTC

@frederikprijck I asked, because I was thinking if code like this:

const video = {
      info: { 
        data: { 
          items: [
            {
              snippet: {
                title: 'video',
                thumbnails: {
                  medium: {
                    url: 'url'
                  }
                }
              },
              statistics: {
                likeCount: 1,
                dislikeCount: 2
              }
            }
          ]
        }
      }
    };

is good in my tests. I need to create object in tests, then if I change the source method, I'll have to change my tests (for example I want to add another field to my obj)

I'll have to maintenance x2 more code, even if I would like to do small change.
Paul "Joey" Clark
@joeytwiddle
Jan 25 2017 07:31 UTC
Personally I like to do higher level tests, that ensure the user gets what they want, rather than the low-level details, which can change without the user noticing.
Frederik Prijck
@frederikprijck
Jan 25 2017 07:31 UTC
@Shimizo Code that changes generally means a change in the tests is required aswell. (Or even better: a test that changes requires a change in code ;-) )
Personally, I like to test everything @joeytwiddle .
Paul "Joey" Clark
@joeytwiddle
Jan 25 2017 07:32 UTC
But yeah if you have a change planned, change your test first, to describe what you want, and then change your code, to make the test pass.
Adrian Kopytko
@adriankopytko
Jan 25 2017 07:32 UTC
I think if I have huge app, if test does not pass I'll go first to source files to find a bug
@joeytwiddle It makes a sense
Paul "Joey" Clark
@joeytwiddle
Jan 25 2017 07:34 UTC
That’s neat @frederikprijck. You are maintaining more test code, but you can get quick notifications if a unit has broken. Testing everything seems pretty solid. I’m not there yet. :P
Adrian Kopytko
@adriankopytko
Jan 25 2017 07:36 UTC
@frederikprijck @joeytwiddle Thanks, now I have to make some tests. :D
It is good if I use functions in unit tests? For example: /
let date = () => {
      let now = new Date();

      let day = now.getDate();
      let month = now.getMonth() + 1;
      let hour = now.getHours();
      let minutes = now.getMinutes();

      day = (day < 10) ? '0' + day : day;
      month = (month < 10) ? '0' + month : month;
      hour = (hour < 10) ? '0' + hour : hour;
      minutes = (minutes < 10) ? '0' + minutes : minutes;

      return {
        display: `${day}.${month}.${now.getFullYear()} ${hour}:${minutes}`,
        filter: now.getTime()
      };
    };
Paul "Joey" Clark
@joeytwiddle
Jan 25 2017 07:48 UTC
I see no problem with that @Shimizo
Adrian Kopytko
@adriankopytko
Jan 25 2017 07:48 UTC
Okay
Frederik Prijck
@frederikprijck
Jan 25 2017 07:48 UTC
@joeytwiddle It depends what you're creating. But if you look at the source code of AngularJS itself ... There's a lot of tests and new PR's are generally not accepted unless there's tests. Which is pretty cool and realy helps in quality. The extra code to maintain isn't comparable to the stability gains you get.
Adrian Kopytko
@adriankopytko
Jan 25 2017 07:49 UTC

I made a unit test

expect(videoObj.id).toBe('TFeSNOdNtyo');
    expect(videoObj.title).toBe('video');
    expect(videoObj.thumbnailUrl).toBe('url');
    expect(videoObj.rating.likes).toBe(1);
    expect(videoObj.rating.dislikes).toBe(2);
    expect(videoObj.views).toBe(3);
    expect(videoObj.addDate).toBe(date.display);
    expect(videoObj.addDateFilter).toBe(date.filter);
    expect(videoObj.fav).toBe(false);
    expect(videoObj.videoFrom).toBe('Youtube');

It is okay? I'm wondering if it is a good practice to make x expect() to check everything

Frederik Prijck
@frederikprijck
Jan 25 2017 07:51 UTC
That's debatable imo @Shimizo . But I'd say that's pretty neat already that way. You have to watch out using to many expect's in a test.
But in cases like this, a single tests doesn't hurt.
You could split them up in multiple smaller tests. But I don't think that's that important.
Paul "Joey" Clark
@joeytwiddle
Jan 25 2017 07:53 UTC
I originally felt that my user/system tests were running all the low-level code, so I writing unit tests would be redundant.
But I have noticed that I only tend to test working things for the user, so I never test the unit’s handling of poor inputs, etc., which I should. (A test coverage tool can help to point out these oversights.)
I agree @frederikprijck, tests can really save a lot of time. (Not only for the future, but even while I’m coding, I don’t have to test manually, I just look at the output of the window running the tests.)
I will try to get into the habit of writing tests for every module I work on. Next month.
Adrian Kopytko
@adriankopytko
Jan 25 2017 07:54 UTC
I read in one article, where author said something like 'You should change your thinking from 'Don't repeat yourself' to 'Do repeat yourself'
Frederik Prijck
@frederikprijck
Jan 25 2017 07:54 UTC
But it's idd not easy to adapt the habit to write tests for all those things @joeytwiddle :)
Adrian Kopytko
@adriankopytko
Jan 25 2017 07:54 UTC
in tests of course
Frederik Prijck
@frederikprijck
Jan 25 2017 07:54 UTC
Yep @Shimizo .
It's not a big issue to duplicate code to test things, but offcourse you don't have to duplicate everything. Using functions to encapsulate common behavior is pretty okay.
Adrian Kopytko
@adriankopytko
Jan 25 2017 07:58 UTC
Okay I see, if my test does not pass, I have to guess what went wrong, if I have multiple expect(). If I have x tests with one expect, I see clearly what happens
I will remember, thanks :)
Frederik Prijck
@frederikprijck
Jan 25 2017 07:59 UTC
No, you get a clear message indicating what went wrong, so I wouldn't call it guessing.
But yes, using less expects make it more obvious which one is failing
Alex
@atodicebear
Jan 25 2017 09:40 UTC
@frederikprijck Soon I want to write Tests as well. Do you have a good Tutorial-Link ? For someone with Zero Experience in this Field atm
Karma or Jasmine or Chai?
Expect or Should?
Frederik Prijck
@frederikprijck
Jan 25 2017 09:45 UTC
Karma and Jasmine is my preference.
Frederik Prijck
@frederikprijck
Jan 25 2017 09:59 UTC
Does anyone have an idea how we can work around this problem where the toggle button doesn't work, but the toggleAsync does ? https://plnkr.co/edit/wwWlAnLG8hQsZH9Hbyjl?p=preview /cc @gkalpak :D
I know it's ui-bootstrap, but I 'd think it's due to the digest cycle. (trying to active a tab index that actually doesn't exist before the digest is over)
George Kalpakas
@gkalpak
Jan 25 2017 13:47 UTC
@frederikprijck: I have no idea ($timeout is the obvious workaround, but it's causing flicker). It is possibly a ui.bootstrap issue.
Frederik Prijck
@frederikprijck
Jan 25 2017 13:48 UTC
You'd say it's a bug ? Or normal behavior ?
Coz replacing ng-if with ng-show works fine.
basicly the issue is I'm trying to set the activeTab to an index whose corresponding tab will only be renderend after the difest cycle is completed
Matt Erman
@CodeLiftSleep
Jan 25 2017 13:50 UTC
whoa...hold on...did I read that right? @frederikprijck needs help with something?? He is human after all, and not a programming machine!! :smile:
Hahahaha
Dieter De Ridder
@Twentyfoureyes
Jan 25 2017 13:50 UTC
xd
Frederik Prijck
@frederikprijck
Jan 25 2017 13:51 UTC
@CodeLiftSleep I guess it's a bug with something. Can't be elseway. :joy:
Matt Erman
@CodeLiftSleep
Jan 25 2017 13:51 UTC
hahahahaahaha
Ricki Moore
@rickimoore
Jan 25 2017 13:51 UTC
html:
<carousel controls="false">

directive:
someCtrlFn: '&callbackFn'

link:
if($scope.someCtrlFn){
          console.log('wtf');
            $scope.someCtrlFn();
        } else {
          console.log('lol nope');
        }
when i ommit the callbackFn i still get wtf
John Nolette
@neetjn
Jan 25 2017 13:52 UTC
Most definitely a bug, as in context your code makes logical sense.
Frederik Prijck
@frederikprijck
Jan 25 2017 13:53 UTC
@neetVeritas That's to me ur talking, right ? :D
John Nolette
@neetjn
Jan 25 2017 13:53 UTC
Correct.
Ricki Moore
@rickimoore
Jan 25 2017 13:53 UTC
ahh lol im glad it wasn't me
Frederik Prijck
@frederikprijck
Jan 25 2017 13:53 UTC
Awesome. Gonna dig in the ui-bootstrap code in that case.
George Kalpakas
@gkalpak
Jan 25 2017 13:53 UTC
I don't know if it is a bug or intended limitation. It seems that ui.bootstrap is not watching uib-tabs dynamically and making them visible based on the currently selected index. It is good for performance and bad for your usecase.
Software development === Trade-offs :stuck_out_tongue:
Frederik Prijck
@frederikprijck
Jan 25 2017 13:54 UTC
Ye I'm not 100% sure it's going to turn out to be a bug neither. But well :D
Ricki Moore
@rickimoore
Jan 25 2017 13:55 UTC
anyone can take a look at my scope?
Matt Erman
@CodeLiftSleep
Jan 25 2017 13:57 UTC
@rickimoore What the callbackFn? Is it returning true or false?
Frederik Prijck
@frederikprijck
Jan 25 2017 13:57 UTC
He's omitting it.
Ricki Moore
@rickimoore
Jan 25 2017 13:58 UTC
its just saying poop in the console
im trying to ommit it
cause i just want to have if(callback){do werk}
George Kalpakas
@gkalpak
Jan 25 2017 13:58 UTC
@frederikprijck: BTW, you can work-around the flicker by updating the value in a microtask (e.g. using Promise):
    Promise.resolve().then(function() { 
      $scope.$apply(function() {
        $scope.activeTab = $scope.isActive ? 0 : 1;
      });
    });
Matt Erman
@CodeLiftSleep
Jan 25 2017 13:59 UTC
and its always returning true on the first if statement is the issue?
Ricki Moore
@rickimoore
Jan 25 2017 14:00 UTC
yes if i ommit like <carousel controls="false">
it still gives wtf
when i expect nope
Frederik Prijck
@frederikprijck
Jan 25 2017 14:00 UTC
Omitting a & binding doesn't make it undefined afaik.
Matt Erman
@CodeLiftSleep
Jan 25 2017 14:01 UTC
that's what I was thinking, its still being defined
Frederik Prijck
@frederikprijck
Jan 25 2017 14:01 UTC
You need to use:
someCtrlFn: '&?callbackFn'
Matt Erman
@CodeLiftSleep
Jan 25 2017 14:01 UTC
the ? makes it optional right?
Frederik Prijck
@frederikprijck
Jan 25 2017 14:02 UTC
Yep.
Matt Erman
@CodeLiftSleep
Jan 25 2017 14:02 UTC
I need to start using directives more
Ricki Moore
@rickimoore
Jan 25 2017 14:02 UTC
why is it like that?
Frederik Prijck
@frederikprijck
Jan 25 2017 14:02 UTC
I guess it gets replaced by a noop when being required and not provided.
@gkalpak What makes that code avoid the flickering ? I don't get that :D
Ricki Moore
@rickimoore
Jan 25 2017 14:03 UTC
how about passing true or false?
how can i do that?
strict="{{true}}" ??
strict ??
the second doesnt work
Frederik Prijck
@frederikprijck
Jan 25 2017 14:03 UTC
Not sure what you're asking @rickimoore ..
Ricki Moore
@rickimoore
Jan 25 2017 14:05 UTC
so i want to say foo="true"
George Kalpakas
@gkalpak
Jan 25 2017 14:05 UTC
@frederikprijck: setTimeout creates a "macrotask" (which runs after the next paint), while a Promise creates a "microtask" (which runs before the next paint). Thus, everything is done before painting and having to re-paint once the selected tab is updated.
Matt Erman
@CodeLiftSleep
Jan 25 2017 14:05 UTC
bar = "false", baz = undefined? :P
Frederik Prijck
@frederikprijck
Jan 25 2017 14:06 UTC
Awesome @gkalpak Thanks !
Matt Erman
@CodeLiftSleep
Jan 25 2017 14:07 UTC
Damn @gkalpak dropping some high level stuff today!!!
Ricki Moore
@rickimoore
Jan 25 2017 14:09 UTC
ah so if i do '='
i can do poo="false/true"
Frederik Prijck
@frederikprijck
Jan 25 2017 14:09 UTC
@rickimoore Create a decent plunkr or atleast a decent code sample.
Ricki Moore
@rickimoore
Jan 25 2017 14:09 UTC
i had it at @
Matt Erman
@CodeLiftSleep
Jan 25 2017 14:09 UTC
@rickimoore that's a bad ass website!!
Ricki Moore
@rickimoore
Jan 25 2017 14:10 UTC
<carousel-wizard indicate="{{true}}" strict="true" count="4" alignment="bottom">
                <md-button class="md-fab md-primary" aria-label="Use Android"></md-button>
            </carousel-wizard>
the difference between indicate and strict
is i had them at strict: '=', indicate: '@',
plunker is better than fiddle?
Matt Erman
@CodeLiftSleep
Jan 25 2017 16:20 UTC
I prefer plunker
but both work fine...jsBin...codepen, etc
Gaston Kirsman
@gastikirs
Jan 25 2017 18:06 UTC
@gastikirs
Guys, anyone here to give me a very basic helping hand with angular 2?
Something about directives, i started today but cant make this work
Please ! :+1:
Matmo10
@Matmo10
Jan 25 2017 18:29 UTC
There is an angular 2 channel
This is the angular 1 channel
Dobromir Brezoev
@dbrezoev
Jan 25 2017 18:56 UTC
Hi, do you know a js function or an angular function similar to lodash _.isEmpty, which tells me if any object, string array etc. is empty considering the $$hashKey in angular?
I just answer my question, may be I should get an copy of it. So _.isEmpty(angular.copy({$$hashkey: "object:455"})) finally returns true