docs: fix BannerComponent unit tests

[swseverance]

remove async and await from BannerComponent test because the
component uses an inline template and styles

create new region in banner-external.component.spec.ts demonstrating
test setup that may fail due to a missing call to .compileComponents()
for a component with an external template and stylesheet

resolves #42325

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our guidelines: https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Documentation content changes
• angular.io application / infrastructure changes
• Other... Please describe:

What is the current behavior?

Issue Number: #42325

What is the new behavior?

Does this PR introduce a breaking change?

• Yes
• No

Other information

[swseverance]

@petebacondarwin

[AndrewKushnir]

@swseverance thanks for the fixing this, the change looks good to me (just one minor comment) 👍

I'm also adding @petebacondarwin as a reviewer since he may have more context on this.

[AndrewKushnir]

It looks like the formatting in these files leave a space in front and right after a symbol, so I believe this should look like:

Suggested change

	declarations: [BannerComponent],
	declarations: [ BannerComponent ],

[swseverance]

@AndrewKushnir thanks for taking a look. Within banner-external.component.spec.ts there are a total of three declarations: [BannerComponent] statements (only one of which I introduced in this PR). Would you like me to change all three to declarations: [ BannerComponent ]?

[AndrewKushnir]

Within banner-external.component.spec.ts there are a total of three declarations: [BannerComponent] statements (only one of which I introduced in this PR). Would you like me to change all three to declarations: [ BannerComponent ]?

Thanks for the comment. Let's keep it as is for now and see what @petebacondarwin suggests.

[petebacondarwin]

The formatting of the examples is a bit ad hoc since we have not, so far, chosen or enforced a specific formatter tool.
Until we do that, we should try to keep the formatting consistent within guides. The arrays in the the banner.component.spec.ts file contain spaces around the element, therefore I think that @AndrewKushnir is correct here. Please can you update all the declarations in this file to match.

[swseverance]

@petebacondarwin I made the suggested changes. thanks!

[mary-poppins]

You can preview 8ab5366 at https://pr42336-8ab5366.ngbuilds.io/.

[petebacondarwin]

Thanks for this update @swseverance - I am approving subject to making the change to the declarations array formatting.

Also while you are here, I note that this example code:

// #docregion async-before-each
beforeEach(async () => {
  TestBed
    .configureTestingModule({
      declarations: [BannerComponent],
    })
    .compileComponents();  // compile template and css
});
// #enddocregion async-before-each

should probably have an await in front of the call to TestBed.configureTestingModule(...).compileComponents(), right? Perhaps you could fix that in an extra commit in this PR?

[mary-poppins]

You can preview 978f3b1 at https://pr42336-978f3b1.ngbuilds.io/.

[AndrewKushnir]

@swseverance thanks for applying the changes to make the code more consistent 👍

[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.}