pluralsight-projects/vue-booklisting

Book Listing for Vue Project

Build a Reading List Application with Vue.js

This repo contains the code for the Pluralsight Project "Build a Reading List Application with Vue.js"

This Project was created with Vue 2.5.

Installation Instructions and Verifying Local Environment

Installation

Run the following command from root folder of the forked project to install all dependencies.

npm install

Verify Setup

In order to verify that everything is setup correctly, run the following command that should show you the failing tests.

npm run test

This is good! We'll be fixing these tests once we jump into the build step. Every time you want to check your work locally you can type that command and it will report the status of every task in the project. In addition, each module has tests that can be run scoped to just the tasks in that module. See the instructions at the top of each list of tasks for more information.

Previewing Your Work

In order to see your changes in a browser, you can type this to start the application.

npm run dev

Then, when you visit http://localhost:8080 in a browser you should see the App.vue component's HTML and CSS rendered on the page.

vue-booklisting's Issues

Module 6 Tasks 2, 3, 4, 5, 6, 7, 8, 9, 11, 12

• Add guard code to Task 2 to avoid TypeErrors
• Add guard code to Task 3 to avoid TypeErrors
• Add guard code to Task 4 to avoid TypeErrors
• Add guard code to Task 5 to avoid TypeErrors
• Add guard code to Task 6 to avoid TypeErrors
• Add guard code to Task 7 to avoid TypeErrors
• Add guard code to Task 8 to avoid TypeErrors
• Add guard code to Task 9 to avoid TypeErrors
• Add guard code to Task 11 to avoid TypeErrors
• Add guard code to Task 12 to avoid TypeErrors

Instructions for running tests locally need to be updated (easy!)

Summary: For each Module in the course, change the local npm test command to instead of mocha:part and use test:module, e.g., npm run mocha:part1 ➡️ npm run test:module1

---

Description: The top of each part has an outdated npm command. e.g., Module 1's description (Creating the BookList Component):

• this was changed after the course first came out

Fix:

• For any npm run command, change its mocha:part to test:module.
  e.g., npm run mocha:part1 ➡️ npm run test:module1
• needs to be changed for each Module

@jonfriskics

package.json test commands do not work on Windows

Summary: The npm test commands in package.json don't use cross-env. Use cross-env so they work on Windows as well.

Probably fairly easy to fix

---

Description: The given npm test commands in package.json aren't compatible with Windows, and only work on os x (and likely other Linux/BSD/Unix-y systems 😄 ).

Fix:

• cross-env will already be installed as it's in package.json, and you just need to precede each test: command in package.json with a call to cross-env.
• e.g., a7a5675
• This was reported by @mario-d-s.
• I did test out the changes locally on os x, and they were there as well.

@jonfriskics

Module 4 Tasks 2, 3, 4

• Add guard code to Task 2 to avoid TypeErrors
• Add guard code to Task 3 to avoid TypeErrors
• Add guard code to Task 4 to avoid TypeErrors

Module 2 Task 1

Issue: If user does not write correct filename (Booklist.vue instead of BookList.vue) and push it to GitHub, the first task will always fail unless user can update the name in GitHub.

• If user has pushed wrong file name to GitHub, suggest solution:
  git mv -f src/components/Booklist.vue src/components/BookList.vue

Module 6 Task 14

When submiting task with pontential error like this:

 methods: {
   appendBook()
 }

• Error feedback makes mention to Esprima.

Module 2 Tasks 4 + 5

• Add guard code to Task 4 to avoid TypeErrors
• Add guard code to Task 5 to avoid TypeErrors

Module 3 Task 4

• allow for whitespace between {{book.title}} and {{book.author}}

Module 5 Task 2

• Instruct the creation of the components object and the addition of BookItem to it.

Module 6 Task 11

Note: Issue: It’s not clear where to add . Also, it doesn’t look right to have a component inside a

element as it’s suggested by the answer. It won’t take this answer and it won’t take the answer in the video as well.
• Update instructions to request addition of div and
• fix the answer video

Module 1, missing semicolon causes no feedback from Check my work

issue: Code that otherwise would pass module 1, but has no semicolon after the import in App.vue, produces no useful error messages from Check my work.

• And, it doesn't allow the user to continue.
  

• check marks in above screenshot are there probably due to me previously completing the Project. They probably wouldn't show up for others who haven't completed the Project.

to reproduce:

• create code that would pass Module 1, then remove a semicolon from after the import in App.vue
• e.g., snychka@34fa243 (my repo.'s are often overwritten though)

notes:

• when semicolon is not there, there is a failure on local tests, npm run test:module1 :

  6 passing (59ms)
  1 failing
  
  1) App.vue should include booklist in App.vue @app-vue-will-use-book-list:
     Error: Line 1: Unexpected reserved word
      at ErrorHandler.constructError (node_modules/esprima/dist/esprima.js:5012:22)
      at ErrorHandler.createError (node_modules/esprima/dist/esprima.js:5028:27)
      at Parser.unexpectedTokenError (node_modules/esprima/dist/esprima.js:1985:39)
      at Parser.throwUnexpectedToken (node_modules/esprima/dist/esprima.js:1995:21)
      at Parser.consumeSemicolon (node_modules/esprima/dist/esprima.js:2297:23)
      at Parser.parseImportDeclaration (node_modules/esprima/dist/esprima.js:4842:15)
      at Parser.parseStatementListItem (node_modules/esprima/dist/esprima.js:3373:39)
      at Parser.parseModule (node_modules/esprima/dist/esprima.js:4715:29)
      at Object.parse (node_modules/esprima/dist/esprima.js:122:38)
      at Context.it (test/unit/mocha/part1/app-vue-will-contain-book-list.spec.js:28:25)
  

• This isn't an AssertionError, so perhaps just catching these would help (see screenshot above too, as maybe that lack of a message is important)
• A user ran into this: https://app.pluralsight.com/projects/build-a-reading-list-application-with-vue-js/creating-the-booklist-component#comment-4442875956

Module 6 Task 12

Issue: It won’t accept v-on:addBook as an acceptable answer.

Solution: It should accept it as an answer.

Issue: In the feedback it could mislead the user to believe that @addbook=”appendBook()” is an
accepted answer by the project, while it’s not.

• Since the feedback is actually accepted by Vue, test should take it as a successful attempt.

Module 6 task 5

• Make sure that :submit.prevent is not acceptable

Note: Issue: :submit is an acceptable answer when I don’t think it should. v-on:submit.prevent and @submit.prevent should be acceptable answers. :submit.prevent shouldn’t be acceptable here.

<form class="" action="#" method="post" :submit.prevent="bookSubmit(bookTitle, bookAuthor)">

Module 6 Task 3

• allow for double quotes as acceptable answer

Module 3 Task 4

• remove extra back tick from feedback message.

The BookList template's li element does not contain these interpolated values `{{book.title}}

Module 5 Task 3

• add check for correct closing tag </book-item>

Right now, <book-item><book-item> passes.

Module 2 Task 5

• accept spaces in between CSS selectors

Module 4 Task 1

• add check for correct closing tag </template>

Right now, <template><template> passes but breaks the next check.

Module 2 Task 6

• add check for correct closing tag </book-list>

Right now, <book-list><book-list> passes.