Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

test: fix validateDOMNesting warning #7508

Merged
merged 10 commits into from
Feb 5, 2024
Merged

test: fix validateDOMNesting warning #7508

merged 10 commits into from
Feb 5, 2024

Conversation

Juneezee
Copy link
Contributor

@Juneezee Juneezee commented Feb 4, 2024

Summary

Fixes #6979.

Table elements (<thead>, <tfoot>, <tr>, <td>, etc.) have their own set of permitted parents. This PR updates the Jest unit tests for table components to fix the validateDOMNesting warnings.

QA

General checklist

  • Code quality checklist

@Juneezee
test(EuiTableFooterCell): fix validateDOMNesting warning
50ae494 
 PASS  src/components/table/table_footer_cell.test.tsx
  ● Console

    console.warn src/components/table/table_footer_cell.test.tsx:24
      Warning: validateDOMNesting(...): <td> cannot appear as a child of <div>.
          at td
          at EuiTableFooterCell (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/table/table_footer_cell.tsx:29:3)
          at /home/jun/Desktop/github/waiting-for-pr/eui/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23
          at CurrentEuiBreakpointProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/services/breakpoint/current_breakpoint.tsx:39:8)
          at EuiComponentDefaultsProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/provider/component_defaults/component_defaults.tsx:59:8)
          at ThemeProvider (/home/jun/Desktop/github/waiting-for-pr/eui/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:125:32)
          at EuiEmotionThemeProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/services/theme/emotion.tsx:25:8)
          at EuiThemeProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/services/theme/provider.tsx:62:3)
          at EuiCacheProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/provider/cache/cache_provider.tsx:18:3)
          at EuiProviderNestedCheck (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/provider/nested/nested_context.tsx:20:42)
          at EuiProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/provider/provider.tsx:87:3)

Signed-off-by: Eng Zer Jun <[email protected]>
@Juneezee
test(EuiTableFooter): fix validateDOMNesting warning
b8933e4 
 PASS  src/components/table/table_footer.test.tsx
  ● Console

    console.warn scripts/jest/setup/throw_on_console_error.js:49
      Warning: validateDOMNesting(...): Text nodes cannot appear as a child of <tr>.
          at tr
          at tfoot
          at EuiTableFooter (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/table/table_footer.tsx:14:8)
          at /home/jun/Desktop/github/waiting-for-pr/eui/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23
          at CurrentEuiBreakpointProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/services/breakpoint/current_breakpoint.tsx:39:8)
          at EuiComponentDefaultsProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/provider/component_defaults/component_defaults.tsx:59:8)
          at ThemeProvider (/home/jun/Desktop/github/waiting-for-pr/eui/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:125:32)
          at EuiEmotionThemeProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/services/theme/emotion.tsx:25:8)
          at EuiThemeProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/services/theme/provider.tsx:62:3)
          at EuiCacheProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/provider/cache/cache_provider.tsx:18:3)
          at EuiProviderNestedCheck (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/provider/nested/nested_context.tsx:20:42)
          at EuiProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/provider/provider.tsx:87:3)
    console.warn scripts/jest/setup/throw_on_console_error.js:49
      Warning: validateDOMNesting(...): <tfoot> cannot appear as a child of <div>.
          at tfoot
          at EuiTableFooter (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/table/table_footer.tsx:14:8)
          at /home/jun/Desktop/github/waiting-for-pr/eui/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23
          at CurrentEuiBreakpointProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/services/breakpoint/current_breakpoint.tsx:39:8)
          at EuiComponentDefaultsProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/provider/component_defaults/component_defaults.tsx:59:8)
          at ThemeProvider (/home/jun/Desktop/github/waiting-for-pr/eui/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:125:32)
          at EuiEmotionThemeProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/services/theme/emotion.tsx:25:8)
          at EuiThemeProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/services/theme/provider.tsx:62:3)
          at EuiCacheProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/provider/cache/cache_provider.tsx:18:3)
          at EuiProviderNestedCheck (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/provider/nested/nested_context.tsx:20:42)
          at EuiProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/provider/provider.tsx:87:3)

Signed-off-by: Eng Zer Jun <[email protected]>
@Juneezee
test(EuiTableHeader): fix validateDOMNesting warning
00896ae 
 PASS  src/components/table/table_header.test.tsx
  ● Console

    console.warn scripts/jest/setup/throw_on_console_error.js:49
      Warning: validateDOMNesting(...): <thead> cannot appear as a child of <div>.
          at thead
          at EuiTableHeader (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/table/table_header.tsx:26:3)
          at /home/jun/Desktop/github/waiting-for-pr/eui/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23
          at CurrentEuiBreakpointProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/services/breakpoint/current_breakpoint.tsx:39:8)
          at EuiComponentDefaultsProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/provider/component_defaults/component_defaults.tsx:59:8)
          at ThemeProvider (/home/jun/Desktop/github/waiting-for-pr/eui/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:125:32)
          at EuiEmotionThemeProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/services/theme/emotion.tsx:25:8)
          at EuiThemeProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/services/theme/provider.tsx:62:3)
          at EuiCacheProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/provider/cache/cache_provider.tsx:18:3)
          at EuiProviderNestedCheck (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/provider/nested/nested_context.tsx:20:42)
          at EuiProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/provider/provider.tsx:87:3)

