feat: Allow specifying preferred attributes #7
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
mike-plummer
commented
Feb 5, 2024
Comment on lines
-110
to
+146
| it( 'data-foo', () => | ||
| { | ||
| $( 'body' ).get( 0 ).innerHTML = ''; // Clear previous appends | ||
| $( 'body' ).append( '<div data-foo="so" class="test6"></div>' ); | ||
| const findNode = $( 'body' ).find( '.test6' ).get( 0 ); | ||
| const uniqueSelector = unique( findNode, { selectorTypes : ['data-foo'] } ); | ||
| expect( uniqueSelector ).to.equal( '[data-foo="so"]' ); | ||
| } ); | ||
| describe('data attribute', () => { | ||
| it( 'data-foo', () => | ||
| { | ||
| $( 'body' ).get( 0 ).innerHTML = ''; // Clear previous appends | ||
| $( 'body' ).append( '<div data-foo="so" class="test6"></div>' ); | ||
| const findNode = $( 'body' ).find( '.test6' ).get( 0 ); | ||
| const uniqueSelector = unique( findNode, { selectorTypes : ['data-foo'] } ); | ||
| expect( uniqueSelector ).to.equal( '[data-foo="so"]' ); | ||
| } ); | ||
|
|
||
| it( 'data-foo-bar-baz', () => | ||
| { | ||
| $( 'body' ).get( 0 ).innerHTML = ''; // Clear previous appends | ||
| $( 'body' ).append( '<div data-foo-bar-baz="so" class="test6"></div>' ); | ||
| const findNode = $( 'body' ).find( '.test6' ).get( 0 ); | ||
| const uniqueSelector = unique( findNode, { selectorTypes : ['data-foo-bar-baz'] } ); | ||
| expect( uniqueSelector ).to.equal( '[data-foo-bar-baz="so"]' ); | ||
| } ); | ||
| it( 'data-foo-bar-baz', () => | ||
| { | ||
| $( 'body' ).get( 0 ).innerHTML = ''; // Clear previous appends | ||
| $( 'body' ).append( '<div data-foo-bar-baz="so" class="test6"></div>' ); | ||
| const findNode = $( 'body' ).find( '.test6' ).get( 0 ); | ||
| const uniqueSelector = unique( findNode, { selectorTypes : ['data-foo-bar-baz'] } ); | ||
| expect( uniqueSelector ).to.equal( '[data-foo-bar-baz="so"]' ); | ||
| } ); | ||
|
|
||
| it( 'data-foo-bar with quotes', () => | ||
| { | ||
| $( 'body' ).get( 0 ).innerHTML = ''; // Clear previous appends | ||
| $( 'body' ).append( '<div data-foo-bar="button 123" class="test7"></div>' ); | ||
| const findNode = $( 'body' ).find( '.test7' ).get( 0 ); | ||
| const uniqueSelector = unique( findNode, { selectorTypes : ['data-foo-bar'] } ); | ||
| expect( uniqueSelector ).to.equal( '[data-foo-bar="button 123"]' ); | ||
| } ); | ||
| it( 'data-foo-bar with quotes', () => | ||
| { | ||
| $( 'body' ).get( 0 ).innerHTML = ''; // Clear previous appends | ||
| $( 'body' ).append( '<div data-foo-bar="button 123" class="test7"></div>' ); | ||
| const findNode = $( 'body' ).find( '.test7' ).get( 0 ); | ||
| const uniqueSelector = unique( findNode, { selectorTypes : ['data-foo-bar'] } ); | ||
| expect( uniqueSelector ).to.equal( '[data-foo-bar="button 123"]' ); | ||
| } ); | ||
|
|
||
| it( 'data-foo without value', () => | ||
| { | ||
| $( 'body' ).get( 0 ).innerHTML = ''; // Clear previous appends | ||
| $( 'body' ).append( '<div data-foo class="test7"></div>' ); | ||
| const findNode = $( 'body' ).find( '.test7' ).get( 0 ); | ||
| const uniqueSelector = unique( findNode, { selectorTypes : ['data-foo'] } ); | ||
| expect( uniqueSelector ).to.equal( '[data-foo]' ); | ||
| } ); | ||
| it( 'data-foo without value', () => | ||
| { | ||
| $( 'body' ).get( 0 ).innerHTML = ''; // Clear previous appends | ||
| $( 'body' ).append( '<div data-foo class="test7"></div>' ); | ||
| const findNode = $( 'body' ).find( '.test7' ).get( 0 ); | ||
| const uniqueSelector = unique( findNode, { selectorTypes : ['data-foo'] } ); | ||
| expect( uniqueSelector ).to.equal( '[data-foo]' ); | ||
| } ); | ||
| }); |
There was a problem hiding this comment.
Only change here was nesting under a new describe block
There was a problem hiding this comment.
Seems like the difference between this and data attributes is that the data- part is included in the attribute on the html element. So data-foo relates to <div data-foo> while attribute-foo relates to <div foo>. For that reason, I think it might make sense to differentiate them. What about having it be attribute:foo, attribute:foo-bar, etc. instead?
@chrisbreiding Fabulous idea. I love it. Change made in 91a41d4 |
chrisbreiding
approved these changes
Feb 5, 2024
|
🎉 This PR is included in version 1.1.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This enables providing a set of preferred attributes to use when building selectors - this is different from the existing
attributesselector type which builds a selector using any permutation of attributes. The impetus of this change is in UI Coverage there are cases where we want to leverage specific vendor/custom attributes which are significant but are notdata-*attributes - these are technically invalid per the HTML spec but are widely used regardless. Specifically, the AG Grid library uses arow-idattribute that we want to leverage whenever possible since it helps form a stable identifier when there are auto-generatedidvalues.This follows a similar pattern to the existing
data-*attribute handling. You can supply aattribute-*selectorType which will be evaluated exactly the same after strippingattribute-off the front. e.g.attribute-rolewould use theroleattribute,attribute-more-cowbellwould usemore-cowbell.Technically this pattern could replace the dedicated
data-*path by providing a value ofattribute-data-cy, but in the interests of making this a non-breaking change I've left that path intact