solution#1748
Conversation
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
I am requesting changes because your createTree logic currently throws a runtime error during the Cypress tests, which blocks the task from completing successfully. Specifically, in src/scripts/main.js on the line where you do something like treeElement.append(newUl);, treeElement is null in the test environment, leading to TypeError: Cannot read properties of null (reading 'append'). This indicates a mismatch between the element you query in JavaScript (e.g. document.querySelector('#tree')) and the element the tests/HTML actually provide, or that the script runs before the DOM element exists. To fix this, ensure the HTML contains the exact container the tests expect (check the selector used in cypress/integration/treeFromObject.spec.js), make your JS use that same selector or the passed-in element parameter rather than re-querying, and guard against a missing container with a check like if (!element) throw new Error('Tree container not found');. Once that is resolved, your recursive createTree(element, data) implementation should work as intended and the tests should proceed. As smaller improvements, consider adding a type guard for data (so Object.keys is only called on real objects), using Object.prototype.hasOwnProperty.call(data, key) inside the loop for robustness, and updating the demo link in your README to use your actual GitHub username. Overall, the core idea of your solution is solid; addressing the container selection/runtime error will bring it in line with the task requirements.
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Important
Fix the issues, commit the changes, and then re-request my review using the Re-request review button2 in the Reviewers tab.
Tip
If you have any comments about this review, please leave a message in the Add a comment section below and mention me with the @mateacademy-ai-mentor tag3.
I will read your message during my next review of your pull request. Please do not reply directly to my comments, as that feature is not supported yet.
Caution
Do not close the pull request until the review is complete. Closing it early can lead to unexpected behavior and disrupt the review process.
Footnotes
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
I am asking for changes before this can be accepted, because a few behaviors conflict with the task requirements and can break the tests. In src/scripts/main.js, the createTree function currently does if (!element) return; when the container is missing; the checklist expects this to fail loudly so tests surface configuration issues, so please change this to throw a clear error such as throw new Error('Tree container not found') instead of silently returning. In the same file, there is a top-level const tree = document.querySelector('#tree'); createTree(tree, food); style invocation that runs on module import; this can cause runtime failures when #tree is not present in the test DOM, so remove this side-effect and either export createTree for callers/tests to use or wrap any demo-only call in a DOMContentLoaded handler in your HTML. Also, the code calls Object.keys(data) without first ensuring data is a non-null object; strengthen this guard to check if (!data || typeof data !== 'object') (and optionally throw a descriptive error) so invalid inputs don’t cause runtime exceptions. As a minor improvement, you may also want to define consistent behavior for empty data (e.g., simply no-op or document that case) and ensure your HTML reliably contains the #tree container with the expected nested <ul>/<li> structure. Once these issues are addressed, your recursive tree-building logic should work reliably and align well with the project’s testing environment.
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Important
Fix the issues, commit the changes, and then re-request my review using the Re-request review button2 in the Reviewers tab.
Tip
If you have any comments about this review, please leave a message in the Add a comment section below and mention me with the @mateacademy-ai-mentor tag3.
I will read your message during my next review of your pull request. Please do not reply directly to my comments, as that feature is not supported yet.
Caution
Do not close the pull request until the review is complete. Closing it early can lead to unexpected behavior and disrupt the review process.
Footnotes
| if (!element) { | ||
| return; |
There was a problem hiding this comment.
When the passed-in container element is missing the function returns silently. The checklist / previous review suggests failing loudly so tests get a clear error. Consider throwing a descriptive error here, e.g. if (!element) throw new Error('Tree container not found'); so missing-container problems are explicit.
| if (!data || Object.keys(data).length === 0) { | ||
| return; |
There was a problem hiding this comment.
You call Object.keys(data) without ensuring data is an object — if data is a non-object value this will throw. Strengthen the guard, for example: if (!data || typeof data !== 'object' || Object.keys(data).length === 0) return; (or throw) to avoid runtime errors.
| } | ||
| } | ||
|
|
||
| createTree(tree, food); |
There was a problem hiding this comment.
This top-level invocation runs during module load and can cause runtime issues in tests if #tree doesn't exist. Remove or guard this call — either export createTree and let tests/demo call it, or wrap it in DOMContentLoaded and/or throw when tree is missing. Running DOM-manipulation at import time is brittle for test environments.
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
I am approving your solution as an educational override so you can continue progressing, even though there is still one important issue to fix.
You did a solid job implementing createTree(element, data) with the correct signature, using object keys for <li> text, validating data before calling Object.keys, and throwing a clear Error('Tree container not found') when the container is missing, which matches the requirement to fail loudly instead of silently.
The main critical issue is in src/scripts/main.js, near the bottom of the file where you currently call createTree(tree, food) at the top level: this runs as soon as the module is imported and causes the "Tree container not found" error in tests when #tree is not present in the DOM.
To fix this, remove that top-level call and either export createTree (so tests or other scripts can call it) or move the demo call into a document.addEventListener('DOMContentLoaded', ...) handler in your HTML so it only runs after the container exists.
A smaller improvement is to make your behavior for empty data explicit (for example, clearly documenting that createTree is a no-op when given an empty object), so it’s clear this is intentional and matches the tests’ expectations.
Overall, your core tree-building logic and error handling are in good shape; with the import-time side effect cleaned up, this would be a robust, test-friendly solution—well done getting this far.
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Important
Fix the issues, commit the changes, and then re-request my review using the Re-request review button2 in the Reviewers tab.
Tip
If you have any comments about this review, please leave a message in the Add a comment section below and mention me with the @mateacademy-ai-mentor tag3.
I will read your message during my next review of your pull request. Please do not reply directly to my comments, as that feature is not supported yet.
Caution
Do not close the pull request until the review is complete. Closing it early can lead to unexpected behavior and disrupt the review process.
Footnotes
| function createTree(element, data) { | ||
| // WRITE YOUR CODE HERE | ||
| if (!element) { | ||
| throw new Error('Tree container not found'); |
There was a problem hiding this comment.
Good — this throws a clear Error when the container element is missing, matching the checklist requirement to fail loudly instead of silently returning.
| if (!data || typeof data !== 'object' || Object.keys(data).length === 0) { | ||
| return; |
There was a problem hiding this comment.
The guard here prevents calling Object.keys on null/undefined and thus avoids runtime errors. Returning early for empty objects is acceptable, but be sure this behavior matches the tests' expectations (alternatively you could treat empty data as a no-op explicitly).
|
|
||
| newLi.textContent = key; | ||
|
|
||
| createTree(newLi, data[key]); |
There was a problem hiding this comment.
The recursive tree-building looks correct, but the module still triggers a top-level side-effect on import (the file calls createTree(tree, food) elsewhere). Remove that import-time call — instead export createTree for tests (or move any demo call into a DOMContentLoaded handler in the HTML). Leaving the top-level call will cause tests to fail when #tree is absent.
brespect
left a comment
There was a problem hiding this comment.
Good progress, but you need to pass all CI checks, build and tests before requesting the review
No description provided.