Signed-off-by: Eng Zer Jun <[email protected]>
@Juneezee
test(EuiTableHeaderCellCheckbox): fix validateDOMNesting warning
5066e5d 
 PASS  src/components/table/table_header_cell_checkbox.test.tsx
  ● Console

    console.warn src/components/table/table_header_cell_checkbox.test.tsx:22
      Warning: validateDOMNesting(...): <th> cannot appear as a child of <div>.
          at th
          at EuiTableHeaderCellCheckbox (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/table/table_header_cell_checkbox.tsx:30:8)
          at /home/jun/Desktop/github/waiting-for-pr/eui/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23
          at CurrentEuiBreakpointProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/services/breakpoint/current_breakpoint.tsx:39:8)
          at EuiComponentDefaultsProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/provider/component_defaults/component_defaults.tsx:59:8)
          at ThemeProvider (/home/jun/Desktop/github/waiting-for-pr/eui/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:125:32)
          at EuiEmotionThemeProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/services/theme/emotion.tsx:25:8)
          at EuiThemeProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/services/theme/provider.tsx:62:3)
          at EuiCacheProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/provider/cache/cache_provider.tsx:18:3)
          at EuiProviderNestedCheck (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/provider/nested/nested_context.tsx:20:42)
          at EuiProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/provider/provider.tsx:87:3)

Signed-off-by: Eng Zer Jun <[email protected]>
@Juneezee
test(EuiTableHeaderCell): fix validateDOMNesting warning
bade180 
 PASS  src/components/table/table_header_cell.test.tsx
  ● Console

    console.warn scripts/jest/setup/throw_on_console_error.js:49
      Warning: validateDOMNesting(...): <th> cannot appear as a child of <div>.
          at th
          at EuiTableHeaderCell (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/table/table_header_cell.tsx:114:3)
          at /home/jun/Desktop/github/waiting-for-pr/eui/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23
          at CurrentEuiBreakpointProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/services/breakpoint/current_breakpoint.tsx:39:8)
          at EuiComponentDefaultsProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/provider/component_defaults/component_defaults.tsx:59:8)
          at ThemeProvider (/home/jun/Desktop/github/waiting-for-pr/eui/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:125:32)
          at EuiEmotionThemeProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/services/theme/emotion.tsx:25:8)
          at EuiThemeProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/services/theme/provider.tsx:62:3)
          at EuiCacheProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/provider/cache/cache_provider.tsx:18:3)
          at EuiProviderNestedCheck (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/provider/nested/nested_context.tsx:20:42)
          at EuiProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/provider/provider.tsx:87:3)
    console.warn scripts/jest/setup/throw_on_console_error.js:49
      Warning: validateDOMNesting(...): <td> cannot appear as a child of <div>.
          at td
          at EuiTableHeaderCell (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/table/table_header_cell.tsx:114:3)
          at /home/jun/Desktop/github/waiting-for-pr/eui/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23
          at CurrentEuiBreakpointProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/services/breakpoint/current_breakpoint.tsx:39:8)
          at EuiComponentDefaultsProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/provider/component_defaults/component_defaults.tsx:59:8)
          at ThemeProvider (/home/jun/Desktop/github/waiting-for-pr/eui/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:125:32)
          at EuiEmotionThemeProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/services/theme/emotion.tsx:25:8)
          at EuiThemeProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/services/theme/provider.tsx:62:3)
          at EuiCacheProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/provider/cache/cache_provider.tsx:18:3)
          at EuiProviderNestedCheck (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/provider/nested/nested_context.tsx:20:42)
          at EuiProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/provider/provider.tsx:87:3)

