Skip to content

Commit bfcd43b

Browse files
fatfingers23fatfingers23
authored
Added Unit Tests and Npms upgrades (#87)
1 parent 3aaacf8 commit bfcd43b

File tree

10 files changed

+1996
-1501
lines changed

10 files changed

+1996
-1501
lines changed

‎.gitignore

+2-1
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,5 @@ yarn-error.log*
2121
*.njsproj
2222
*.sln
2323
*.sw?
24-
.nyc_output
24+
.nyc_output
25+
coverage

‎vueapp/babel.config.js

+7-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1-
module.exports = {
2-
presets: ['@vue/app']
3-
};
1+
module.exports = {
2+
'env': {
3+
'development' : {
4+
'compact': false
5+
}
6+
}
7+
};

‎vueapp/package-lock.json

+1,808-1,462
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎vueapp/package.json

+24-20
Original file line numberDiff line numberDiff line change
@@ -7,48 +7,49 @@
77
"build": "vue-cli-service build",
88
"test:unit": "vue-cli-service test:unit",
99
"lint": "vue-cli-service lint",
10-
"lint:nofix": "vue-cli-service lint --no-fix --max-warnings 0",
10+
"cover": "TEST_COVERAGE=true nyc --reporter=text --mode development npm run test:unit ",
1111
"i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'",
12-
"cover": "TEST_COVERAGE=true nyc npm run test:unit"
12+
"lint:nofix": "vue-cli-service lint --no-fix --max-warnings 0"
1313
},
1414
"dependencies": {
15-
"core-js": "^2.6.5",
15+
"core-js": "^3.6.4",
1616
"file-saver": "^2.0.2",
17-
"marked": "^0.8.0",
18-
"register-service-worker": "^1.6.2",
17+
"marked": "^0.8.1",
18+
"register-service-worker": "^1.7.1",
1919
"vue": "^2.6.10",
20-
"vue-i18n": "^8.0.0",
21-
"vue-router": "^3.0.3",
20+
"vue-i18n": "^8.15.5",
21+
"vue-router": "^3.1.6",
2222
"vuedraggable": "^2.23.2",
23-
"vuetify": "^2.2.11",
24-
"vuex": "^3.0.1",
23+
"vuetify": "^2.2.18",
24+
"vuex": "^3.1.3",
2525
"vuex-persist": "^2.2.0"
2626
},
2727
"devDependencies": {
2828
"@kazupon/vue-i18n-loader": "^0.3.0",
29-
"@vue/cli-plugin-babel": "^3.12.0",
30-
"@vue/cli-plugin-eslint": "^3.12.0",
31-
"@vue/cli-plugin-pwa": "^4.2.2",
32-
"@vue/cli-plugin-unit-mocha": "^4.2.2",
33-
"@vue/cli-service": "^3.12.0",
29+
"@vue/cli-plugin-babel": "~4.2.3",
30+
"@vue/cli-plugin-eslint": "~4.2.3",
31+
"@vue/cli-plugin-pwa": "~4.2.3",
32+
"@vue/cli-plugin-unit-mocha": "~4.2.3",
33+
"@vue/cli-service": "~4.2.3",
3434
"@vue/test-utils": "1.0.0-beta.31",
35-
"babel-eslint": "^10.0.1",
35+
"babel-eslint": "^10.1.0",
3636
"babel-plugin-istanbul": "^6.0.0",
3737
"chai": "^4.1.2",
38+
"clone-deep": "^4.0.1",
3839
"dompurify": "^2.0.8",
39-
"eslint": "^5.16.0",
40-
"eslint-plugin-vue": "^5.0.0",
40+
"eslint": "^6.7.2",
41+
"eslint-plugin-vue": "^6.1.2",
4142
"istanbul-instrumenter-loader": "^3.0.1",
4243
"material-design-icons-iconfont": "^5.0.1",
4344
"null-loader": "^3.0.0",
4445
"nyc": "^15.0.0",
4546
"raw-loader": "^4.0.0",
46-
"sass": "^1.19.0",
47+
"sass": "^1.26.3",
4748
"sass-loader": "^8.0.0",
4849
"vue-cli-plugin-i18n": "^0.6.1",
4950
"vue-cli-plugin-vuetify": "^2.0.5",
5051
"vue-template-compiler": "^2.6.11",
51-
"vuetify-loader": "^1.3.0"
52+
"vuetify-loader": "^1.4.3"
5253
},
5354
"eslintConfig": {
5455
"root": true,
@@ -87,7 +88,10 @@
8788
}
8889
],
8990
"object-property-newline": "error",
90-
"space-in-brackets": "always"
91+
"object-curly-spacing": [
92+
"error",
93+
"always"
94+
]
9195
},
9296
"overrides": [
9397
{

‎vueapp/src/components/EditModeHeader/EditModeHeader.vue

+6-2
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,10 @@
88
You're in edit mode!
99
<v-spacer />
1010
<v-btn
11+
id="exitEditModeButton"
1112
class="mx-2"
1213
color="success"
13-
@click="exitEditMode"
14+
@click.native="exitEditMode"
1415
>
1516
<v-icon class="pr-2">
1617
save
@@ -32,10 +33,13 @@
3233
</template>
3334

3435
<script>
36+
import { mapActions } from 'vuex';
37+
3538
export default {
3639
methods: {
40+
...mapActions('tilePad',['setEditMode']),
3741
exitEditMode () {
38-
this.$store.dispatch('tilePad/setEditMode', false);
42+
this.setEditMode(false);
3943
}
4044
}
4145
};

‎vueapp/src/store/modules/settings.js

+11-11
Original file line numberDiff line numberDiff line change
@@ -37,37 +37,37 @@ const mutations = {
3737
};
3838

3939
const actions = {
40-
setCustomTilePad: ({commit}, value) => {
40+
setCustomTilePad: ({ commit }, value) => {
4141
commit('SET_CUSTOM_TILE_PAD', value);
4242
},
43-
setLocale: ({commit}, value) => {
43+
setLocale: ({ commit }, value) => {
4444
commit('SET_LOCALE', value);
4545
},
46-
setLocked: ({commit}, value) => {
46+
setLocked: ({ commit }, value) => {
4747
commit('SET_LOCKED', value);
4848
},
49-
setPasscode: ({commit}, value) => {
49+
setPasscode: ({ commit }, value) => {
5050
commit('SET_PASSCODE', value);
5151
},
52-
setSelectedVoiceIndex: ({commit}, value) => {
52+
setSelectedVoiceIndex: ({ commit }, value) => {
5353
commit('SET_SELECTED_VOICE_INDEX', value);
5454
},
55-
setSentenceMode: ({commit}, value) => {
55+
setSentenceMode: ({ commit }, value) => {
5656
commit('SET_SENTENCE_MODE', value);
5757
},
58-
setVoices: ({commit}, value) => {
58+
setVoices: ({ commit }, value) => {
5959
commit('SET_VOICES', value);
6060
},
61-
setVoiceOptions: ({commit}, value) => {
61+
setVoiceOptions: ({ commit }, value) => {
6262
commit('SET_VOICE_OPTIONS', value);
6363
},
64-
toggleCustomTilePad: ({commit, state}) => {
64+
toggleCustomTilePad: ({ commit, state }) => {
6565
commit('SET_CUSTOM_TILE_PAD', !state.customTilePad);
6666
},
67-
toggleLocked: ({commit, state}) => {
67+
toggleLocked: ({ commit, state }) => {
6868
commit('SET_LOCKED', !state.locked);
6969
},
70-
toggleSentenceMode: ({commit, state}) => {
70+
toggleSentenceMode: ({ commit, state }) => {
7171
commit('SET_SENTENCE_MODE', !state.sentenceMode);
7272
},
7373
};

‎vueapp/src/views/TilePad.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
@removeFromSentence="sentenceTiles.splice($event, 1)"
99
/>
1010
<edit-mode-header
11-
v-if="sentenceMode && editMode"
11+
v-if="editMode"
1212
/>
1313
<v-container
1414
fluid

‎vueapp/tests/unit/EditModeHeader.spec.js

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { expect } from 'chai';
2+
import { createLocalVue, shallowMount } from '@vue/test-utils';
3+
import Vuex from 'vuex';
4+
import EditModeHeader from '@/components/EditModeHeader/EditModeHeader';
5+
import tilePad from '@/store/modules/tilePad';
6+
7+
//Using clonedeep cause if you dont store values move over in each test
8+
const cloneDeep = require('clone-deep');
9+
const localVue = createLocalVue();
10+
localVue.use(Vuex);
11+
12+
function getWrapper () {
13+
return shallowMount(EditModeHeader, {
14+
localVue,
15+
store: new Vuex.Store({
16+
modules: {
17+
tilePad: cloneDeep(tilePad)
18+
},
19+
})
20+
});
21+
}
22+
23+
describe('EditModeHeader.Vue', () => {
24+
let wrapper;
25+
26+
beforeEach(() => {
27+
wrapper = getWrapper();
28+
wrapper.vm.$store.commit('tilePad/SET_EDIT_MODE', true);
29+
30+
});
31+
32+
it('Save changes button exits edit mode', () => {
33+
let button = wrapper.find('#exitEditModeButton');
34+
expect(button.exists()).to.be.true;
35+
button.trigger('click');
36+
expect(wrapper.vm.$store.state.tilePad.editMode).to.be.false;
37+
});
38+
});

‎vueapp/tests/unit/Sentence.spec.js

+97
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import { expect } from 'chai';
2+
import { createLocalVue, shallowMount } from '@vue/test-utils';
3+
import Sentence from '@/components/Sentence/Sentence';
4+
import Tile from '@/components/TilePad/Tile.vue';
5+
import i18n from '@/i18n';
6+
import Vuetify from 'vuetify/lib';
7+
8+
const localVue = createLocalVue();
9+
localVue.use(Vuetify);
10+
const tilePadToDisplay = [
11+
{
12+
'name': 'No',
13+
'text': 'No',
14+
'accent': 'peach',
15+
'image': 'https://img.icons8.com/officexs/64/000000/cancel-2.png',
16+
'id': 0,
17+
'messages': {
18+
'de': {
19+
'name': 'Nein',
20+
'text': 'nein'
21+
}
22+
}
23+
},
24+
{
25+
'name': 'Little',
26+
'text': 'Little',
27+
'image': 'https://img.icons8.com/officexs/64/000000/cursor.png',
28+
'id': 1,
29+
'accent': 'white',
30+
'messages': {
31+
'de': {
32+
'name': 'Klein',
33+
'text': 'klein'
34+
}
35+
}
36+
},
37+
{
38+
'name': 'Off',
39+
'text': 'Off',
40+
'image': 'https://img.icons8.com/officexs/64/000000/disclaimer.png',
41+
'id': 2,
42+
'accent': 'white',
43+
'messages': {
44+
'de': {
45+
'name': 'Aus',
46+
'text': 'aus'
47+
}
48+
}
49+
},
50+
];
51+
const opts = {
52+
description: 'iPhone 6 (portrait)',
53+
width: 375,
54+
height: 667,
55+
name: 'xs',
56+
mustBeTrue: [
57+
'xs',
58+
'xsOnly',
59+
'smAndDown',
60+
'mdAndDown',
61+
'lgAndDown',
62+
]
63+
};
64+
65+
let vuetify = new Vuetify({
66+
mocks: {
67+
$vuetify: {
68+
breakpoint: opts,
69+
70+
},
71+
}
72+
});
73+
74+
function getWrapper () {
75+
return shallowMount(Sentence, {
76+
localVue,
77+
propsData:{
78+
tilePadToDisplay
79+
},
80+
i18n,
81+
vuetify
82+
});
83+
}
84+
85+
describe('Sentence.vue', () => {
86+
let wrapper;
87+
88+
beforeEach(() => {
89+
wrapper = getWrapper();
90+
});
91+
92+
it('Amount of tiles match tiles shown and tiles are populated', async () => {
93+
let tiles = wrapper.findAll(Tile);
94+
expect(tiles.exists()).to.be.true;
95+
expect(tiles.length).to.equal(3);
96+
});
97+
});

‎vueapp/tests/unit/Tile.spec.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ const sentenceModePropsData = {
2121
navigation: 'keyboard',
2222
id: 11,
2323
};
24+
2425
const router = new VueRouter({ routes });
2526
const localVue = createLocalVue();
2627
localVue.use(Vuex);
@@ -76,7 +77,7 @@ describe('Tile.vue', () => {
7677
});
7778

7879
it('Keyboard tile opens on click', async () => {
79-
wrapper.setProps({tileData: sentenceModePropsData});
80+
wrapper.setProps({ tileData: sentenceModePropsData });
8081
wrapper.vm.tileClickedEvent();
8182
await wrapper.vm.$nextTick();
8283
expect(wrapper.vm.$route.params.layout).to.equal(sentenceModePropsData.navigation);

0 commit comments

Comments
 (0)