Skip to content

Commit 84aa4ff

Browse files
codebender828codebender828
committed
test(jest): improve jest test speeds
1 parent 5d8441a commit 84aa4ff

29 files changed

+160
-101
lines changed

‎components.d.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
*
77
* This is a generated file. Do not edit it's contents.
88
*
9-
* This file was generated on 2021-06-30T12:42:36.843Z
9+
* This file was generated on 2021-06-30T14:10:23.013Z
1010
*/
1111

1212
import { ChakraProps } from '@chakra-ui/vue-system'

‎jest.config.js

+19-6
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,32 @@
11
module.exports = {
22
transform: {
3-
'^.+\\.(ts|tsx|js|jsx)$': 'ts-jest/dist',
3+
// '^.+\\.(ts|tsx)$': 'ts-jest',
4+
'^.+\\.(ts|tsx)$': [
5+
'esbuild-jest',
6+
{
7+
jsxFactory: 'h',
8+
jsxFragment: 'Fragment',
9+
sourcemap: true,
10+
target: 'es2020',
11+
},
12+
],
413
},
514
transformIgnorePatterns: ['/node_modules/(?!@popperjs/.*|lodash.)'],
615
moduleNameMapper: {
716
'^@/(.*)$': '<rootDir>/$1',
817
'@chakra-ui/vue-test-utils': '<rootDir>/packages/test-utils/src/index.ts',
918
},
19+
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
1020
snapshotSerializers: [
1121
'@chakra-ui/vue-test-utils/dist/cjs/snapshot-serializer.js',
1222
],
1323
testMatch: ['**/**/*.test.(js|jsx|ts|tsx)'],
14-
globals: {
15-
'ts-jest': {
16-
tsconfig: 'tsconfig.json',
17-
},
18-
},
24+
// globals: {
25+
// 'ts-jest': {
26+
// tsconfig: 'tsconfig.test.json',
27+
// babelConfig: {
28+
// plugins: ['@vue/babel-plugin-jsx'],
29+
// },
30+
// },
31+
// },
1932
}

‎package.json

+4-2
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@
9494
"cypress-plugin-tab": "^1.0.5",
9595
"dequal": "^2.0.2",
9696
"dom-focus-lock": "^1.0.4",
97-
"esbuild-jest": "^0.4.0",
97+
"esbuild-jest": "0.4.0",
9898
"eslint": "^7.0.0",
9999
"eslint-config-prettier": "^6.12.0",
100100
"eslint-config-standard": "^14.1.1",
@@ -138,6 +138,8 @@
138138
"vue3-perfect-scrollbar": "^1.5.5"
139139
},
140140
"devDependencies": {
141-
"@types/eslint": "^7.2.13"
141+
"@types/eslint": "^7.2.13",
142+
"esbuild": "^0.12.12",
143+
"esbuild-plugin-babel": "^0.2.3"
142144
}
143145
}

‎packages/c-focus-lock/src/c-focus-lock.ts

+4-3
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,9 @@
1616

1717
import { defineComponent, PropType, computed, cloneVNode, VNode } from 'vue'
1818
import { focus, FocusableElement, warn, __DEV__ } from '@chakra-ui/utils'
19-
import { UseFocusLockOptions, useFocusLock } from './use-focus-lock'
20-
import { FocusTarget } from 'focus-trap'
19+
import { useFocusLock } from './use-focus-lock'
20+
import type { UseFocusLockOptions } from './use-focus-lock'
21+
import type { FocusTarget } from 'focus-trap'
2122

2223
type RefProp = () => HTMLElement | string | object | undefined
2324

@@ -64,7 +65,7 @@ export const CFocusLock = defineComponent({
6465
default: false,
6566
},
6667
restoreFocus: {
67-
type: Boolean as PropType<Boolean>,
68+
type: Boolean as PropType<boolean>,
6869
default: true,
6970
},
7071
},

