mardi 5 février 2019

Force coverage increase in gitlab PRs

In an effort to increase test coverage by requiring unit tests for every pull request on my EmberJS project hosted on gitlab, I want pipelines to fail if the coverage doesn't increase.

I can get the coverage output using istanbul and get the coverage badge displaying correctly using the following regex:

Gitlab CI screenshot

And using this gitlab-ci.yml:

image: sergiolepore/ember-cli

before_script:
  - yarn --ignore-engines
  - bower --allow-root install

"Ember Unit Tests":
  script:
    - COVERAGE=true npm test -- --filter=Unit
    - grep -o '"pct":\d*\.\d*' coverage/coverage-summary.json | head -1

How can I get the next pipeline to fail if the coverage is decreased in a PR?




Ember: Run-loop: How to know if a job is scheduled or complete

scheduleOnce('afterRender', function x() {
    // Do something
});

Let's say I've scheduled a job (function x) like this and go to some other function (an event callback). Inside that, how do I know the above job's status (eg., scheduled, completed)?




Getting Emberjs data from an Express Api

I built an express api connected to an ember app following this guide. I verified that my api routes are working correctly with postman. The issue arises when I try to call a GET from ember.

MEENApp/app/routes/routes.js

    router.get('/blogposts',(req, res) => {
console.log("API GET REQUEST");
BlogPostSchema.find({}, (err,blogpost) => {
    if(err) {
        res.send(err);
    }
    console.log(blogpost);
    res.json(blogpost);
})});

When being called from the ember app the console.log(blogposts) outputs the correct information to the console

    [ { _id: 5c588e1bc23c5e5620c59b4e,
    title: 'Helloooo',
    body: 'teeest',
    datePosted: 2019-02-04T19:10:19.422Z,
    __v: 0 },
  { _id: 5c589c1f773a76461cf1e4be,
    title: 'titletest',
    body: 'bodytest',
    datePosted: 2019-02-04T20:10:07.790Z,
    __v: 0 },
  { _id: 5c58becee53d4925a88c20fb,
    title: 'titletest2',
    body: 'titletest2',
    datePosted: 2019-02-04T22:38:06.660Z,
    __v: 0 },
  { _id: 5c58cf647d0a52086c5aac5d,
    body: 'rere',
    title: 'rerere',
    datePosted: 2019-02-04T23:48:52.477Z,
    __v: 0 } ]

Ember however does not show this data once called.

MEENAPP/EmberApp/App/routes/Index.js

import Route from '@ember/routing/route';

export default Route.extend({
  model() {

    var code = this.store.findAll('blogpost');
    console.log(code);
    return this.store.findAll('blogpost');
  }
});

Console in chrome shows

{isFulfilled: false, isRejected: false, _objectsDirtyIndex: 0, _objects: null, _lengthDirty: true, …}

But it works if I were to manually enter the data into ember that the api gave me like

MEENAPP/EmberApp/App/routes/Index.js

import Route from '@ember/routing/route';

    let blogposts = [
      {
        "_id": "5c588e1bc23c5e5620c59b4e",
        "title": "Helloooo",
        "body": "teeest",
        "datePosted": "2019-02-04T19:10:19.422Z",
        "__v": 0
      },
      {
        "_id": "5c589c1f773a76461cf1e4be",
        "title": "titletest",
        "body": "bodytest",
        "datePosted": "2019-02-04T20:10:07.790Z",
        "__v": 0
      },
      {
        "_id": "5c58becee53d4925a88c20fb",
        "title": "titletest2",
        "body": "titletest2",
        "datePosted": "2019-02-04T22:38:06.660Z",
        "__v": 0
      },
      {
        "_id": "5c58cf647d0a52086c5aac5d",
        "body": "rere",
        "title": "rerere",
        "datePosted": "2019-02-04T23:48:52.477Z",
        "__v": 0
      }
    ];


    export default Route.extend({
      model() {
        return blogposts;
      }
    });

The way I'm displaying this is through a view-post component that shows a post and I loop through the model in the index page to display the posts.

