test: [M3-8688, M3-9039] - Autocomplete component tests #11408

coliu-akamai · 2024-12-12T15:39:53Z

Description 📝

Adds component tests for autocomplete component

How to test 🧪

mainly been using yarn cy:debug and selecting component tests to check these tests

Author Checklists

As an Author, to speed up the review process, I considered 🤔

👀 Doing a self review
❔ Our contribution guidelines
🤏 Splitting feature into small PRs
➕ Adding a changeset
🧪 Providing/improving test coverage
🔐 Removing all sensitive information from the code and PR description
🚩 Using a feature flag to protect the release
👣 Providing comprehensive reproduction steps
📑 Providing or updating our documentation
🕛 Scheduling a pair reviewing session
📱 Providing mobile support
♿ Providing accessibility support

I have read and considered all applicable items listed above.

As an Author, before moving this PR from Draft to Open, I confirmed ✅

All unit tests are passing
TypeScript compilation succeeded without errors
Code passes all linting rules

coliu-akamai · 2024-12-12T21:20:18Z

packages/manager/cypress/component/poc/beta-chip.spec.tsx

 import { checkComponentA11y } from 'support/util/accessibility';
+import { componentTests, visualTests } from 'support/util/components';


only eslint changes in this file and region-select.spec.tsx

Thanks for taking care of that!

coliu-akamai · 2024-12-12T21:21:12Z

packages/manager/cypress/component/poc/autocomplete.spec.tsx

@@ -0,0 +1,685 @@
+import { Autocomplete } from '@linode/ui';


since we've decided to go with cypress component tests, should we now move everything out of the poc package?

@coliu-akamai we definitely should! I just opened M3-9039 for this (not well refined right now), but you're welcome to move this spec now or we can just handle it with M3-9039.