Signed-off-by: Eng Zer Jun <[email protected]>
@Juneezee
test(EuiTableRowCellCheckbox): fix validateDOMNesting warning
8410596 
 PASS  src/components/table/table_row_cell_checkbox.test.tsx
  ● Console

    console.warn scripts/jest/setup/throw_on_console_error.js:49
      Warning: validateDOMNesting(...): <td> cannot appear as a child of <div>.
          at td
          at EuiTableRowCellCheckbox (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/table/table_row_cell_checkbox.tsx:15:8)
          at /home/jun/Desktop/github/waiting-for-pr/eui/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23
          at CurrentEuiBreakpointProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/services/breakpoint/current_breakpoint.tsx:39:8)
          at EuiComponentDefaultsProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/provider/component_defaults/component_defaults.tsx:59:8)
          at ThemeProvider (/home/jun/Desktop/github/waiting-for-pr/eui/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:125:32)
          at EuiEmotionThemeProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/services/theme/emotion.tsx:25:8)
          at EuiThemeProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/services/theme/provider.tsx:62:3)
          at EuiCacheProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/provider/cache/cache_provider.tsx:18:3)
          at EuiProviderNestedCheck (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/provider/nested/nested_context.tsx:20:42)
          at EuiProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/provider/provider.tsx:87:3)

Signed-off-by: Eng Zer Jun <[email protected]>
@Juneezee
test(EuiTableRowCell): fix validateDOMNesting warning
8ff1fca 
 PASS  src/components/table/table_row_cell.test.tsx
  ● Console

    console.warn scripts/jest/setup/throw_on_console_error.js:49
      Warning: validateDOMNesting(...): <td> cannot appear as a child of <div>.
          at td
          at EuiTableRowCell (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/table/table_row_cell.tsx:117:3)
          at /home/jun/Desktop/github/waiting-for-pr/eui/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23
          at CurrentEuiBreakpointProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/services/breakpoint/current_breakpoint.tsx:39:8)
          at EuiComponentDefaultsProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/provider/component_defaults/component_defaults.tsx:59:8)
          at ThemeProvider (/home/jun/Desktop/github/waiting-for-pr/eui/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:125:32)
          at EuiEmotionThemeProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/services/theme/emotion.tsx:25:8)
          at EuiThemeProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/services/theme/provider.tsx:62:3)
          at EuiCacheProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/provider/cache/cache_provider.tsx:18:3)
          at EuiProviderNestedCheck (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/provider/nested/nested_context.tsx:20:42)
          at EuiProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/provider/provider.tsx:87:3)

Signed-off-by: Eng Zer Jun <[email protected]>
@Juneezee
test(EuiTableRow): fix validateDOMNesting warning
ac3ddd6 
 PASS  src/components/table/table_row.test.tsx
  ● Console

    console.warn scripts/jest/setup/throw_on_console_error.js:49
      Warning: validateDOMNesting(...): <tr> cannot appear as a child of <div>.
          at tr
          at EuiTableRow (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/table/table_row.tsx:52:3)
          at /home/jun/Desktop/github/waiting-for-pr/eui/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23
          at CurrentEuiBreakpointProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/services/breakpoint/current_breakpoint.tsx:39:8)
          at EuiComponentDefaultsProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/provider/component_defaults/component_defaults.tsx:59:8)
          at ThemeProvider (/home/jun/Desktop/github/waiting-for-pr/eui/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:125:32)
          at EuiEmotionThemeProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/services/theme/emotion.tsx:25:8)
          at EuiThemeProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/services/theme/provider.tsx:62:3)
          at EuiCacheProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/provider/cache/cache_provider.tsx:18:3)
          at EuiProviderNestedCheck (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/provider/nested/nested_context.tsx:20:42)
          at EuiProvider (/home/jun/Desktop/github/waiting-for-pr/eui/src/components/provider/provider.tsx:87:3)

Signed-off-by: Eng Zer Jun <[email protected]>
@Juneezee Juneezee requested a review from a team as a code owner February 4, 2024 16:23
@github-actions GitHub Actions
Copy link

github-actions bot commented Feb 4, 2024

👋 Since this is a community submitted pull request, a Buildkite build has not been started automatically. Would an Elastic organization member please verify the contents of this pull request and kick off a build manually?

@cee-chen cee-chen added testing Issues or PRs that only affect tests - will not need changelog entries skip-changelog labels Feb 5, 2024
@cee-chen
Copy link
Contributor

cee-chen commented Feb 5, 2024

buildkite test this

@kibanamachine
Copy link

Preview staging links for this PR:

@elasticmachine
Copy link
Collaborator

💚 Build Succeeded

History

cee-chen
cee-chen approved these changes Feb 5, 2024
View reviewed changes
Copy link
Contributor

@cee-chen cee-chen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you so much for this PR, @Juneezee!! You're awesome! 🎉 ❤️‍🔥

@cee-chen cee-chen merged commit 70634a0 into elastic:main Feb 5, 2024
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@cee-chen cee-chen cee-chen approved these changes

Assignees
No one assigned
Labels
community contribution skip-changelog testing Issues or PRs that only affect tests - will not need changelog entries
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Fix DOM nesting issues reported by validateDOMNesting
4 participants
@Juneezee @cee-chen @kibanamachine @elasticmachine