├── .browserslistrc
├── .eslintrc.js
├── .gitignore
├── .prettierrc.json
├── README.md
├── babel.config.js
├── jest.config.js
├── package.json
├── postcss.config.js
├── preview.png
├── public
    ├── favicon.ico
    └── index.html
├── renovate.json
├── src
    ├── App.vue
    ├── components
    │   └── Rating.vue
    └── main.js
├── tests
    └── unit
    │   └── .eslintrc.js
├── vue.config.js
└── yarn.lock


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not ie <= 8
4 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   extends: ['plugin:vue/essential', '@vue/prettier'],
 7 |   rules: {
 8 |     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
 9 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
10 |   },
11 |   parserOptions: {
12 |     parser: 'babel-eslint'
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 | 


--------------------------------------------------------------------------------
/.prettierrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "semi": false,
3 |   "singleQuote": true
4 | }
5 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Star Rating Vue.js Tutorial 🌟
 2 | 
 3 | <img align="right" src="preview.png">
 4 | 
 5 | The project of the tutorial [Unit Test Your First Vue.js Component](https://frontstuff.io/unit-test-your-first-vuejs-component) on [fronstuff.io](https://frontstuff.io). You can preview it [here](https://star-rating-vue-js-tutorial.netlify.com/).
 6 | 
 7 | This projects requires [Node.js](https://nodejs.org/en/).
 8 | 
 9 | See branch `tests` for unit tests.
10 | 
11 | ## Installation
12 | 
13 | To install the project, run the following command in your terminal:
14 | 
15 | ```sh
16 | npm install
17 | # or
18 | yarn install
19 | ```
20 | 
21 | ### Compiles and hot-reloads for development
22 | 
23 | ```sh
24 | npm run serve
25 | # or
26 | yarn serve
27 | ```
28 | 
29 | ### Compiles and minifies for production
30 | 
31 | ```sh
32 | npm run build
33 | # or
34 | yarn build
35 | ```
36 | 
37 | ### Lints and fixes files
38 | 
39 | ```sh
40 | npm run lint
41 | # or
42 | yarn lint
43 | ```
44 | 
45 | ### Run your unit tests
46 | 
47 | **Only on branch `tests`.**
48 | 
49 | ```sh
50 | npm run test:unit
51 | # or
52 | yarn test:unit
53 | ```
54 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: ['@vue/app']
3 | }
4 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
 3 |   transform: {
 4 |     '^.+\\.vue$': 'vue-jest',
 5 |     '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$':
 6 |       'jest-transform-stub',
 7 |     '^.+\\.jsx?$': 'babel-jest'
 8 |   },
 9 |   moduleNameMapper: {
10 |     '^@/(.*)$': '<rootDir>/src/$1'
11 |   },
12 |   snapshotSerializers: ['jest-serializer-vue'],
13 |   testMatch: [
14 |     '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
15 |   ],
16 |   testURL: 'http://localhost/',
17 |   transformIgnorePatterns: ['/node_modules(?![\\\\/]vue-awesome[\\\\/])/']
18 | }
19 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "star-rating-vue-js-tutorial",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint",
 9 |     "test:unit": "vue-cli-service test:unit"
10 |   },
11 |   "dependencies": {
12 |     "vue": "2.6.14",
13 |     "vue-awesome": "3.5.4"
14 |   },
15 |   "devDependencies": {
16 |     "@vue/cli-plugin-babel": "3.12.1",
17 |     "@vue/cli-plugin-eslint": "3.12.1",
18 |     "@vue/cli-plugin-unit-jest": "3.12.1",
19 |     "@vue/cli-service": "3.12.1",
20 |     "@vue/eslint-config-prettier": "3.0.5",
21 |     "@vue/test-utils": "1.2.1",
22 |     "babel-core": "7.0.0-bridge.0",
23 |     "babel-jest": "23.6.0",
24 |     "lint-staged": "7.3.0",
25 |     "node-sass": "4.14.1",
26 |     "sass-loader": "7.3.1",
27 |     "vue-template-compiler": "2.6.14"
28 |   },
29 |   "gitHooks": {
30 |     "pre-commit": "lint-staged"
31 |   },
32 |   "lint-staged": {
33 |     "*.js": [
34 |       "vue-cli-service lint",
35 |       "git add"
36 |     ],
37 |     "*.vue": [
38 |       "vue-cli-service lint",
39 |       "git add"
40 |     ]
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     autoprefixer: {}
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sarahdayan/star-rating-vue-js-tutorial/79aa4819417ad552a149f7cf6276becdea451243/preview.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sarahdayan/star-rating-vue-js-tutorial/79aa4819417ad552a149f7cf6276becdea451243/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width,initial-scale=1.0">
 8 |   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 9 |   <title>star-rating-vue-js-tutorial</title>
10 | </head>
11 | 
12 | <body>
13 |   <noscript>
14 |     <strong>We're sorry but star-rating-vue-js-tutorial doesn't work properly without JavaScript enabled. Please enable
15 |       it to continue.</strong>
16 |   </noscript>
17 |   <div id="app"></div>
18 |   <!-- built files will be auto injected -->
19 | </body>
20 | 
21 | </html>


--------------------------------------------------------------------------------
/renovate.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": [
 3 |     "config:base"
 4 |   ],
 5 |   "major": {
 6 |     "enabled": false
 7 |   },
 8 |   "packageRules": [
 9 |     {
10 |       "updateTypes": ["minor", "patch", "pin", "digest"],
11 |       "automerge": true
12 |     }
13 |   ]
14 | }
15 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <Rating :grade="2"/>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import Rating from '@/components/Rating'
 9 | 
