Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Autocomplete test helpers #248

Merged
merged 1 commit into from
Aug 14, 2023
Merged

Conversation

clintcs
Copy link
Contributor

@clintcs clintcs commented Aug 7, 2023

🚀 Description

  • Adds Autocomplete test helpers
  • Reworks the Autocomplete tests to use the new test helpers

🔬 How to Test

We're good if the build is green.

@changeset-bot
Copy link

changeset-bot bot commented Aug 7, 2023

🦋 Changeset detected

Latest commit: 52ded27

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
@crowdstrike/ember-toucan-core Patch
@crowdstrike/ember-toucan-form Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions
Copy link
Contributor

github-actions bot commented Aug 7, 2023

Preview URLs

Env: preview
Docs: https://cfc25090.ember-toucan-core.pages.dev

@clintcs clintcs force-pushed the rework-autocomplete-test-helpers branch 2 times, most recently from 4a2cc71 to b37fb5f Compare August 8, 2023 15:34
@clintcs clintcs changed the title Rework autocomplete test helpers Expose Autocomplete test helpers Aug 8, 2023
@clintcs clintcs changed the title Expose Autocomplete test helpers Create Autocomplete test helpers Aug 8, 2023
@clintcs clintcs changed the title Create Autocomplete test helpers Add Autocomplete test helpers Aug 8, 2023
@@ -19,6 +19,10 @@ Toucan provides a set of accessible and reusable components that make it easy to

The `core` package contains the Toucan-styled Ember components. The `form` package allows users to build forms using [`ember-headless-form`](https://github.com/CrowdStrike/ember-headless-form) with the `core` components.

## Usage
Copy link
Contributor Author

@clintcs clintcs Aug 8, 2023

Choose a reason for hiding this comment

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

Bonus. Moved to the top. Happy to revert! But I'm guessing this what most people will be looking for when they visit the repository.

onMouseover=(fn this.onOptionMouseover index)
popoverId=this.popoverId
index=index
<div id="autocomplete">
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 changes other than I wrapped everything in <div id="autocomplete">. This gives test helpers a parent (closest) to select, which lets them select various children.

Copy link
Contributor

Choose a reason for hiding this comment

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

Mostly just wondering, but any reason to use id over data- attribute? closest should work with those as well, right?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Oh, for sure. I went back and forth on it. I'll spare you my reasoning and switch it to data-autocomplete.

As an aside, if we ever rebuild these components, I'd favor a a slightly different form (data-test="autocomplete") throughout so it's clear what these selectors are for when perusing the templates.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I'll spare you my reasoning and switch it to data-autocomplete.

Done

@@ -4,12 +4,12 @@ import { module, test } from 'qunit';
import Button from '@crowdstrike/ember-toucan-core/components/button';
import { setupRenderingTest } from 'test-app/tests/helpers';

import { Button as TestButton } from '@crowdstrike/ember-toucan-core/test-support';
import { ButtonPageObject } from '@crowdstrike/ember-toucan-core/test-support';
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Updated to match Autocomplete and to be more descriptive.

@@ -9,7 +9,7 @@ module('Integration | Component | Fields | Autocomplete', function (hooks) {

test('it renders', async function (assert) {
await render(<template>
<Autocomplete @noResultsText="No results" @label="Label" data-autocomplete />
<Autocomplete @noResultsText="No results" @label="Label" data-input />
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Changed to data-input throughout so it's clearer that it's the <input /> and not the component's wrapping element.


export class AutocompletePageObject extends PageObject {
get active() {
return this.element
Copy link
Contributor Author

Choose a reason for hiding this comment

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

We spread attributes on the <input />, which seems right to me. However, it means we need to first get ahold of the parent element (#autocomplete) before we can select children.

@@ -96,12 +96,12 @@ export default class ToucanCoreAutocompleteOptionComponent extends Component<Tou
<template>
{{! template-lint-disable require-presentational-children }}
<li
aria-current={{if @isActive "true" "false"}}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

image

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Replaces data-active (below).

Copy link
Contributor

Choose a reason for hiding this comment

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

Oh very nice!

@clintcs clintcs marked this pull request as ready for review August 8, 2023 16:07
@clintcs clintcs requested a review from ynotdraw August 8, 2023 16:08
Copy link
Contributor

@ynotdraw ynotdraw left a comment

Choose a reason for hiding this comment

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

Shall we add a changeset as new test-helpers will be exposed?

@@ -96,12 +96,12 @@ export default class ToucanCoreAutocompleteOptionComponent extends Component<Tou
<template>
{{! template-lint-disable require-presentational-children }}
<li
aria-current={{if @isActive "true" "false"}}
Copy link
Contributor

Choose a reason for hiding this comment

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

Oh very nice!

onMouseover=(fn this.onOptionMouseover index)
popoverId=this.popoverId
index=index
<div id="autocomplete">
Copy link
Contributor

Choose a reason for hiding this comment

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

Mostly just wondering, but any reason to use id over data- attribute? closest should work with those as well, right?

@@ -2,7 +2,7 @@ import { click } from '@ember/test-helpers';

import { PageObject } from 'fractal-page-object';

export class Button extends PageObject {
export class ButtonPageObject extends PageObject {
Copy link
Contributor

Choose a reason for hiding this comment

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

Due to an export name change, should we consider a breaking-change changeset? I'd be okay making it a patch, as I'm not sure anyone is using this directly. As long as it's documented in the release notes 👍

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I'm cool with that.

Though I tend to wait to add a changeset until after PR review in case there's some discussion. I'll make sure to add one after approval.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Done.

@clintcs clintcs requested a review from ynotdraw August 14, 2023 12:56
@clintcs clintcs force-pushed the rework-autocomplete-test-helpers branch from b37fb5f to 52ded27 Compare August 14, 2023 13:41
@clintcs clintcs merged commit 45c3a07 into main Aug 14, 2023
@clintcs clintcs deleted the rework-autocomplete-test-helpers branch August 14, 2023 13:49
@github-actions github-actions bot mentioned this pull request Aug 14, 2023
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.

2 participants