Added typescript fix for problem with specs created by "dotnet new angular --auth" #18295

benday · 2020-01-11T18:53:33Z

Summary of the changes (Less than 80 chars)

Modified angular template code for api-authorization to fix defects in specs
Imported RouterTestingModule to login, logout, and login-menu component specs
Modified login.componet.spec.ts to use spys to mock logic in AuthorizeService during testing

Addresses #18121

Individual" generated code.

dnfclas · 2020-01-11T18:53:46Z

All CLA requirements met.

mkArtakMSFT · 2020-01-22T18:02:59Z

Thanks for your PR, @benday. Please target master branch as this resulted in too many commits and file changes showing up, making the PR unreadable.

benday · 2020-02-10T15:31:21Z

@mkArtakMSFT -- FYI, I changed the target branch from 3.0 to master. Hopefully this should keep the changes more readable.

ryanbrandenburg

Unfortunately this doesn't seem to fix all the tests when merged with the master branch.

...ntent/Angular-CSharp/ClientApp/src/api-authorization/login-menu/login-menu.component.spec.ts

refresh from master

Update login-menu.component.spec.ts to remove trailing space

benday

Removed trailing spaces per PR comments

Individual" generated code.

Update login-menu.component.spec.ts to remove trailing space

…com/benday/aspnetcore into webapi-angular-template-issue-18121

ryanbrandenburg · 2020-08-04T17:20:58Z

I'm still seeing failures such as:

