Skip to content

Conversation

@stephenfletchtek
Copy link

My effort at test driving a JavaScript single page frontend app interfacing with the makers API to:

  1. View the 50 most recent peeps
  2. Create a user
  3. User login
  4. Post a peep when logged in

It's rough around the edges but all code is test driven.

class ChitterApi {

loadPeeps(callback) {
const callbackFn = callback || (() => { })

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You reference this a lot - not sure why you have it but you could make it a line in the constructor eg. this.callbackFn() instead of writing it every time

// const divEl = this.makeElement('#main-container', 'div', 'post-peep');
const divEl = document.querySelector('#post-peep')

const peepEl = this.makeElement('#post-peep', 'input', 'post-content');

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

really like this quick way of making an element!

})

it('displays peeps', () => {
const peepsView = new PeepsView(model);

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this could be in beforeEach

model = new PeepsModel;
})

it('displays peeps', () => {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this only tests that you display a single peep, would it not be worth testing for multiple peeps?

}
]

const api = { loadPeeps: (callback) => callback(peep) };

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

since this is a mocked function you could test that this is being called at all

})

it('posts a peep', () => {
const peeps = [

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this could be saved as a variable accessible by multiple tests instead of repeating the same code

@@ -0,0 +1,143 @@
class PeepsView {
constructor(model, api) {
this.user_id = "";

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I saved this data to model rather than view as model is for saving data and view is for displaying it, not sure if that's correct though

}

makeElement(parent, type, id) {
const El = document.createElement(type);

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

variables need to be lower case first letter

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants