-
-
Notifications
You must be signed in to change notification settings - Fork 71
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.
Already on GitHub? Sign in to your account
Support rendering templates selected with something else than only string id
#288
Comments
Hi @znaczek, thanks for the report. I've been looking for a case, you provided. Btw, do you use Next days I'll implement a fix for your case and let you know. |
I think the interface could be like that:
What do you think? |
Ah... it couldn't be so easy.... a mock |
Hi @znaczek again, your case can be tested like that without any adjustments. describe('issue-288:mock', () => {
beforeEach(() => MockBuilder(AppComponent, AppModule));
it('renders the desired ContentChild', () => {
const fixture = MockRender(AppComponent);
const componentEl = ngMocks.find(TableComponent);
const directive = ngMocks.findInstance(componentEl, CellDirective);
// also possible
// const directive = componentEl.componentInstance.cell;
if (isMockOf(directive, CellDirective, 'd')) {
directive.__render({ data: 3});
fixture.detectChanges();
}
expect(fixture.nativeElement.innerHTML).toContain('<div class="custom-data-element">Data: 3</div>');
});
}); The thing is like that: I'll try to adjust docs about the case and also to do additional research for possible cases. |
Hi, @satanTime thanks for looking into this and extremely fast response! So yes, I have tested it in my simplified example and it works indeed. And yes - we rather want to test what is inside of the I think this issue can be closed. I will test this approach in a real project in the incoming days/weeks and eventually reopen if come across any obstacle. However as you mentioned I think it worth adding somewhere in the docs because this pattern with Thanks |
That's great, If you have time, I would like to ask you to post some code examples or links to libs which use this approach, especially which you want to use in your project. I am working on enhancement and want to be sure that it will cover all possible cases. Thank you in advance! |
@satanTime For example ng-select. And an example usage in my project:
|
Cool, thanks, I'll write docs including this example. Besides that I'll include mat-table and p-calendar. |
Hm... doesn't work for me with I was trying to fetch the directive like ngMocks.findInstance(ngSelectEl, NgLabelTemplateDirective) but const t1 = ngMocks.findTemplateRef(ngSelectEl, 'ng-label-tmp');
const t2 = ngMocks.findTemplateRef(ngSelectEl, Directive);
const t3 = ngMocks.findTemplateRef(ngSelectEl, '#id');
const debugEl1 = ngMocks.render(componentInstance, t1, letVar, tplVars);
const debugEl2 = ngMocks.render(componentInstance, [t2, t3], letVar, tplVars);
ngMocks.hide(componentInstance, t1);
ngMocks.hide(componentInstance, [t2, t3]);
ngMocks.hide(componentInstance); |
I've implemented rendering based on properties, what do you think, would it fit? it('provides correct template for ng-label-tmp', () => {
MockRender(TargetComponent);
const ngSelect = ngMocks.findInstance(NgSelectComponent);
if (isMockOf(ngSelect, NgSelectComponent, 'c')) {
ngSelect.__render(['labelTemplate'], {}, {item: {name: 'test'}});
}
const tplEl = ngMocks.find('[data-prop="labelTemplate"]');
expect(tplEl.nativeElement.innerHTML).toContain('<strong>test</strong>');
}); What I do not like here is |
I am not sure what's the implementation under the hood and if I understood your proposition correctly, but I would expect, that after:
I can just do something like this:
So in above example I developer doesn't need to know what is inside either ng-select or any of it's template. I just check if the content of |
Almost right, and it will work like that. The only thing is a dev should know that the |
Ok, that's true. So would that be a problem to so this:
I don't know the insights of the library implementation, but one thing led to another: Not sure if it's even possible, just throwing ideas :p |
yeah, I think that's feasible. so it will be like that: ngSelect.__render('idHere', {}, {item: {name: 'test'}});
ngSelect.__render('[attribute]', {}, {item: {name: 'test'}}); |
I've created a separate issue to track this: #292 |
This weekend a new release will be published, it contains a temp fix which allows to test |
Hi @znaczek, the version has been released: 11.6.0. Please let me know if it fits your expectations. Thank you in advance and happy coding! |
Hi, |
Hi @znaczek, some improvements have been released: now Happy coding! |
First of all - great library! 馃憤 Solves a lot of problems
I am using
mockComponent
functionality on dependant components and I am usingng-templates
to customise it contents. Now I would like to test how this template renders.In the docs we can find that on a mocked component we can use
__render
method. It acceptscontentChildSelector: string
as a selector. However in our project we are using directives in@ContentChild
.Example below (simplified for demonstration purpose):
Dependency
TableComponent
component:CellDirective
:And
AppComponent
which usesTableComponent
Now in the test I would like to see:
And whole point is that
???
. The easiest here probably would be to use the directive selector[appCell]
but anything would do the job as long as we could render templates selected by a directive rather then static string id.Thanks to everybody for any participation!
The text was updated successfully, but these errors were encountered: