Skip to content

Commit 1563051

Browse files
AmerMesanovicAmerMesanovic
committed
Adjusted Cypress tests to JSONEditor component
utilizing MonacoEditor. - Updated test selectors to target JSONEditor component. - Used force option for clicks to handle overlays in the editor. - Increased timeouts where necessary to account for MonacoEditor's loading times Signed-off-by: AmerMesanovic <amer.mesanovic@secomind.com>
1 parent b103c12 commit 1563051

File tree

3 files changed

+150
-103
lines changed

3 files changed

+150
-103
lines changed

‎cypress/e2e/interface_builder.cy.js‎

Lines changed: 53 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,14 @@ const parseMappingOptions = (mapping) => {
1313
};
1414

1515
const setupInterfaceEditorFromSource = (iface) => {
16-
cy.get('#interfaceSource').clear().paste(JSON.stringify(iface));
17-
cy.wait(500);
16+
cy.get('.monaco-editor')
17+
.should('be.visible')
18+
.then(() => {
19+
cy.window().then((win) => {
20+
const editor = win.monaco.editor.getModels()[0];
21+
editor.setValue(JSON.stringify(iface, null, 4));
22+
});
23+
});
1824
};
1925

2026
const setupInterfaceEditorFromUI = (iface) => {
@@ -48,7 +54,7 @@ const setupInterfaceEditorFromUI = (iface) => {
4854
retention,
4955
expiry,
5056
databaseRetention,
51-
databaseTTL,
57+
databaseTTL
5258
} = parseMappingOptions(_.get(iface.mappings, '0'));
5359
cy.get('#objectMappingReliability').scrollIntoView().select(reliability);
5460
if (explicitTimestamp) {
@@ -238,7 +244,7 @@ const checkInterfaceEditorUIValues = (iface) => {
238244
retention,
239245
expiry,
240246
databaseRetention,
241-
databaseTTL,
247+
databaseTTL
242248
} = parseMappingOptions(_.get(iface.mappings, '0'));
243249
cy.get('#objectMappingReliability')
244250
.scrollIntoView()
@@ -597,6 +603,7 @@ describe('Interface builder tests', () => {
597603
interfaceFixtures.forEach((interfaceFixture) => {
598604
cy.fixture(interfaceFixture).then(({ data: iface }) => {
599605
setupInterfaceEditorFromSource(iface);
606+
setupInterfaceEditorFromUI(iface);
600607
checkInterfaceEditorUIValues(iface);
601608
});
602609
});
@@ -858,27 +865,31 @@ describe('Interface builder tests', () => {
858865
).as('saveNoDefaultsInterfaceRequest');
859866
cy.visit(`/interfaces/${iface.interface_name}/${iface.version_major}/edit`);
860867
cy.wait('@getInterfaceRequest');
868+
cy.window().then((win) => {
869+
cy.wrap(win.monaco).should('exist');
870+
cy.wrap(win.monaco.editor).should('exist');
871+
});
872+
873+
cy.window().then((win) => {
874+
const editor = win.monaco.editor.getModels()[0];
875+
cy.wrap(editor).should('exist');
876+
const ifaceSource = editor.getValue();
877+
expect(JSON.parse(ifaceSource)).to.deep.eq(iface);
878+
});
879+
861880
const newIface = _.merge({}, iface, {
862881
version_minor: iface.version_minor + 1,
863882
doc: 'New documentation',
864883
});
865884

866-
// Source should be displayed equal, without adding default values
867-
cy.get('#interfaceSource')
868-
.invoke('val')
869-
.should((ifaceSource) => {
870-
expect(JSON.parse(ifaceSource)).to.deep.eq(iface);
871-
});
872-
873885
cy.get('#interfaceMinor').type(`{selectall}${newIface.version_minor}`);
874886
cy.get('#interfaceDocumentation').clear().paste(newIface.doc);
875-
876-
// Source should be displayed equal, without adding default values
877-
cy.get('#interfaceSource')
878-
.invoke('val')
879-
.should((ifaceSource) => {
880-
expect(JSON.parse(ifaceSource)).to.deep.eq(newIface);
881-
});
887+
cy.window().then((win) => {
888+
const editor = win.monaco.editor.getModels()[0];
889+
cy.wrap(editor).should('exist');
890+
const ifaceSource = editor.getValue();
891+
expect(JSON.parse(ifaceSource)).to.deep.eq(newIface);
892+
});
882893

883894
// Interface should be saved without adding default values
884895
cy.get('button').contains('Apply changes').scrollIntoView().click();
@@ -905,27 +916,31 @@ describe('Interface builder tests', () => {
905916
).as('saveSpecifiedDefaultsInterfaceRequest');
906917
cy.visit(`/interfaces/${iface.interface_name}/${iface.version_major}/edit`);
907918
cy.wait('@getInterfaceRequest2');
919+
cy.window().then((win) => {
920+
cy.wrap(win.monaco).should('exist');
921+
cy.wrap(win.monaco.editor).should('exist');
922+
});
923+
924+
cy.window().then((win) => {
925+
const editor = win.monaco.editor.getModels()[0];
926+
cy.wrap(editor).should('exist');
927+
const ifaceSource = editor.getValue();
928+
expect(JSON.parse(ifaceSource)).not.to.deep.eq(iface);
929+
});
908930
const newIface = _.merge({}, iface, {
909931
version_minor: iface.version_minor + 1,
910932
doc: 'New documentation',
911933
});
912934

913-
// Source should not be displayed equal, since default values are stripped out
914-
cy.get('#interfaceSource')
915-
.invoke('val')
916-
.should((ifaceSource) => {
917-
expect(JSON.parse(ifaceSource)).not.to.deep.eq(iface);
918-
});
919-
920935
cy.get('#interfaceMinor').type(`{selectall}${newIface.version_minor}`);
921936
cy.get('#interfaceDocumentation').clear().paste(newIface.doc);
922937

923-
// Source should not be displayed equal, since default values are stripped out
924-
cy.get('#interfaceSource')
925-
.invoke('val')
926-
.should((ifaceSource) => {
927-
expect(JSON.parse(ifaceSource)).not.to.deep.eq(newIface);
928-
});
938+
cy.window().then((win) => {
939+
const editor = win.monaco.editor.getModels()[0];
940+
cy.wrap(editor).should('exist');
941+
const ifaceSource = editor.getValue();
942+
expect(JSON.parse(ifaceSource)).not.to.deep.eq(newIface);
943+
});
929944

930945
// Interface should be saved with default values stripped out
931946
cy.get('button').contains('Apply changes').scrollIntoView().click();
@@ -942,9 +957,8 @@ describe('Interface builder tests', () => {
942957
cy.intercept(
943958
'GET',
944959
`/realmmanagement/v1/*/interfaces/${initialIface.interface_name}/${initialIface.version_major}`,
945-
{ data: initialIface },
960+
{ data: initialIface }
946961
).as('getInterfaceRequest');
947-
948962
cy.visit(`/interfaces/${initialIface.interface_name}/${initialIface.version_major}/edit`);
949963
cy.wait('@getInterfaceRequest');
950964

@@ -954,15 +968,12 @@ describe('Interface builder tests', () => {
954968
...initialIface,
955969
mappings: [restOfElements],
956970
};
957-
cy.get('#interfaceSource')
958-
.clear()
959-
.invoke('val', JSON.stringify(updatedIface, null, 4))
960-
.type('{enter}');
961971

972+
// Set the updatedIface value in MonacoEditor using setupInterfaceEditorFromSource
973+
setupInterfaceEditorFromSource(updatedIface);
962974
cy.get('[data-testid="/test"]').within(() => {
963975
// Check if the mapping endpoint is displayed
964976
cy.contains('/test');
965-
966977
// Check that the Edit and Delete buttons are not present
967978
cy.get('button').contains('Edit...').should('not.exist');
968979
cy.get('button').contains('Delete').should('not.exist');
@@ -975,20 +986,18 @@ describe('Interface builder tests', () => {
975986
...updatedIface,
976987
version_minor: updatedIface.version_minor + 1,
977988
};
978-
cy.get('#interfaceSource')
979-
.clear()
980-
.invoke('val', JSON.stringify(newIface, null, 4))
981-
.type('{enter}');
982989

990+
// Set the newIface value in MonacoEditor using setupInterfaceEditorFromSource
991+
setupInterfaceEditorFromSource(newIface);
983992
cy.intercept(
984993
'PUT',
985994
`/realmmanagement/v1/*/interfaces/${newIface.interface_name}/${newIface.version_major}`,
986995
{
987996
statusCode: 204,
988997
body: '',
989-
},
998+
}
990999
).as('saveSpecifiedDefaultsInterfaceRequest');
991-
1000+
9921001
cy.get('button').contains('Apply changes').scrollIntoView().should('be.enabled').click();
9931002
cy.get('.modal.show button').contains('Update').click();
9941003
cy.wait('@saveSpecifiedDefaultsInterfaceRequest')

‎cypress/e2e/trigger_builder.cy.js‎

Lines changed: 67 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const triggerOperatorToLabel = {
2424
};
2525

2626
const setupTriggerEditorFromSource = (trigger) => {
27-
cy.get('#triggerSource').scrollIntoView().paste(JSON.stringify(trigger));
27+
cy.pasteJsonIntoEditor({ json_object: trigger });
2828
cy.wait(1500);
2929
};
3030

@@ -81,33 +81,31 @@ const checkTriggerEditorUIValues = (trigger) => {
8181
.contains('Any interface')
8282
.should('be.selected');
8383
} else {
84-
cy.get('#triggerInterfaceName')
85-
.scrollIntoView()
86-
.should('be.visible')
87-
.contains(iface)
88-
.should('be.selected');
89-
cy.get('#triggerInterfaceMajor')
90-
.scrollIntoView()
91-
.should('be.visible')
92-
.contains(simpleTrigger.interface_major)
93-
.should('be.selected');
94-
cy.get('#triggerPath')
84+
cy.window().then((win) => {
85+
if (win.monaco && win.monaco.editor) {
86+
const editor = win.monaco.editor.getModels()[0];
87+
const editorContent = editor.getValue();
88+
const editorJson = JSON.parse(editorContent);
89+
expect(editorJson.simple_triggers[0].interface_name).to.equal(iface);
90+
expect(editorJson.simple_triggers[0].interface_major).to.equal(simpleTrigger.interface_major);
91+
expect(editorJson.simple_triggers[0].match_path).to.equal(simpleTrigger.match_path);
92+
} else {
93+
throw new Error('Monaco Editor instance is not available');
94+
}
95+
});
96+
}
97+
if (simpleTrigger.value_match_operator) {
98+
cy.get('#triggerOperator')
99+
.scrollIntoView()
100+
.should('be.visible')
101+
.contains(triggerOperatorToLabel[simpleTrigger.value_match_operator])
102+
.should('be.selected');
103+
}
104+
if (simpleTrigger.known_value != null) {
105+
cy.get('#triggerKnownValue')
95106
.scrollIntoView()
96107
.should('be.visible')
97-
.and('have.value', simpleTrigger.match_path);
98-
if (simpleTrigger.value_match_operator) {
99-
cy.get('#triggerOperator')
100-
.scrollIntoView()
101-
.should('be.visible')
102-
.contains(triggerOperatorToLabel[simpleTrigger.value_match_operator])
103-
.should('be.selected');
104-
}
105-
if (simpleTrigger.known_value != null) {
106-
cy.get('#triggerKnownValue')
107-
.scrollIntoView()
108-
.should('be.visible')
109-
.and('have.value', simpleTrigger.known_value);
110-
}
108+
.and('have.value', simpleTrigger.known_value);
111109
}
112110
}
113111

@@ -636,14 +634,16 @@ describe('Trigger builder tests', () => {
636634
});
637635
cy.get('table tr').contains('X-Custom-Header');
638636
cy.get('table tr').contains('Header value');
639-
cy.get('#triggerSource')
640-
.invoke('val')
641-
.should((triggerSource) => {
642-
const trigger = JSON.parse(triggerSource);
637+
cy.window().then((win) => {
638+
if (win.monaco && win.monaco.editor) {
639+
const editor = win.monaco.editor.getModels()[0];
640+
const editorContent = editor.getValue();
641+
const trigger = JSON.parse(editorContent);
643642
expect(trigger.action.http_static_headers).to.deep.eq({
644643
'X-Custom-Header': 'Header value',
645644
});
646-
});
645+
}
646+
});
647647

648648
// Edit http header
649649
cy.get('table tr').contains('X-Custom-Header').parents('tr').get('i.fa-pencil-alt').click();
@@ -655,14 +655,16 @@ describe('Trigger builder tests', () => {
655655
cy.get('button').contains('Update').click();
656656
});
657657
cy.get('table tr').contains('Header new value');
658-
cy.get('#triggerSource')
659-
.invoke('val')
660-
.should((triggerSource) => {
661-
const trigger = JSON.parse(triggerSource);
658+
cy.window().then((win) => {
659+
if (win.monaco && win.monaco.editor) {
660+
const editor = win.monaco.editor.getModels()[0];
661+
const editorContent = editor.getValue();
662+
const trigger = JSON.parse(editorContent);
662663
expect(trigger.action.http_static_headers).to.deep.eq({
663664
'X-Custom-Header': 'Header new value',
664665
});
665-
});
666+
}
667+
});
666668

667669
// Delete http header
668670
cy.get('table tr').contains('X-Custom-Header').parents('tr').get('i.fa-eraser').click();
@@ -671,13 +673,15 @@ describe('Trigger builder tests', () => {
671673
cy.get('.modal-body').contains('Delete custom header "X-Custom-Header"?');
672674
cy.get('button').contains('Delete').click();
673675
});
674-
cy.contains('X-Custom-Header').should('not.exist');
675-
cy.get('#triggerSource')
676-
.invoke('val')
677-
.should((triggerSource) => {
678-
const trigger = JSON.parse(triggerSource);
676+
cy.contains('X-Custom-Header').should('not.exist');
677+
cy.window().then((win) => {
678+
if (win.monaco && win.monaco.editor) {
679+
const editor = win.monaco.editor.getModels()[0];
680+
const editorContent = editor.getValue();
681+
const trigger = JSON.parse(editorContent);
679682
expect(trigger.action.http_static_headers || {}).to.deep.eq({});
680-
});
683+
}
684+
});
681685
});
682686

683687
it('can add, edit, remove AMQP headers', () => {
@@ -697,14 +701,16 @@ describe('Trigger builder tests', () => {
697701
});
698702
cy.get('table tr').contains('X-Custom-Header');
699703
cy.get('table tr').contains('Header value');
700-
cy.get('#triggerSource')
701-
.invoke('val')
702-
.should((triggerSource) => {
703-
const trigger = JSON.parse(triggerSource);
704+
cy.window().then((win) => {
705+
if (win.monaco && win.monaco.editor) {
706+
const editor = win.monaco.editor.getModels()[0];
707+
const editorContent = editor.getValue();
708+
const trigger = JSON.parse(editorContent);
704709
expect(trigger.action.amqp_static_headers).to.deep.eq({
705710
'X-Custom-Header': 'Header value',
706711
});
707-
});
712+
}
713+
});
708714

709715
// Edit amqp header
710716
cy.get('table tr').contains('X-Custom-Header').parents('tr').get('i.fa-pencil-alt').click();
@@ -716,14 +722,16 @@ describe('Trigger builder tests', () => {
716722
cy.get('button').contains('Update').click();
717723
});
718724
cy.get('table tr').contains('Header new value');
719-
cy.get('#triggerSource')
720-
.invoke('val')
721-
.should((triggerSource) => {
722-
const trigger = JSON.parse(triggerSource);
725+
cy.window().then((win) => {
726+
if (win.monaco && win.monaco.editor) {
727+
const editor = win.monaco.editor.getModels()[0];
728+
const editorContent = editor.getValue();
729+
const trigger = JSON.parse(editorContent);
723730
expect(trigger.action.amqp_static_headers).to.deep.eq({
724731
'X-Custom-Header': 'Header new value',
725732
});
726-
});
733+
}
734+
});
727735

728736
// Delete amqp header
729737
cy.get('table tr').contains('X-Custom-Header').parents('tr').get('i.fa-eraser').click();
@@ -733,12 +741,14 @@ describe('Trigger builder tests', () => {
733741
cy.get('button').contains('Delete').click();
734742
});
735743
cy.contains('X-Custom-Header').should('not.exist');
736-
cy.get('#triggerSource')
737-
.invoke('val')
738-
.should((triggerSource) => {
739-
const trigger = JSON.parse(triggerSource);
744+
cy.window().then((win) => {
745+
if (win.monaco && win.monaco.editor) {
746+
const editor = win.monaco.editor.getModels()[0];
747+
const editorContent = editor.getValue();
748+
const trigger = JSON.parse(editorContent);
740749
expect(trigger.action.amqp_static_headers || {}).to.deep.eq({});
741-
});
750+
}
751+
});
742752
});
743753

744754
it('correctly loads trigger from its source', () => {
@@ -781,7 +791,6 @@ describe('Trigger builder tests', () => {
781791
it('correctly shows trigger data in the Editor UI', function () {
782792
const encodedTriggerName = encodeURIComponent(this.test_trigger.data.name);
783793
cy.visit(`/triggers/${encodedTriggerName}/edit`);
784-
cy.wait(1000);
785794
cy.location('pathname').should('eq', `/triggers/${encodedTriggerName}/edit`);
786795
checkTriggerEditorUIValues(this.test_trigger.data);
787796
});

0 commit comments

Comments
 (0)