[LG-5100] feat(code-editor): add test harnesses #3103
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…entation - Moved testing utilities for the CodeEditor component to a new file, improving organization and accessibility. - Updated import paths in test files to reflect the new location of testing utilities. - Enhanced README documentation to clarify the usage of new testing utilities and examples for better guidance on testing interactions with the CodeEditor and Panel components.
…import paths - Moved panel-specific testing utilities to a new file, enhancing organization and maintainability. - Updated import paths in the Panel test file to reflect the new location of the testing utilities. - Improved clarity and accessibility of testing functions for the Panel component.
…ents - Introduced `getTestUtils` to provide a comprehensive set of testing utilities for the CodeEditor and Panel components, enhancing the testing framework. - Updated README documentation to include details on the new test utilities, including usage examples and descriptions of available methods. - Refactored CodeEditor and Panel components to utilize `data-lgid` attributes for improved testability and consistency in querying elements during tests. - Enhanced TypeScript definitions to support the new testing utilities and ensure type safety across the testing framework.
…deEditor - Added comprehensive testing utilities for the CodeEditor and Panel components, improving the framework for unit and integration tests. - Updated README to include detailed sections on testing environment compatibility, recommended usage, and example test cases. - Refactored CodeEditor to include data attributes for better testability in JSDOM environments. - Introduced new test cases to validate editor functionality, content detection, and panel interactions, ensuring robust testing coverage.
…ync operations - Updated README to clarify usage patterns for testing CodeEditor, including async methods for content retrieval and loading state management. - Introduced `waitForInitialization` and `waitForLoadingToComplete` methods in `getTestUtils` for improved handling of asynchronous operations in tests. - Refactored `getContent` to return a Promise, ensuring compatibility with async testing scenarios. - Enhanced test cases to demonstrate the new async utilities, improving robustness and reliability in testing editor functionality.
- Deleted `getAllBySelector` and `queryAllBySelector` functions from CodeEditor test utilities to streamline the codebase and improve maintainability. - Updated the export structure to reflect the removal of these functions, ensuring clarity in available testing utilities.
…g utilities - Deleted compatibility documentation for testing environments from `getTestUtils.ts` to streamline the code and focus on essential utility functions. - This change enhances clarity and reduces clutter in the testing utilities file.
…and data attributes - Added mocks for MutationObserver, ResizeObserver, and IntersectionObserver to improve compatibility with CodeMirror in tests. - Implemented document.getSelection and createRange mocks to support CodeMirror functionality. - Updated CodeEditor component to set a default value for copyButtonAppearance, enhancing testability. - Introduced data-lgid attributes in test cases to facilitate element selection and improve test reliability. - Enhanced test cases to include asynchronous waits for component rendering, ensuring accurate assertions.
…stency - Modified data-lgid attributes in test cases to follow a new naming convention, ensuring consistency across the testing framework. - Updated selectors in assertions to match the revised data-lgid structure, enhancing the reliability of test cases.
|
tsck
requested review from
a team and
shaneeza
and removed request for
stephl3 and
a team
tsck
commented
Sep 3, 2025
tsck
commented
Sep 3, 2025
tsck
commented
Sep 3, 2025
|
Size Change: -28.1 kB (-1.36%) Total Size: 2.04 MB
ℹ️ View Unchanged
|
…en-ui into LG-5100/ce-test-harnesses
…scriptions - Added mocks for HTMLDialogElement methods (`showModal`, `close`, `open`) to facilitate testing of the Modal component. - Updated the test suite description for clarity, focusing on `getTestUtils` instead of the broader API documentation.
shaneeza
reviewed
Sep 5, 2025
shaneeza
reviewed
Sep 5, 2025
shaneeza
reviewed
Sep 5, 2025
shaneeza
reviewed
Sep 5, 2025
shaneeza
reviewed
Sep 5, 2025
| export function Panel({ | ||
| baseFontSize: baseFontSizeProp, | ||
| customSecondaryButtons, | ||
| 'data-lgid': dataLgId, |
There was a problem hiding this comment.
If a consumer passes a custom data-lgid to CodeEditor, it won't propagate down to the panel. So, for example,
<CodeEditor data-lgid="lg-custom" panel={<Panel/>}>...</CodeEditor>In this case, any component that uses the lgids instantiated in CodeEditor will have a data-lgid prefixed with lg-custom...... But Panel and all of its children data-lgids will still be prefixed withlg-code_editor....
What I've done in instances like this is store the lgids instantiated in the parent component, which is CodeEditor, in context and read those values from context in child component. The Panel component in Code does this .
There was a problem hiding this comment.
My thinking was just that they are technically separate components so having separate ID's made sense. But since this is already a pattern that's been established, I'll definitely update accordingly!
shaneeza
reviewed
Sep 5, 2025
- Added lgIds to the CodeEditor context, allowing child components to inherit custom data-lgid prefixes. - Updated the Panel component to utilize lgIds from the CodeEditor context, enhancing consistency in data attribute handling. - Removed direct lgIds retrieval from the Panel, streamlining the component's implementation.
…d renderPanel function - Added lgIds to the PanelTestContextConfig interface to support custom data-lgid attributes. - Updated the renderPanel function to include lgIds, enhancing the testing capabilities for the Panel component.
- Updated utility function names from `getIsLoading` to `isLoading` and `getIsReadOnly` to `isReadOnly` for improved clarity and consistency. - Adjusted corresponding test cases to reflect the new function names, enhancing readability and maintainability of the test suite. - Renamed `getEditor` to `getEditorElement` for better semantic alignment with its purpose.
- Consolidated and clarified the documentation for testing utilities in the CodeEditor README. - Renamed utility functions for consistency, including `getEditor` to `getEditorElement` and updated related examples. - Removed outdated sections on feature detection and async initialization utilities to focus on essential testing patterns. - Enhanced example usage for better clarity and relevance to current utility functions.
shaneeza
reviewed
Sep 12, 2025
| // The copy button selector looks for the specific lgid structure | ||
| expect( | ||
| container.querySelector(CodeEditorSelectors.CopyButton), | ||
| container.querySelector('[data-lgid="lg-test-copy-hover-copy_button"]'), |
There was a problem hiding this comment.
nit: could you use the test util here? I see it as another way of testing that our utils work.
shaneeza
reviewed
Sep 12, 2025
| await editor.waitForEditorView(); | ||
|
|
||
| // Wait a bit for copy button to be rendered | ||
| await new Promise(resolve => setTimeout(resolve, 100)); |
There was a problem hiding this comment.
nit: instead of the timeout, would this work?
await waitFor(() => {
expect(...).toBeInTheDocument();
});
shaneeza
reviewed
Sep 12, 2025
| const baseFontSize = useBaseFontSize(); | ||
|
|
||
| const { getContents, formatCode, undo, redo, downloadContent } = | ||
| const { getContents, formatCode, undo, redo, downloadContent, lgIds } = |
shaneeza
reviewed
Sep 12, 2025
| })); | ||
|
|
||
| // Mock Modal component because HTMLDialogElement not supported in JSDOM | ||
| jest.mock('@leafygreen-ui/modal', () => { |
There was a problem hiding this comment.
nit: I'm wondering, if instead of mocking modal, if you could get away with what we do in Drawer :
leafygreen-ui/packages/drawer/src/Drawer/Drawer.spec.tsx
Lines 30 to 42 in 1f334cb
There was a problem hiding this comment.
Will update but I don't really know if I see much of a difference here since this is meant to test the utils and both end up mocking the modal functionality anyway.
shaneeza
reviewed
Sep 12, 2025
| /** | ||
| * Types the text into the editor | ||
| */ | ||
| const typeContent = async (text: string): Promise<void> => { |
There was a problem hiding this comment.
I'm not sure if we should offer this as a util since we usually leave user events to the consumer. As long as they have access to the content element, that should be good enough.
shaneeza
reviewed
Sep 12, 2025
| */ | ||
|
|
||
| // Helper functions for DOM queries | ||
| const getByLgId = (lgId: string): HTMLElement => { |
There was a problem hiding this comment.
I'm sorry I missed this earlier. Is there a reason you are not using getByLgId from the test-harnesses package?
import { findByLgId, getByLgId, queryByLgId } from '@lg-tools/test-harnesses';
Our test harnesses use @testing-library/dom under the hood so we don't have to manually write them ourselves.
shaneeza
reviewed
Sep 12, 2025
| getCopyButton, | ||
| getPanelUtils, | ||
| }; | ||
| }; |
There was a problem hiding this comment.
Overall, I think these are much simpler and helpful!
shaneeza
reviewed
Sep 12, 2025
| @@ -0,0 +1,55 @@ | |||
| export interface PanelTestUtilsReturnType { | |||
| getPanelElement: () => HTMLElement | null; | |||
There was a problem hiding this comment.
Can you add tsdocs for these?
shaneeza
reviewed
Sep 12, 2025
packages/code-editor/README.md
Outdated
|
|
||
| The `panel` object provides access to Panel elements and interactions: | ||
| // Test editor presence and basic structure | ||
| expect(utils.getEditorElement()).toBeInTheDocument(); |
There was a problem hiding this comment.
Can we also add examples for the basic editor utilities?
shaneeza
reviewed
Sep 12, 2025
| }; | ||
|
|
||
| return { | ||
| getEditorElement: () => element, |
There was a problem hiding this comment.
We've also started returning find, query, and get, so consumers have a few more options. I think adding them would be beneficial.
leafygreen-ui/packages/context-drawer/src/testing/getTestUtils.tsx
Lines 14 to 16 in 1f334cb
shaneeza
reviewed
Sep 12, 2025
shaneeza
reviewed
Sep 12, 2025
| * expect(utils.isLoading()).toBe(false); | ||
| * ``` | ||
| * Returns a set of utility functions to query and get parts of a progress bar component for testing. | ||
| * @param lgId - The base LeafyGreen ID prefix for the progress bar. Defaults to `DEFAULT_LGID_ROOT`. |
There was a problem hiding this comment.
Suggested change
| * @param lgId - The base LeafyGreen ID prefix for the progress bar. Defaults to `DEFAULT_LGID_ROOT`. | |
| * @param lgId - The base LeafyGreen ID prefix for the code editor. Defaults to `DEFAULT_LGID_ROOT`. |
shaneeza
reviewed
Sep 12, 2025
| const queryEditor = () => queryByLgId!<T>(lgIds.root); | ||
|
|
||
| /** Content element utils */ | ||
| const getContentContainer = () => getByLgId!<T>(lgIds.content); |
There was a problem hiding this comment.
Curious, why the switch from getContent to getContentContainer?
There was a problem hiding this comment.
Good question. getContent to me reads "get the content value" and not "get the content element". Before I had getContentElement and getContent where getContent returned the value and not the element. In the spirit of your comment before regarding not providing a util like typeContent when they have access to content. I removed both typeContent and the original getContent, leaving just getContentElement. I didn't like that this was the only util that had "element" in it, but I still thought getContent was confusing since it doesn't return the content of the editor, but the container of that content. So I updated it to getContentContainer.
shaneeza
approved these changes
Sep 12, 2025
tsck
added a commit
that referenced
this pull request
Sep 15, 2025
* refactor(code-editor): reorganize testing utilities and enhance documentation - Moved testing utilities for the CodeEditor component to a new file, improving organization and accessibility. - Updated import paths in test files to reflect the new location of testing utilities. - Enhanced README documentation to clarify the usage of new testing utilities and examples for better guidance on testing interactions with the CodeEditor and Panel components. * refactor(code-editor): reorganize panel testing utilities and update import paths - Moved panel-specific testing utilities to a new file, enhancing organization and maintainability. - Updated import paths in the Panel test file to reflect the new location of the testing utilities. - Improved clarity and accessibility of testing functions for the Panel component. * feat(code-editor): move testing utilities for CodeMirror extensions * feat(code-editor): add test utilities for CodeEditor and Panel components - Introduced `getTestUtils` to provide a comprehensive set of testing utilities for the CodeEditor and Panel components, enhancing the testing framework. - Updated README documentation to include details on the new test utilities, including usage examples and descriptions of available methods. - Refactored CodeEditor and Panel components to utilize `data-lgid` attributes for improved testability and consistency in querying elements during tests. - Enhanced TypeScript definitions to support the new testing utilities and ensure type safety across the testing framework. * feat(code-editor): enhance testing utilities and documentation for CodeEditor - Added comprehensive testing utilities for the CodeEditor and Panel components, improving the framework for unit and integration tests. - Updated README to include detailed sections on testing environment compatibility, recommended usage, and example test cases. - Refactored CodeEditor to include data attributes for better testability in JSDOM environments. - Introduced new test cases to validate editor functionality, content detection, and panel interactions, ensuring robust testing coverage. * feat(code-editor): enhance testing utilities and documentation for async operations - Updated README to clarify usage patterns for testing CodeEditor, including async methods for content retrieval and loading state management. - Introduced `waitForInitialization` and `waitForLoadingToComplete` methods in `getTestUtils` for improved handling of asynchronous operations in tests. - Refactored `getContent` to return a Promise, ensuring compatibility with async testing scenarios. - Enhanced test cases to demonstrate the new async utilities, improving robustness and reliability in testing editor functionality. * refactor(code-editor): remove unused testing utilities for CodeEditor - Deleted `getAllBySelector` and `queryAllBySelector` functions from CodeEditor test utilities to streamline the codebase and improve maintainability. - Updated the export structure to reflect the removal of these functions, ensuring clarity in available testing utilities. * refactor(code-editor): remove compatibility documentation from testing utilities - Deleted compatibility documentation for testing environments from `getTestUtils.ts` to streamline the code and focus on essential utility functions. - This change enhances clarity and reduces clutter in the testing utilities file. * feat(code-editor): enhance testing environment with additional mocks and data attributes - Added mocks for MutationObserver, ResizeObserver, and IntersectionObserver to improve compatibility with CodeMirror in tests. - Implemented document.getSelection and createRange mocks to support CodeMirror functionality. - Updated CodeEditor component to set a default value for copyButtonAppearance, enhancing testability. - Introduced data-lgid attributes in test cases to facilitate element selection and improve test reliability. - Enhanced test cases to include asynchronous waits for component rendering, ensuring accurate assertions. * fix(tests): update data-lgid attributes in CodeEditor tests for consistency - Modified data-lgid attributes in test cases to follow a new naming convention, ensuring consistency across the testing framework. - Updated selectors in assertions to match the revised data-lgid structure, enhancing the reliability of test cases. * refactor(Panel): revert inadvertent panel changes on base merge * test(getTestUtils): mock HTMLDialogElement methods and update test descriptions - Added mocks for HTMLDialogElement methods (`showModal`, `close`, `open`) to facilitate testing of the Modal component. - Updated the test suite description for clarity, focusing on `getTestUtils` instead of the broader API documentation. * feat(CodeEditor): integrate lgIds into context and panel components - Added lgIds to the CodeEditor context, allowing child components to inherit custom data-lgid prefixes. - Updated the Panel component to utilize lgIds from the CodeEditor context, enhancing consistency in data attribute handling. - Removed direct lgIds retrieval from the Panel, streamlining the component's implementation. * refactor(getTestUtils): Simplify exposed utilities and rewrite tests * feat(Panel.testUtils): integrate lgIds into PanelTestContextConfig and renderPanel function - Added lgIds to the PanelTestContextConfig interface to support custom data-lgid attributes. - Updated the renderPanel function to include lgIds, enhancing the testing capabilities for the Panel component. * refactor(getTestUtils): rename utility functions for consistency - Updated utility function names from `getIsLoading` to `isLoading` and `getIsReadOnly` to `isReadOnly` for improved clarity and consistency. - Adjusted corresponding test cases to reflect the new function names, enhancing readability and maintainability of the test suite. - Renamed `getEditor` to `getEditorElement` for better semantic alignment with its purpose. * refactor(README): streamline CodeEditor testing utilities documentation - Consolidated and clarified the documentation for testing utilities in the CodeEditor README. - Renamed utility functions for consistency, including `getEditor` to `getEditorElement` and updated related examples. - Removed outdated sections on feature detection and async initialization utilities to focus on essential testing patterns. - Enhanced example usage for better clarity and relevance to current utility functions. * refactor(getTestUtils): code review changes * refactor(getTestUtils): code editor not progress bar =) * fix(getTestUtils): fix build
tsck
added a commit
that referenced
this pull request
Sep 16, 2025
* refactor(code-editor): reorganize testing utilities and enhance documentation - Moved testing utilities for the CodeEditor component to a new file, improving organization and accessibility. - Updated import paths in test files to reflect the new location of testing utilities. - Enhanced README documentation to clarify the usage of new testing utilities and examples for better guidance on testing interactions with the CodeEditor and Panel components. * refactor(code-editor): reorganize panel testing utilities and update import paths - Moved panel-specific testing utilities to a new file, enhancing organization and maintainability. - Updated import paths in the Panel test file to reflect the new location of the testing utilities. - Improved clarity and accessibility of testing functions for the Panel component. * feat(code-editor): move testing utilities for CodeMirror extensions * feat(code-editor): add test utilities for CodeEditor and Panel components - Introduced `getTestUtils` to provide a comprehensive set of testing utilities for the CodeEditor and Panel components, enhancing the testing framework. - Updated README documentation to include details on the new test utilities, including usage examples and descriptions of available methods. - Refactored CodeEditor and Panel components to utilize `data-lgid` attributes for improved testability and consistency in querying elements during tests. - Enhanced TypeScript definitions to support the new testing utilities and ensure type safety across the testing framework. * feat(code-editor): enhance testing utilities and documentation for CodeEditor - Added comprehensive testing utilities for the CodeEditor and Panel components, improving the framework for unit and integration tests. - Updated README to include detailed sections on testing environment compatibility, recommended usage, and example test cases. - Refactored CodeEditor to include data attributes for better testability in JSDOM environments. - Introduced new test cases to validate editor functionality, content detection, and panel interactions, ensuring robust testing coverage. * feat(code-editor): enhance testing utilities and documentation for async operations - Updated README to clarify usage patterns for testing CodeEditor, including async methods for content retrieval and loading state management. - Introduced `waitForInitialization` and `waitForLoadingToComplete` methods in `getTestUtils` for improved handling of asynchronous operations in tests. - Refactored `getContent` to return a Promise, ensuring compatibility with async testing scenarios. - Enhanced test cases to demonstrate the new async utilities, improving robustness and reliability in testing editor functionality. * refactor(code-editor): remove unused testing utilities for CodeEditor - Deleted `getAllBySelector` and `queryAllBySelector` functions from CodeEditor test utilities to streamline the codebase and improve maintainability. - Updated the export structure to reflect the removal of these functions, ensuring clarity in available testing utilities. * refactor(code-editor): remove compatibility documentation from testing utilities - Deleted compatibility documentation for testing environments from `getTestUtils.ts` to streamline the code and focus on essential utility functions. - This change enhances clarity and reduces clutter in the testing utilities file. * feat(code-editor): enhance testing environment with additional mocks and data attributes - Added mocks for MutationObserver, ResizeObserver, and IntersectionObserver to improve compatibility with CodeMirror in tests. - Implemented document.getSelection and createRange mocks to support CodeMirror functionality. - Updated CodeEditor component to set a default value for copyButtonAppearance, enhancing testability. - Introduced data-lgid attributes in test cases to facilitate element selection and improve test reliability. - Enhanced test cases to include asynchronous waits for component rendering, ensuring accurate assertions. * fix(tests): update data-lgid attributes in CodeEditor tests for consistency - Modified data-lgid attributes in test cases to follow a new naming convention, ensuring consistency across the testing framework. - Updated selectors in assertions to match the revised data-lgid structure, enhancing the reliability of test cases. * refactor(Panel): revert inadvertent panel changes on base merge * test(getTestUtils): mock HTMLDialogElement methods and update test descriptions - Added mocks for HTMLDialogElement methods (`showModal`, `close`, `open`) to facilitate testing of the Modal component. - Updated the test suite description for clarity, focusing on `getTestUtils` instead of the broader API documentation. * feat(CodeEditor): integrate lgIds into context and panel components - Added lgIds to the CodeEditor context, allowing child components to inherit custom data-lgid prefixes. - Updated the Panel component to utilize lgIds from the CodeEditor context, enhancing consistency in data attribute handling. - Removed direct lgIds retrieval from the Panel, streamlining the component's implementation. * refactor(getTestUtils): Simplify exposed utilities and rewrite tests * feat(Panel.testUtils): integrate lgIds into PanelTestContextConfig and renderPanel function - Added lgIds to the PanelTestContextConfig interface to support custom data-lgid attributes. - Updated the renderPanel function to include lgIds, enhancing the testing capabilities for the Panel component. * refactor(getTestUtils): rename utility functions for consistency - Updated utility function names from `getIsLoading` to `isLoading` and `getIsReadOnly` to `isReadOnly` for improved clarity and consistency. - Adjusted corresponding test cases to reflect the new function names, enhancing readability and maintainability of the test suite. - Renamed `getEditor` to `getEditorElement` for better semantic alignment with its purpose. * refactor(README): streamline CodeEditor testing utilities documentation - Consolidated and clarified the documentation for testing utilities in the CodeEditor README. - Renamed utility functions for consistency, including `getEditor` to `getEditorElement` and updated related examples. - Removed outdated sections on feature detection and async initialization utilities to focus on essential testing patterns. - Enhanced example usage for better clarity and relevance to current utility functions. * refactor(getTestUtils): code review changes * refactor(getTestUtils): code editor not progress bar =) * fix(getTestUtils): fix build
tsck
added a commit
that referenced
this pull request
Sep 16, 2025
* refactor(code-editor): reorganize testing utilities and enhance documentation - Moved testing utilities for the CodeEditor component to a new file, improving organization and accessibility. - Updated import paths in test files to reflect the new location of testing utilities. - Enhanced README documentation to clarify the usage of new testing utilities and examples for better guidance on testing interactions with the CodeEditor and Panel components. * refactor(code-editor): reorganize panel testing utilities and update import paths - Moved panel-specific testing utilities to a new file, enhancing organization and maintainability. - Updated import paths in the Panel test file to reflect the new location of the testing utilities. - Improved clarity and accessibility of testing functions for the Panel component. * feat(code-editor): move testing utilities for CodeMirror extensions * feat(code-editor): add test utilities for CodeEditor and Panel components - Introduced `getTestUtils` to provide a comprehensive set of testing utilities for the CodeEditor and Panel components, enhancing the testing framework. - Updated README documentation to include details on the new test utilities, including usage examples and descriptions of available methods. - Refactored CodeEditor and Panel components to utilize `data-lgid` attributes for improved testability and consistency in querying elements during tests. - Enhanced TypeScript definitions to support the new testing utilities and ensure type safety across the testing framework. * feat(code-editor): enhance testing utilities and documentation for CodeEditor - Added comprehensive testing utilities for the CodeEditor and Panel components, improving the framework for unit and integration tests. - Updated README to include detailed sections on testing environment compatibility, recommended usage, and example test cases. - Refactored CodeEditor to include data attributes for better testability in JSDOM environments. - Introduced new test cases to validate editor functionality, content detection, and panel interactions, ensuring robust testing coverage. * feat(code-editor): enhance testing utilities and documentation for async operations - Updated README to clarify usage patterns for testing CodeEditor, including async methods for content retrieval and loading state management. - Introduced `waitForInitialization` and `waitForLoadingToComplete` methods in `getTestUtils` for improved handling of asynchronous operations in tests. - Refactored `getContent` to return a Promise, ensuring compatibility with async testing scenarios. - Enhanced test cases to demonstrate the new async utilities, improving robustness and reliability in testing editor functionality. * refactor(code-editor): remove unused testing utilities for CodeEditor - Deleted `getAllBySelector` and `queryAllBySelector` functions from CodeEditor test utilities to streamline the codebase and improve maintainability. - Updated the export structure to reflect the removal of these functions, ensuring clarity in available testing utilities. * refactor(code-editor): remove compatibility documentation from testing utilities - Deleted compatibility documentation for testing environments from `getTestUtils.ts` to streamline the code and focus on essential utility functions. - This change enhances clarity and reduces clutter in the testing utilities file. * feat(code-editor): enhance testing environment with additional mocks and data attributes - Added mocks for MutationObserver, ResizeObserver, and IntersectionObserver to improve compatibility with CodeMirror in tests. - Implemented document.getSelection and createRange mocks to support CodeMirror functionality. - Updated CodeEditor component to set a default value for copyButtonAppearance, enhancing testability. - Introduced data-lgid attributes in test cases to facilitate element selection and improve test reliability. - Enhanced test cases to include asynchronous waits for component rendering, ensuring accurate assertions. * fix(tests): update data-lgid attributes in CodeEditor tests for consistency - Modified data-lgid attributes in test cases to follow a new naming convention, ensuring consistency across the testing framework. - Updated selectors in assertions to match the revised data-lgid structure, enhancing the reliability of test cases. * refactor(Panel): revert inadvertent panel changes on base merge * test(getTestUtils): mock HTMLDialogElement methods and update test descriptions - Added mocks for HTMLDialogElement methods (`showModal`, `close`, `open`) to facilitate testing of the Modal component. - Updated the test suite description for clarity, focusing on `getTestUtils` instead of the broader API documentation. * feat(CodeEditor): integrate lgIds into context and panel components - Added lgIds to the CodeEditor context, allowing child components to inherit custom data-lgid prefixes. - Updated the Panel component to utilize lgIds from the CodeEditor context, enhancing consistency in data attribute handling. - Removed direct lgIds retrieval from the Panel, streamlining the component's implementation. * refactor(getTestUtils): Simplify exposed utilities and rewrite tests * feat(Panel.testUtils): integrate lgIds into PanelTestContextConfig and renderPanel function - Added lgIds to the PanelTestContextConfig interface to support custom data-lgid attributes. - Updated the renderPanel function to include lgIds, enhancing the testing capabilities for the Panel component. * refactor(getTestUtils): rename utility functions for consistency - Updated utility function names from `getIsLoading` to `isLoading` and `getIsReadOnly` to `isReadOnly` for improved clarity and consistency. - Adjusted corresponding test cases to reflect the new function names, enhancing readability and maintainability of the test suite. - Renamed `getEditor` to `getEditorElement` for better semantic alignment with its purpose. * refactor(README): streamline CodeEditor testing utilities documentation - Consolidated and clarified the documentation for testing utilities in the CodeEditor README. - Renamed utility functions for consistency, including `getEditor` to `getEditorElement` and updated related examples. - Removed outdated sections on feature detection and async initialization utilities to focus on essential testing patterns. - Enhanced example usage for better clarity and relevance to current utility functions. * refactor(getTestUtils): code review changes * refactor(getTestUtils): code editor not progress bar =) * fix(getTestUtils): fix build
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
✍️ Proposed changes
src/testing/testUtils.tsx->src/CodeEditor/CodeEditor.testUtils.tsxsrc/testing/panelTestUtils.tsx->src/Panel/Panel.testUtils.tsxsrc/testing/extensionTestUtils.ts->src/CodeEditor/hooks/hooks.testUtils.tssrc/testing/getTestUtilsCodeEditorandPanelas needed to work with LGID's🎟 Jira ticket: LG-5100
✅ Checklist
pnpm changesetand documented my changes🧪 How to test changes
Basic test utility usage:
Async content testing:
Panel functionality testing:
Run the comprehensive test suite:
pnpm test packages/code-editor/src/testing/getTestUtils.spec.tsxto see all usage examples and verify functionality