Last active
October 16, 2018 17:35
-
-
Save juan-rod/52f07949c0728e9eb1541ec4f3bdfc9d to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { shallowMount } from '@vue/test-utils' | |
| import AppCheckbox from '@/shared/components/inputs/AppCheckbox' | |
| import { VueLoaderPlugin } from 'vue-loader'; | |
| describe('AppCheckbox', () => { | |
| let wrapper | |
| beforeEach(() => { | |
| wrapper = shallowMount(AppCheckbox, { | |
| propsData: { | |
| value: false, | |
| label: 'label' | |
| } | |
| }) | |
| }) | |
| it('should render on mount', () => { | |
| expect(wrapper.contains('.checkbox-container')).toBe(true) | |
| }) | |
| it('should render unchecked with prop value false', () => { | |
| expect(wrapper.contains('.unchecked')).toBe(true) | |
| }) | |
| it('should render checked with prop value true', () => { | |
| wrapper.setProps({ | |
| value: true, | |
| label: 'label' | |
| }) | |
| expect(wrapper.vm.value).toBe(true) | |
| expect(wrapper.contains('.checked')).toBe(true) | |
| }) | |
| it('should change state and emit value when clicked', () => { | |
| wrapper.find('.checkbox').trigger('click') | |
| expect(wrapper.emitted().input).toBeTruthy() | |
| expect(wrapper.contains('.checked')).toBe(true) | |
| }) | |
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <div class="checkbox-container" role="checkbox"> | |
| <i | |
| class="esp-icons checkbox" | |
| :class="{ 'checked': localValue, 'unchecked': !localValue }" | |
| @click.stop.prevent="toggle" | |
| > | |
| {{ localValue ? 'check_box' : 'check_box_outline_blank' }} | |
| </i> | |
| <label @click.stop.prevent="toggle" v-if="label">{{ label }}</label> | |
| </div> | |
| </template> | |
| <script> | |
| export default { | |
| props: { | |
| value: { | |
| type: Boolean, | |
| default: false | |
| }, | |
| label: { | |
| type: String, | |
| required: false | |
| } | |
| }, | |
| data () { | |
| return { | |
| localValue: this.value | |
| } | |
| }, | |
| methods: { | |
| toggle () { | |
| this.localValue = !this.localValue | |
| this.$emit('input', this.localValue) | |
| } | |
| } | |
| } | |
| </script> | |
| <style lang="scss" scoped> | |
| .checkbox-container { | |
| display: inline-flex; | |
| align-items: center; | |
| i.esp-icons { | |
| font-size: 18px; | |
| } | |
| label { | |
| cursor: pointer; | |
| padding-left: 4px; | |
| } | |
| } | |
| .checkbox { | |
| font-size: 16px; | |
| vertical-align: middle; | |
| cursor: pointer; | |
| position: relative; | |
| top: 1px; | |
| color: #c5c5c5; | |
| user-select: none; | |
| } | |
| .unchecked { | |
| color: #c5c5c5; | |
| } | |
| .checked { | |
| color: $Redesign-Blue; | |
| } | |
| </style> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| FAIL tests/unit/specs/components/AppCheckbox.spec.js | |
| AppCheckbox | |
| ✓ should render on mount (30ms) | |
| ✓ should render unchecked with prop value false (5ms) | |
| ✕ should render checked with prop value true (9ms) | |
| ✓ should change state and emit value when clicked (6ms) | |
| ● AppCheckbox › should render checked with prop value true | |
| expect(received).toBe(expected) // Object.is equality | |
| Expected: true | |
| Received: false | |
| 25 | }) | |
| 26 | expect(wrapper.vm.value).toBe(true) | |
| > 27 | expect(wrapper.contains('.checked')).toBe(true) | |
| | ^ | |
| 28 | }) | |
| 29 | it('should change state and emit value when clicked', () => { | |
| 30 | wrapper.find('.checkbox').trigger('click') | |
| at Object.toBe (tests/unit/specs/components/AppCheckbox.spec.js:27:44) | |
| Test Suites: 1 failed, 1 total | |
| Tests: 1 failed, 3 passed, 4 total | |
| Snapshots: 0 total | |
| Time: 2.232s | |
| Ran all test suites related to changed files. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment