feat: UI updates to scaffolded files #21155

rachelruderman · 2022-04-20T22:06:28Z

Closes UNIFY-1552

User facing changelog

In E2E and component testing configuration, shows the scaffolded files on the launchpad in a custom order
Displays the scaffolded file names in bold to match Figma
Updates scaffolded file descriptions to match content in Figma
Small fixes to punctuation

Additional details

These changes implement the design set out in Figma, resulting in an improved user experience during configuration.

How has the user experience changed?

Before

After

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)
[na] Has a PR for user-facing changes been opened in cypress-documentation?
[na] Have API changes been updated in the type definitions?
[na] Have new configuration options been added to the cypress.schema.json?

…-custom-order

cypress-bot · 2022-04-20T22:06:31Z

Thanks for taking the time to open a PR!

Create a Draft Pull Request if your PR is not ready for review. Mark the PR as Ready for Review when you're ready for a Cypress team member to review the PR.
Become familiar with the Code Review Checklist for guidelines on coding standards and what needs to be done before a PR can be merged.

rachelruderman · 2022-04-20T22:29:09Z

packages/data-context/src/actions/WizardActions.ts


    if (fileName === 'commands') {
      fileContent = commandsFileBody(language)
+      description = 'A support file that is useful for creating custom Cypress commands and overwriting existing ones.'


Ideally these strings would be set by the frontend instead of the backend so we can store them in en-US.json, but doing so would require some backend changes that would have significantly bloated the scope for this ticket.

Would be great to do at another time

rachelruderman · 2022-04-20T22:30:50Z

packages/launchpad/cypress/fixtures/scaffolded-files.json

+           "status": "valid",
+           "description": "An example fixture for data imported into your Cypress tests, such as `cy.intercept()`.",


The fixture was required since this is a component test; in a system test, it wouldn't be needed.

If there's a preference here to do a system test instead, lmk and I'll be happy to update!

If there's a preference here to do a system test instead, lmk and I'll be happy to update!

Normally we don't add a system test if we can avoid it, since they take so long to run. I'd say E2E tests in cypress/e2e are fine for this kind of fix.

cypress · 2022-04-20T23:53:52Z

Test summary

17881 • 0 • 217 • 0 • 2

Run details


Project	cypress
Status	Passed
Commit	`4f697b9`
Started	Apr 22, 2022 5:00 PM
Ended	Apr 22, 2022 5:14 PM
Duration	13:58 💡
OS	Linux Debian - 10.10
Browser	Multiple

View run in Cypress Dashboard ➡️

Flakiness

	net_stubbing.cy.ts	1
1	network stubbing > intercepting response > can throttle a proxy response using res.setThrottle
	files.cy.js	1
1	... > has implicit existence assertion, retries and throws a specific error when file does not exist for null encoding

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

…-custom-order

ZachJW34 · 2022-04-21T22:00:57Z

packages/data-context/src/actions/WizardActions.ts

    assert(chosenFramework && chosenLanguage && chosenBundler)

-    return await Promise.all([
+    const scaffoldedFiles = await Promise.all([


Rather than maintain a list of the expected order of these files, can we just order them here and write a comment? We loop through this array to render out the files changed so if it was written like:

return await Promise.all([ this.scaffoldConfig('component'), this.scaffoldSupport('component', chosenLanguage), this.scaffoldSupport('commands', chosenLanguage), this.scaffoldComponentIndexHtml(chosenFramework), this.scaffoldFixtures(), ])

the order would be correct and it would remove the need to sort them.

💡 work smarter, not harder lolllll this is so much simpler, thank you for pointing that out! Makin' those changes now!!

Not sure we need async/await here, either.

private scaffoldComponent () { return Promise.all([ /* ... */ ])

@lmiller1990 true that, updating!

Actually I'mma keep it because all things being equal, it was helpful to have an intermediate variable for scaffoldedFiles that could be easily console-logged after the await

ZachJW34 · 2022-04-21T22:05:12Z

packages/data-context/src/actions/WizardActions.ts

      this.ctx.lifecycleManager.configFilePath,
      configCode,
-      'Created a new config file',
+      `The Cypress config file where the ${adjective} dev server is configured.`,


Not sure this wording makes sense for e2e. You can configure a server for e2e inside of setupNodeEvents but it's not required. It should just say "The Cypress configuration file for {adjective} testing".

ZachJW34 · 2022-04-21T22:10:01Z

packages/launchpad/cypress/fixtures/scaffolded-files.json

@@ -0,0 +1,127 @@
+{


We have a test in project-setup.cy.ts, we do a verifyFiles which we could tweak to verify the ordering as well. We could remove this fixture and have better coverage.

lmiller1990

Just one minor comment. Looks great.

lmiller1990 · 2022-04-25T04:15:44Z

packages/data-context/src/actions/WizardActions.ts

    assert(chosenFramework && chosenLanguage && chosenBundler)

-    return await Promise.all([
+    const scaffoldedFiles = await Promise.all([


Not sure we need async/await here, either.

private scaffoldComponent () { return Promise.all([ /* ... */ ])

…-config * 10.0-release: fix: Long Cypress verification times (#21174) feat: UI updates to scaffolded files (#21155)

rachelruderman added 19 commits April 14, 2022 14:10

fix capitalization of api

deb517a

update strings

f87c668

remove strings from backend

79153e1

Revert "remove strings from backend"

01c413a

Use hardcoded strings on backend :(

89ec18a

Use colon instead of period

183bf1c

Filename is bold

e39e83f

use intermediate var for clarity

9ca92f7

Create scaffolded files fixture

6214a20

create scaffolded files fixture

cfac7d7

Add test for bold font

e63cf60

Fix fixture

80333af

add scaffoldedFileOrder.ts

d2cd14b

component func and test

59ac81e

use single fixture

1ccdcfe

create cypress/fixtures/scaffolded-files.json

f0b369e

reorder files in fixture

5de5762

fix ordering

8019b8a

Merge branch '10.0-release' into UNIFY-1552-assert-files-are-shown-in…

b4be24e

…-custom-order

rachelruderman added 3 commits April 20, 2022 15:07

remove unused string

9b6c0a6

update comment

113a417

use consistent punctuation

657d99d

rachelruderman commented Apr 20, 2022

View reviewed changes

rachelruderman marked this pull request as ready for review April 20, 2022 22:34

rachelruderman requested a review from tgriesser as a code owner April 20, 2022 22:34

rachelruderman added 3 commits April 20, 2022 15:41

do not use spread syntax to clone

0233572

Make test more readable

04754ec

fix ts error

b496f20

rachelruderman and others added 3 commits April 20, 2022 20:02

consolidate test

ee5d76b

remove font color test

af564b3

Merge branch '10.0-release' into UNIFY-1552-assert-files-are-shown-in…

b768b36

…-custom-order

tbiethman requested a review from davidmunechika April 21, 2022 15:36

Fix font weight in accordance w/ Figma

341842f

ZachJW34 reviewed Apr 21, 2022

View reviewed changes

rachelruderman added 4 commits April 22, 2022 08:59

set file order in backend instead of sorting in frontend

0b96424

set file order in backend instead of sorting in frontend II

2b5c1f1

update verifyFiles to assert file order

41ff05e

update description for config file

4f697b9

rachelruderman requested a review from ZachJW34 April 22, 2022 16:56

lmiller1990 approved these changes Apr 25, 2022

View reviewed changes

ZachJW34 approved these changes Apr 25, 2022

View reviewed changes

davidmunechika approved these changes Apr 25, 2022

View reviewed changes

rachelruderman merged commit 8f7a50f into 10.0-release Apr 25, 2022

rachelruderman deleted the UNIFY-1552-assert-files-are-shown-in-custom-order branch April 25, 2022 15:39

tgriesser added a commit that referenced this pull request Apr 25, 2022

Merge branch '10.0-release' into tgriesser/feat/UNIFY-1256-auto-merge…

b30069f

…-config * 10.0-release: fix: Long Cypress verification times (#21174) feat: UI updates to scaffolded files (#21155)

		"status": "valid",
		"description": "An example fixture for data imported into your Cypress tests, such as `cy.intercept()`.",

feat: UI updates to scaffolded files #21155

feat: UI updates to scaffolded files #21155

Uh oh!

Conversation

rachelruderman commented Apr 20, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

User facing changelog

Additional details

How has the user experience changed?

PR Tasks

Uh oh!

cypress-bot bot commented Apr 20, 2022

Uh oh!

rachelruderman Apr 20, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cypress bot commented Apr 20, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Test summary

Run details

Flakiness

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lmiller1990 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

rachelruderman commented Apr 20, 2022 •

edited

Loading

rachelruderman Apr 20, 2022 •

edited

Loading

cypress bot commented Apr 20, 2022 •

edited

Loading