Skip to content

Commit 5b49dd9

Browse files
jchan444jchan444
committed
Merge branch 'dev' into Johnny
2 parents 379d667 + 93d2bcf commit 5b49dd9

File tree

2 files changed

+221
-21
lines changed

2 files changed

+221
-21
lines changed

‎src/components/left-sidebar/ComponentTab/Icons.vue

Lines changed: 12 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ Description:
1414
<br />
1515
<span>{{ elementName }}</span>
1616
</button>
17-
17+
<!-- Child Component Icons-->
1818
<button
1919
@click.prevent="changeState(elementName)"
2020
v-for="(elementName, idx) in childrenComp"
@@ -55,32 +55,23 @@ export default {
5555
elementStorage: function () {
5656
let computedElementalStorage = {};
5757
if (this.activeComponent) {
58+
computedElementalStorage = {};
5859
59-
this.componentMap[this.activeComponent].htmlList.forEach((el) => {
60-
if (!computedElementalStorage[el.text]) {
61-
computedElementalStorage[el.text] = 1;
62-
}
63-
else if (computedElementalStorage[el.text]) {
64-
computedElementalStorage[el.text] += 1;
65-
}
66-
});
67-
//show the badge for all nested children arrays
68-
const checkChild = array => {
60+
//function searches through HtmlList and is invoke recursively to search its children(Html Elements that are nested)
61+
const checkHtmlElements = array => {
6962
for (let html of array) {
7063
if (html.children.length) {
71-
checkChild(html.children)
64+
checkHtmlElements(html.children)
65+
}
66+
if (!computedElementalStorage[html.text]) {
67+
computedElementalStorage[html.text] = 1
7268
} else {
73-
if (!computedElementalStorage[html.text]) {
74-
computedElementalStorage[html.text] = 1
75-
} else {
76-
++computedElementalStorage[html.text]
77-
}
69+
++computedElementalStorage[html.text]
7870
}
7971
}
8072
}
81-
//invoke the recursive function
82-
checkChild(this.componentMap[this.activeComponent].htmlList)
83-
73+
//invoke the recursive function
74+
checkHtmlElements(this.componentMap[this.activeComponent].htmlList)
8475
} else if (this.activeComponent === "") {
8576
// if component was switched from existing component to '', reset cache and update items
8677
if (computedElementalStorage !== {}) computedElementalStorage = {};
@@ -94,9 +85,9 @@ export default {
9485
}
9586
return computedElementalStorage;
9687
},
88+
//Compute Child Components of the activeComponent to include them as icons
9789
childrenComp: function () {
9890
let childrenAvailable = [];
99-
10091
if(this.activeComponent) {
10192
childrenAvailable = this.componentMap[this.activeComponent].children
10293
}

‎test/jest/__tests__/dragAndDropTest.spec.js

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
/* eslint-disable */
2+
/**
3+
* @jest-environment jsdom
4+
*/
5+
import mutations from "../../../src/store/mutations";
6+
import actions from "../../../src/store/actions";
7+
import * as types from "../../../src/store/types";
8+
import { mount, createLocalVue, shallowMount } from "@vue/test-utils";
9+
import * as All from "quasar";
10+
import { iterate } from "localforage";
11+
const { Quasar, date } = All;
12+
13+
/**
14+
* @description: Testing mutations and actions related to the Drag and Drop functionality of html elements
15+
* in the HTMLQueue and the CreateMenuHTMLQueue components.
16+
* `actions:` `setIdDrag', `setIdDrop`, `setSelectedIdDrag`, `setSelectedIdDrop`,
17+
* `dragDropSortHtmlElements`, `dragDropSortSelectedHtmlElements`
18+
* `mutations: SET_ID_DRAG, SET_ID_DROP, SET_SELECTED_ID_DRAG, SET_SELECTED_ID_DROP,
19+
* DRAG_DROP_SORT_HTML_ELEMENTS, DRAG_DROP_SORT_SELECTED_HTML_ELEMENTS
20+
*/
21+
let aHtmlList = [{
22+
text: 'div',
23+
children:[],
24+
id:Date.now() + 1
25+
},
26+
{
27+
children:[],
28+
text:'img',
29+
id:Date.now() + 2
30+
},
31+
{
32+
children:[],
33+
text: 'paragraph',
34+
id:Date.now() + 3
35+
}]
36+
37+
let hardA = {
38+
componentName: "a",
39+
htmlList: [...aHtmlList],
40+
children: [],
41+
parent: {},
42+
isActive: false,
43+
idDrag: '',
44+
idDrop: ''
45+
}
46+
47+
const newState = {
48+
componentMap: {
49+
App: {
50+
componentName: 'App',
51+
children: ['HomeView'],
52+
htmlList: []
53+
},
54+
HomeView: {
55+
componentName: 'HomeView',
56+
children: ['a'],
57+
children: [],
58+
htmlList: []
59+
},
60+
a: hardA
61+
},
62+
routes: {
63+
HomeView: [hardA],
64+
NewView: []
65+
},
66+
componentNameInputValue: '',
67+
activeRoute: 'HomeView',
68+
activeComponent: '',
69+
activeHTML: '',
70+
activeLayer: {
71+
id:'',
72+
lineage:[]
73+
},
74+
selectedIdDrag: '',
75+
selectedIdDrop: '',
76+
selectedElementList: [],
77+
}
78+
79+
describe("Tests for html elements drag-and-drop functionality", () => {
80+
81+
describe("Test drag and drop functionality in active components", () => {
82+
let state;
83+
beforeEach(() => {
84+
state = newState;
85+
state.activeComponent = 'a';
86+
hardA.htmlList = aHtmlList;
87+
state.componentMap.a = hardA;
88+
});
89+
90+
afterEach(() => {
91+
state = newState;
92+
state.activeComponent = 'a';
93+
hardA.htmlList = aHtmlList;
94+
state.componentMap.a = hardA;
95+
});
96+
it("identify the id of the html element being dragged", () => {
97+
mutations[types.SET_ID_DRAG](state, hardA.htmlList[0].id);
98+
expect(state.componentMap[hardA.componentName].idDrag).toBe(hardA.htmlList[0].id);
99+
});
100+
101+
it("identify the id of the html element the dragged html element is dropped over", () => {
102+
mutations[types.SET_ID_DROP](state, hardA.htmlList[2].id);
103+
expect(state.componentMap[hardA.componentName].idDrop).toBe(hardA.htmlList[2].id);
104+
});
105+
106+
it("dropped html element is moved to location it was dropped", () => {
107+
mutations[types.SET_ID_DRAG](state, hardA.htmlList[0].id);
108+
mutations[types.SET_ID_DROP](state, hardA.htmlList[2].id);
109+
mutations[types.DRAG_DROP_SORT_HTML_ELEMENTS](state);
110+
expect(state.componentMap[hardA.componentName].htmlList[2].text).toBe('div');
111+
})
112+
113+
it("remainder html elements are still in order", () => {
114+
mutations[types.SET_ID_DRAG](state, hardA.htmlList[0].id);
115+
mutations[types.SET_ID_DROP](state, hardA.htmlList[2].id);
116+
mutations[types.DRAG_DROP_SORT_HTML_ELEMENTS](state);
117+
expect(state.componentMap[hardA.componentName].htmlList[0].text).toBe('img');
118+
expect(state.componentMap[hardA.componentName].htmlList[1].text).toBe('paragraph');
119+
expect(state.componentMap[hardA.componentName].htmlList[2].text).toBe('div');
120+
})
121+
122+
it("idDrag and idDrop is reset to '' ", () => {
123+
mutations[types.SET_ID_DRAG](state, hardA.htmlList[0].id);
124+
mutations[types.SET_ID_DROP](state, hardA.htmlList[2].id);
125+
mutations[types.DRAG_DROP_SORT_HTML_ELEMENTS](state);
126+
expect(state.componentMap[hardA.componentName].idDrag).toBe('');
127+
expect(state.componentMap[hardA.componentName].idDrop).toBe('');
128+
})
129+
130+
});
131+
132+
describe("Test drag and drop functionality in the CreateMenu", () => {
133+
let state;
134+
beforeEach(() => {
135+
state = newState;
136+
state.selectedElementList = [
137+
{
138+
text: 'div',
139+
children:[],
140+
id:Date.now() + 1
141+
},
142+
{
143+
children:[],
144+
text:'img',
145+
id:Date.now() + 2
146+
},
147+
{
148+
children:[],
149+
text: 'paragraph',
150+
id:Date.now() + 3
151+
}];
152+
});
153+
154+
afterEach(() => {
155+
state = newState;
156+
state.selectedElementList = [
157+
{
158+
text: 'div',
159+
children:[],
160+
id:Date.now() + 1
161+
},
162+
{
163+
children:[],
164+
text:'img',
165+
id:Date.now() + 2
166+
},
167+
{
168+
children:[],
169+
text: 'paragraph',
170+
id:Date.now() + 3
171+
}];
172+
});
173+
it("identify the id of the html element being dragged", () => {
174+
mutations[types.SET_SELECTED_ID_DRAG](state, state.selectedElementList[0].id);
175+
expect(state.selectedIdDrag).toBe(state.selectedElementList[0].id);
176+
177+
});
178+
179+
it("identify the id of the html element the dragged html element is dropped over", () => {
180+
mutations[types.SET_SELECTED_ID_DROP](state, state.selectedElementList[2].id);
181+
expect(state.selectedIdDrop).toBe(state.selectedElementList[2].id);
182+
});
183+
184+
it("dropped html element is moved to location it was dropped", () => {
185+
mutations[types.SET_SELECTED_ID_DRAG](state, state.selectedElementList[0].id);
186+
mutations[types.SET_SELECTED_ID_DROP](state, state.selectedElementList[2].id);
187+
mutations[types.DRAG_DROP_SORT_SELECTED_HTML_ELEMENTS](state);
188+
expect(state.selectedElementList[2].text).toBe('div');
189+
})
190+
191+
it("remainder html elements are still in order", () => {
192+
mutations[types.SET_SELECTED_ID_DRAG](state, state.selectedElementList[0].id);
193+
mutations[types.SET_SELECTED_ID_DROP](state, state.selectedElementList[2].id);
194+
mutations[types.DRAG_DROP_SORT_SELECTED_HTML_ELEMENTS](state);
195+
expect(state.selectedElementList[0].text).toBe('img');
196+
expect(state.selectedElementList[1].text).toBe('paragraph');
197+
expect(state.selectedElementList[2].text).toBe('div');
198+
})
199+
200+
it("selectedIdDDrag and selectedIdDrop is reset to '' ", () => {
201+
mutations[types.SET_SELECTED_ID_DRAG](state, state.selectedElementList[0].id);
202+
mutations[types.SET_SELECTED_ID_DROP](state, state.selectedElementList[2].id);
203+
mutations[types.DRAG_DROP_SORT_SELECTED_HTML_ELEMENTS](state);
204+
expect(state.selectedIdDrag).toBe('');
205+
expect(state.selectedIdDrop).toBe('');
206+
})
207+
});
208+
209+
})

0 commit comments

Comments
 (0)