Merge pull request #16 from theRealImy/no-friends

No friends yet message added

src/FriendList.ts

@@ -10,10 +10,9 @@ const styles = {
   heading: styleMap(headingLight()),
 };
 
-export const FriendList = (
-  subject: NamedNode,
-  context: DataBrowserContext
-): TemplateResult => html`
+const noFriendsFoundMessage = "You have no friends in your list yet";
+
+export const FriendList = (subject: NamedNode, context: DataBrowserContext): TemplateResult => html`
   <div style=${styles.root}>
     <h3 style=${styles.heading}>Friends</h3>
     ${createList(subject, context)}
@@ -28,5 +27,11 @@ const createList = (subject: NamedNode, { dom }: DataBrowserContext) => {
     predicate: ns.foaf("knows"),
     noun: "friend",
   });
-  return target;
+  if (target.textContent === "")
+    return noFriendsInTheListMessage(dom, noFriendsFoundMessage);
+  else return target;
 };
+
+const noFriendsInTheListMessage = (dom: HTMLDocument, message: string): TemplateResult => html`
+  <div id="no-friends" style=${styles.root}>${message}</div>
+`;

src/integration-tests/friend-list.spec.ts

@@ -1,12 +1,13 @@
 import pane from "../";
 import { parse } from "rdflib";
 import { store } from "solid-ui";
-import { findByTestId } from "@testing-library/dom";
+import { findByTestId, findByText } from "@testing-library/dom";
 import { context, doc, subject } from "./setup";
 import fetchMock from "jest-fetch-mock";
 
 describe("profile-pane", () => {
   let friends;
+  let noFriendsMessage;
 
   describe("with friends", () => {
     beforeAll(async () => {
@@ -43,10 +44,15 @@ describe("profile-pane", () => {
       store.removeDocument(doc);
       const result = pane.render(subject, context);
       friends = await findByTestId(result, "friend-list");
+      noFriendsMessage = await findByText(result, "You have no friends in your list yet");
+    });
+
+    it("renders the friend list", () => {
+      expect(friends).toContainHTML("Friends");
     });
 
     it("renders an empty friend list", () => {
-      expect(friends.textContent.trim()).toBe("Friends");
+      expect(noFriendsMessage).not.toBeNull();
     });
   });