10 | export default {
11 |   name: 'app',
12 |   components: {
13 |     Rating
14 |   }
15 | }
16 | </script>
17 | 
18 | <style>
19 | html,
20 | body,
21 | #app {
22 |   height: 100%;
23 | }
24 | #app {
25 |   display: flex;
26 |   justify-content: center;
27 |   align-items: center;
28 |   background: #f5f5f5;
29 | }
30 | </style>
31 | 


--------------------------------------------------------------------------------
/src/components/Rating.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="rating">
 3 |     <ul class="list">
 4 |       <li v-test="{ id: 'star' }" :key="star" v-for="star in maxStars" :class="{ 'active': star <= stars }" @click="rate(star)" class="star">
 5 |         <icon v-test="{ id: 'icon' }" scale="2" :name="star <= stars ? 'star' : 'regular/star'"/>
 6 |       </li>
 7 |     </ul>
 8 |     <span v-test="{ id: 'counter' }" v-if="hasCounter">{{ stars }} of {{ maxStars }}</span>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 | import 'vue-awesome/icons/star'
14 | import 'vue-awesome/icons/regular/star'
15 | 
16 | import Icon from 'vue-awesome/components/Icon'
17 | 
18 | import Test from '@/directives/test.js'
19 | 
20 | export default {
21 |   components: { Icon },
22 |   directives: { Test },
23 |   props: {
24 |     grade: {
25 |       type: Number,
26 |       required: true
27 |     },
28 |     maxStars: {
29 |       type: Number,
30 |       default: 5
31 |     },
32 |     hasCounter: {
33 |       type: Boolean,
34 |       default: true
35 |     }
36 |   },
37 |   data() {
38 |     return {
39 |       stars: this.grade
40 |     }
41 |   },
42 |   methods: {
43 |     rate(star) {
44 |       if (typeof star === 'number' && star <= this.maxStars && star >= 0)
45 |         this.stars = this.stars === star ? star - 1 : star
46 |     }
47 |   }
48 | }
49 | </script>
50 | 
51 | <style scoped lang="scss">
52 | $active-color: #f3d23e;
53 | 
54 | .rating {
55 |   display: inline-block;
56 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
57 |   font-size: 22px;
58 |   color: #a7a8a8;
59 | }
60 | .list {
61 |   margin: 0 0 5px 0;
62 |   padding: 0;
63 |   list-style-type: none;
64 |   &:hover {
65 |     .star {
66 |       color: $active-color;
67 |     }
68 |   }
69 | }
70 | .star {
71 |   display: inline-block;
72 |   cursor: pointer;
73 |   &:hover {
74 |     & ~ .star {
75 |       &:not(.active) {
76 |         color: inherit;
77 |       }
78 |     }
79 |   }
80 | }
81 | .active {
82 |   color: $active-color;
83 | }
84 | </style>
85 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | Vue.config.productionTip = false
5 | 
6 | new Vue({
7 |   render: h => h(App)
8 | }).$mount('#app')
9 | 


--------------------------------------------------------------------------------
/tests/unit/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   env: {
3 |     jest: true
4 |   },
5 |   rules: {
6 |     'import/no-extraneous-dependencies': 'off'
7 |   }
8 | }


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   transpileDependencies: [/\bvue-awesome\b/]
3 | }
4 | 


--------------------------------------------------------------------------------