Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/briebug/jest

Angular schematic for adding Jest and the required files to an Angular CLI project
https://github.com/briebug/jest

Last synced: about 1 month ago
JSON representation

Angular schematic for adding Jest and the required files to an Angular CLI project

Host: GitHub
URL: https://github.com/briebug/jest
Owner: briebug
Archived: true
Created: 2018-06-14T21:25:53.000Z (over 6 years ago)
Default Branch: master
Last Pushed: 2018-09-16T04:43:08.000Z (about 6 years ago)
Last Synced: 2024-08-01T19:55:52.330Z (4 months ago)
Language: TypeScript
Size: 1.1 MB
Stars: 44
Watchers: 8
Forks: 2
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

my-awesome-list - jest

README

## DEPRECATED ⚠

This repo & package have been deprecated and renamed to `@briebug/jest-schematic`. All future development will take place at https://github.com/briebug/jest-schematic

# Jest Angular Schematic

[![npm (scoped)](https://img.shields.io/npm/v/@briebug/jest.svg)](https://www.npmjs.com/package/@briebug/jest)

Add [Jest](https://facebook.github.io/jest/) to an Angular 6 project

## Usage 🚀

Install globally

```shell
npm install -g @briebug/jest
```

Then in an Angular CLI project run

```shel
ng g @briebug/jest:jest
```

This schematic will:

- install Jest, it's dependencies, and scripts
- add necessary files for Jest to work with Angular
- remove unnecessary Karma files and configuration

![ng-add-jest](docs/ng-add-jest.gif)

Optionally run as one command in an Angular CLI app directory. Note this will add the schematic as a dependency to your project.

```shell
ng add @briebug/jest
```

## Development 🛠

### Getting started

```shell
npm install && npm run link
```

### Test schematic changes against this repositories Angular CLI sandbox

When running locally, schematic changes will be applied to the test app in the `./sandbox` directory. The sandbox is a bare CLI app and serves no other purpose than for testing schematics changes.

Compile the typescript in watch mode in one shell:

```shell
npm run build
```

Run the following in another shell every time a schematic change is made:

```shell
npm run clean:launch
```

`clean:launch` will reset the sandbox to is current version controlled state, removing un-tracked files, and run the schematic against the sandbox. This will be your main development command.

⚠ **Be careful not to check in changes to the sandbox directory unless necessary.** ⚠

### Test schematics against a local project

- run `npm run build` to compile the schematic in watch mode
- open another shell, cd into the local repo you want to run the schematic against, and run `npm link ../PATH_TO_THIS_PROJECT`
- this will symlink the projects so that the Jest schematic command runs from you're local filesystem
- in the local repo you want to run the schematic against, run `ng g @briebug/jest:jest`

### Dev tips

For faster developing, find and comment out the following line to avoid npm installing dependencies

```ts
context.addTask(new NodePackageInstallTask());
```

### Reset sandbox to its version controlled state

This will reset the sandbox folder to its `HEAD` commit and remove un-tracked files.

```shell
npm run clean
```

### Compile the schematics

Compile the typescript files in watch mode

```shell
npm run build
```

Compile the typescript files once

```shell
npm run build:once
```

## Testing

### Test local sandbox for regressions

Run a series of standard tests to ensure the `./sandbox` continues to function normally

```shell
npm run test:sandbox
```

## Getting Started With Schematics

This repository is a basic Schematic implementation that serves as a starting point to create and publish Schematics to NPM.

### Schematic Testing

To test locally, install `@angular-devkit/schematics` globally and use the `schematics` command line tool. That tool acts the same as the `generate` command of the Angular CLI, but also has a debug mode.

Check the documentation with

```bash
schematics --help
```

### Unit Testing

`npm run test` will run the unit tests, using Jasmine as a runner and test framework.

### Publishing

Publishing is handled by [np](https://github.com/sindresorhus/np#usage). Ensure you have push access to this repo and are a [@breibug](https://www.npmjs.com/settings/briebug/packages) NPM contributor. Several [options](https://github.com/sindresorhus/np#usage) are available for releases such as `npm run release --no-publish`.

Once all features are merged into `master`:

1. on your machine, checkout `master`
2. pull latest
3. `npm run release`
4. select the next appropriate version given the changes being added
5. copy the `Commits:` displayed in your shell
6. ![release-commits](./docs/np-release.png)
7. edit the new release tag, and paste in the change notes and supply a title if appropriate
8. ![edit-github-release](./docs/edit-github-release.png)

## Documentation

- [Schematics README](https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/schematics/README.md)
- [Angular CLI schematic examples](https://github.com/angular/angular-cli/blob/master/packages/schematics/angular/app-shell/index.ts)

## Common solutions

### node-package

If you receive the following error and are on Angular CLI 1.X, trying moving to `"@angular/cli": "1.7"` or higher.

```shell
Error: Unregistered task "node-package" in schematic ...
```