Chrome 84.0.4147.105 (Windows 10) LoginMenuComponent should create FAILED
            <li class="nav-item">
                <a  class="nav-link text-dark" [ERROR ->][routerLink]='["/authentication/profile"]' title="Manage">Hello {{ userName | async }}</a>
            </li>
            <li class="nav-item">
                <a  class="nav-link text-dark" [ERROR ->][routerLink]='["/authentication/logout"]' [state]='{ local: true }' title="Logout">Logout</a>
                <a  class="nav-link text-dark" [routerLink]='["/authentication/logout"]' [ERROR ->][state]='{ local: true }' title="Logout">Logout</a>
            </li>
        </ul>
        Can't bind to 'routerLink' since it isn't a known property of 'a'. ("*ngIf="isAuthenticated | async">
            <li class="nav-item">
                <a  class="nav-link text-dark" [ERROR ->][routerLink]='["/authentication/profile"]' title="Manage">Hello {{ userName | async }}</a>
            </li>"): ng:///DynamicTestModule/LoginMenuComponent.html@2:39
        Can't bind to 'routerLink' since it isn't a known property of 'a'. ("
            </li>
            <li class="nav-item">
                <a  class="nav-link text-dark" [ERROR ->][routerLink]='["/authentication/logout"]' [state]='{ local: true }' title="Logout">Logout</a>
            </"): ng:///DynamicTestModule/LoginMenuComponent.html@5:39
        Can't bind to 'state' since it isn't a known property of 'a'. ("class="nav-item">
                <a  class="nav-link text-dark" [routerLink]='["/authentication/logout"]' [ERROR ->][state]='{ local: true }' title="Logout">Logout</a>
            </li>
        </ul>
        "): ng:///DynamicTestModule/LoginMenuComponent.html@5:81
        Can't bind to 'routerLink' since it isn't a known property of 'a'. ("*ngIf="!(isAuthenticated | async)">
          <li class="nav-item">
                <a class="nav-link text-dark" [ERROR ->][routerLink]='["/authentication/register"]'>Register</a>
            </li>
            <li class="nav-item">
        "): ng:///DynamicTestModule/LoginMenuComponent.html@10:38
        Can't bind to 'routerLink' since it isn't a known property of 'a'. ("
            </li>
            <li class="nav-item">
                <a class="nav-link text-dark" [ERROR ->][routerLink]='["/authentication/login"]'>Login</a>
            </li>
        </ul>
        "): ng:///DynamicTestModule/LoginMenuComponent.html@13:38
        error properties: Object({ ngSyntaxError: true, ngParseErrors: [ Can't bind to 'routerLink' since it isn't a known property of 'a'. ("*ngIf="isAuthenticated | async">
            </li>"): ng:///DynamicTestModule/LoginMenuComponent.html@2:39, Can't bind to 'routerLink' since it isn't a known property of 'a'. ("
            </"): ng:///DynamicTestModule/LoginMenuComponent.html@5:39, Can't bind to 'state' since it isn't a known property of 'a'. ("class="nav-item">
        "): ng:///DynamicTestModule/LoginMenuComponent.htm ... ...

when I attempt to run these tests. Are you not seeing those when you run it locally? If not let me know what steps your taking to test so I can follow them.

benday · 2020-08-04T17:50:04Z

Yah. I'm seeing that, too. It was working and now it isn't.

BTW, the "dotnet new angular" template targets Angular 8. I've got this working with Angular 9. Would you like me to add my Angular 9 template updates to this PR along with the security unit test changes?

ryanbrandenburg · 2020-08-04T17:52:51Z

BTW, the "dotnet new angular" template targets Angular 8. I've got this working with Angular 9. Would you like me to add my Angular 9 template updates to this PR along with the security unit test changes?

Moving to Angular 9 is a bigger thing (if not for the code, then from the book-keeping we do about dependencies on our end). I would prefer to keep the two separate.

benday · 2020-08-04T17:53:45Z

gotcha. should I submit a PR for Angular 9 or would you like to push that to a later date entirely?

ryanbrandenburg · 2020-08-04T17:58:07Z

The issue for upgrading to Angular 9 is here. Looks like we had previously delayed due to problems people were finding with upgrading. @danroth27 is driving some other work related to our SPA templates and could maybe opine if you asked on that issue.

danroth27 · 2020-08-04T23:31:00Z

@LadyNaggaga

benday · 2020-08-21T18:08:08Z

I'm still seeing failures such as:

Chrome 84.0.4147.105 (Windows 10) LoginMenuComponent should create FAILED
            <li class="nav-item">
                <a  class="nav-link text-dark" [ERROR ->][routerLink]='["/authentication/profile"]' title="Manage">Hello {{ userName | async }}</a>
            </li>
            <li class="nav-item">
                <a  class="nav-link text-dark" [ERROR ->][routerLink]='["/authentication/logout"]' [state]='{ local: true }' title="Logout">Logout</a>
                <a  class="nav-link text-dark" [routerLink]='["/authentication/logout"]' [ERROR ->][state]='{ local: true }' title="Logout">Logout</a>
            </li>
        </ul>
        Can't bind to 'routerLink' since it isn't a known property of 'a'. ("*ngIf="isAuthenticated | async">
            <li class="nav-item">
                <a  class="nav-link text-dark" [ERROR ->][routerLink]='["/authentication/profile"]' title="Manage">Hello {{ userName | async }}</a>
            </li>"): ng:///DynamicTestModule/LoginMenuComponent.html@2:39
        Can't bind to 'routerLink' since it isn't a known property of 'a'. ("
            </li>
            <li class="nav-item">
                <a  class="nav-link text-dark" [ERROR ->][routerLink]='["/authentication/logout"]' [state]='{ local: true }' title="Logout">Logout</a>
            </"): ng:///DynamicTestModule/LoginMenuComponent.html@5:39
        Can't bind to 'state' since it isn't a known property of 'a'. ("class="nav-item">
                <a  class="nav-link text-dark" [routerLink]='["/authentication/logout"]' [ERROR ->][state]='{ local: true }' title="Logout">Logout</a>
            </li>
        </ul>
        "): ng:///DynamicTestModule/LoginMenuComponent.html@5:81
        Can't bind to 'routerLink' since it isn't a known property of 'a'. ("*ngIf="!(isAuthenticated | async)">
          <li class="nav-item">
                <a class="nav-link text-dark" [ERROR ->][routerLink]='["/authentication/register"]'>Register</a>
            </li>
            <li class="nav-item">
        "): ng:///DynamicTestModule/LoginMenuComponent.html@10:38
        Can't bind to 'routerLink' since it isn't a known property of 'a'. ("
            </li>
            <li class="nav-item">
                <a class="nav-link text-dark" [ERROR ->][routerLink]='["/authentication/login"]'>Login</a>
            </li>
        </ul>
        "): ng:///DynamicTestModule/LoginMenuComponent.html@13:38
        error properties: Object({ ngSyntaxError: true, ngParseErrors: [ Can't bind to 'routerLink' since it isn't a known property of 'a'. ("*ngIf="isAuthenticated | async">
            </li>"): ng:///DynamicTestModule/LoginMenuComponent.html@2:39, Can't bind to 'routerLink' since it isn't a known property of 'a'. ("
            </"): ng:///DynamicTestModule/LoginMenuComponent.html@5:39, Can't bind to 'state' since it isn't a known property of 'a'. ("class="nav-item">
        "): ng:///DynamicTestModule/LoginMenuComponent.htm ... ...

when I attempt to run these tests. Are you not seeing those when you run it locally? If not let me know what steps your taking to test so I can follow them.

Hi @ryanbrandenburg -- I'm just getting back to this and i can only repro those errors if I add "--framework netcoreapp3.1" to the dotnet new command. I'm stumped. Hopefully you can help. Here's my process:

install a preview of .net core 5 cli
build the entire tree using .\build.cmd -all -pack -arch x64
install the freshly generated SPA template using dotnet new -I C:\code\github\benday\aspnetcore\artifacts\packages\Debug\Shipping\Microsoft.DotNet.Web.Spa.ProjectTemplates.5.0.5.0.0-dev.nupkg
Create an empty directory and cd to that dir
Run one of the following dotnet new angular commands as follows

For example, this creates code that works fine:
dotnet new angular --auth individual

This creates code that gives all the exceptions you mentioned:
dotnet new angular --auth individual --framework netcoreapp3.1

I did a compare between the code that's generated off of those two commands and the "--framework netcoreapp3.1" doesn't have any of the changes that I've submitted. I suspect that specifying --framework loads an entirely different version of the Microsoft.DotNet.Web.Spa.ProjectTemplates nupkg. Any thoughts on how to get my changes in to the netcoreapp3.1 version?

Any help would be greatly appreciated.

Thanks,
-Ben

mkArtakMSFT · 2020-10-23T20:47:24Z

@HaoK can you please take this PR over from @ryanbrandenburg and work with @benday to get this merged? Thanks!
//cc @javiercn

HaoK · 2020-10-26T07:30:21Z

/azp run

azure-pipelines · 2020-10-26T07:30:44Z

Azure Pipelines successfully started running 2 pipeline(s).

HaoK · 2020-11-03T18:58:39Z

@benday looks like all the CI checks are passing now, are you still seeing any failures or is this good to go from your perspective?

benday · 2020-11-03T19:00:14Z

@HaoK -- Looks good to me. No changes from my end. I'd say it's good to go. Lemme know if you need anything.

Dismissing review since checks are green now

HaoK · 2020-11-03T19:01:53Z

Thanks for the PR @benday

Added typescript fix for problem with "dotnet new angular --auth

6b9888d

Individual" generated code.

ghost added the area-mvc Includes: MVC, Actions and Controllers, Localization, CORS, most templates label Jan 11, 2020

Fixed whitespace

edba973

benday changed the base branch from master to 3.0 January 13, 2020 18:46

Update login-menu.component.spec.ts

1eeb4ce

benday requested review from BrennanConroy, SteveSandersonMS, Tratcher, analogrelay, dougbu, halter73 and jkotalik as code owners January 16, 2020 18:41

mkArtakMSFT removed request for BrennanConroy, SteveSandersonMS, Tratcher, analogrelay, dougbu, halter73 and jkotalik January 22, 2020 18:03

mkArtakMSFT assigned ryanbrandenburg Jan 22, 2020

mkArtakMSFT added the Needs: Author Feedback The author of this issue needs to respond in order for us to continue investigating this issue. label Jan 22, 2020

benday changed the base branch from 3.0 to master January 23, 2020 19:44

mkArtakMSFT requested review from javiercn and ryanbrandenburg and removed request for javiercn February 11, 2020 06:18

mkArtakMSFT removed the Needs: Author Feedback The author of this issue needs to respond in order for us to continue investigating this issue. label Feb 11, 2020

ryanbrandenburg previously requested changes Jul 1, 2020

View reviewed changes

...ntent/Angular-CSharp/ClientApp/src/api-authorization/login-menu/login-menu.component.spec.ts Outdated Show resolved Hide resolved

benday added 2 commits August 3, 2020 10:31

Merge pull request #1 from dotnet/master

1f390ca

refresh from master

Removed trailing space

34f2de1

Update login-menu.component.spec.ts to remove trailing space

benday commented Aug 3, 2020

View reviewed changes

benday added 5 commits August 3, 2020 11:33

Added typescript fix for problem with "dotnet new angular --auth

bb771ca

Individual" generated code.

Fixed whitespace

1340267

Update login-menu.component.spec.ts

b7e81bc

Removed trailing space

c35ca5f

Update login-menu.component.spec.ts to remove trailing space

Merge branch 'webapi-angular-template-issue-18121' of https://github.…

921cdf0

…com/benday/aspnetcore into webapi-angular-template-issue-18121

Added spy logic to generated specs to avoid null refs

db93428

javiercn added the enhancement This issue represents an ask for new feature or an enhancement to an existing one label Oct 9, 2020

mkArtakMSFT assigned HaoK and unassigned ryanbrandenburg Oct 23, 2020

mkArtakMSFT requested a review from HaoK October 23, 2020 20:47

HaoK linked an issue Nov 2, 2020 that may be closed by this pull request

Jasmine specs fail on new angular project using --auth Individual #18121

Closed

HaoK approved these changes Nov 3, 2020

View reviewed changes

HaoK merged commit 2271952 into dotnet:master Nov 3, 2020

Added typescript fix for problem with specs created by "dotnet new angular --auth" #18295

Added typescript fix for problem with specs created by "dotnet new angular --auth" #18295

Uh oh!

Conversation

benday commented Jan 11, 2020

Uh oh!

dnfclas commented Jan 11, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mkArtakMSFT commented Jan 22, 2020

Uh oh!

benday commented Feb 10, 2020

Uh oh!

ryanbrandenburg left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

benday left a comment

Choose a reason for hiding this comment

Uh oh!

ryanbrandenburg commented Aug 4, 2020

Uh oh!

benday commented Aug 4, 2020

Uh oh!

ryanbrandenburg commented Aug 4, 2020

Uh oh!

benday commented Aug 4, 2020

Uh oh!

ryanbrandenburg commented Aug 4, 2020

Uh oh!

danroth27 commented Aug 4, 2020

Uh oh!

benday commented Aug 21, 2020

Uh oh!

mkArtakMSFT commented Oct 23, 2020

Uh oh!

HaoK commented Oct 26, 2020

Uh oh!

azure-pipelines bot commented Oct 26, 2020

Uh oh!

HaoK commented Nov 3, 2020

Uh oh!

benday commented Nov 3, 2020

Uh oh!

HaoK commented Nov 3, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

dnfclas commented Jan 11, 2020 •

edited

Loading