makersacademy · ladantork · Sep 4, 2022 · Sep 4, 2022 · Sep 4, 2022 · Sep 4, 2022
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+bundle.js
diff --git a/chitterApi.js b/chitterApi.js
@@ -0,0 +1,10 @@
+class ChitterApi {
+    loadPeeps(callback) {
+      fetch('https://chitter-backend-api-v2.herokuapp.com/')
+      fetch('https://chitter-backend-api-v2.herokuapp.com/peeps')
+        .then(response => response.json())
+        .then(peeps => callback(peeps));
+    };
+};
+
+module.exports = ChitterApi;
diff --git a/chitterApi.test.js b/chitterApi.test.js
@@ -0,0 +1,22 @@
+const ChitterApi = require('./chitterApi');
+
+require('jest-fetch-mock').enableMocks()
+
+describe(ChitterApi,() => {
+  it('returns peeps in reverse order',() => {
+    const api = new ChitterApi();
+    const peepData = {
+        "id":2000,
+        "body":"test peep",
+        "created_at":"2022-09-04T12:24:57.177Z",
+        "updated_at":"2022-09-04T15:24:57.177Z",
+        "user":{"id":1,"handle":"you"},
+        "likes":[]}
+
+    fetch.mockResponseOnce(JSON.stringify([peepData,peepData]));
+
+    api.loadPeeps((peeps) => {
+      expect(peeps).toEqual([peepData, peepData])
+    });
+  });
+}); 
diff --git a/chitterModel.js b/chitterModel.js
diff --git a/chitterModel.test.js b/chitterModel.test.js
diff --git a/chitterView.js b/chitterView.js
@@ -0,0 +1,19 @@
+class ChitterView {
+    constructor(api) {
+      this.mainContainerEl = document.querySelector('#main-container');
+      this.api = api
+    }
+
+    displayPeeps() {
+      this.api.loadPeeps((peeps) => {
+        peeps.forEach((peep) => {
+          let div = document.createElement("div");
+          div.className = "peep";
+          div.innerText = peep.body;
+          this.mainContainerEl.append(div);
+        });
+      });
+    }
+  }
+
+  module.exports = ChitterView;
diff --git a/chitterView.test.js b/chitterView.test.js
@@ -0,0 +1,28 @@
+/**
+ * @jest-environment jsdom
+ */
+
+ const fs = require('fs');
+
+ const ChitterView = require('./chitterView');
+
+ describe(ChitterView,() => {
+    beforeEach(() => {
+        document.body.innerHTML = fs.readFileSync('./index.html');
+      });
+   it('returns the list of peeps ',() => {
+     const peepData = {
+       "id":2000,
+       "body":"test peep",
+       "created_at":"2022-09-04T12:24:57.177Z",
+       "updated_at":"2022-09-04T15:24:57.177Z",
+       "user":{"id":1,"handle":"you"},
+       "likes":[]}
+     this.mockApi = {
+       loadPeeps: (callback) => {callback([peepData, peepData])}
+     }
+     const view = new ChitterView(this.mockApi);
+     view.displayPeeps();
+     expect(document.querySelectorAll('div.peep').length).toEqual(2);
+   });
+ });
diff --git a/index.html b/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+
+    <title>My Chitter web page</title>
+  </head>
+  <body>
+    <p>Chitter </p>
+    <div id="main-container"></div>
+    <!-- Load the bundle.js file on the page -->
+
+    <script type="text/javascript" src="bundle.js"></script>
+
+  </body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,7 @@
+const ChitterApi = require('./chitterApi');
+const ChitterView = require('./chitterView');
+
+const api = new ChitterApi();
+const view = new ChitterView(api);
+
+view.displayPeeps();