Skip to content

Commit 3232c9d

Browse files
kleinfreundkleinfreund
authored
chore(deps): update remaining development dependencies (#228)
Updates all remaining development dependencies. Updates a bunch of Vue tests to make them pass a newly introduced axe rule. Updates the year in the license file. 😁
1 parent d5f2cea commit 3232c9d

14 files changed

+2752
-2810
lines changed

‎LICENSE.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MIT License
22

3-
Copyright (c) 2019 Suz Hinton
3+
Copyright (c) 2021 Suz Hinton
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

‎package-lock.json

Lines changed: 2667 additions & 2705 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -53,30 +53,30 @@
5353
"@babel/plugin-transform-runtime": "7.12.10",
5454
"@babel/preset-env": "7.12.11",
5555
"@babel/preset-stage-2": "7.8.3",
56-
"@types/jest": "25.1.2",
56+
"@types/jest": "26.0.20",
5757
"@vue/test-utils": "1.1.2",
58-
"alex": "8.1.1",
59-
"babel-jest": "25.1.0",
58+
"alex": "9.1.0",
59+
"babel-jest": "26.6.3",
6060
"babel-loader": "8.2.2",
6161
"babel-minify-webpack-plugin": "0.3.1",
6262
"css-loader": "5.0.1",
63-
"debug": "4.1.1",
63+
"debug": "4.3.2",
6464
"eslint": "7.19.0",
6565
"eslint-plugin-vue": "7.5.0",
66-
"husky": "4.2.3",
67-
"jest": "25.1.0",
68-
"jest-axe": "3.3.0",
69-
"nodemon": "2.0.2",
66+
"husky": "4.3.8",
67+
"jest": "26.6.3",
68+
"jest-axe": "4.1.0",
69+
"nodemon": "2.0.7",
7070
"npm-run-all": "4.1.5",
7171
"style-loader": "2.0.0",
72-
"supertest": "4.0.2",
72+
"supertest": "6.1.3",
7373
"vue-jest": "4.0.0-rc.1",
7474
"vue-loader": "15.9.6",
7575
"vue-template-compiler": "2.6.12",
7676
"webpack": "5.19.0",
7777
"webpack-cli": "4.4.0",
7878
"webpack-watch-server": "1.2.1",
79-
"whatwg-fetch": "3.0.0"
79+
"whatwg-fetch": "3.5.0"
8080
},
8181
"nodemonConfig": {
8282
"ignore": [

‎public/js/components/specs/App.spec.js

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { shallowMount } from "@vue/test-utils";
22
import { axe, toHaveNoViolations } from "jest-axe";
33

4-
import App from "../App";
5-
import * as configFns from "../../lib/configuration";
4+
import App from "../App.vue";
5+
import * as configFns from "../../lib/configuration.js";
66
import { TITLE_EMOJI_REGEX } from "../../utils/constants.js";
77

88
// Mock dashboard data
@@ -265,9 +265,6 @@ describe("App", () => {
265265
test("Axe doesn’t find any violations", async () => {
266266
const wrapper = shallowMount(App);
267267
await wrapper.vm.$nextTick();
268-
269-
const html = wrapper.html();
270-
271-
expect(await axe(html)).toHaveNoViolations();
268+
expect(await axe(wrapper.element)).toHaveNoViolations();
272269
});
273270
});

‎public/js/components/specs/BaseCard.spec.js

Lines changed: 10 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,13 @@
11
import { shallowMount } from "@vue/test-utils";
22
import { axe, toHaveNoViolations } from "jest-axe";
33

4-
import BaseCard from "../BaseCard";
5-
6-
/**
7-
* Helper function for injecting a test element into the DOM
8-
* This element can then be used as the mount point when using the [`attachTo`][1] option.
9-
*
10-
* [1]: https://vue-test-utils.vuejs.org/api/options.html#attachto
11-
*
12-
* @returns {string} a CSS selector that should be used as the value for the `attachTo` option
13-
*/
14-
function injectTestDiv() {
15-
const id = "root";
16-
const div = document.createElement("div");
17-
div.id = id;
18-
document.body.appendChild(div);
19-
return `#${id}`;
20-
}
4+
import BaseCard from "../BaseCard.vue";
5+
import { injectMainElement } from './inject-main-element.js'
6+
217

22-
function shallowMountComponent() {
8+
function shallowMountComponent(attachToDocument = false) {
239
return shallowMount(BaseCard, {
24-
attachTo: injectTestDiv(),
10+
attachTo: attachToDocument ? injectMainElement() : null,
2511

2612
propsData: {
2713
tile: {
@@ -280,7 +266,7 @@ describe("BaseCard", () => {
280266

281267
test("check and make sure the emitCardPosition method is called when stopDraggingCard or moveCardWithArrows are invoked", () => {
282268
const spy = jest.spyOn(BaseCard.methods, "emitCardPosition");
283-
const { vm } = shallowMountComponent();
269+
const { vm } = shallowMountComponent(true);
284270
const event = {
285271
preventDefault: jest.fn(),
286272
key: "ArrowUp"
@@ -435,9 +421,10 @@ describe("BaseCard", () => {
435421
});
436422

437423
test("Axe doesn’t find any violations", async () => {
438-
const wrapper = shallowMountComponent();
439-
const html = wrapper.html();
424+
// Make sure to clean up the DOM to avoid an axe regarding stray a11y-dialog nodes in the DOM.
425+
Array.from(document.body.children).forEach((childElement) => childElement.remove())
440426

441-
expect(await axe(html)).toHaveNoViolations();
427+
const wrapper = shallowMountComponent(true);
428+
expect(await axe(wrapper.element)).toHaveNoViolations();
442429
});
443430
});

‎public/js/components/specs/ButtonCard.spec.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import { shallowMount } from "@vue/test-utils";
22
import { axe, toHaveNoViolations } from "jest-axe";
33

4-
import ButtonCard from "../ButtonCard";
4+
import ButtonCard from "../ButtonCard.vue";
5+
import { injectMainElement } from './inject-main-element.js'
56

6-
function shallowMountComponent() {
7+
function shallowMountComponent(attachToDocument = false) {
78
return shallowMount(ButtonCard, {
9+
attachTo: attachToDocument ? injectMainElement() : null,
810
propsData: {
911
tile: {
1012
buttonText: "button-action",
@@ -123,9 +125,7 @@ describe("ButtonCard", () => {
123125
});
124126

125127
test("Axe doesn’t find any violations", async () => {
126-
const wrapper = shallowMountComponent();
127-
const html = wrapper.html();
128-
129-
expect(await axe(html)).toHaveNoViolations();
128+
const wrapper = shallowMountComponent(true);
129+
expect(await axe(wrapper.element)).toHaveNoViolations();
130130
});
131131
});

‎public/js/components/specs/ButtonSettings.spec.js

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import { shallowMount } from "@vue/test-utils";
22
import { axe, toHaveNoViolations } from "jest-axe";
33

4-
import ButtonSettings from "../ButtonSettings";
4+
import ButtonSettings from "../ButtonSettings.vue";
5+
import { injectMainElement } from './inject-main-element.js'
56

6-
function shallowMountComponent() {
7+
function shallowMountComponent(attachToDocument = false) {
78
return shallowMount(ButtonSettings, {
9+
attachTo: attachToDocument ? injectMainElement() : null,
810
propsData: {
911
tile: {
1012
callType: "method",
@@ -26,6 +28,9 @@ function shallowMountComponent() {
2628
expect.extend(toHaveNoViolations);
2729

2830
describe("ButtonSettings", () => {
31+
beforeAll(() => {
32+
})
33+
2934
test("component can mount", () => {
3035
const wrapper = shallowMountComponent();
3136

@@ -50,9 +55,8 @@ describe("ButtonSettings", () => {
5055
});
5156

5257
test("Axe doesn’t find any violations", async () => {
53-
const wrapper = shallowMountComponent();
54-
const html = wrapper.html();
58+
const wrapper = shallowMountComponent(true);
5559

56-
expect(await axe(html)).toHaveNoViolations();
60+
expect(await axe(wrapper.element)).toHaveNoViolations();
5761
});
5862
});

‎public/js/components/specs/CardForm.spec.js

Lines changed: 8 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,12 @@
11
import { shallowMount } from "@vue/test-utils";
22
import { axe, toHaveNoViolations } from "jest-axe";
33

4-
import CardForm from "../CardForm";
4+
import CardForm from "../CardForm.vue";
5+
import { injectMainElement } from './inject-main-element.js'
56

6-
/**
7-
* Helper function for injecting a test element into the DOM
8-
* This element can then be used as the mount point when using the [`attachTo`][1] option.
9-
*
10-
* [1]: https://vue-test-utils.vuejs.org/api/options.html#attachto
11-
*
12-
* @returns {string} a CSS selector that should be used as the value for the `attachTo` option
13-
*/
14-
function injectTestDiv() {
15-
const id = "root";
16-
const div = document.createElement("div");
17-
div.id = id;
18-
document.body.appendChild(div);
19-
return `#${id}`;
20-
}
21-
22-
function shallowMountComponent(props = {}) {
7+
function shallowMountComponent(attachToDocument = false) {
238
return shallowMount(CardForm, {
24-
attachTo: injectTestDiv(),
9+
attachTo: attachToDocument ? injectMainElement() : null,
2510

2611
propsData: {
2712
tile: {
@@ -33,8 +18,7 @@ function shallowMountComponent(props = {}) {
3318
type: "sticker",
3419
url: "https://media.giphy.com/media/1wXeLxuTVBZe0Ht7Zu/giphy.gif"
3520
},
36-
deviceList: ["AZ3166", "Tessel2", "Jenn"],
37-
...props
21+
deviceList: ["AZ3166", "Tessel2", "Jenn"]
3822
}
3923
});
4024
}
@@ -49,7 +33,7 @@ describe("CardFrom", () => {
4933
});
5034

5135
test("save-settings event is emitted", async () => {
52-
const wrapper = shallowMountComponent();
36+
const wrapper = shallowMountComponent(true);
5337
const formData = document.querySelector(".card__form form");
5438
await wrapper.setProps({ editing: true });
5539

@@ -63,9 +47,7 @@ describe("CardFrom", () => {
6347
});
6448

6549
test("Axe doesn’t find any violations", async () => {
66-
const wrapper = shallowMountComponent();
67-
const html = wrapper.html();
68-
69-
expect(await axe(html)).toHaveNoViolations();
50+
const wrapper = shallowMountComponent(true);
51+
expect(await axe(wrapper.element)).toHaveNoViolations();
7052
});
7153
});

‎public/js/components/specs/DataPropertyField.spec.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import { shallowMount } from "@vue/test-utils";
22
import { axe, toHaveNoViolations } from "jest-axe";
33

4-
import DataPropertyField from "../DataPropertyField";
4+
import DataPropertyField from "../DataPropertyField.vue";
5+
import { injectMainElement } from './inject-main-element.js'
56

6-
function shallowMountComponent(props = {}) {
7+
function shallowMountComponent(props = {}, attachToDocument = false) {
78
return shallowMount(DataPropertyField, {
9+
attachTo: attachToDocument ? injectMainElement() : null,
810
propsData: {
911
name: "property",
1012
value: "",
@@ -104,9 +106,7 @@ describe("DataPropertyField", () => {
104106
name: "property",
105107
value: "temperature",
106108
titleId: ""
107-
});
108-
const html = wrapper.html();
109-
110-
expect(await axe(html)).toHaveNoViolations();
109+
}, true);
110+
expect(await axe(wrapper.element)).toHaveNoViolations();
111111
});
112112
});

‎public/js/components/specs/FormFields.spec.js

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { shallowMount } from "@vue/test-utils";
22
import { axe, toHaveNoViolations } from "jest-axe";
33

4-
import FormFields from "../FormFields";
4+
import FormFields from "../FormFields.vue";
55

66
function shallowMountComponent() {
77
return shallowMount(FormFields, {
@@ -76,8 +76,6 @@ describe("FormFields", () => {
7676

7777
test("Axe doesn’t find any violations", async () => {
7878
const wrapper = shallowMountComponent();
79-
const html = wrapper.html();
80-
81-
expect(await axe(html)).toHaveNoViolations();
79+
expect(await axe(wrapper.element)).toHaveNoViolations();
8280
});
8381
});

0 commit comments

Comments
 (0)