Pipe argument not working

[deepakgd]

Hi,
I have created custom pipes for filtering data. Normal pipe and custom pipe working fine. But the issue is pipe argument not working.

My custom pipe code is:

import {Pipe} from 'angular2/core';
@Pipe({
  name: 'toggl'
})
export class ToggleArgs {
  transform(value,[status]) {
    return value.filter((item)=>item.status === status);
  }
}

My component code is

import {Component} from 'angular2/core';
import {ToggleArgs} from '../../pipes/toggle-args/toggle-args';

@Component({
  selector: 'test-component',
  templateUrl: 'app/components/test-component/test-component.html',
  styleUrls: ['app/components/test-component/test-component.css'],
  providers: [],
  directives: [],
  pipes: [ToggleArgs]
})
export class TestComponent {
list;
 constructor() {
    this.list = [{"title": "eat", "status": "WIP"},{"title": "code", "status": "WIP"},{"title": "sleep", "status": "WIP"}]
  }
}

html code:
<li *ngFor="#item of list | toggl:'completed'">{{item.title}} and {{item.status}}</li>
Output:
Build error

[DiffingTSCompiler]: Typescript found the following errors:
app/pipes/toggle-args/toggle-args.spec.ts (22, 14): Supplied parameters do not match any signature of call target.

Same code I have tried as per the quickstart guide (https://angular.io/docs/ts/latest/quickstart.html) it was working fine. Please solve this issue.

[filipesilva]

The error you're getting is in the unit test for your pipe (toggle-args.spec.ts). You probably changed the pipe but not the test, thus breaking the test.

You can either update the test, or remove it. In both scenarios your issue will be fixed.

[deepakgd]

Sorry i can't get you. Can you please share code. I have tried but still its not working. but this same code is working fine in angular quick start app

[Brocco]

I would believe that you created your pipe via ng generate pipe toggl and by doing so there would have been 2 files created toggl.ts and toggle.spec.ts @filipesilva is suggesting, and I agree, that you have updated toggl.ts but not the test spec file to accommodate the code changes made.

If that is true then your spec file looks like this:

it('should transform the input', inject([Toggl], (pipe:Toggl) => {
  expect(pipe.transform(true)).toBe(null);
}));

You will have to update the expect statement to test what value you are supplying versus the result which is returned from your pipe

[deepakgd]

okay Brocco thanks

[deepakgd]

Hi brocco, i understand it. but js file is created automatically based on ts file right. then why i need to write manually. Please make this process automatically. This will be helpful.

[filipesilva]

Well, when you do ng generate pipe toggl you get two files - a src/app/pipes/toggl.ts and src/app/pipes/toggl.spec.ts, right? The pipe itself and the unit test for it. They were generated for you at this point, but further changes to these files are on you.

Then you changed src/app/pipes/toggl.ts to your code - but didn't change src/app/pipes/toggl.spec.ts. The unit test code is still testing the old pipe code, and that fails.

So now you have two options: either you rework src/app/pipes/toggl.spec.ts to actually test your new pipe code, or you remove the test.

[deepakgd]

ok thanks. i will rework.

[filipesilva]

Please tell me if it works well for you. There isn't a lot of documentation on Angular 2 unit tests right now and sometimes it's hard to get them to work.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}