Implement collapsible rows in code editor #83
Conversation
- Replaces code editor component with Monaco - Monaco is what VSCode is built on, so it looks quite good. - onChange passes the new text value within the editor, which is simple to deal with, especially in comparison to CodeMirror
- Certain styling was not needed for Monaco Code Editor, so those were removed - The div on the right column for the code editor was locking once expanded, so it could not shrink. In the dev tools, the div was saying "This item was clamped to its minimum size". Updated the styling on that div to allow for shrinking/growing.
deliberation-researcher-portal
|
||||||||||||||||||||||||||||||
| Project |
deliberation-researcher-portal
|
| Run status |
|
| Run duration | 01m 22s |
| Commit |
|
| Committer | Eric Shapiro |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
Failures
|
1
|
Flaky
|
0
|
Pending
|
0
|
Skipped
|
0
|
Passing
|
0
|
Tests for review
cypress/e2e/test.cy.ts • 1 failed test
| Test | Artifacts | |
|---|---|---|
| test spec > passes |
Test Replay
Screenshots
|
|
|
Seems like the reason it failed the test was because of: Note that data-cy is now part of the monaco editor, which may be causing the issue. |
- This is because Monaco Editor may not be able to take in custom attributes.
- Need to get() monaco editor differently a sthe data-cy="code-editor" is on a wrapping div, not the code editor itself - Cypress interactions with monaco code editor work slightly differently, especially type(), so these have been updated
|
Still an error (see below). Cypress tests are passing locally, though, so need to understand why there is a discrepancy. AssertionError: Timed out retrying after 4000ms: Expected to find content: '- name: Element 4' within the element: <div.monaco-editor.no-user-select.showUnused.showDeprecated.vs> but never did. |
|
Still failing on a re-run with the same test and code, but now with this: AssertionError: Timed out retrying after 4000ms: Expected to find element: |
Closes #82