npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@aaronflower/jtils

v0.0.3

Published

A javascript utility tools.

Downloads

15

Readme

JTils

  1. Init the project, be careful of your version.
npm init
  1. Hierarchy the project, ignore node_modules
$ mkdir src test
$ touch .gitignore
  1. Add EditorConfig Support
$ yarn add --dev editorconfig-cli
$ npx ec init
  1. Add ESLint, Prettier support
$ yarn add --dev eslint
$ npx eslint --init
$ yarn add --dev eslint-plugin-prettier eslint-config-prettier
# add .eslintrc.js .prettierrc.js config file to support.
  1. Add a utility function sum.js in src
export default function sum (a, b) {
  return number(a) + (b)
}

use ESLint to check out code.

npx lint src/sum.js

/Users/easonzhan/learning/git_repos/jtils/src/sum.js
  1:10  error  'foo' is defined but never used  no-unused-vars
  2:10  error  Strings must use singlequote     quotes

✖ 2 problems (2 errors, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

If, you use VSCode or other editor you can install plugins for these editor to lint your code dynamically.

I use vim, so I use a vim lint plugin ALE.

  1. Add Mocha to test your code.
yarn add --dev mocha

test the code.

$  npx mocha
~repos/jtils/test/sum.js:2
import sum from "../src/sum"
       ^^^

SyntaxError: Unexpected identifier
    at new Script (vm.js:79:7)
    at createScript (vm.js:251:10)
    at Object.runInThisContext (vm.js:303:10)

This error tells us we don't support ES6 Modules. So we need to add Babel to support.

  1. Add babel 7 support
yarn add --dev @babel/core @babel/cli @babel/preset-env
yarn add --dev @babel/register

And for Babel 7, you should add a babel.config.js

module.exports = {
  presets: ["@babel/env"]
}

And then execute the Mocha.

npx mocha --require @babel/register

  Sum
    Two Positives
      ✓ should returns 4


  1 passing (9ms)
  1. About the test/sum.js code
const assert = require("assert")
import sum from "../src/sum"

describe("Sum", function() {
  describe("Two Positives", function() {
    it("should returns 4", function() {
      assert.equal(sum(2, 2), 4)
    })
  })
})

Assertions

In the test/sum.js file, we use the Node.js built-in assert module to assert our code. Mocha allows us to use any assertion libraries we wish. This means we can use libraries such as:

  • chai Chai is a BDD / TDD assertion library for node and the browser that can be delightfully paired with any javascript testing framework.
  • should.js BDD style shown throughout these docs.
  • jest/expect
  • expect.js
  • better-assert
  • unexpected

We should use Chai, Because it has several interfaces that allow the developer to choose the most comfortable.

Interfaces

The functions describe(), it() are Mocha's BDD "interface" system.

Mocha's "interface" system allows developers to choose thier style of DSL. Mocha has BDD, TDD, Exports, QUnit and Require-style interfaces.

BDD

The BDD is shorted for Behavior Driven Development(BDD), So we can call Mocha is a BDD supprotable Testing Frameworks.

The BDD interface provides describe(), context(), it(), specify(), before(), after(), beforeEach(), and afterEach().

context() is just an alias for describe(), and behaves the same way; it just provides a way to keep tests easier to read and organized. Similarly, sepcify() is an alias for it().

describe('Array', function() {
    before(function() {
      // ...
    });

    describe('#indexOf()', function() {
      context('when not present', function() {
        it('should not throw an error', function() {
          (function() {
            [1,2,3].indexOf(4);
          }).should.not.throw();
        });
        it('should return -1', function() {
          [1,2,3].indexOf(4).should.equal(-1);
        });
      });
      context('when present', function() {
        it('should return the index where the element first appears in the array', function() {
          [1,2,3].indexOf(3).should.equal(2);
        });
      });
    });
});