makersacademy · sameerasood · Mar 4, 2023 · Mar 4, 2023 · Mar 4, 2023 · Mar 5, 2023
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+bundle.js
diff --git a/_tests_/chitterClient.test.js b/_tests_/chitterClient.test.js
@@ -0,0 +1,26 @@
+const ChitterClient = require("../src/chitterClient");
+const Client = require("../src/chitterClient");
+
+// This makes `fetch` available to our test
+// (it is not by default, as normally `fetch` is only
+// available within the browser)
+require("jest-fetch-mock").enableMocks();
+
+describe("ChitterClient class", () => {
+  it("calls fetch and loads the data", async () => {
+    //1. Instantiate the class
+    const client = new ChitterClient();
+
+    fetch.mockResponseOnce(
+      JSON.stringify({
+        user: "ABC",
+        id: 123,
+      })
+    );
+
+    // 2. Call the async function and wait for the Promise to resolve
+    const peeps = await client.loadPeeps();
+
+    expect(peeps.user).toEqual("ABC");
+  });
+});
diff --git a/_tests_/chitterModel.test.js b/_tests_/chitterModel.test.js
@@ -0,0 +1,41 @@
+const ChitterModel = require("../src/chitterModel");
+
+describe("ChitterModel", () => {
+  beforeEach(() => {
+    model = new ChitterModel();
+  });
+
+  it("returns empty array", () => {
+    const peeps = model.getPeeps();
+    expect(peeps).toEqual([]);
+  });
+
+  it("returns two peeps", () => {
+    model.addPeep("Test peep 1");
+    model.addPeep("Test peep 2");
+    expect(model.getPeeps()).toEqual(["Test peep 1", "Test peep 2"]);
+  });
+
+  it("returns the list of notes", () => {
+    peepsList = model.setPeeps("Test peep 1, Test peep 2");
+    expect(peepsList).toEqual("Test peep 1, Test peep 2");
+  });
+
+  it("returns the peeps that match the user ID", () => {
+    const mockPeep1 = {
+      id: 1,
+      body: "my first peep",
+      created_at: "2018-06-23T13:12:29.945Z",
+      updated_at: "2018-06-23T13:12:29.945Z",
+    };
+    const mockPeep2 = {
+      id: 2,
+      body: "my second peep",
+      created_at: "2022-02-23T13:12:29.945Z",
+      updated_at: "2022-02-23T13:12:29.945Z",
+    };
+    model.addPeep(mockPeep1);
+    model.addPeep(mockPeep2);
+    expect(model.getPeepById(1)).toEqual(mockPeep1);
+  });
+});
diff --git a/_tests_/chitterView.test.js b/_tests_/chitterView.test.js
@@ -0,0 +1,64 @@
+/**
+ * @jest-environment jsdom
+ */
+
+const fs = require("fs");
+const ChitterView = require("../src/chitterView");
+const ChitterClient = require("../src/chitterClient");
+const ChitterModel = require("../src/chitterModel");
+
+jest.mock("../src/chitterClient.js");
+
+describe("ChitterView", () => {
+  beforeEach(() => {
+    document.body.innerHTML = fs.readFileSync("./index.html");
+    ChitterClient.mockClear();
+  });
+
+  it("displays multiple peeps", () => {
+    const model = new ChitterModel();
+    const mockClient = new ChitterClient();
+    const view = new ChitterView(model, mockClient);
+    const mockPeep1 = {
+      id: 1,
+      body: "my first peep :)",
+      created_at: "2018-06-23T13:12:29.945Z",
+      updated_at: "2018-06-23T13:12:29.945Z",
+      user: {
+        id: 1,
+        handle: "kay",
+      },
+      likes: [],
+    };
+
+    model.addPeep(mockPeep1);
+    // model.addPeep("Test peep 2");
+    view.displayPeeps();
+    expect(document.querySelectorAll("div.peep").length).toEqual(1);
+  });
+
+  it("displays peeps from the API", async () => {
+    const model = new ChitterModel();
+    const mockPeeps = [
+      {
+        id: 1,
+        body: "my first peep :)",
+        created_at: "2018-06-23T13:12:29.945Z",
+        updated_at: "2018-06-23T13:12:29.945Z",
+        user: {
+          id: 1,
+          handle: "kay",
+        },
+        likes: [],
+      },
+    ];
+    const mockClient = {
+      loadPeeps: jest.fn().mockResolvedValue(mockPeeps),
+    };
+    const view = new ChitterView(model, mockClient);
+
+    await view.displayPeepsFromApi();
+
+    expect(model.getPeeps()).toEqual(mockPeeps);
+  });
+});
diff --git a/index.html b/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html>
+
+<head>
+    <title>Chitter app</title>
+
+</head>
+
+<body>
+    <h1>Chitter app</h1>
+    <div id="main-container">
+
+    </div>
+    <script type="text/javascript" src="bundle.js"></script>
+</body>
+
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,8 @@
+const ChitterModel = require("./src/chitterModel.js");
+const ChitterClient = require("./src/chitterClient.js");
+const ChitterView = require("./src/chitterView.js");
+
+const model = new ChitterModel();
+const client = new ChitterClient();
+const view = new ChitterView(model, client);
+view.displayPeepsFromApi();