Skip to content

Commit 2494646

Browse files
Merge pull request #7 from oslabs-beta/huyBranch
integrated code preview functionality for adding contexts
2 parents b5d0cef + d6bb891 commit 2494646

File tree

16 files changed

+696
-191
lines changed

16 files changed

+696
-191
lines changed

__tests__/contextReducer.test.js

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
import subject from '../app/src/redux/reducers/slice/contextReducer';
2+
3+
describe('Context Reducer', () => {
4+
let state;
5+
6+
beforeEach(() => {
7+
state = {
8+
allContext: []
9+
};
10+
});
11+
12+
describe('default state', () => {
13+
it('should return a default state when given an undefined input', () => {
14+
expect(subject(undefined, { type: undefined })).toEqual(state);
15+
});
16+
});
17+
18+
describe('unrecognized action types', () => {
19+
it('should return the original state without any duplication', () => {
20+
expect(subject(state, { type: 'REMOVE_STATE' })).toBe(state);
21+
});
22+
});
23+
24+
describe('ADD_CONTEXT', () => {
25+
const action = {
26+
type: 'ADD_CONTEXT',
27+
payload: {
28+
name: 'Theme Context'
29+
}
30+
};
31+
32+
it('adds a context', () => {
33+
const { allContext } = subject(state, action);
34+
expect(allContext[0]).toEqual({
35+
name: 'Theme Context',
36+
values: [],
37+
components: []
38+
});
39+
});
40+
41+
it('returns a state object not strictly equal to the original', () => {
42+
const newState = subject(state, action);
43+
expect(newState).not.toBe(state);
44+
});
45+
46+
it('should immutably update the nested state object', () => {
47+
const { allContext } = subject(state, action);
48+
expect(allContext).not.toBe(state.allContext);
49+
});
50+
});
51+
52+
describe('ADD_CONTEXT_VALUES', () => {
53+
beforeEach(() => {
54+
state = {
55+
allContext: [
56+
{
57+
name: 'Theme Context',
58+
values: [],
59+
components: []
60+
}
61+
]
62+
};
63+
});
64+
65+
const action = {
66+
type: 'ADD_CONTEXT_VALUES',
67+
payload: {
68+
name: 'Theme Context',
69+
inputKey: 'Theme Color',
70+
inputValue: 'Dark'
71+
}
72+
};
73+
74+
it('adds a key-value pair to values array of the specified context', () => {
75+
const { allContext } = subject(state, action);
76+
expect(allContext[0].values.length).toEqual(1);
77+
expect(allContext[0].values[0].key).toEqual('Theme Color');
78+
expect(allContext[0].values[0].value).toEqual('Dark');
79+
});
80+
81+
it('includes an allContext not strictly equal to the original', () => {
82+
const { allContext } = subject(state, action);
83+
84+
expect(allContext).not.toBe(state.allContext);
85+
});
86+
});
87+
88+
describe('DELETE CONTEXT', () => {
89+
let action;
90+
beforeEach(() => {
91+
state = {
92+
allContext: [
93+
{
94+
name: 'Theme Context',
95+
values: [],
96+
components: []
97+
},
98+
{
99+
name: 'To be deleted',
100+
values: [],
101+
components: []
102+
}
103+
]
104+
};
105+
106+
action = {
107+
type: 'DELETE_CONTEXT',
108+
payload: {
109+
name: 'Theme Context'
110+
}
111+
};
112+
});
113+
114+
it('removes specified context from the state', () => {
115+
const { allContext } = subject(state, action);
116+
117+
expect(allContext.length).toEqual(1);
118+
});
119+
120+
it('includes an allContext not strictly equal to the original', () => {
121+
const { allContext } = subject(state, action);
122+
123+
expect(allContext).not.toBe(state.allContext);
124+
});
125+
});
126+
127+
describe('ADD_COMPONENT_TO_CONTEXT', () => {
128+
beforeEach(() => {
129+
state = {
130+
allContext: [
131+
{
132+
name: 'Theme Context',
133+
values: [],
134+
components: []
135+
}
136+
]
137+
};
138+
});
139+
140+
const action = {
141+
type: 'ADD_COMPONENT_TO_CONTEXT',
142+
payload: {
143+
context: {
144+
name: 'Theme Context'
145+
},
146+
component: {
147+
name: 'Main Component'
148+
}
149+
}
150+
};
151+
152+
it('adds a new component to the specified context', () => {
153+
const { allContext } = subject(state, action);
154+
155+
expect(allContext[0].components.length).toEqual(1);
156+
expect(allContext[0].components[0]).toEqual('Main Component');
157+
});
158+
159+
it('includes an allContext not strictly equal to the original', () => {
160+
const { allContext } = subject(state, action);
161+
162+
expect(allContext).not.toBe(state.allContext);
163+
});
164+
});
165+
});

