Melacast Week 7 | 7/17–27

This week consisted mostly of progress on the user’s /profile/edit page, along with some more chipping away at understanding unit tests.

On the testing side, I happened to notice a tutorial that included console.log(wrapper.html()) inside of a test and had a pretty big “a-ha!” moment. As soon as I was able to see what was actually being analyzed when a test ran, my base understanding of testing in general greatly improved.

Previously, the concept of stubbing and how a test compiled was still a bit hazy. What methods/computed properties of my SFC were called, and what part of the HTML was rendered? The first part of that question is still yet to be answered — although I think that a method is only executed when it’s called in the test itself. The second part of that question started off as a half-developed idea that only certain sections of the HTML would render, to nothing is actually rendered. If a test making sure a certain value would render in the correct place passed, I thought the assumption was that it would render correctly on the actual page.

As soon as I saw the console output of the wrapper object containing the component to be tested, a lot of concepts suddenly made sense.

With this visual, I could actually see what someone meant when they said to stub a component. Stubbing didn’t mean to register and ignore a component that was part of the parent component, it simply meant that everything included in that component which would normally be visible on that output screen, is cut out. Seeing essentially the entire HTML of the component made me realize that “everything” in the HTML was being rendered, as opposed to individual chunks”, virtually and that anything value inside of a template brace would be ignored if it wasn’t provided.

I procrastinated a bit on diving into the /profile/edit page since I knew it would require a really annoying implementation for checkboxes to be checked if those values had previously been selected, and allowing for new choices to be added on to the current list.

On the parent, I first need to fish out the user ID, and list of “Interested Project Types” and map them to a new array. Since the list of interest would be a comma separated string, I also needed to transform it in an array also.

Next would be to loop through an array containing a hard-coded list of all project types and pass the following to the component via props.

propsProjectTypes = each individual interest.

Upon selecting a checkmark, the value of each checkbox would be checked to see it already exists in the old user interest array fetched from the database. this.allProjectTypes is a safety to make sure that each value from the checkbox actually belongs in the hard-coded list of all interests. this.arrayOfProjectTypes is the existing list of interests. If a checkbox was unselected, then that array is returned without that value, and if a new checkbox was selected, a new array would add the new value to the old array.

this.arrayOfProjectTypes is automatically synced to the array I set inside of the created() hook, and then later appended to the form answers via FormData() upon submission by the user.

--

--

--

A blog for documenting my thought processes over the course of a project and how I can improve upon them in the future. Writing challenges me to build a “tree trunk’s foundation” [Tim Urban] of knowledge as I tackle new challenges.

Recommended from Medium

Understanding the Lifecycle of React Navigation to Add Custom Events to Your React Native App

Spie Charts Explained (+ Chart.JS Add-On)

Back-End with Javascipt: Getting started with Nodejs

Nodejs website

Why the Minefield is the next big thing in NFTs

Oh! yeah! ADAX got listed at Coingecko

Integrating Paytm payment gateway using Node.js

React Native & Typescript | Imports & Exports

//platform.twitter.com/widgets.js from Twitter https://twitter.com/daWorksSydney

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Timmy Zhou

Timmy Zhou

More from Medium

Easy is hard, and hard is easy

Choosing Open Source License Wisely🤔

Hugo and Netlify

Browser Plugin Extension — Making own web plugin extension