Skip to content

Conversation

@ZachJW34
Copy link
Contributor

@ZachJW34 ZachJW34 commented Jul 22, 2022

User facing changelog

Detect and scaffold CT project files for Angular applications

Additional details

Adding a new framework is fairly straightforward as it is all configuration based. Most of the code changes are from added system tests. The mount and dev-server handler PRs need to be merged before this can land.

Steps to test

  • Scaffold a new angular application with ng new angular-app (Might need to install ng globally with npm i -g @angular/cli)
  • yarn cypress:open in cypress repo and point it at the new Angular application
  • Walk through setup

Won't work until the Angular infra is in which should be soon. You can also run the packages/launchpad/cypress/e2e/scaffold-component-testing.cy.ts -> angular-cli-unconfigured test in the launchpad.

How has the user experience changed?

Screen.Recording.2022-07-22.at.11.45.37.AM.mov

PR Tasks

  • Have tests been added/updated?
  • Has the original issue (or this PR, if no issue exists) been tagged with a release in ZenHub? (user-facing changes only)
  • Has a PR for user-facing changes been opened in cypress-documentation?
  • Have API changes been updated in the type definitions?

@cypress-bot
Copy link
Contributor

cypress-bot bot commented Jul 22, 2022

Thanks for taking the time to open a PR!

@ZachJW34
Copy link
Contributor Author

ZachJW34 commented Jul 22, 2022

Need to scaffold specPattern into generated config. Since we pass the specPattern into the generated tsconfig, the glob pattern must abide by the rules that the tsconfig.include uses. The default spec pattern does not work due to the brace set (curly brackets in **/*.cy.{js,jsx,ts,tsx}).

package: '@angular/cli',
installer: '@angular/cli',
description: 'CLI tool that you use to initialize, develop, scaffold, and maintain Angular applications.',
minVersion: '>=13.0.0',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we also want to include a maxVersion? (not sure we actually have code path supporting this, but it would be easy to add, I think).

Also, do we know this does not work with any other versions (like 12 or 14)?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually we can add a maxVersion here: #22890

Question still stands about other versions - do we have support for 12 or 14?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No support for 12 but 14 works (and is proven out in the system tests)

@cypress
Copy link

cypress bot commented Jul 26, 2022



Test summary

37837 0 456 0Flakiness 10


Run details

Project cypress
Status Passed
Commit b4f969f
Started Jul 28, 2022 3:49 PM
Ended Jul 28, 2022 4:10 PM
Duration 21:03 💡
OS Linux Debian - 11.3
Browser Multiple

View run in Cypress Dashboard ➡️


Flakiness

commands/xhr.cy.js Flakiness
1 ... > logs request + response headers
2 ... > logs Method, Status, URL, and XHR
3 ... > logs response
4 ... > logs request + response headers
cypress/proxy-logging.cy.ts Flakiness
1 Proxy Logging > request logging > xhr log has response body/status code when xhr response is logged first
This comment includes only the first 5 flaky tests. See all 10 flaky tests in the Cypress Dashboard.

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

@ZachJW34 ZachJW34 marked this pull request as ready for review July 26, 2022 22:47
@ZachJW34 ZachJW34 requested review from a team as code owners July 26, 2022 22:47
@ZachJW34 ZachJW34 requested review from rachelruderman and removed request for a team July 26, 2022 22:47
}, null, 2)

return extractProperty(`
const toMerge = ${componentConfig}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hm I would expect this would have changed the indentation. Or do we handle the formatting elsewhere 🤔

Copy link
Contributor Author

@ZachJW34 ZachJW34 Jul 26, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Right above is the JSON.stringify(..., null, 2) which indents properly.

Copy link
Contributor

@lmiller1990 lmiller1990 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One question, giving it a test now.

@lmiller1990
Copy link
Contributor

I tried it out, works great!

image

@lmiller1990 lmiller1990 self-requested a review July 27, 2022 23:45
Copy link
Contributor

@lmiller1990 lmiller1990 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Comments addressed and I tested it out, works great 👍

Copy link
Contributor

@mike-plummer mike-plummer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, just one question

@ZachJW34 ZachJW34 merged commit a7b140d into develop Jul 28, 2022
@ZachJW34 ZachJW34 deleted the zachw/angular-ct-project-setup branch July 28, 2022 16:14
@ZachJW34 ZachJW34 mentioned this pull request Aug 5, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add Angular CT integration in Launchpad

4 participants