Skip to content

Commit 993a2b9

Browse files
mike-plummermike-plummer
authored
feat: Allow specifying preferred attributes (#7)
1 parent cdf1116 commit 993a2b9

File tree

3 files changed

+71
-46
lines changed

3 files changed

+71
-46
lines changed

src/getData.js renamed to src/getAttribute.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
/**
2-
* Returns the data-{dataAttr} selector of the element
3-
* @param { String } selectorType - The type of selector to return.
2+
* Returns the {attr} selector of the element
3+
* @param { String } selectorType - The attribute selector to return.
44
* @param { String } attributes - The attributes of the element.
5-
* @return { String | null } - The data-{dataAttr} selector of the element.
5+
* @return { String | null } - The {attr} selector of the element.
66
*/
77

8-
export const getData = ( selectorType, attributes ) =>
8+
export const getAttribute = ( selectorType, attributes ) =>
99
{
1010
for ( let i = 0; i < attributes.length; i++ )
1111
{

‎src/index.js‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,10 @@ import { getNthChild } from './getNthChild';
1111
import { getTag } from './getTag';
1212
import { isUnique } from './isUnique';
1313
import { getParents } from './getParents';
14-
import { getData } from './getData';
14+
import { getAttribute } from './getAttribute';
1515

16-
const dataRegex = /^data-(.+)/;
16+
const dataRegex = /^data-.+/;
17+
const attrRegex = /^attribute:(.+)/m;
1718

1819
/**
1920
* Returns all the selectors of the element
@@ -33,7 +34,7 @@ function getAllSelectors( el, selectors, attributesToIgnore )
3334
};
3435

3536
return selectors
36-
.filter( ( selector ) => !dataRegex.test( selector ) )
37+
.filter( ( selector ) => !dataRegex.test( selector ) && !attrRegex.test( selector ) )
3738
.reduce( ( res, next ) =>
3839
{
3940
res[ next ] = funcs[ next ]( el );
@@ -119,23 +120,26 @@ function getUniqueSelector( element, selectorTypes, attributesToIgnore )
119120
let selector = elementSelectors[ selectorType ];
120121

121122
// if we are a data attribute
122-
if ( dataRegex.test( selectorType ) )
123+
const isDataAttributeSelectorType = dataRegex.test(selectorType)
124+
const isAttributeSelectorType = !isDataAttributeSelectorType && attrRegex.test(selectorType)
125+
if ( isDataAttributeSelectorType || isAttributeSelectorType )
123126
{
124-
const dataSelector = getData( selectorType, attributes );
127+
const attributeToQuery = isDataAttributeSelectorType ? selectorType : selectorType.replace(attrRegex, '$1')
128+
const attributeSelector = getAttribute( attributeToQuery, attributes );
125129

126-
// if we found a selector via data attributes
127-
if ( dataSelector )
130+
// if we found a selector via attribute
131+
if ( attributeSelector )
128132
{
129-
selector = dataSelector;
130-
selectorType = 'data';
133+
selector = attributeSelector;
134+
selectorType = 'attribute';
131135
}
132136
}
133137

134138
if ( !Boolean( selector ) ) continue;
135139

136140
switch ( selectorType )
137141
{
138-
case 'data' :
142+
case 'attribute' :
139143
case 'id' :
140144
case 'name':
141145
case 'tag':

‎test/unique-selector.js‎

Lines changed: 53 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -107,41 +107,62 @@ describe( 'Unique Selector Tests', () =>
107107
expect( uniqueSelector ).to.equal( '[test="5"]' );
108108
} );
109109

110-
it( 'data-foo', () =>
111-
{
112-
$( 'body' ).get( 0 ).innerHTML = ''; // Clear previous appends
113-
$( 'body' ).append( '<div data-foo="so" class="test6"></div>' );
114-
const findNode = $( 'body' ).find( '.test6' ).get( 0 );
115-
const uniqueSelector = unique( findNode, { selectorTypes : ['data-foo'] } );
116-
expect( uniqueSelector ).to.equal( '[data-foo="so"]' );
117-
} );
110+
describe('data attribute', () => {
111+
it( 'data-foo', () =>
112+
{
113+
$( 'body' ).get( 0 ).innerHTML = ''; // Clear previous appends
114+
$( 'body' ).append( '<div data-foo="so" class="test6"></div>' );
115+
const findNode = $( 'body' ).find( '.test6' ).get( 0 );
116+
const uniqueSelector = unique( findNode, { selectorTypes : ['data-foo'] } );
117+
expect( uniqueSelector ).to.equal( '[data-foo="so"]' );
118+
} );
118119

119-
it( 'data-foo-bar-baz', () =>
120-
{
121-
$( 'body' ).get( 0 ).innerHTML = ''; // Clear previous appends
122-
$( 'body' ).append( '<div data-foo-bar-baz="so" class="test6"></div>' );
123-
const findNode = $( 'body' ).find( '.test6' ).get( 0 );
124-
const uniqueSelector = unique( findNode, { selectorTypes : ['data-foo-bar-baz'] } );
125-
expect( uniqueSelector ).to.equal( '[data-foo-bar-baz="so"]' );
126-
} );
120+
it( 'data-foo-bar-baz', () =>
121+
{
122+
$( 'body' ).get( 0 ).innerHTML = ''; // Clear previous appends
123+
$( 'body' ).append( '<div data-foo-bar-baz="so" class="test6"></div>' );
124+
const findNode = $( 'body' ).find( '.test6' ).get( 0 );
125+
const uniqueSelector = unique( findNode, { selectorTypes : ['data-foo-bar-baz'] } );
126+
expect( uniqueSelector ).to.equal( '[data-foo-bar-baz="so"]' );
127+
} );
127128

128-
it( 'data-foo-bar with quotes', () =>
129-
{
130-
$( 'body' ).get( 0 ).innerHTML = ''; // Clear previous appends
131-
$( 'body' ).append( '<div data-foo-bar="button 123" class="test7"></div>' );
132-
const findNode = $( 'body' ).find( '.test7' ).get( 0 );
133-
const uniqueSelector = unique( findNode, { selectorTypes : ['data-foo-bar'] } );
134-
expect( uniqueSelector ).to.equal( '[data-foo-bar="button 123"]' );
135-
} );
129+
it( 'data-foo-bar with quotes', () =>
130+
{
131+
$( 'body' ).get( 0 ).innerHTML = ''; // Clear previous appends
132+
$( 'body' ).append( '<div data-foo-bar="button 123" class="test7"></div>' );
133+
const findNode = $( 'body' ).find( '.test7' ).get( 0 );
134+
const uniqueSelector = unique( findNode, { selectorTypes : ['data-foo-bar'] } );
135+
expect( uniqueSelector ).to.equal( '[data-foo-bar="button 123"]' );
136+
} );
136137

137-
it( 'data-foo without value', () =>
138-
{
139-
$( 'body' ).get( 0 ).innerHTML = ''; // Clear previous appends
140-
$( 'body' ).append( '<div data-foo class="test7"></div>' );
141-
const findNode = $( 'body' ).find( '.test7' ).get( 0 );
142-
const uniqueSelector = unique( findNode, { selectorTypes : ['data-foo'] } );
143-
expect( uniqueSelector ).to.equal( '[data-foo]' );
144-
} );
138+
it( 'data-foo without value', () =>
139+
{
140+
$( 'body' ).get( 0 ).innerHTML = ''; // Clear previous appends
141+
$( 'body' ).append( '<div data-foo class="test7"></div>' );
142+
const findNode = $( 'body' ).find( '.test7' ).get( 0 );
143+
const uniqueSelector = unique( findNode, { selectorTypes : ['data-foo'] } );
144+
expect( uniqueSelector ).to.equal( '[data-foo]' );
145+
} );
146+
});
147+
148+
describe('standard attribute', () => {
149+
it('attribute without value', () => {
150+
$( 'body' ).get( 0 ).innerHTML = ''; // Clear previous appends
151+
$( 'body' ).append( '<div contenteditable class="test8"></div>' );
152+
const findNode = $( 'body' ).find( '.test8' ).get( 0 );
153+
const uniqueSelector = unique( findNode, { selectorTypes : ['attribute:contenteditable'] } );
154+
expect( uniqueSelector ).to.equal( '[contenteditable]' );
155+
})
156+
157+
it('attribute with value', () => {
158+
$( 'body' ).get( 0 ).innerHTML = ''; // Clear previous appends
159+
$( 'body' ).append( '<div role="button" class="test9"></div>' );
160+
const findNode = $( 'body' ).find( '.test9' ).get( 0 );
161+
const uniqueSelector = unique( findNode, { selectorTypes : ['attribute:role'] } );
162+
expect( uniqueSelector ).to.equal( '[role="button"]' );
163+
})
164+
})
165+
145166

146167
describe('name', () => {
147168
beforeEach(() => {

0 commit comments

Comments
 (0)