Create angular schematics for shallow-render

[mihalcan]

I'd like to propose to add Angular schematics, so when you create a component with Angular CLI, instead of a default spec file, a shallow-render spec file is generated.

Let's say you execute: ng g c app/shallow-component
It would generate the following spec file:

import { ShallowComponentComponent } from './shallow-component.component';
import { AppModule } from './app.module';
import { Shallow } from 'shallow-render/dist';

describe('ShallowComponentComponent', () => {
  let shallow: Shallow<ShallowComponentComponent>;

  beforeEach(() => {
    shallow = new Shallow(ShallowComponentComponent, AppModule);
  });

  it('should create', async () => {
    const { instance } = await shallow.render();
    expect(instance).toBeTruthy();
  });
});

@getsaf If you are interested, I can help with a PR as I have got a working solution already.

[getsaf]

I actually noticed your NPM package a while back, this is a great idea. I'm glad to see someone making more testing tools.

We have two options, if you would like to keep your existing package, I don't mind collaborating on yours. I can even link to it from my README and/or docs.

-- or --

You can submit a PR and we can collaborate here. I may be picky about a few things before it goes into the official package so we keep with the overall 'theme' of shallow-render.

• How can we properly guess the module the component lives in? (walk up the tree and find the first one?)
• I generally advise against the it renders or it creates tests that Angular defaults to because I feel they give devs a false sense-of-security. Can we come up with something better for the initial test?

Thanks for the suggestion and the offer, let me know how you want to do this and I'll follow your lead.

[mihalcan]

I'd definitely want to have schematics within the main shallow-render repository. As it is logical from a user perspective.

• Current implementation executes a default ng g c command and overrides spec file with a shallow-render template. Module name is known after the execution of the ng generate command, so it is possible to calculate the relative path to the module.
• How in your opinion look look a basic generic test? What can we validate another than the creation of the component? I can't come up with a good example.

[getsaf]

Hey, sorry for the delayed response. Sounds good about the module. I haven't used the ng g command much, are you saying that when Angular generates a component, it'll automatically figure out which NgModule it should be added to and adds it or are you saying that we can figure out the "closest" module after the ng generate completes?

What do you think about making the default test an explicit placeholder? Something that indicates,

I've setup the boilerplate for you but this is not actually testing anything yet, you have to do that

Maybe:

it('has a placeholder test', async () => {
   const {find} = await shallow.render();

   // ...
});

[mihalcan]

Hi, I'm sorry as well about the delay. Yes, there is a findModule utility in @schematics/angular/utility/find-module that allows to find module by provided options. Moreover it has buildRelativePath() function that gives you a relative path to the module.

The default placeholder looks good to me. We can also add an assertion

it('has a placeholder test', async () => {
   const {find} = await shallow.render();
   expect(find('p')).toHaveFound(1);
});

However I have a problem with testing schematics. The repository is using karma and karma tests are run in browser, schematics are using node js environment. It seems that you can't run node tests in karma . I've used sinon/chai in my repository, however it seems that Jest is getting popularity in Angular community as well.
Which testing framework would you suggest to use?

[getsaf]

Awesome about the find-module utility.

For now, I only support Karma so let's go with that. I do plan on adding support for jest and allowing user-defined adapters for other test frameworks. Just need some time to put it all together.

ninja-edit: I also dig the placeholder test suggestion. I assume the default generated component has a <p/> placeholder?

[mihalcan]

Hi @getsaf,
Quite busy at the moment, so can't spare a lot of time. However I've managed to create an initial version. It'd be great if you can take a look, as I haven't contributed before - https://github.com/mihalcan/shallow-render/tree/schematics
Or should I create a pull request?

[getsaf]

Oh, yeah just put up a PR. If it's not complete, mark it with the WIP label and we can collaborate on it until it's ready to merge.

[getsaf]

Closing due to inactivity. I'm still interested in linking to your schematics package. Just need you to make it open-source and link to the correct github page for it.

[antch]

@mihalcan any update on this?

[mihalcan]

sorry, completely forgot about it. I'll try to spare some time to finish it.

[mihalcan]

@getsaf @kylecannon I've created a schematics package @mihalcan/shallow-render-schematics. We can now use ng add @mihalcan/shallow-render-schematics to add shallow-render to an Angular CLI project.

Please let me know, if you think that I can improve schematics somehow