Skip to content

Commit 72cc6b4

Browse files
neferin12neferin12
authored
Merge pull request #92 from educorvi/tests
Tests
2 parents 19f4716 + e10fd44 commit 72cc6b4

File tree

6 files changed

+251
-54
lines changed

6 files changed

+251
-54
lines changed

‎vue-json-form/cypress.config.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { defineConfig } from 'cypress';
2+
import { plugin as cypressGrepPlugin } from '@cypress/grep/plugin';
23

34
const registerCommonTasks = (
45
on: Cypress.PluginEvents,
5-
config: Cypress.PluginConfigOptions,
6+
config: Cypress.PluginConfigOptions
67
) => {
78
on('task', {
89
log(message) {
@@ -32,6 +33,7 @@ export default defineConfig({
3233

3334
e2e: {
3435
setupNodeEvents(on, config) {
36+
cypressGrepPlugin(config);
3537
return registerCommonTasks(on, config);
3638
},
3739
},

‎vue-json-form/cypress/e2e/reproduce.cy.ts‎

Lines changed: 173 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,168 @@
11
/// <reference types="cypress" />
2+
import { register as registerCypressGrep } from '@cypress/grep';
3+
registerCypressGrep();
24

35
function submitForm() {
46
cy.get('button[type="submit"]').eq(-3).click();
57
}
68

7-
it('JSO-43', function () {
9+
const WAIT_TIME = 150;
10+
11+
const expectSelectOptions = (selector: string, expectedValues: string[]) => {
12+
cy.get(`${selector} option`)
13+
.should('have.length', expectedValues.length)
14+
.each(($option, index) => {
15+
expect($option.attr('value')).to.equal(expectedValues[index]);
16+
});
17+
};
18+
19+
it('JSO-43', () => {
20+
const BOOL_FIELD = '#vjf_control_for__properties_jso-43_properties_bool';
21+
const HALLO_FIELD =
22+
'#vjf_control_for__properties_jso-43_properties_hallo input[value="du"]';
23+
const HALLO_FIELD_ICH =
24+
'#vjf_control_for__properties_jso-43_properties_hallo input[value="ich"]';
25+
const REQUIRED_FIELD =
26+
'#vjf_control_for__properties_jso-43_properties_abhaengiges-feld';
27+
const REQUIRED_LABEL =
28+
'label[for="vjf_control_for__properties_jso-43_properties_abhaengiges-feld"]';
29+
30+
cy.visit('http://localhost:5173/reproduce?nonav=true');
31+
cy.get(REQUIRED_FIELD).should('not.exist');
32+
33+
cy.get(BOOL_FIELD).check({ force: true });
34+
cy.get(REQUIRED_FIELD).should('exist').and('have.attr', 'required');
35+
cy.get(REQUIRED_LABEL).should('contain.text', '*');
36+
37+
cy.get(BOOL_FIELD).uncheck({ force: true });
38+
cy.get(HALLO_FIELD_ICH).check({ force: true });
39+
cy.get(REQUIRED_FIELD).should('not.exist');
40+
41+
cy.get(HALLO_FIELD).check({ force: true });
42+
cy.get(REQUIRED_FIELD).should('exist').and('have.attr', 'required');
43+
cy.get(REQUIRED_LABEL).should('contain.text', '*');
44+
45+
cy.get(REQUIRED_FIELD).type('Hallo Pflichtfeld');
46+
submitForm();
47+
cy.get('#result-container').then((el) => {
48+
const res = JSON.parse(el.text());
49+
expect(res['jso-43']['abhaengiges-feld']).to.equal('Hallo Pflichtfeld');
50+
expect(res['jso-43']['hallo']).to.equal('du');
51+
});
52+
});
53+
54+
it('JSO-79 (I)', () => {
55+
const FIRST_SELECT = '#vjf_control_for__properties_jso-79_properties_first';
56+
const SECOND_SELECT =
57+
'#vjf_control_for__properties_jso-79_properties_second';
58+
59+
cy.visit('http://localhost:5173/reproduce?nonav=true');
60+
61+
// Initial state: all options should be available
62+
expectSelectOptions(SECOND_SELECT, ['a1', 'a2', 'b1']);
63+
64+
// Select 'A': only 'a' options should be available
65+
cy.get(FIRST_SELECT).select('A');
66+
cy.wait(WAIT_TIME);
67+
expectSelectOptions(SECOND_SELECT, ['a1', 'a2']);
68+
69+
// Select 'B': only 'b' options should be available
70+
cy.get(FIRST_SELECT).select('B');
71+
cy.wait(WAIT_TIME);
72+
expectSelectOptions(SECOND_SELECT, ['b1']);
73+
74+
cy.get(FIRST_SELECT).select('A');
75+
cy.get(SECOND_SELECT).select('a1');
76+
cy.get(FIRST_SELECT).select('B');
77+
cy.wait(WAIT_TIME);
78+
submitForm();
79+
cy.get('#result-container').then((el) => {
80+
let res = JSON.parse(el.text());
81+
expect(res['jso-79']['second']).to.be.undefined;
82+
});
83+
});
84+
85+
it('JSO-79-II', () => {
86+
const BASE = '#vjf_control_for__properties_jso-79-ii_properties';
87+
const INDEPENDENT_SELECT = `${BASE}_unabhaengige-frage`;
88+
const DEPENDENT_SELECT = `${BASE}_abhaengige-frage`;
89+
const NAME_SELECT = `${BASE}_wie-heisst-du`;
90+
91+
cy.visit('http://localhost:5173/reproduce?nonav=true');
92+
93+
expectSelectOptions(DEPENDENT_SELECT, ['1', '2', '3']);
94+
95+
cy.get(INDEPENDENT_SELECT).select('a');
96+
cy.wait(WAIT_TIME);
97+
expectSelectOptions(DEPENDENT_SELECT, ['1', '3']);
98+
99+
cy.get(DEPENDENT_SELECT).select('1');
100+
101+
cy.get(NAME_SELECT).select('Henrik');
102+
cy.wait(WAIT_TIME);
103+
expectSelectOptions(DEPENDENT_SELECT, ['2', '3']);
104+
cy.get(DEPENDENT_SELECT).should('have.value', null);
105+
106+
cy.get(DEPENDENT_SELECT).select('3');
107+
submitForm();
108+
cy.get('#result-container').then((el) => {
109+
const res = JSON.parse(el.text());
110+
expect(res['jso-79-ii']['unabhaengige-frage']).to.equal('a');
111+
expect(res['jso-79-ii']['wie-heisst-du']).to.equal('Henrik');
112+
expect(res['jso-79-ii']['abhaengige-frage']).to.equal('3');
113+
});
114+
});
115+
116+
it('JSO-79-III', () => {
117+
const BASE = '#vjf_control_for__properties_jso-79-iii_properties';
118+
const INDEPENDENT_GROUP = `${BASE}_unabhaengige-frage`;
119+
const DEPENDENT_SELECT = `${BASE}_abhaengige-frage`;
120+
const NAME_SELECT = `${BASE}_wie-heisst-du`;
121+
122+
const toggleIndependent = (value: string, checked: boolean) => {
123+
const selector = `${INDEPENDENT_GROUP} input[value="${value}"]`;
124+
if (checked) {
125+
cy.get(selector).check({ force: true });
126+
} else {
127+
cy.get(selector).uncheck({ force: true });
128+
}
129+
};
130+
131+
cy.visit('http://localhost:5173/reproduce?nonav=true');
132+
133+
expectSelectOptions(DEPENDENT_SELECT, ['3']);
134+
135+
toggleIndependent('a', true);
136+
cy.wait(WAIT_TIME);
137+
expectSelectOptions(DEPENDENT_SELECT, ['3', '1']);
138+
139+
cy.get(NAME_SELECT).select('Henrik');
140+
cy.wait(WAIT_TIME);
141+
expectSelectOptions(DEPENDENT_SELECT, ['2', '3', '1']);
142+
143+
toggleIndependent('a', false);
144+
cy.wait(WAIT_TIME);
145+
expectSelectOptions(DEPENDENT_SELECT, ['2', '3', '1']);
146+
147+
toggleIndependent('b', true);
148+
toggleIndependent('c', true);
149+
cy.wait(WAIT_TIME);
150+
expectSelectOptions(DEPENDENT_SELECT, ['2', '3', '1', '4']);
151+
152+
cy.get(DEPENDENT_SELECT).select('4');
153+
submitForm();
154+
cy.get('#result-container').then((el) => {
155+
const res = JSON.parse(el.text());
156+
expect(res['jso-79-iii']['unabhaengige-frage']).to.deep.equal([
157+
'b',
158+
'c',
159+
]);
160+
expect(res['jso-79-iii']['wie-heisst-du']).to.equal('Henrik');
161+
expect(res['jso-79-iii']['abhaengige-frage']).to.equal('4');
162+
});
163+
});
164+
165+
it('JSO-79-IV', () => {
8166
cy.visit('http://localhost:5173/reproduce?nonav=true');
9167
cy.get('#vjf_control_for__properties_string-dep-required-2').should(
10168
'not.have.attr',
@@ -33,45 +191,23 @@ it('JSO-43', function () {
33191
).should('not.include.text', '*');
34192
});
35193

36-
it('JSO-79 (IfThenElse)', () => {
37-
const FIRST_SELECT = '#vjf_control_for__properties_jso-79_properties_first';
38-
const SECOND_SELECT =
39-
'#vjf_control_for__properties_jso-79_properties_second';
40-
const WAIT_TIME = 150;
41-
42-
const validateSelectOptions = (
43-
selector: string,
44-
expectedValues: string[]
45-
) => {
46-
cy.get(`${selector} option`).each((option) => {
47-
expect(option.attr('value')).to.be.oneOf(expectedValues);
48-
});
49-
};
194+
it('JSO-68', () => {
195+
const ARRAY_CONTAINER = '#vjf_control_for__properties_multiFileUpload1';
196+
const SINGLE_UPLOAD = '#vjf_control_for__properties_multiFileUpload2';
50197

51198
cy.visit('http://localhost:5173/reproduce?nonav=true');
52199

53-
// Initial state: all options should be available
54-
validateSelectOptions(SECOND_SELECT, ['a1', 'a2', 'b1']);
55-
56-
// Select 'A': only 'a' options should be available
57-
cy.get(FIRST_SELECT).select('A');
58-
cy.wait(WAIT_TIME);
59-
validateSelectOptions(SECOND_SELECT, ['a1', 'a2']);
60-
61-
// Select 'B': only 'b' options should be available
62-
cy.get(FIRST_SELECT).select('B');
63-
cy.wait(WAIT_TIME);
64-
validateSelectOptions(SECOND_SELECT, ['b1']);
65-
66-
cy.get(FIRST_SELECT).select('A');
67-
cy.get(SECOND_SELECT).select('a1');
68-
cy.get(FIRST_SELECT).select('B');
69-
cy.wait(WAIT_TIME);
70-
submitForm();
71-
cy.get('#result-container').then((el) => {
72-
let res = JSON.parse(el.text());
73-
expect(res['jso-79']['second']).to.be.undefined;
74-
});
200+
cy.get(ARRAY_CONTAINER).should('exist').and('have.class', 'vjf_array');
201+
cy.get(`${ARRAY_CONTAINER} button[aria-label="Add Item"]`).should('exist');
202+
203+
cy.get(SINGLE_UPLOAD)
204+
.should('exist')
205+
.and('have.attr', 'type', 'file')
206+
.and('have.attr', 'multiple');
207+
cy.get(SINGLE_UPLOAD)
208+
.parents('.vjf_control')
209+
.find('.vjf_array')
210+
.should('not.exist');
75211
});
76212

77213
it('Pattern string', () => {

‎vue-json-form/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@
6565
"vuedraggable": "^4.1.0"
6666
},
6767
"devDependencies": {
68+
"@cypress/grep": "^5.0.0",
6869
"@educorvi/vue-json-form-ajv-validator": "workspace:^",
6970
"@rushstack/eslint-patch": "^1.14.1",
7071
"@semantic-release/exec": "^7.1.0",

‎vue-json-form/src/components/LayoutElements/Control.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -233,7 +233,8 @@ const htmlMessages = computed(() => {
233233
return messages;
234234
});
235235
236-
const required = getComputedRequired(ref(formStructureMapped.value.uiElement));
236+
const mappedUiElement = computed(() => formStructureMapped.value.uiElement);
237+
const required = getComputedRequired(mappedUiElement);
237238
238239
let additionalHiddenClass = formStructureMapped.value.uiElement.options?.hidden
239240
? 'hiddenControl'
@@ -262,7 +263,7 @@ provide(savePathOverrideProviderKey, undefined);
262263
263264
const control_id_string = controlID(savePath);
264265
265-
const label = computedLabel(toRef(() => formStructureMapped.value.uiElement));
266+
const label = computedLabel(mappedUiElement);
266267
267268
/**
268269
* The type of the control

‎vue-json-form/src/exampleSchemas/reproduce/ui.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@
7474
},
7575
{
7676
"type": "Group",
77-
"options": { "label": "JSO-79" },
77+
"options": { "label": "JSO-79-iv" },
7878
"elements": [
7979
{
8080
"type": "Control",

0 commit comments

Comments
 (0)