@loadsmart/loadsmart-ui 5.17.0 → 5.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@loadsmart/loadsmart-ui",
-	"version": "5.17.0",
+	"version": "5.19.0",
 	"description": "Miranda UI, a React UI library",
 	"main": "dist",
 	"files": [
@@ -26,39 +26,6 @@
 	"storybook-deployer": {
 		"commitMessage": "chore(docs): deploy storybook to GitHub pages [skip ci]"
 	},
-	"jest": {
-		"globals": {
-			"window": true
-		},
-		"verbose": true,
-		"coverageDirectory": "./coverage/",
-		"collectCoverage": false,
-		"setupFiles": [
-			"./tests/jestsetup.tsx"
-		],
-		"collectCoverageFrom": [
-			"src/components/**/*.{js,tsx}",
-			"!src/**/**/*.test.{js,tsx}"
-		],
-		"coverageReporters": [
-			"text",
-			"lcov"
-		],
-		"moduleDirectories": [
-			"node_modules",
-			"src"
-		],
-		"moduleFileExtensions": [
-			"ts",
-			"tsx",
-			"js",
-			"json"
-		],
-		"testMatch": [
-			"**/__tests__/**/*.[jt]s?(x)",
-			"**/?(*.)+(jest|test).[jt]s?(x)"
-		]
-	},
 	"lint-staged": {
 		"src/**/*.{js,ts,jsx,tsx,json}": [
 			"eslint --fix",
@@ -71,11 +38,10 @@
 		]
 	},
 	"devDependencies": {
-		"@babel/cli": "7.13.16",
-		"@babel/core": "7.14.0",
-		"@babel/preset-env": "7.14.1",
-		"@babel/preset-react": "7.13.13",
-		"@babel/preset-typescript": "7.13.0",
+		"@babel/core": "^7.20.12",
+		"@babel/preset-env": "^7.20.2",
+		"@babel/preset-react": "^7.18.6",
+		"@babel/preset-typescript": "^7.18.6",
 		"@commitlint/cli": "16.0.2",
 		"@commitlint/config-conventional": "16.0.0",
 		"@loadsmart/miranda-tokens": "1.3.0",
@@ -109,7 +75,7 @@
 		"@testing-library/react-hooks": "^5.1.3",
 		"@testing-library/user-event": "^13.5.0",
 		"@types/chance": "1.1.1",
-		"@types/jest": "26.0.23",
+		"@types/jest": "^27.5.2",
 		"@types/lodash.debounce": "4.0.6",
 		"@types/lodash.flatten": "4.4.6",
 		"@types/lodash.get": "4.4.6",
@@ -126,7 +92,7 @@
 		"@typescript-eslint/parser": "4.22.1",
 		"@zerollup/ts-transform-paths": "1.7.18",
 		"autoprefixer": "9",
-		"babel-jest": "26.6.3",
+		"babel-jest": "^27.5.1",
 		"babel-loader": "8.2.2",
 		"babel-plugin-react-remove-properties": "0.3.0",
 		"babel-plugin-styled-components": "1.12.0",
@@ -147,8 +113,8 @@
 		"eslint-plugin-testing-library": "^5.9.1",
 		"husky": "7.0.4",
 		"identity-obj-proxy": "3.0.0",
-		"jest": "26.6.3",
-		"jest-svg-transformer": "1.0.0",
+		"jest": "^27.5.1",
+		"jest-transformer-svg": "1.0.2",
 		"lint-staged": "11.0.0",
 		"npm-run-all": "4.1.5",
 		"postcss": "^7.0.39",
@@ -175,7 +141,7 @@
 		"stylelint-no-unsupported-browser-features": "5.0.1",
 		"stylelint-order": "4.1.0",
 		"tailwindcss": "npm:@tailwindcss/postcss7-compat",
-		"ts-jest": "26.5.6",
+		"ts-jest": "^27.1.5",
 		"ts-node": "^10.9.1",
 		"ts-toolbelt": "^9.6.0",
 		"ttypescript": "^1.5.13",

package/src/components/Label/Label.test.tsx

@@ -51,9 +51,30 @@ describe('<Label />', () => {
     setup(props)
 
     const tipAnchor = screen.getByText('?', { selector: 'span' })
-    expect(() => screen.getByText(/`${props.message}`/i)).toThrow()
+    expect(screen.queryByText(/`${props.message}`/i)).not.toBeInTheDocument()
 
     userEvent.hover(tipAnchor)
     screen.getByText(props.tip)
   })
+
+  it('renders node tip', () => {
+    const sentence = generator.sentence()
+    const props = {
+      children: generator.word(),
+      tip: (
+        <div data-testid="tip-div-id">
+          <b>{sentence}</b>
+        </div>
+      ),
+    }
+
+    setup(props)
+
+    const tipAnchor = screen.getByText('?', { selector: 'span' })
+    expect(screen.queryByText(/`${props.message}`/i)).not.toBeInTheDocument()
+
+    userEvent.hover(tipAnchor)
+    expect(screen.getByTestId('tip-div-id')).toBeInTheDocument()
+    screen.getByText(sentence)
+  })
 })

package/src/components/Label/Label.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactNode } from 'react'
 import type { LabelHTMLAttributes } from 'react'
 import styled from 'styled-components'
 import clsx from 'clsx'
@@ -11,7 +11,7 @@ import ellipsizable from 'styles/ellipsizable'
 import font from 'styles/font'
 import { getToken as token } from 'theming'
 
-import { Tooltip } from '../Tooltip'
+import { Tooltip, TooltipProps } from '../Tooltip'
 
 type AcceptedType = 'label' | 'div' | 'span'
 
@@ -20,7 +20,8 @@ interface WithAdditionalProps {
   disabled?: boolean
   required?: boolean
   scheme?: ColorScheme
-  tip?: string
+  tip?: ReactNode
+  tipProps?: Omit<TooltipProps, 'message'>
 }
 
 export interface LabelProps
@@ -91,6 +92,7 @@ function Label({
   required,
   scheme = 'light',
   tip,
+  tipProps = {},
   ...others
 }: LabelProps): JSX.Element {
   const tag = String(as || 'label') as AcceptedType
@@ -107,7 +109,7 @@ function Label({
       <StyledChildren scheme={scheme}>{children}</StyledChildren>
       {required && <StyledRequired>*</StyledRequired>}
       {!isNil(tip) && (
-        <Tooltip scheme={scheme} message={tip || ''}>
+        <Tooltip scheme={scheme} message={tip || ''} {...tipProps}>
           <StyledTooltipAnchor scheme={scheme}>?</StyledTooltipAnchor>
         </Tooltip>
       )}

package/src/testing/SelectEvent/SelectEvent.test.tsx

@@ -41,14 +41,6 @@ function Experiment(overrides: Partial<SelectProps>) {
 }
 
 describe('SelectEvent', () => {
-  beforeEach(() => {
-    jest.useFakeTimers()
-  })
-  afterEach(() => {
-    jest.runOnlyPendingTimers()
-    jest.useRealTimers()
-  })
-
   const setup = (overrides: Partial<SelectProps>) =>
     renderer(<Experiment {...overrides} />).render()