WIP(emotion,ui-i18n,ui-react-utils): add unit tests

instructure · Oct 25, 2023 · 7fc71f5 · 7fc71f5
1 parent 124a112
commit 7fc71f5
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 23 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/emotion/package.json b/packages/emotion/package.json
@@ -38,7 +38,8 @@
   },
   "devDependencies": {
     "@instructure/ui-babel-preset": "8.46.1",
-    "@instructure/ui-test-utils": "8.46.1"
+    "@instructure/ui-test-utils": "8.46.1",
+    "react-dom": "^18.2.0"
   },
   "peerDependencies": {
     "react": ">=16.8 <=18"

diff --git a/packages/emotion/src/__tests__/withStyle.test.tsx b/packages/emotion/src/__tests__/withStyle.test.tsx
@@ -24,6 +24,8 @@
 
 /** @jsx jsx */
 import React from 'react'
+import ReactDOM from 'react-dom'
+import ReactTestUtils from 'react-dom/test-utils'
 import PropTypes from 'prop-types'
 
 import { expect, match, mount, stub, within } from '@instructure/ui-test-utils'
@@ -136,6 +138,28 @@ describe('@withStyle', async () => {
     }
   }
 
+  class WrapperComponent extends React.Component {
+    render() {
+      return (
+        <div>
+          <ThemeableComponent />
+        </div>
+      )
+    }
+  }
+
+  it.only('can be found and tested with ReactTestUtils', async () => {
+    const rootNode = document.createElement('div')
+    document.body.appendChild(rootNode)
+
+    // eslint-disable-next-line react/no-render-return-value
+    const rendered = ReactDOM.render(<WrapperComponent />, rootNode)
+    ReactTestUtils.findRenderedComponentWithType(
+      rendered as any,
+      (ThemeableComponent as any).originalType
+    )
+  })
+
   describe('with theme provided by InstUISettingsProvider', async () => {
     it('should add css class suffixed with label', async () => {
       const subject = await mount(

diff --git a/packages/ui-i18n/src/__tests__/bidirectional.test.tsx b/packages/ui-i18n/src/__tests__/bidirectional.test.tsx
@@ -41,15 +41,11 @@ class BidirectionalComponent extends React.Component<BidirectionalProps> {
   }
 }
 
-class WrappedBidirectional extends React.Component {
-  constructor(props) {
-    super(props)
-  }
-
+class WrapperComponent extends React.Component {
   render() {
     return (
-      <div id="root">
-        <button id="asdf">gonb</button>
+      <div>
+        <BidirectionalComponent />
       </div>
     )
   }
@@ -61,23 +57,16 @@ describe('@bidirectional', async () => {
     expect(subject.getDOMNode().getAttribute('data-dir')).to.equal('ltr')
   })
 
-  it.only('originalType', async () => {
+  it('can be found and tested with ReactTestUtils', async () => {
     const rootNode = document.createElement('div')
     document.body.appendChild(rootNode)
+
     // eslint-disable-next-line react/no-render-return-value
-    const rendered = ReactDOM.render(
-      <div>
-        <BidirectionalComponent />
-      </div>,
-      rootNode
-    )
-    const result = ReactTestUtils.findRenderedComponentWithType(
-      rendered as React.Component,
-      BidirectionalComponent.originalType
+    const rendered = ReactDOM.render(<WrapperComponent />, rootNode)
+    ReactTestUtils.findRenderedComponentWithType(
+      rendered as any,
+      (BidirectionalComponent as any).originalType
     )
-    // console.log('asd')
-    // console.log(result)
-    // console.log('asd')
   })
 
   it('should set the text direction via props', async () => {

diff --git a/packages/ui-react-utils/src/__tests__/DeterministicIdContext.test.tsx b/packages/ui-react-utils/src/__tests__/DeterministicIdContext.test.tsx
@@ -23,6 +23,8 @@
  */
 
 import React from 'react'
+import ReactDOM from 'react-dom'
+import ReactTestUtils from 'react-dom/test-utils'
 
 import { expect, mount } from '@instructure/ui-test-utils'
 import {
@@ -41,13 +43,35 @@ class TestComponent extends React.Component<
   }
 }
 
+class WrapperComponent extends React.Component {
+  render() {
+    return (
+      <div>
+        <TestComponent />
+      </div>
+    )
+  }
+}
+
 const uniqueIds = (el: { getDOMNode: () => Element }) => {
   const idList = Array.from(el.getDOMNode().children).map((el) => el.id)
 
   return new Set(idList).size === idList.length
 }
 
 describe('DeterministicIdContext', () => {
+  it('can be found and tested with ReactTestUtils', async () => {
+    const rootNode = document.createElement('div')
+    document.body.appendChild(rootNode)
+
+    // eslint-disable-next-line react/no-render-return-value
+    const rendered = ReactDOM.render(<WrapperComponent />, rootNode)
+    ReactTestUtils.findRenderedComponentWithType(
+      rendered as any,
+      (TestComponent as any).originalType
+    )
+  })
+
   it('should generate unique ids without Provider wrapper', async () => {
     const el = await mount(
       <div>