Guides, 
Usage, 
Tutorials, 
Reference & 
Playground

Looking for  or ?

a project from orta therox,
and the Danger org contributors.

What is Danger JS?

Danger runs during your CI process, and gives teams the chance to automate common code review chores.

This provides another logical step in your build, through this Danger can help lint your rote tasks in daily code review.

You can use Danger to codify your teams norms. Leaving humans to think about harder problems.

This happens by Danger leaving messages inside your PRs based on rules that you create with JavaScript or TypeScript.

Over time, as rules are adhered to, the message is amended to reflect the current state of the code review.

How does it work?

Danger is a NPM module that evals a Dangerfile. You set up a Dangerfile per-project. The Dangerfile contains a collection of home-grown rules specific to your project as a dangerfile.js or dangerfile.ts.

Danger can be installed via NPM or Yarn.

Use yarn add danger -D to add it to your package.json.

You can integrate Danger into your own project using AppCenter, Bamboo, BitbucketPipelines, Bitrise, BuddyBuild, BuddyWorks, Buildkite, Circle, Cirrus, CodeBuild, Codefresh, Codemagic, Codeship, Concourse, DockerCloud, Drone, GitHubActions, GitLabCI, Jenkins, Netlify, Nevercode, Screwdriver, Semaphore, Surf, TeamCity, Travis, VSTS.

You would then need to generate a GitHub access token or a BitBucket Server user, and expose some credentials as ENV vars. Then add `yarn danger ci` to your CI test run.

The Getting Started guide covers this in more detail.

// Import the feedback functions
import { message, warn, fail, markdown } from "danger"

// Add a message to the table
message("You have added 2 more modules to the app")

//  Adds a warning to the table
warn("You have not included a CHANGELOG entry.")

// Declares a blocking 
fail(`ESLint has failed with ${fails} fails.`)

// Show markdown under the table:
markdown("## New module Danger" + dangerYarnInfo)

Get Started

What does this Look like?

Enforce changelogs
Keep Lockfile up to date
Encourage smaller PRs
Ensure PRs have assignees
Encourage more testing
Highlight documentation updates
Show useful info on a PR
Ensure Project Consistency
Highlight SemVer breakages

// Add a CHANGELOG entry for app changes
const hasChangelog = danger.git.modified_files.includes("changelog.md")
const isTrivial = (danger.github.pr.body + danger.github.pr.title).includes("#trivial")

if (!hasChangelog && !isTrivial) {
  warn("Please add a changelog entry for your changes.")
}

const packageChanged = danger.git.modified_files.includes('package.json');
const lockfileChanged = danger.git.modified_files.includes('yarn.lock');
if (packageChanged && !lockfileChanged) {
  const message = 'Changes were made to package.json, but not to yarn.lock';
  const idea = 'Perhaps you need to run `yarn install`?';
  warn(`${message} - <i>${idea}</i>`);
}

var bigPRThreshold = 600;
if (danger.github.pr.additions + danger.github.pr.deletions > bigPRThreshold) {
  warn(':exclamation: Big PR (' + ++errorCount + ')');
  markdown('> (' + errorCount + ') : Pull Request size seems relatively large. If Pull Request contains multiple changes, split each into separate PR will helps faster, easier review.');
}

// Always ensure we assign someone, so that our Slackbot can do its work correctly
if (pr.assignee === null) {
  fail("Please assign someone to merge this PR, and optionally include people who should review.")
}

const hasAppChanges = modifiedAppFiles.length > 0;

const testChanges = modifiedAppFiles.filter(filepath =>
  filepath.includes('test'),
);
const hasTestChanges = testChanges.length > 0;

// Warn if there are library changes, but not tests
if (hasAppChanges && !hasTestChanges) {
  warn(
    "There are library changes, but not tests. That's OK as long as you're refactoring existing code",
  );
}

// Check that every file touched has a corresponding test file
const correspondingTestsForAppFiles = touchedAppOnlyFiles.map(f => {
  const newPath = path.dirname(f)
  const name = path.basename(f).replace(".ts", "-tests.ts")
  return `${newPath}/__tests__/${name}`
})