‎packages/c-focus-lock/src/use-focus-lock.ts

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
1-
import { MaybeElementRef, unrefElement, useRef } from '@chakra-ui/vue-utils'
1+
import { MaybeElementRef, useRef } from '@chakra-ui/vue-utils'
22
import {
33
AnyFunction,
44
focus,
55
getAllFocusable,
66
getFirstFocusable,
77
} from '@chakra-ui/utils'
88
import { watch, ref, Ref, UnwrapRef, onBeforeUnmount, nextTick } from 'vue'
9-
import {
9+
import { createFocusTrap } from 'focus-trap'
10+
11+
import type {
1012
ActivateOptions,
11-
createFocusTrap,
1213
DeactivateOptions,
1314
FocusTarget,
1415
FocusTrap,

‎packages/c-focus-lock/tests/c-focus-lock.test.ts

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { reactive } from 'vue'
22
import { render, screen, userEvent, waitMs } from '../../test-utils/src'
3-
import { CFocusLock, useFocusLock, UseFocusLockOptions } from '../src'
4-
import { CPortal } from '../../c-portal/src'
3+
import { CFocusLock, useFocusLock } from '../src'
54

65
const onActivateMock = jest.fn()
76
const onDeactivateMock = jest.fn()
@@ -75,7 +74,7 @@ it('should focus initialFocus element when initialFocus element is provided', as
7574
</div>
7675
`,
7776
setup() {
78-
const options: UseFocusLockOptions = {
77+
const options = {
7978
immediate: true,
8079
onActivate: onActivateMock,
8180
onDeactivate: onDeactivateMock,

‎packages/layout/examples/base-center.vue

+16-2
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,22 @@
1414
</c-box>
1515
<c-box>
1616
<c-box>Circle</c-box>
17-
<c-circle size="40px" bg="teal.700" color="white" display="">
17+
<c-circle
18+
:center-content="true"
19+
size="40px"
20+
bg="teal.700"
21+
color="white"
22+
display=""
23+
>
1824
<c-icon name="phone"></c-icon>
1925
</c-circle>
2026
</c-box>
27+
<c-box>
28+
<c-link to="/"> Test router link </c-link>
29+
</c-box>
30+
<c-box>
31+
<c-kbd color-scheme="cyan"> Test router link </c-kbd>
32+
</c-box>
2133
</c-v-stack>
2234
</template>
2335

@@ -29,5 +41,7 @@ import {
2941
CBox,
3042
CSquare,
3143
CCircle,
32-
} from '@chakra-ui/vue-layout'
44+
CLink,
45+
CKbd,
46+
} from '../src'
3347
</script>

‎packages/layout/src/aspect-ratio.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export const CAspectRatio: ComponentWithProps<DeepPartial<AspectRatioProps>> = d
3939
setup(props, { slots, attrs }) {
4040
return () => (
4141
<chakra.div
42-
label="aspect-ratio"
42+
__label="aspect-ratio"
4343
position="relative"
4444
_before={{
4545
height: 0,
@@ -70,7 +70,7 @@ export const CAspectRatio: ComponentWithProps<DeepPartial<AspectRatioProps>> = d
7070
}}
7171
{...attrs}
7272
>
73-
{slots?.default?.()}
73+
{slots}
7474
</chakra.div>
7575
)
7676
},

‎packages/layout/src/badge.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export const CBadge: ComponentWithProps<DeepPartial<BadgeProps>> = defineCompone
4444
return (
4545
<chakra.div
4646
as={props.as}
47-
label="badge"
47+
__label="badge"
4848
__css={{
4949
display: 'inline-block',
5050
whiteSpace: 'nowrap',
@@ -53,7 +53,7 @@ export const CBadge: ComponentWithProps<DeepPartial<BadgeProps>> = defineCompone
5353
}}
5454
{...attrs}
5555
>
56-
{slots?.default?.()}
56+
{slots}
5757
</chakra.div>
5858
)
5959
}

‎packages/layout/src/box.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@ export const CBox: ComponentWithProps<DeepPartial<BoxProps>> = defineComponent({
2626
},
2727
setup(props, { slots, attrs }) {
2828
return () => (
29-
<chakra.div as={props.as} label="box" {...attrs}>
30-
{slots?.default?.()}
29+
<chakra.div as={props.as} __label="box" {...attrs}>
30+
{slots}
3131
</chakra.div>
3232
)
3333
},
@@ -74,7 +74,7 @@ export const CSquare: ComponentWithProps<
7474
)
7575
return () => (
7676
<CBox
77-
label="square"
77+
__label="square"
7878
boxSize={props.size}
7979
__css={{
8080
...styles.value,
@@ -83,7 +83,7 @@ export const CSquare: ComponentWithProps<
8383
}}
8484
{...attrs}
8585
>
86-
{slots?.default?.()}
86+
{slots}
8787
</CBox>
8888
)
8989
},
@@ -100,8 +100,8 @@ export const CCircle: ComponentWithProps<
100100
name: 'CCircle',
101101
setup(_, { slots, attrs }) {
102102
return () => (
103-
<CSquare label="circle" borderRadius="9999px" {...attrs}>
104-
{slots?.default?.()}
103+
<CSquare __label="circle" borderRadius="9999px" {...attrs}>
104+
{slots}
105105
</CSquare>
106106
)
107107
},

‎packages/layout/src/center.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -29,16 +29,16 @@ export const CCenter: ComponentWithProps<
2929
return () => {
3030
return (
3131
<chakra.div
32-
label="center"
32+
__label="center"
3333
__css={{
3434
display: 'flex',
35-
alignItems: 'flex',
35+
alignItems: 'center',
3636
justifyContent: 'center'
3737
}}
3838
{...props}
3939
{...attrs}
4040
>
41-
{slots.default?.()}
41+
{slots}
4242
</chakra.div>
4343
)
4444
}

‎packages/layout/src/container.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export const CContainer: ComponentWithProps<DeepPartial<ContainerProps>> = defin
5454

5555
return () => (
5656
<chakra.div
57-
label="container"
57+
__label="container"
5858
__css={{
5959
...styles.value,
6060
...(props.centerContent && {
@@ -63,10 +63,9 @@ export const CContainer: ComponentWithProps<DeepPartial<ContainerProps>> = defin
6363
alignItems: 'center',
6464
})
6565
}}
66-
{...props}
6766
{...attrs}
6867
>
69-
{slots.default?.()}
68+
{slots}
7069
</chakra.div>
7170
)
7271
},

‎packages/layout/src/divider.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ export const CDivider: ComponentWithProps<DeepPartial<DividerProps>> = defineCom
8181
borderStyle,
8282
...dividerStyle.value
8383
}}
84-
label="divider"
84+
__label="divider"
8585
>
8686
{slots.default?.()}
8787
</chakra.hr>

‎packages/layout/src/grid.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -166,11 +166,11 @@ export const CGrid: ComponentWithProps<DeepPartial<GridProps>> = defineComponent
166166
return (
167167
<chakra.div
168168
as={props.as}
169-
label="grid"
169+
__label="grid"
170170
__css={styles.value}
171171
{...attrs}
172172
>
173-
{slots?.default?.()}
173+
{slots}
174174
</chakra.div>
175175
)
176176
}
@@ -212,8 +212,8 @@ export const CGridItem: ComponentWithProps<DeepPartial<GridItemProps>> = defineC
212212
)
213213

214214
return () => (
215-
<chakra.div as={props.as} label="grid__item" __css={styles.value} {...attrs}>
216-
{slots?.default?.()}
215+
<chakra.div as={props.as} __label="grid__item" __css={styles.value} {...attrs}>
216+
{slots}
217217
</chakra.div>
218218
)
219219
},

‎packages/layout/src/heading.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,8 @@ export const CHeading: ComponentWithProps<DeepPartial<HeadingProps>> = defineCom
3636
const styles = useStyleConfig('Heading', themingProps.value)
3737

3838
return () => (
39-
<chakra.h2 as={props.as} label="heading" __css={styles.value} {...attrs}>
40-
{slots?.default?.()}
39+
<chakra.h2 as={props.as} __label="heading" __css={styles.value} {...attrs}>
40+
{slots}
4141
</chakra.h2>
4242
)
4343
},

‎packages/layout/src/kbd.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,8 @@ export const CKbd: ComponentWithProps<DeepPartial<KbdProps>> = defineComponent({
4747
const styles = useStyleConfig('Kbd', themingProps.value)
4848

4949
return () => (
50-
<chakra.kbd label="kdb" __css={{ fontFamily: 'mono', ...styles.value }} {...attrs}>
51-
{slots?.default?.()}
50+
<chakra.kbd __label="kbd" __css={{ fontFamily: 'mono', ...styles.value }} {...attrs}>
51+
{slots}
5252
</chakra.kbd>
5353
)
5454
},

‎packages/layout/src/link-box.tsx

+5-4
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@ export const CLinkOverlay: ComponentWithProps<DeepPartial<LinkOverlayProps>> = d
2222
setup(props, { slots, attrs }) {
2323
return () => (
2424
<chakra.div
25-
label="linkbox__ovelay"
25+
as={props.as}
26+
__label="linkbox__overlay"
2627
// @ts-ignore Can we type the "rel" HTML JSX Attribute?
2728
rel={props.isExternal ? 'noopener noreferrer' : undefined}
2829
target={props.isExternal ? '_blank' : undefined}
@@ -42,7 +43,7 @@ export const CLinkOverlay: ComponentWithProps<DeepPartial<LinkOverlayProps>> = d
4243
}}
4344
{...attrs}
4445
>
45-
{slots?.default?.()}
46+
{slots}
4647
</chakra.div>
4748
)
4849
}
@@ -68,7 +69,7 @@ export const CLinkBox: ComponentWithProps<DeepPartial<LinkBoxProps>> = defineCom
6869
setup(props, { slots, attrs }) {
6970
return () => {
7071
return (
71-
<chakra.div as={props.as} label="linkbox" position="relative" __css={{
72+
<chakra.div as={props.as} __label="linkbox" position="relative" __css={{
7273
/* Elevates links and abbreviations */
7374
'a[href]:not(.chakra-linkbox__overlay), abbr[title]': {
7475
position: 'relative',
@@ -77,7 +78,7 @@ export const CLinkBox: ComponentWithProps<DeepPartial<LinkBoxProps>> = defineCom
7778
}}
7879
{...attrs}
7980
>
80-
{slots?.default?.()}
81+
{slots}
8182
</chakra.div>
8283
)
8384
}

0 commit comments

Comments
 (0)