thanks for the heads up! created a components package in place of poc to put everything in (since there's an existing features package) - would it make sense to create individual packages for each component as well? I didn't yet bc those packages would all just have one file

also would we want to create a ui package for the components that have been moved to linode/ui? 😅

github-actions · 2024-12-12T22:56:57Z

Coverage Report: ✅
Base Coverage: 86.94%
Current Coverage: 86.96%

dwiley-akamai

Getting this when I try running the test 🤔

coliu-akamai · 2024-12-13T21:10:23Z

@dwiley-akamai hmm I don't seem to be getting that issue when I run any of the component tests - is this happening only for autocomplete, or does it also happen for beta-chip and region-select?

@jdamore-linode any chance you know what might be causing this?

jdamore-linode · 2024-12-18T20:30:44Z

@coliu-akamai I haven't seen it while testing your PR locally, but I have seen it intermittently on other branches, in CI, etc. When I've experienced it, it's always been a fluke and has succeeded on reattempts, but curious if @dwiley-akamai is seeing this consistently. Happy to take a closer look if so!

jdamore-linode

Thanks @coliu-akamai, these tests look really great!

packages/manager/cypress/component/poc/autocomplete.spec.tsx

jdamore-linode · 2024-12-18T20:25:59Z

packages/manager/cypress/component/poc/autocomplete.spec.tsx

+        // figure out how to confirm multi selections
+        // input value doesn't work anymore... (this feels hacky)
+        const MultiSelect = () => {
+          const [selectedOptions, setSelectedOptions] = React.useState<
+            Option[]
+          >([]);
+          return (
+            <>
+              <div>Number of selected options: {selectedOptions.length}</div>
+              <Autocomplete
+                label="Linodes"
+                multiple
+                onChange={(_, value) => setSelectedOptions(value)}
+                options={options}
+                value={selectedOptions}
+              />
+            </>
+          );
+        };
+
+        mount(<MultiSelect />);


We're still trying to figure out guidelines and conventions for these tests, but at a glance I think this is a smart and pretty clear way to ensure that the Autocomplete does what it's supposed to. Curious if anyone has any other thoughts!

packages/manager/cypress/component/poc/autocomplete.spec.tsx

jdamore-linode · 2024-12-18T20:29:13Z

packages/manager/cypress/component/poc/beta-chip.spec.tsx

 import { checkComponentA11y } from 'support/util/accessibility';
+import { componentTests, visualTests } from 'support/util/components';


Thanks for taking care of that!

dwiley-akamai · 2024-12-18T22:29:34Z

It's still happening unfortunately and it is happening for all three on my end @coliu-akamai @jdamore-linode

Screenshots

Confirmed that it is only the Component Specs failing to run though (not E2E Specs). Are you aware of any config adjustments needed to run these successfully? Maybe I'm missing something locally

Co-authored-by: jdamore-linode <97627410+jdamore-linode@users.noreply.github.com>

linode-gh-bot · 2024-12-19T19:12:26Z

Cloud Manager UI test results

🎉 471 passing tests on test run #11 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
`0 Failing`	`471 Passing`	`2 Skipped`	`92m 50s`

coliu-akamai · 2025-01-06T16:57:49Z

@dwiley-akamai - I don't remember having any config adjustments, but can't say for sure... @jdamore-linode do you remember?

creating a follow up ticket [M3-9062] to investigate further if needed

bnussman-akamai · 2025-01-07T16:05:30Z

No issues on my end when testing with yarn cy:debug

jdamore-linode · 2025-01-07T16:31:41Z

Ah I'm sorry, I meant to take a closer look at this @coliu-akamai and never did. It doesn't sound like this is specific to your Autocomplete tests though so I don't think it should hold up merging this

coliu-akamai · 2025-01-07T16:39:22Z

sounds good, will be merging - thanks for the help everyone

cypress · 2025-01-07T17:10:57Z

Cloud Manager E2E Run #7043

Run Properties: Passed #7043 • 2e4dabfc31: test: [M3-8688, M3-9039] - Autocomplete component tests (#11408)

Project	`Cloud Manager E2E`
Branch Review	`develop`
Run status	`Passed #7043`
Run duration	`29m 12s`
Commit	`2e4dabfc31: test: [M3-8688, M3-9039] - Autocomplete component tests (#11408)`
Committer	`Connie Liu`
View all properties for this run ↗︎

Test results
Failures	`0`
Flaky	`2`
Pending	`2`
Skipped	`0`
Passing	`474`
View all changes introduced in this branch ↗︎

@jdamore-linode

* autocomplete tests * eslint * cleanup tests * Added changeset: Add cypress component tests for Autocomplete * address feedback @jdamore-linode * Update packages/manager/cypress/component/poc/autocomplete.spec.tsx Co-authored-by: jdamore-linode <97627410+jdamore-linode@users.noreply.github.com> * create components package within ...component... package --------- Co-authored-by: jdamore-linode <97627410+jdamore-linode@users.noreply.github.com>

coliu-akamai added the Testing label Dec 12, 2024

coliu-akamai self-assigned this Dec 12, 2024

coliu-akamai force-pushed the m3-8688 branch from cf7b7fc to 37bdedf Compare December 12, 2024 15:41

coliu-akamai commented Dec 12, 2024

View reviewed changes

coliu-akamai marked this pull request as ready for review December 12, 2024 22:20

coliu-akamai requested a review from a team as a code owner December 12, 2024 22:20

coliu-akamai requested review from jdamore-linode and removed request for a team December 12, 2024 22:20

coliu-akamai requested a review from a team as a code owner December 12, 2024 22:21

coliu-akamai requested review from dwiley-akamai and bnussman-akamai and removed request for a team December 12, 2024 22:21

coliu-akamai added the Ready for Review label Dec 12, 2024

dwiley-akamai reviewed Dec 13, 2024

View reviewed changes

coliu-akamai force-pushed the m3-8688 branch from 7febdef to 183a569 Compare December 17, 2024 22:33

jdamore-linode approved these changes Dec 18, 2024

View reviewed changes

jdamore-linode added Add'tl Approval Needed Waiting on another approval! and removed Ready for Review labels Dec 18, 2024

coliu-akamai force-pushed the m3-8688 branch from 183a569 to 62532d6 Compare December 18, 2024 21:35

coliu-akamai and others added 7 commits December 19, 2024 13:33

autocomplete tests

743de00

eslint

449af18

cleanup tests

42f9fb9

Added changeset: Add cypress component tests for Autocomplete

71c648d

address feedback @jdamore-linode

6c9c0cd

Update packages/manager/cypress/component/poc/autocomplete.spec.tsx

918240d

Co-authored-by: jdamore-linode <97627410+jdamore-linode@users.noreply.github.com>

create components package within ...component... package

1384cf5

coliu-akamai force-pushed the m3-8688 branch from 78f1181 to 1384cf5 Compare December 19, 2024 18:33

coliu-akamai changed the title ~~test: [M3-8688] - Autocomplete component tests~~ test: [M3-8688, M3-9039] - Autocomplete component tests Dec 19, 2024

bnussman-akamai approved these changes Jan 2, 2025

View reviewed changes

bnussman-akamai added Approved Multiple approvals and ready to merge! and removed Add'tl Approval Needed Waiting on another approval! labels Jan 2, 2025

coliu-akamai merged commit 2e4dabf into linode:develop Jan 7, 2025
23 checks passed

This was referenced Jan 8, 2025

Release v1.134.0 - release → staging #11494

Closed

Release v1.134.0 - release → staging #11497

Merged

hana-akamai mentioned this pull request Jan 9, 2025

Release v1.134.0 - release → staging #11503

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

test: [M3-8688, M3-9039] - Autocomplete component tests #11408

test: [M3-8688, M3-9039] - Autocomplete component tests #11408

coliu-akamai commented Dec 12, 2024 •

edited

Loading

coliu-akamai Dec 12, 2024

jdamore-linode Dec 18, 2024

coliu-akamai Dec 12, 2024

jdamore-linode Dec 18, 2024

coliu-akamai Dec 19, 2024

github-actions bot commented Dec 12, 2024 •

edited

Loading

dwiley-akamai left a comment

coliu-akamai commented Dec 13, 2024

jdamore-linode commented Dec 18, 2024

jdamore-linode left a comment

jdamore-linode Dec 18, 2024

jdamore-linode Dec 18, 2024

dwiley-akamai commented Dec 18, 2024

linode-gh-bot commented Dec 19, 2024

coliu-akamai commented Jan 6, 2025

bnussman-akamai commented Jan 7, 2025

jdamore-linode commented Jan 7, 2025

coliu-akamai commented Jan 7, 2025

cypress bot commented Jan 7, 2025

		import { checkComponentA11y } from 'support/util/accessibility';
		import { componentTests, visualTests } from 'support/util/components';

test: [M3-8688, M3-9039] - Autocomplete component tests #11408

test: [M3-8688, M3-9039] - Autocomplete component tests #11408

Conversation

coliu-akamai commented Dec 12, 2024 • edited Loading

Description 📝

How to test 🧪

As an Author, to speed up the review process, I considered 🤔

As an Author, before moving this PR from Draft to Open, I confirmed ✅

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

github-actions bot commented Dec 12, 2024 • edited Loading

dwiley-akamai left a comment

Choose a reason for hiding this comment

coliu-akamai commented Dec 13, 2024

jdamore-linode commented Dec 18, 2024

jdamore-linode left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dwiley-akamai commented Dec 18, 2024

linode-gh-bot commented Dec 19, 2024

Cloud Manager UI test results

🎉 471 passing tests on test run #11 ↗︎

coliu-akamai commented Jan 6, 2025

bnussman-akamai commented Jan 7, 2025

jdamore-linode commented Jan 7, 2025

coliu-akamai commented Jan 7, 2025

cypress bot commented Jan 7, 2025

coliu-akamai commented Dec 12, 2024 •

edited

Loading

github-actions bot commented Dec 12, 2024 •

edited

Loading