// New app files should get new test files
// Allow warning instead of failing if you say "Skip New Tests" inside the body, make it explicit.
const testFilesThatDontExist = correspondingTestsForAppFiles.filter(f => fs.existsSync(f))
if (testFilesThatDontExist.length > 0) {
  const callout = acceptedNoTests ? warn : fail
  const output = `Missing Test Files:
    ${testFilesThatDontExist.map(f => `  - [] \`${f}\``).join("\n")}
    If these files are supposed to not exist, please update your PR body to include "Skip New Tests".
  `
  callout(output)
}

var globalFile = 'Rx.js';
var minFile = 'Rx.min.js';

function sizeDiffBadge(name, value) {
  var color = 'lightgrey';
  if (value > 0) {
    color = 'red';
  } else if (value < 0) {
    color = 'green';
  }
  return 'https://img.shields.io/badge/' + name + '-' + getFormattedKB(getKB(value)) + 'KB-' + color + '.svg?style=flat-square';
}

//post size of build
schedule(new Promise(function (res) {
  getSize('./dist/cjs', function (e, result) {
    var localGlobalFile = path.resolve('./dist/global', globalFile);
    var localMinFile = path.resolve('./dist/global', minFile);

    //get sizes of PR build
    var global = fs.statSync(localGlobalFile);
    var global_gzip = gzipSize.sync(fs.readFileSync(localGlobalFile, 'utf8'));
    var min = fs.statSync(localMinFile);
    var min_gzip = gzipSize.sync(fs.readFileSync(localMinFile, 'utf8'));

    // [...]

    var sizeMessage = '<img src="https://img.shields.io/badge/Size%20Diff%20%28' + releaseVersion + '%29--lightgrey.svg?style=flat-square"/>  ';
    sizeMessage += '<img src="' + sizeDiffBadge('Global', global.size - bundleGlobal.size) + '"/> ';
    sizeMessage += '<img src="' + sizeDiffBadge('Global(gzip)', global_gzip - bundle_global_gzip) + '"/> ';
    sizeMessage += '<img src="' + sizeDiffBadge('Min', min.size - bundleMin.size) + '"/> ';
    sizeMessage += '<img src="' + sizeDiffBadge('Min (gzip)', min_gzip - bundle_min_gzip) + '"/> ';
    message(sizeMessage);

    markdown('> CJS: **' + getKB(result) +
      '**KB, global: **' + getKB(global.size) +
      '**KB (gzipped: **' + getKB(global_gzip) +
      '**KB), min: **' + getKB(min.size) +
      '**KB (gzipped: **' + getKB(min_gzip) + '**KB)');

    res();
  });
}));

const jsFiles = danger.git.created_files.filter(path => path.endsWith("js"));

function absolute (relPath) {
  return path.resolve(__dirname, relPath)
}

const flowIgnorePaths = [
  'node_modules','test', 'build', 'examples', 'doc', 'android', 'ios', 'bin', 'dist', 'flow-typed'
].map(function (rel) {
  return absolute(rel)
});

// new js files should have `@flow` at the top
const unFlowedFiles = jsFiles.filter(filepath => {
  let i = 0
  const len = flowIgnorePaths.length
  while (i < len) {
    const p = flowIgnorePaths[i]
    if (absolute(filepath).indexOf(p) > -1) {
      // ignore this file because it's in the flow-ignore-paths.
      return false;
    }
    i++
  }
  const content = fs.readFileSync(filepath);
  return !content.includes("@flow");
});

if (unFlowedFiles.length > 0) {
  warn(
    `These new JS files do not have Flow enabled: ${unFlowedFiles.join(", ")}`
  );
}

// Changes to these files may need SemVer bumps
const semverBumpFiles = ['ThemeProvider.js', 'StyledComponent.js', 'StyledNativeComponent.js']
semverBumpFiles.forEach(file => {
  if (jsModifiedFiles.includes(file)) {
    warn('Changes to #{file} might be SemVer major changes.')
  }
})

What is Danger JS?

How does it work?

What does this Look like?

Lots of documentation

Getting Started with Danger JS

CHANGELOG

Extending Danger

Danger in a Node App

Danger + Node Library

About the Dangerfile

Cultural Changes

Danger + Dependencies

Danger in my Language

Danger + Transpilation

FAQ

Danger + BitBucket Cloud

Danger + BitBucket Server

Danger + GitLab

Fast Feedback via Danger Local

Peril

Awesome plugins