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.