MEENAPP/EmberApp/App/models/blogpost.js

import DS from 'ember-data';

export default DS.Model.extend({
  title: DS.attr('string'),
  body: DS.attr('string')
});

MEENAPP/EmberApp/App/Components/view-post/template.hbs

  <p> - </p>

MEENAPP/EmberApp/App/templates/index.hbs


  


I'm confused on which part is incorrect. As far as I can see the API works and ember correctly made the call to it.




lundi 4 février 2019

EmberJS - Can't find NPM package in 'registry' when vendor loader looks for modules

I have been running an EmberJS app and I just installed a new package using Yarn graphql@0.13.0. For sanity, I checked my package.json file and it is in there. Also when I run yarn list --depth=0, I can see that the package was successfully installed.

├─ graphql-tag@2.10.1
├─ graphql-tools@2.24.0
├─ graphql@0.13.0

I start my Ember app and I get this error straight away.

Uncaught Error: Could not find module graphql imported from `ember-cli-mirage-graphql/related-records

I checked ember-cli-mirage-graphql to see if it was a dependency version issue, but the graphql dependency of ember-cli-mirage-graphql is 0.13.0. I went into the stack trace where the exception is happening, to debug the issue at /assets/vendor/loader/loader.js. There is a function that takes a dependency name, in this case I could see it was 'graphql', and uses that as a key to a registry dictionary to find and load the package. I looked into the registry and could see that a lot of other packages I expected to find were in fact there and it was only that package that was missing.

function missingModule(id, referrer) {
    throw new Error('Could not find module `' + id + '` imported from `' + referrer + '`');
  }

  function findModule(id, referrer, pending) {
    var mod = registry[id] || registry[id + '/index'];

    while (mod && mod.isAlias) {
      mod = registry[mod.id] || registry[mod.id + '/index'];
    }

    if (!mod) {
      missingModule(id, referrer);
    }

    if (pending && mod.state !== 'pending' && mod.state !== 'finalized') {
      mod.findDeps(pending);
      pending.push(mod);
    }
    return mod;
  }

I looked online, but couldn't find anything helpful. What registry is this and why isn't it updated with the new package I installed? Is there a way I can reset the registry?




dimanche 3 février 2019

GET http://bit.ly/2UwVxWi net::ERR_ABORTED 404 (Not Found)

I'm serving my local ember app in https. Followed the example which was given in https://github.com/ember-cli/ember-cli-inject-live-reload. It was working fine in ember 2.18.0

.ember-cli:

{
...
 "liveReloadPort": 37531,

  // This `liveReloadOptions` property becomes `window.LiveReloadOptions`
  "liveReloadOptions": {
    "port": 37631,
    "https": true,
    "host": "livereload.app-name.local"
  },

  "liveReloadJsUrl": "https://app-name.local/livereload.js"
}

after updating ember to 3.7.1 and ember-cli-inject-live-reload to 2.0.1 getting error in browser console

GET https://app-name.local/livereload.js net::ERR_ABORTED 404 (Not Found)
(anonymous) @ ember-cli-live-reload.js:14
(anonymous) @ ember-cli-live-reload.js:15

ember-cli-live-reload.js:

(function() {
  window.LiveReloadOptions = {"port":37631,"https":true,"host":"app-name.local","snipver":1};
  var srcUrl = 'https://app-name.local/livereload.js';
  var host= location.hostname || 'localhost';
  var liveReloadPort = 37531;
  var defaultPort = location.protocol === 'https:' ? 443 : 80;
  var port = liveReloadPort || location.port || defaultPort;
  var path = '&path=_lr/livereload';
  var prefixURL = (location.protocol || 'http:') + '//' + host + ':' + 37531;
  var src = srcUrl || prefixURL + '/_lr/livereload.js?port=' + port + '&host=' + host + path;
  var script    = document.createElement('script');
  script.type   = 'text/javascript';
  script.src    = src;
  "line 14" document.getElementsByTagName('head')[0].appendChild(script);
}());

Even after changing liveReloadJsUrl and liveReloadOptions.host to same name throws error

GET https://livereload.app-name.local/livereload.js net::ERR_ABORTED 404 (Not Found)

.ember-cli

{
  /**
    Ember CLI sends analytics information by default. The data is completely
    anonymous, but there are times when you might want to disable this behavior.

    Setting `disableAnalytics` to true will prevent any data from being sent.
  */
  "disableAnalytics": true,
  "liveReloadPort": 37531,

  // This `liveReloadOptions` property becomes `window.LiveReloadOptions`
  "liveReloadOptions": {
    "port": 37631,
    "https": true,
    "host": "livereload.app-name.local"
  },

  "liveReloadJsUrl": "https://livereload.app-name.local/livereload.js"
}

Here are my nginx config files nginx/servers/app-name_local.conf

upstream app {
  server localhost:4200;
}

server {
  listen       80;
  server_name app-name.local;
  return 302 https://$server_name$request_uri;
}

server {
  listen 443 ssl;
  server_name app-name.local;
  ssl_certificate <path_to_ssl_cert>;
  ssl_certificate_key <path_to_ssl_cert_key>
  #create assess and error log files 
  access_log /usr/local/var/log/nginx/app-name/access.log;
  error_log /usr/local/var/log/nginx/app-name/error.log;
  try_files $uri /index.html $uri @app;
  #change path here
  root <path_to_ember_app>;
  #the following code is only for dev
  location ~ ^/livereload.js {
    rewrite  ^/(livereload.js)  /$1 break;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";   
    proxy_pass http://localhost:37531;
  }
  #end of dev only code
  location @app {
    proxy_pass http://app;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_redirect off;
  }
}

nginx/servers/livereload_app-name_local.conf

upstream livereload {
  server localhost:37531;
}

server {
  listen 37631 ssl;
  server_name livereload.app-name.local;
  ssl_certificate <path_to_ssl_cert>;
  ssl_certificate_key <path_to_ssl_cert_key>;
  access_log /usr/local/var/log/nginx/app-name/access.log;
  error_log /usr/local/var/log/nginx/app-name/error.log;
  try_files $uri /index.html $uri @livereload;
  root <path_to_ember_app>;
  location /{
    proxy_pass http://localhost:37531;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
  }
  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
    root   html;
  }
}




samedi 2 février 2019

"Cannot read property 'formatTime' of undefined" error in array.sort() function

I have an array.sort() function that sorts times, however, it keeps returning this error. Here is my code:

  sortTime(columnIndex, sortingAZ){
  var rowArray = this.get('tableArr').slice(0); //gets array of arrays
    rowArray.sort(function(a,b) {
        var time1 = this.formatTime(a[columnIndex]); //formats time into military time
        var time2 = this.formatTime(b[columnIndex]);
        return time1 - time2;
        });

and here is the formatTime function that is called:

   formatTime(time){

//seperates time into hours and minutes
var colonIndex = time.search(":");
var hour = parseInt(time.substring(0, colonIndex));
var minute = time.substring(colonIndex+1, time.length);
if(time.search("pm")>=0&&hour!=12){ //if it is pm, add 12 to convert to military time (except 12 pm)
    hour+=12;
}
else if(time.search("am")>=0&&hour==12){ //if it is 12 am, set hour to 0
hour = 0;
}
var milTime = hour.toString()+minute.toString(); //recombine hour and minute
milTime = parseInt(milTime);
return milTime;
}

I have tested the formatTime() function by calling console.log(formatTime(rowArray[0][columnIndex])), and it executes correctly, no error. The error seems to be local to the rowArray.sort() function.

Also, I am relatively new here, so let me know if you need any more information or if there is something wrong with my post.




Ember: Add objects to an Array

I have an array

ABC =  [
0: {class: "x", rank: 12}
1: {class: "y", rank: 13}
2: {class: "z", rank: 10}
]

and I have gender object/property to be added to ABC in a loop

I need the result like

ABC =  [
0: {class: "x", rank: 12, gender: "male"}
1: {class: "y", rank: 13, gender: "female"}
2: {class: "z", rank: 10, gender: "female"}
]