fix(lint): enhance data binding checks and update test cases for popover triggers

- Improved the `hasDataBinding` function for better readability and efficiency.
- Refactored the way attributes are checked for Angular and Lit property bindings.
- Updated test cases to reflect changes in property names for `popoverTargetElement`, `commandForElement`, and `interestForElement`.
Signed-off-by: Cory Rylan <crylan@nvidia.com>

Author: coryrylan

projects/lint/src/eslint/rules/no-missing-popover-trigger.test.ts

@@ -123,7 +123,7 @@ describe('noMissingPopoverTrigger', () => {
 });
 
 it('should report popover elements with template syntax content but no trigger',()=>{
-// Template syntax in content does not affect trigger requirement
+// Content template syntax still requires a trigger
 tester.run('template syntax content requires trigger',rule,{
 valid: [],
 invalid: [
@@ -171,24 +171,30 @@ describe('noMissingPopoverTrigger', () => {
 // Template literal in popovertarget - popover should pass because trigger could match
 `<nve-button popovertarget="\${targetId}">Open</nve-button>
  <nve-dropdown id="dropdown">Content</nve-dropdown>`,
-// Angular binding in popovertarget
-`<nve-button [popovertarget]="targetId">Open</nve-button>
+// Angular property binding for popovertarget
+`<nve-button [popoverTargetElement]="target">Open</nve-button>
  <nve-dropdown id="dropdown">Content</nve-dropdown>`,
-// Lit binding in popovertarget
-`<nve-button .popovertarget="\${targetId}">Open</nve-button>
+// Lit property binding for popovertarget
+`<nve-button .popoverTargetElement="\${target}">Open</nve-button>
  <nve-dropdown id="dropdown">Content</nve-dropdown>`,
 // Template literal in commandfor
 `<nve-button commandfor="\${targetId}">Open</nve-button>
  <nve-dropdown id="dropdown">Content</nve-dropdown>`,
-// Angular binding in commandfor
-`<nve-button [commandfor]="targetId">Open</nve-button>
+// Angular property binding for commandfor
+`<nve-button [commandForElement]="target">Open</nve-button>
  <nve-dropdown id="dropdown">Content</nve-dropdown>`,
-// Lit binding in commandfor
-`<nve-button .commandfor="\${targetId}">Open</nve-button>
+// Lit property binding for commandfor
+`<nve-button .commandForElement="\${target}">Open</nve-button>
+ <nve-dropdown id="dropdown">Content</nve-dropdown>`,
+// Lit property binding for interestfor
+`<nve-button .interestForElement="\${target}">Open</nve-button>
  <nve-dropdown id="dropdown">Content</nve-dropdown>`,
 // JSX expression in popovertarget
-`<nve-button popovertarget="{targetId}">Open</nve-button>
+`<nve-button popovertarget={targetId}>Open</nve-button>
  <nve-dropdown id="dropdown">Content</nve-dropdown>`,
+// JSX property binding for an HTMLElement ref
+`<nve-button popoverTargetElement={popoverRef.current}>Open</nve-button>
+ <nve-dropdown ref={popoverRef} id="dropdown">Content</nve-dropdown>`,
 // Vue/Handlebars in popovertarget
 `<nve-button popovertarget="{{targetId}}">Open</nve-button>
  <nve-dropdown id="dropdown">Content</nve-dropdown>`

projects/lint/src/eslint/rules/no-missing-popover-trigger.ts

@@ -21,8 +21,7 @@ const DATA_BINDING_PATTERNS = [
  * Check if an attribute value contains data binding syntax.
  */
 functionhasDataBinding(value: string|undefined): boolean{
-if(!value)returnfalse;
-returnDATA_BINDING_PATTERNS.some(pattern=>pattern.test(value));
+return!!value&&DATA_BINDING_PATTERNS.some(pattern=>pattern.test(value));
 }
 
 /**
@@ -31,30 +30,25 @@ function hasDataBinding(value: string | undefined): boolean {
  */
 functionfindAttrWithBinding(
 node: HtmlNode,
-attrName: string
+attrName: string,
+propertyName=attrName
 ): {attr: ReturnType<typeoffindAttr>;hasBinding: boolean}{
 // Check for standard attribute
 conststandard=findAttr(node,attrName);
 if(standard){
 return{attr: standard,hasBinding: hasDataBinding(standard.value?.value)};
 }
 
-// Check for Angular property binding: [attrName]
-constangularAttr=findAttr(node,`[${attrName}]`);
-if(angularAttr){
-return{attr: angularAttr,hasBinding: true};
+constjsxProperty=findAttr(node,propertyName);
+if(jsxProperty&&hasDataBinding(jsxProperty.value?.value)){
+return{attr: jsxProperty,hasBinding: true};
 }
 
-// Check for Lit property binding: .attrName
-constlitAttr=findAttr(node,`.${attrName}`);
-if(litAttr){
-return{attr: litAttr,hasBinding: true};
-}
-
-// Check for Lit boolean-attribute binding: ?attrName
-constlitBoolAttr=findAttr(node,`?${attrName}`);
-if(litBoolAttr){
-return{attr: litBoolAttr,hasBinding: true};
+for(constnameof[`[${propertyName}]`,`.${propertyName}`,`?${attrName}`]){
+constattr=findAttr(node,name);
+if(attr){
+return{ attr,hasBinding: true};
+}
 }
 
 return{attr: undefined,hasBinding: false};
@@ -77,7 +71,11 @@ const POPOVER_ELEMENTS = [
 /**
  * Attributes that reference a popover target.
  */
-constTRIGGER_ATTRIBUTES=['popovertarget','commandfor','interestfor']asconst;
+constTRIGGER_APIS=[
+['popovertarget','popoverTargetElement'],
+['commandfor','commandForElement'],
+['interestfor','interestForElement']
+]asconst;
 
 interfacePopoverNode{
 node: HtmlNode;
@@ -114,8 +112,8 @@ const rule = {
 lethasDynamicTrigger=false;
 
 functioncollectTriggerInfo(node: HtmlNode){
-for(constattrofTRIGGER_ATTRIBUTES){
-const{attr: found, hasBinding }=findAttrWithBinding(node,attr);
+for(const[attribute,property]ofTRIGGER_APIS){
+const{attr: found, hasBinding }=findAttrWithBinding(node,attribute,property);
 if(!found)continue;
 if(hasBinding){
 hasDynamicTrigger=true;