test: [M3-7053] - Add Cypress integration test for VPC create flow #9730

jdamore-linode · 2023-09-28T16:59:34Z

Description 📝

Adds a Cypress integration test for the VPC create flow.

Major Changes 🔄

   - Confirms VPC creation flow using mock API data.
   - Confirms that users can add and remove subnets during create flow.
   - Confirms client side validation when entering invalid labels and IP ranges.
   - Confirms that UI handles API errors gracefully.
   - Confirms that UI redirects to created VPC page after creating a VPC.

How to test 🧪

We can refer to the automated test run, but to run the tests locally you can use this command:

yarn cy:run -s "cypress/e2e/core/vpc/vpc-create.spec.ts"

jdamore-linode · 2023-09-28T17:02:35Z

packages/manager/cypress/e2e/core/vpc/vpc-create.spec.ts

+      .click()
+      .type(`${vpcRegion.label}{enter}`);
+
+    cy.findByText('VPC label').should('be.visible').click().type(mockVpc.label);


Should "VPC label" be "VPC Label" to be more consistent with other resource create flows? (This question also applies to "Subnet label" vs "Subnet Label" later in the flow)

Makes sense to me

+1 makes sense to me too -- I'll ask UX to double check :D

confirmed that label should be capitalized :D

Thanks for confirming @coliu-akamai! I'll make those changes in this PR if that works for everyone 👍

hana-akamai

Ran the tests locally and they passed 🎉

hana-akamai · 2023-09-29T16:04:42Z

packages/manager/cypress/e2e/core/vpc/vpc-create.spec.ts

+    const totalSubnetUniqueLinodes = mockSubnets.reduce(
+      (acc: number, cur: Subnet) => acc + cur.linodes.length,
+      0
+    );


There's a function to calculate this called getUniqueLinodesFromSubnets

Thanks @hana-linode! I'll take a look at that and see if I can use it from the test

hana-akamai · 2023-09-29T16:09:05Z

packages/manager/cypress/e2e/core/vpc/vpc-create.spec.ts

+      .click()
+      .type(`${vpcRegion.label}{enter}`);
+
+    cy.findByText('VPC label').should('be.visible').click().type(mockVpc.label);


Makes sense to me

coliu-akamai

✅ confirmed tests pass. Thanks Joe!

coliu-akamai · 2023-09-29T17:27:55Z

packages/manager/cypress/e2e/core/vpc/vpc-create.spec.ts

+      .click()
+      .type(`${vpcRegion.label}{enter}`);
+
+    cy.findByText('VPC label').should('be.visible').click().type(mockVpc.label);


+1 makes sense to me too -- I'll ask UX to double check :D

coliu-akamai · 2023-10-04T14:07:21Z

Hey @jdamore-linode! Just wanted to give a heads-up that the VPC Create flow will be changed a from this PR/ticket:
#9751

The changes are:

All subnets have the remove [x] button, including the first subnet
The button text for adding subnets is changed from “Add Subnet” to “Add Another Subnet” (affects line 156, 199 most likely)
- If there are no subnets, it's "Add a Subnet"
There's a divider below each subnet now

jdamore-linode · 2023-10-04T14:32:58Z

Hey @jdamore-linode! Just wanted to give a heads-up that the VPC Create flow will be changed a from this PR/ticket: #9751

The changes are:

All subnets have the remove [x] button, including the first subnet

The button text for adding subnets is changed from “Add Subnet” to “Add Another Subnet” (affects line 156, 199 most likely)

If there are no subnets, it's "Add a Subnet"

There's a divider below each subnet now

Thanks @coliu-akamai and @hana-linode for the heads up! I'll review #9751 later today, and my plan is to wait for that work to be reviewed and merged, and then I'll circle back here and update this PR to account for these changes and add additional coverage where necessary (being able to delete the first subnet specifically comes to mind)

…abel

jdamore-linode · 2023-10-09T19:27:54Z

