- Node Version: `7.7.2`
- Protractor Version: `5.1.2`
- Angular Version: `4.1.3`
- Browser(s): `Chrome`
- Operating System and Version `Windows/Mac`
- Your protractor configuration file - Default config built in to
angular-cli
- A relevant example test
>From the docs:
describe('BannerComponent (inline template)', () => {
let comp: BannerComponent;
let fixture: ComponentFixture<BannerComponent>;
let de: DebugElement;
let el: HTMLElement;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [ BannerComponent ], // declare the test component
});
fixture = TestBed.createComponent(BannerComponent);
comp = fixture.componentInstance; // BannerComponent test instance
// query for the title <h1> by CSS element selector
de = fixture.debugElement.query(By.css('h1'));
el = de.nativeElement;
});
});
- Output from running the test
Test passes!
- Steps to reproduce the bug
Here's the meat of the issue; let's say, hypothetically, I want to use
ngx-translate in my component. I add the module, and I don't have to test
someone else's library because it's already tested, so I create a stub.
describe('BannerComponent (inline template)', () => {
let comp: BannerComponent;
let fixture: ComponentFixture<BannerComponent>;
let de: DebugElement;
let el: HTMLElement;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [ BannerComponent ], // declare the test component
providers: [
{
provide: TranslationService,
useClass: TranslationServiceStub
}
]
});
fixture = TestBed.createComponent(BannerComponent);
comp = fixture.componentInstance; // BannerComponent test instance
// query for the title <h1> by CSS element selector
de = fixture.debugElement.query(By.css('h1'));
el = de.nativeElement;
});
});
This makes perfect sense to me. I've added my translation stub. Great!
Here is my issue: When I an using the Angular framework, I abstract this
provider in to my module, specifically for the very reason that I DON'T
have to write the two lines above in every single component. There is 1
module, and 1 translation service provided for the entire module. Why
then, do I have to include the stub TranslationService in every spec'ed out
component that I am testing? I am told the following example is an
incorrect usage of this testing framework.
describe('BannerComponent (inline template)', () => {
let comp: BannerComponent;
let fixture: ComponentFixture<BannerComponent>;
let de: DebugElement;
let el: HTMLElement;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [TranslationModule],
declarations: [ BannerComponent ], // declare the test component
});
fixture = TestBed.createComponent(BannerComponent);
comp = fixture.componentInstance; // BannerComponent test instance
// query for the title <h1> by CSS element selector
de = fixture.debugElement.query(By.css('h1'));
el = de.nativeElement;
});
});
With this example, I am importing the TranslationModule and expecting it to
act normally (which it doesn't).
This is my problem with this framework. Why do I need to write twice as
much code in order to test my working angular code? Please fix this issue.
Feature Request
- Reasons for adopting new feature
Please stop creating nuanced testing frameworks.
- Is this a breaking change? (How will this affect existing functionality)
Yes, everything you are doing is wrong and should be broken in order to
create something new that is better.
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