__tests__/contextReducer.test.ts

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
import subject from '../app/src/redux/reducers/slice/contextReducer';
2+
3+
describe('Context Reducer', () => {
4+
let state;
5+
6+
beforeEach(() => {
7+
state = {
8+
allContext: []
9+
};
10+
});
11+
12+
describe('default state', () => {
13+
it('should return a default state when given an undefined input', () => {
14+
expect(subject(undefined, { type: undefined })).toEqual(state);
15+
});
16+
});
17+
18+
describe('unrecognized action types', () => {
19+
it('should return the original state without any duplication', () => {
20+
expect(subject(state, { type: 'REMOVE_STATE' })).toBe(state);
21+
});
22+
});
23+
24+
describe('ADD_CONTEXT', () => {
25+
const action = {
26+
type: 'ADD_CONTEXT',
27+
payload: {
28+
name: 'Theme Context'
29+
}
30+
};
31+
32+
it('adds a context', () => {
33+
const { allContext } = subject(state, action);
34+
expect(allContext[0]).toEqual({
35+
name: 'Theme Context',
36+
values: [],
37+
components: []
38+
});
39+
});
40+
41+
it('returns a state object not strictly equal to the original', () => {
42+
const newState = subject(state, action);
43+
expect(newState).not.toBe(state);
44+
});
45+
46+
it('should immutably update the nested state object', () => {
47+
const { allContext } = subject(state, action);
48+
expect(allContext).not.toBe(state.allContext);
49+
});
50+
});
51+
52+
describe('ADD_CONTEXT_VALUES', () => {
53+
beforeEach(() => {
54+
state = {
55+
allContext: [
56+
{
57+
name: 'Theme Context',
58+
values: [],
59+
components: []
60+
}
61+
]
62+
};
63+
});
64+
65+
const action = {
66+
type: 'ADD_CONTEXT_VALUES',
67+
payload: {
68+
name: 'Theme Context',
69+
inputKey: 'Theme Color',
70+
inputValue: 'Dark'
71+
}
72+
};
73+
74+
it('adds a key-value pair to values array of the specified context', () => {
75+
const { allContext } = subject(state, action);
76+
expect(allContext[0].values.length).toEqual(1);
77+
expect(allContext[0].values[0].key).toEqual('Theme Color');
78+
expect(allContext[0].values[0].value).toEqual('Dark');
79+
});
80+
81+
it('includes an allContext not strictly equal to the original', () => {
82+
const { allContext } = subject(state, action);
83+
84+
expect(allContext).not.toBe(state.allContext);
85+
});
86+
});
87+
88+
describe('DELETE CONTEXT', () => {
89+
let action;
90+
beforeEach(() => {
91+
state = {
92+
allContext: [
93+
{
94+
name: 'Theme Context',
95+
values: [],
96+
components: []
97+
},
98+
{
99+
name: 'To be deleted',
100+
values: [],
101+
components: []
102+
}
103+
]
104+
};
105+
106+
action = {
107+
type: 'DELETE_CONTEXT',
108+
payload: {
109+
name: 'Theme Context'
110+
}
111+
};
112+
});
113+
114+
it('removes specified context from the state', () => {
115+
const { allContext } = subject(state, action);
116+
117+
expect(allContext.length).toEqual(1);
118+
});
119+
120+
it('includes an allContext not strictly equal to the original', () => {
121+
const { allContext } = subject(state, action);
122+
123+
expect(allContext).not.toBe(state.allContext);
124+
});
125+
});
126+
127+
describe('ADD_COMPONENT_TO_CONTEXT', () => {
128+
beforeEach(() => {
129+
state = {
130+
allContext: [
131+
{
132+
name: 'Theme Context',
133+
values: [],
134+
components: []
135+
}
136+
]
137+
};
138+
});
139+
140+
const action = {
141+
type: 'ADD_COMPONENT_TO_CONTEXT',
142+
payload: {
143+
context: {
144+
name: 'Theme Context'
145+
},
146+
component: {
147+
name: 'Main Component'
148+
}
149+
}
150+
};
151+
152+
it('adds a new component to the specified context', () => {
153+
const { allContext } = subject(state, action);
154+
155+
expect(allContext[0].components.length).toEqual(1);
156+
expect(allContext[0].components[0]).toEqual('Main Component');
157+
});
158+
159+
it('includes an allContext not strictly equal to the original', () => {
160+
const { allContext } = subject(state, action);
161+
162+
expect(allContext).not.toBe(state.allContext);
163+
});
164+
});
165+
});

app/src/components/App.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -49,16 +49,16 @@ export const App = (): JSX.Element => {
4949
} else {
5050
console.log(
5151
'No user project found in localforage, setting initial state blank'
52-
);
53-
}
54-
});
55-
}
56-
}, []);
52+
);
53+
}
54+
});
55+
}
56+
}, []);
5757
useEffect(() => {
5858
// provide config properties to legacy projects so new edits can be auto saved
5959
if (state.config === undefined) {
60-
state.config = {saveFlag:true, saveTimer:false};
61-
};
60+
state.config = { saveFlag: true, saveTimer: false };
61+
}
6262
// New project save configuration to optimize server load and minimize Ajax requests
6363
if (state.config.saveFlag) {
6464
state.config.saveFlag = false;
@@ -82,7 +82,7 @@ export const App = (): JSX.Element => {
8282
state.config.saveFlag = true;
8383
}, 15000);
8484
}
85-
}, [state])
85+
}, [state]);
8686
return (
8787
<div className="app">
8888
<DndProvider backend={HTML5Backend}>

0 commit comments

Comments
 (0)