KiaraGrouwstra / pug-plugin-ng

A Pug plugin allowing unquoted use of Angular 2's `[(bananabox)]="val"` syntax
MIT License
24 stars 2 forks source link

Adding support for testing with Karma #8

Open brandon-a-hay opened 7 years ago

brandon-a-hay commented 7 years ago

Hey @tycho01 ,

I love the plugin as its saved me a ton of time when adding new pug templates on my Angular 4 project. I've run into a problem while implementing unit testing for the first time in the app. When I karma start my tests,I run each pug template through a pug preprocessor to convert it to html. During this stage I get the following, familiar errors:

24 07 2017 12:49:41.206:ERROR [preprocessor.pug]: C:/Users/bhay/Desktop/Apps.aMm.Frontend/src/app-ng/app/service-mastermind/service-mastermind.component.pug:8:37
    6|         .head serviceMastermind®
    7|       .pull-right
  > 8|         button.btn.btn-danger(*ngIf="selectedRows.length > 0" (click)="batchDelete()")
-------------------------------------------^
    9|           i.am-icon.am-icon-trash
    10|           |  Delete selected ({{ selectedRows.length }})
    11|         button.btn.btn-success((click)="addFreshUp()")

Syntax Error: Assigning to rvalue

When I add single quotes around each angular specific directive the errors go away, so what's needed is a karma preprocessor plugin to make the necessary changes to convert the pug templates back to html.

Have you tried using your plugin on any projects that required unit testing? Any consideration of writing this code as a karma preprocessor?

KiaraGrouwstra commented 7 years ago

Thank you for your kind words. So this is gonna be a matter of support for passing plugin config to your current way of converting Pug with Karma. How are you doing that now? I'm seeing that karma-pug-preprocessor for one currently passes hard-coded options to Pug, so you'd have a valid point there. Is that the one you're using?

brandon-a-hay commented 7 years ago

Yes, that's the one I'm using. Here's the relevant part of my karma.conf.js:

preprocessors: {
      './src/test.ts': ['@angular/cli'],
      '**/*.pug': ['pug']
    },

It seems possible to chain preprocessors, so I could imagine doing something like this:

'**/*.pug': ['pug', 'pug-plugin-ng']
KiaraGrouwstra commented 7 years ago

I see, guess it'd use that karma-pug-preprocessor by default then. The solution here would not so much be to add extra preprocessors in the chain, but rather to configure the existing one. This appears possible, but I'm not quite knowledgeable about how this works in practice (from either user or preprocessor dev perspectives). Looks like we'd need to take it there -- we'll probably need to do a PR on it. Hopefully someone else will have more of a clue as to how this works on the Karma side.

Edit: filed there as https://github.com/StoutLLC/karma-pug-preprocessor/issues/3

KiaraGrouwstra commented 7 years ago

Opened a PR at StoutLLC/karma-pug-preprocessor#4.