@coliu-akamai @hana-linode Just letting you know I pushed some changes to account for the recent improvements made to the VPC create page:

Updated tests to account for "Add a Subnet" label change to "Add another Subnet"
Added a new test to create a VPC without Subnets (confirms user can delete the subnet on the create page, confirms that button label changes to "Add a Subnet", etc.)

I don't know if this warrants a re-review but wanted to give you both a heads up in case you wanted to put some eyes on it!

coliu-akamai · 2023-10-09T19:36:53Z

Thanks @jdamore-linode! Will take a quick look/rerun the tests 👍

coliu-akamai

Other than missing a new Tests changeset and the minor issue I commented about, this looks good + the cypress tests passed. Reapproving on those being resolved -- thanks Joe!!

coliu-akamai · 2023-10-09T19:51:05Z

packages/manager/src/features/VPCs/VPCCreate/SubnetNode.tsx

@@ -63,15 +63,15 @@ export const SubnetNode = (props: Props) => {
            disabled={disabled}
            errorText={subnet.labelError}
            inputId={`subnet-label-${idx}`}
-            label="Subnet label"
+            label="Subnet Label"


sorry I forgot to mention -- this change will affect a bunch of tests in the VPCs/VPCCreate folder and the SubnetCreateDrawer.test.tsx file too. It should be a super quick fix (just updating everything to 'Subnet Label' in those tests, but lmk if you've questions!

sorry I forgot to mention -- this change will affect a bunch of tests in the VPCs/VPCCreate folder and the SubnetCreateDrawer.test.tsx file too. It should be a super quick fix (just updating everything to 'Subnet Label' in those tests, but lmk if you've questions!

Ah, thank you for the heads up! I'll take care of that soon. Shame on me for not considering the unit tests 😅

Edit: Done! Also replaced "Subnet label" with "Subnet Label" in the Subnet delete dialog. Thanks again for the catch, @coliu-akamai!

awesome thanks!

…t delete dialog

coliu-akamai · 2023-10-09T20:08:05Z

@jdamore-linode Oh one quick thing, I saw that you changed the Subnet delete dialog to be 'Subnet Label' instead of 'Subnet label' too -- this will affect some of the cypress tests too 😅 (vpc-details-page.spec.ts, line 174, line 241 I think)

jdamore-linode · 2023-10-10T13:02:14Z

@jdamore-linode Oh one quick thing, I saw that you changed the Subnet delete dialog to be 'Subnet Label' instead of 'Subnet label' too -- this will affect some of the cypress tests too 😅 (vpc-details-page.spec.ts, line 174, line 241 I think)

Classic. 😅 Thanks Connie!

jdamore-linode · 2023-10-10T17:33:14Z

Going to merge this despite the E2E failure. The failing tests are caused by a gateway timeout when attempting to create LKE clusters, so it's not related to the work in this PR.

Joe D'Amore added 5 commits September 25, 2023 14:41

Add ARIA label and QA data attribute

da779be

Add WIP VPC create test

f5a83a9

Add QA data attribute for VPC detail summary section

6daeed7

Add intercept utilities for VPC create request

6cbd312

Add integration test for VPC create flow

2a43394

jdamore-linode added Ready for Review VPC Relating to VPC project labels Sep 28, 2023

jdamore-linode requested review from hana-akamai and coliu-akamai September 28, 2023 16:59

jdamore-linode requested a review from a team as a code owner September 28, 2023 16:59

jdamore-linode self-assigned this Sep 28, 2023

jdamore-linode requested review from bnussman-akamai and jaalah-akamai and removed request for a team September 28, 2023 16:59

jdamore-linode commented Sep 28, 2023

View reviewed changes

Merge branch 'develop' into M3-7053-vpc-create-cypress

c67084f

hana-akamai approved these changes Sep 29, 2023

View reviewed changes

coliu-akamai approved these changes Sep 29, 2023

View reviewed changes

coliu-akamai added Approved Multiple approvals and ready to merge! and removed Ready for Review labels Sep 29, 2023

Joe D'Amore added 2 commits September 29, 2023 16:17

Change "VPC label" to "VPC Label" and "Subnet label" to "Subnet Label"

fc504c8

Use src util to get Subnet Linode count

6390cff

jdamore-linode added the Wait to Merge label Oct 4, 2023

Joe D'Amore added 3 commits October 9, 2023 11:26

Merge branch 'develop' into M3-7053-vpc-create-cypress

cd2ab89

Replace "Add a Subnet" with "Add another Subnet" for updated button l…

0b3495a

…abel

Add test to confirm UI flow when creating VPC without Subnets

4104e0c

jdamore-linode removed the Wait to Merge label Oct 9, 2023

jdamore-linode added the Missing Changeset label Oct 9, 2023

coliu-akamai approved these changes Oct 9, 2023

View reviewed changes

Joe D'Amore added 2 commits October 9, 2023 16:01

Update tests to account for "label" -> "Label", change label in Subne…

1642f64

…t delete dialog

Added changeset: Cypress tests for VPC create flows

d669e76

jdamore-linode removed the Missing Changeset label Oct 9, 2023

Replace "Subnet label" with "Subnet Label" to fix tests

55c80bb

jdamore-linode merged commit 7670909 into linode:develop Oct 10, 2023
11 checks passed

This was referenced Oct 12, 2023

Release v1.105.0 - release → staging #9789

Merged

Release v1.105.0 - staging → master (#9789) #9792

Closed

Release v1.105.0 - release → staging #9793

Merged

Release v1.105.0 - staging → master (#9789) #9794

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

test: [M3-7053] - Add Cypress integration test for VPC create flow #9730

test: [M3-7053] - Add Cypress integration test for VPC create flow #9730

jdamore-linode commented Sep 28, 2023 •

edited

Loading

jdamore-linode Sep 28, 2023

hana-akamai Sep 29, 2023

coliu-akamai Sep 29, 2023

coliu-akamai Sep 29, 2023

jdamore-linode Sep 29, 2023

coliu-akamai Sep 29, 2023

hana-akamai left a comment

hana-akamai Sep 29, 2023

jdamore-linode Sep 29, 2023

hana-akamai Sep 29, 2023

coliu-akamai left a comment

coliu-akamai Sep 29, 2023

coliu-akamai commented Oct 4, 2023 •

edited

Loading

jdamore-linode commented Oct 4, 2023

jdamore-linode commented Oct 9, 2023

coliu-akamai commented Oct 9, 2023

coliu-akamai left a comment

coliu-akamai Oct 9, 2023

jdamore-linode Oct 9, 2023 •

edited

Loading

coliu-akamai Oct 9, 2023

coliu-akamai commented Oct 9, 2023

jdamore-linode commented Oct 10, 2023

jdamore-linode commented Oct 10, 2023

test: [M3-7053] - Add Cypress integration test for VPC create flow #9730

test: [M3-7053] - Add Cypress integration test for VPC create flow #9730

Conversation

jdamore-linode commented Sep 28, 2023 • edited Loading

Description 📝

Major Changes 🔄

How to test 🧪

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hana-akamai left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

coliu-akamai left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

coliu-akamai commented Oct 4, 2023 • edited Loading

jdamore-linode commented Oct 4, 2023

jdamore-linode commented Oct 9, 2023

coliu-akamai commented Oct 9, 2023

coliu-akamai left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jdamore-linode Oct 9, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

coliu-akamai commented Oct 9, 2023

jdamore-linode commented Oct 10, 2023

jdamore-linode commented Oct 10, 2023

jdamore-linode commented Sep 28, 2023 •

edited

Loading

coliu-akamai commented Oct 4, 2023 •

edited

Loading

jdamore-linode Oct 9, 2023 •

edited

Loading