do not display GDA citations without name field (#468)

J=CLIP-1565
TEST=auto,manual

added and ran jest test
verfied locally using test-site that divider and citations section are not displayed without minimum citation data

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yext/search-ui-react",
-  "version": "1.7.0-beta.8",
+  "version": "1.7.0-beta.9",
   "description": "A library of React Components for powering Yext Search integrations",
   "author": "slapshot@yext.com",
   "license": "BSD-3-Clause",

src/components/GenerativeDirectAnswer.tsx

@@ -100,17 +100,13 @@ export function GenerativeDirectAnswer({
     return null;
   }
 
+  const citationsContainer = CitationsContainer({ gdaResponse, cssClasses, searchResults, citationsHeader, CitationCard });
+
   return (
     <div className={cssClasses.container}>
       <Answer gdaResponse={gdaResponse} cssClasses={cssClasses} answerHeader={answerHeader}/>
-      <div className={cssClasses.divider} />
-      <CitationsContainer
-        gdaResponse={gdaResponse}
-        cssClasses={cssClasses}
-        searchResults={searchResults}
-        citationsHeader={citationsHeader}
-        CitationCard={CitationCard}
-      />
+      {citationsContainer && <div className={cssClasses.divider} />}
+      {citationsContainer}
     </div>
   );
 }
@@ -164,30 +160,24 @@ function Citations(props: CitationsProps) {
     gdaResponse, 
     cssClasses,
     searchResults,
-    citationsHeader = `Sources (${gdaResponse.citations.length})`,
+    citationsHeader,
     CitationCard = Citation
   } = props;
-  if (!gdaResponse.citations.length) {
+  const citationCards = gdaResponse.citations.map(citation => {
+    const searchResult: Result | undefined = searchResults.find(r => r.rawData.uid === citation);
+    if (searchResult) {
+      return CitationCard({ searchResult, cssClasses });
+    }
+    return null;
+  }).filter(card => card !== null);
+
+  if (!citationCards.length) {
     return null;
   }
-  const citationCards: JSX.Element[] = [];
-  gdaResponse.citations.forEach(
-    citation => {
-      const result: Result | undefined = searchResults.find(r => r.rawData.uid === citation);
-      if (result) {
-        citationCards.push(
-          <CitationCard 
-            key={citation} 
-            searchResult={result} 
-            cssClasses={cssClasses}
-          />
-        )
-      }
-    });
 
   return <>
     <div className={cssClasses.header}>
-      {citationsHeader}
+      {citationsHeader ?? `Sources (${citationCards.length})`}
     </div>
     <div className={cssClasses.citationsContainer}>
       {citationCards}
@@ -210,10 +200,14 @@ function Citation(props: CitationProps) {
     searchResult,
     cssClasses
   } = props;
+  const {uid, name, description, answer, link} = searchResult.rawData ?? {};
+  if (!uid || typeof uid != 'string' || !name) {
+    return null;
+  }
   return (
-    <a className={cssClasses.citation} href={typeof searchResult.rawData.link === 'string' ? searchResult.rawData.link : undefined}>
-      <div className={cssClasses.citationTitle}>{searchResult.rawData.name}</div>
-      <div className={cssClasses.citationSnippet}>{searchResult.rawData.description}</div>
+    <a key={uid} className={cssClasses.citation} href={typeof link === 'string' ? link : undefined}>
+      <div className={cssClasses.citationTitle}>{name}</div>
+      <div className={cssClasses.citationSnippet}>{description ?? answer}</div>
     </a>
   );
 }

tests/components/GenerativeDirectAnswer.test.tsx

@@ -34,29 +34,18 @@ const CustomCitationsComponent = (props: CitationsProps) => {
 
 jest.mock('@yext/search-headless-react');
 
-describe('GenerativeDirectAnswer', () => {
+describe('GenerativeDirectAnswer with sufficient citation fields', () => {
   beforeEach(() => {
     mockAnswersState(mockedState);
   });
-
-  it('Answer text and citations are displayed', () => {
+  it('answer text and all citations are displayed', () => {
     render(<GenerativeDirectAnswer />);
-    const verticals = mockedState.universal?.verticals ?? [];
     expect(screen.getByText(generativeDirectAnswerResponse.directAnswer)).toBeDefined();
+    expect(screen.getByText('Sources (2)')).toBeDefined();
 
-    function checkResultData(resultData: Record<string, unknown>, isCitation: boolean) {
-      if (isCitation) {
-        expect(typeof resultData.name === 'string' && screen.getByText(resultData.name)).toBeTruthy();
-        expect(typeof resultData.description === 'string' && screen.getByText(resultData.description)).toBeTruthy();
-      } else {
-        expect(typeof resultData.name === 'string' && screen.queryByText(resultData.name)).toBeNull();
-        expect(typeof resultData.description === 'string' && screen.queryByText(resultData.description)).toBeNull();
-      }
-    }
-
-    checkResultData(verticals[0].results[0].rawData, false);
-    checkResultData(verticals[0].results[1].rawData, true);
-    checkResultData(verticals[1].results[0].rawData, true);
+    checkResultData(verticalResults[0].results[0].rawData, false); //not a citation
+    checkResultData(verticalResults[0].results[1].rawData, true);
+    checkResultData(verticalResults[1].results[0].rawData, true);
   });
 
   it('Citations component overridden with dummy text', () => {
@@ -67,3 +56,48 @@ describe('GenerativeDirectAnswer', () => {
     expect(screen.getByText("CustomCitationsComponentTest")).toBeTruthy();
   });
 });
+
+describe('GenerativeDirectAnswer without sufficient citation fields', () => {
+  it('first citation does not have name field but second citation does', () => {
+    verticalResults[0].results[1].rawData.name = undefined;
+    mockAnswersState({...mockedState, universal: {verticals: verticalResults}});
+
+    render(<GenerativeDirectAnswer />);
+    expect(screen.getByText(generativeDirectAnswerResponse.directAnswer)).toBeDefined();
+    expect(screen.getByText('Sources (1)')).toBeDefined();
+
+    checkResultData(verticalResults[0].results[0].rawData, false); //not a citation
+    checkResultData(verticalResults[0].results[1].rawData, false); //citation without name
+    checkResultData(verticalResults[1].results[0].rawData, true);
+  });
+
+  it('all citations do not have name field', () => {
+    verticalResults[1].results[0].rawData.name = undefined;
+    mockAnswersState({...mockedState, universal: {verticals: verticalResults}});
+
+    render(<GenerativeDirectAnswer />);
+    expect(screen.getByText(generativeDirectAnswerResponse.directAnswer)).toBeDefined();
+    expect(screen.queryByText('Sources')).toBeNull();
+
+    checkResultData(verticalResults[0].results[0].rawData, false); //not a citation
+    checkResultData(verticalResults[0].results[1].rawData, false); //citation without name
+    checkResultData(verticalResults[1].results[0].rawData, false); //citation without name
+  });
+});
+
+function checkResultData(resultData: Record<string, unknown>, shouldDisplay: boolean) {
+  if (typeof resultData.name === 'string') {
+    if (shouldDisplay) {
+      expect(screen.getByText(resultData.name)).toBeTruthy();
+    } else {
+      expect(screen.queryByText(resultData.name)).toBeNull();
+    }
+  }
+  if (typeof resultData.description === 'string') {
+    if (shouldDisplay) {
+      expect(screen.getByText(resultData.description)).toBeTruthy();
+    } else {
+      expect(screen.queryByText(resultData.description)).toBeNull();
+    }
+  } 
+}