mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-30 12:52:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: unit test & lint

Browse Source
This commit is contained in:
07akioni 2023-05-09 23:03:28 +08:00
parent 3ca7a94eea
commit 01d096925a
11 changed files with 93 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
package.json
View File

@ -119,9 +119,9 @@
"grapheme-splitter": "^1.0.4",
"husky": "^8.0.1",
"inquirer": "^9.1.0",
"jest": "^29.3.1",
"jest-canvas-mock": "^2.3.1",
"jest-environment-jsdom": "^29.0.0",
"jest": "^29.5.0",
"jest-canvas-mock": "^2.5.0",
"jest-environment-jsdom": "^29.5.0",
"katex": "^0.16.3",
"lint-staged": "^13.0.3",
"lyla": "^0.6.8",
@ -131,7 +131,7 @@
"rollup": "^3.21.2",
"rollup-plugin-esbuild": "^5.0.0",
"superagent": "^8.0.0",
"ts-jest": "^29.0.3",
"ts-jest": "^29.1.0",
"typescript": "5.0.4",
"vfonts": "^0.1.0",
"vite": "^4.3.3",

4
src/_utils/composable/use-browser-location.ts
View File

@ -1,8 +1,6 @@
import { onMounted, onUnmounted, type Ref, ref } from 'vue'
import { isBrowser } from '../env/is-browser'
const defaultWindow = isBrowser ? window : null
export interface IWindowLocation {
hash?: string
host?: string
@ -16,7 +14,7 @@ export interface IWindowLocation {
}
export const useBrowserLocation = (
customWindow = defaultWindow
customWindow = isBrowser ? window : null
): Ref<IWindowLocation> => {
const getWindowLocation = (): IWindowLocation => {
const {

4
src/breadcrumb/src/BreadcrumbItem.tsx
View File

@ -42,6 +42,10 @@ export default defineComponent({
const browserLocationRef = useBrowserLocation()
const htmlTagRef = computed(() => (props.href ? 'a' : 'span'))
console.log(
'!!!browserLocationRef.value.href',
browserLocationRef.value.href
)
const ariaCurrentRef = computed(() =>
browserLocationRef.value.href === props.href ? 'location' : null
)

17
src/breadcrumb/tests/Breadcrumb.spec.ts
View File

@ -107,15 +107,18 @@ describe('n-breadcrumb', () => {
it('should add `aria-current` if the item is the current location', () => {
const originalWindow = window
globalThis.window = Object.create(window)
const windowSpy = jest.spyOn(globalThis, 'window', 'get')
const currentUrl = 'http://some-domaine/path2'
const url = 'http://some-domaine/path1'
Object.defineProperty(window, 'location', {
value: {
href: currentUrl
}
windowSpy.mockImplementation(() => {
const mockedWindow = Object.create(originalWindow)
Object.defineProperty(mockedWindow, 'location', {
value: {
href: currentUrl
}
})
return mockedWindow
})
const wrapper = mount(NBreadcrumb, {
slots: {
default: () => [
@ -151,7 +154,7 @@ describe('n-breadcrumb', () => {
.find(`a.n-breadcrumb-item__link[href="${currentUrl}"]`)
.attributes('aria-current')
).toBe('location')
globalThis.window = originalWindow
windowSpy.mockRestore()
wrapper.unmount()
})

7
src/carousel/src/CarouselItem.tsx
View File

@ -33,7 +33,9 @@ export default defineComponent({
const isNextRef = computed(() => NCarousel.isNext(indexRef.value))
const isActiveRef = computed(() => NCarousel.isActive(indexRef.value))
const styleRef = computed(() => NCarousel.getSlideStyle(indexRef.value))
onMounted(() => { NCarousel.addSlide(selfElRef.value) })
onMounted(() => {
NCarousel.addSlide(selfElRef.value)
})
onBeforeUnmount(() => {
NCarousel.removeSlide(selfElRef.value)
})
@ -83,8 +85,7 @@ export default defineComponent({
style={style}
// We use ts-ignore for vue-tsc, since it seems to patch native event
// for vue components
// eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error, @typescript-eslint/ban-ts-comment
// @ts-ignore
// @ts-expect-error vue's tsx has type for capture events
onClickCapture={this.handleClick}
>
{slots.default?.({

10
src/cascader/tests/Cascader.spec.ts
View File

@ -1,8 +1,8 @@
/* eslint-disable @typescript-eslint/no-confusing-void-expression */
/* eslint-disable @typescript-eslint/await-thenable */
import { mount } from '@vue/test-utils'
import { NCascader } from '../index'
import type { CascaderOption } from '../src/interface'
import { nextTick } from 'vue'
function getOptions (depth = 3, iterator = 1, prefix = ''): CascaderOption[] {
const length = 12
@ -238,11 +238,11 @@ describe('n-cascader', () => {
await wrapper.find('.n-base-selection').trigger('click')
expect(document.querySelector('.n-cascader-menu')).not.toEqual(null)
await document.body.click()
await document.body.dispatchEvent(mousedownEvent)
await document.body.dispatchEvent(mouseupEvent)
document.body.click()
document.body.dispatchEvent(mousedownEvent)
document.body.dispatchEvent(mouseupEvent)
await nextTick()
expect(document.querySelector('.n-cascader-menu')).toEqual(null)
wrapper.unmount()
})
})

33
src/data-table/tests/DataTable.spec.tsx
View File

@ -1,4 +1,3 @@
/* eslint-disable @typescript-eslint/await-thenable */
import { h, type HTMLAttributes, nextTick, ref } from 'vue'
import { mount } from '@vue/test-utils'
import { type DataTableInst, NDataTable, type DataTableColumns } from '../index'
@ -93,7 +92,7 @@ describe('n-data-table', () => {
onUpdatePage={onPageChange}
/>
))
await void wrapper.findAll('.n-pagination-item')[2].trigger('click')
void wrapper.findAll('.n-pagination-item')[2].trigger('click')
await nextTick()
expect(onPageChange).toHaveBeenCalled()
expect(wrapper.find('.n-pagination-prefix').text()).toEqual('978')
@ -361,7 +360,7 @@ describe('n-data-table', () => {
colClassName: string,
target: number[]
): Promise<boolean> => {
const cols = await wrapper.findAll(colClassName)
const cols = wrapper.findAll(colClassName)
const colNums = cols.slice(1).map((item) => Number(item.text()))
const matchResult = String(colNums) === String(target)
if (!matchResult) {
@ -387,7 +386,7 @@ describe('n-data-table', () => {
const ageDom: HTMLElement | null = document.querySelector('#age-title')
it('chinese: descend, math: false, english: false', async () => {
await chineseDom?.click()
chineseDom?.click()
expect(
await checkScoreIsMatched([
[98, 98, 98, 88],
@ -397,7 +396,8 @@ describe('n-data-table', () => {
).toEqual(true)
})
it('chinese: descend, math: descend, english: false', async () => {
await mathDom?.click()
mathDom?.click()
await nextTick()
expect(
await checkScoreIsMatched([
[98, 98, 98, 88],
@ -408,7 +408,8 @@ describe('n-data-table', () => {
})
it('chinese: descend, math: descend, english: descend', async () => {
await englishDom?.click()
englishDom?.click()
await nextTick()
expect(
await checkScoreIsMatched([
[98, 98, 98, 88],
@ -419,7 +420,8 @@ describe('n-data-table', () => {
})
it('chinese: ascend, math: descend, english: descend', async () => {
await chineseDom?.click()
chineseDom?.click()
await nextTick()
expect(
await checkScoreIsMatched([
[88, 98, 98, 98],
@ -430,7 +432,8 @@ describe('n-data-table', () => {
})
it('chinese: false, math: descend, english: descend', async () => {
await chineseDom?.click()
chineseDom?.click()
await nextTick()
expect(
await checkScoreIsMatched([
[88, 98, 98, 98],
@ -441,7 +444,8 @@ describe('n-data-table', () => {
})
it('chinese: false, math: ascend, english: descend', async () => {
await mathDom?.click()
mathDom?.click()
await nextTick()
expect(
await checkScoreIsMatched([
[98, 98, 98, 88],
@ -452,7 +456,8 @@ describe('n-data-table', () => {
})
it('chinese: false, math: false, english: descend', async () => {
await mathDom?.click()
mathDom?.click()
await nextTick()
expect(
await checkScoreIsMatched([
[98, 98, 88, 98],
@ -463,7 +468,8 @@ describe('n-data-table', () => {
})
it('chinese: descend, math: false, english: descend', async () => {
await chineseDom?.click()
chineseDom?.click()
await nextTick()
expect(
await checkScoreIsMatched([
[98, 98, 98, 88],
@ -492,7 +498,8 @@ describe('n-data-table', () => {
})
it('age: descend', async () => {
await ageDom?.click()
ageDom?.click()
await nextTick()
const result =
(await checkIsMatched('.age-col', [42, 32, 32, 32])) &&
(await checkScoreIsMatched([
@ -1168,7 +1175,7 @@ describe('props.columns', () => {
expect(wrapper.findAll('tbody td')[0].attributes('class')).toContain(
'n-data-table-td--expand'
)
await void wrapper
void wrapper
.findAll('tbody .n-data-table-expand-trigger')[0]
.trigger('click')
await nextTick()

56
src/dialog/tests/Dialog.spec.tsx
View File

@ -1,4 +1,3 @@
/* eslint-disable @typescript-eslint/await-thenable */
import { mount } from '@vue/test-utils'
import { defineComponent, h, nextTick } from 'vue'
import { NDialogProvider, useDialog, NDialog, type DialogProps } from '../index'
@ -87,9 +86,10 @@ describe('n-dialog', () => {
return null
}
})
const wrapper = await mount(() => (
const wrapper = mount(() => (
<Provider>{{ default: () => <Test /> }}</Provider>
))
await nextTick()
expect(document.querySelector('.n-button__icon')).not.toEqual(null)
wrapper.unmount()
})
@ -114,9 +114,8 @@ describe('n-dialog', () => {
document
.querySelector('.n-modal-mask')
?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
await nextTick(() => {
expect(document.querySelector('.n-dialog')).not.toBeNull()
})
await nextTick()
expect(document.querySelector('.n-dialog')).not.toBeNull()
wrapper.unmount()
})
@ -135,9 +134,10 @@ describe('n-dialog', () => {
return null
}
})
const wrapper = await mount(() => (
const wrapper = mount(() => (
<Provider>{{ default: () => <Test /> }}</Provider>
))
await nextTick()
document
.querySelector('.n-modal-mask')
?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
@ -161,9 +161,10 @@ describe('n-dialog', () => {
return null
}
})
const wrapper = await mount(() => (
const wrapper = mount(() => (
<Provider>{{ default: () => <Test /> }}</Provider>
))
await nextTick()
expect(
document.querySelector('.n-dialog')?.getAttribute('style')
).toContain('color: rgb(79, 178, 51);')
@ -177,41 +178,46 @@ describe('n-dialog', () => {
const TestSuccess = createTestComponent('success')
const TestWarning = createTestComponent('warning')
const wrapperCreate = await mount(() => (
const wrapperCreate = mount(() => (
<Provider>{{ default: () => <TestCreate /> }}</Provider>
))
await nextTick()
expect(
document.querySelector('.n-dialog')?.getAttribute('style')
).toContain('--n-icon-color: #18a058;')
wrapperCreate.unmount()
const wrapperError = await mount(() => (
const wrapperError = mount(() => (
<Provider>{{ default: () => <TestError /> }}</Provider>
))
await nextTick()
expect(
document.querySelector('.n-dialog')?.getAttribute('style')
).toContain('--n-icon-color: #d03050;')
wrapperError.unmount()
const wrapperInfo = await mount(() => (
const wrapperInfo = mount(() => (
<Provider>{{ default: () => <TestInfo /> }}</Provider>
))
await nextTick()
expect(
document.querySelector('.n-dialog')?.getAttribute('style')
).toContain('--n-icon-color: #2080f0;')
wrapperInfo.unmount()
const wrapperSuccess = await mount(() => (
const wrapperSuccess = mount(() => (
<Provider>{{ default: () => <TestSuccess /> }}</Provider>
))
await nextTick()
expect(
document.querySelector('.n-dialog')?.getAttribute('style')
).toContain('--n-icon-color: #18a058;')
wrapperSuccess.unmount()
const wrapperWarning = await mount(() => (
const wrapperWarning = mount(() => (
<Provider>{{ default: () => <TestWarning /> }}</Provider>
))
await nextTick()
expect(
document.querySelector('.n-dialog')?.getAttribute('style')
).toContain('--n-icon-color: #f0a020;')
@ -220,18 +226,20 @@ describe('n-dialog', () => {
it('should work with `bordered` option', async () => {
const Test = createTestComponent('info', { bordered: true })
const wrapper = await mount(() => (
const wrapper = mount(() => (
<Provider>{{ default: () => <Test /> }}</Provider>
))
await nextTick()
expect(document.querySelector('.n-dialog--bordered')).not.toEqual(null)
wrapper.unmount()
})
it('should work with `closable` option', async () => {
const Test = createTestComponent('info', { closable: false })
const wrapper = await mount(() => (
const wrapper = mount(() => (
<Provider>{{ default: () => <Test /> }}</Provider>
))
await nextTick()
expect(document.querySelector('.n-base-icon')).not.toEqual(null)
wrapper.unmount()
})
@ -240,13 +248,13 @@ describe('n-dialog', () => {
const TestLeft = createTestComponent('info', { iconPlacement: 'left' })
const TestTop = createTestComponent('info', { iconPlacement: 'top' })
const wrapperLeft = await mount(() => (
const wrapperLeft = mount(() => (
<Provider>{{ default: () => <TestLeft /> }}</Provider>
))
const wrapperTop = await mount(() => (
const wrapperTop = mount(() => (
<Provider>{{ default: () => <TestTop /> }}</Provider>
))
await nextTick()
expect(document.querySelector('.n-dialog--icon-left')).not.toEqual(null)
wrapperLeft.unmount()
expect(document.querySelector('.n-dialog--icon-top')).not.toEqual(null)
@ -254,23 +262,25 @@ describe('n-dialog', () => {
})
it('should work with `negative-text` option', async () => {
const Test = createTestComponent('info', { negativeText: 'test' })
const wrapper = await mount(() => (
const Test = createTestComponent('info', { negativeText: 'test1' })
const wrapper = mount(() => (
<Provider>{{ default: () => <Test /> }}</Provider>
))
await nextTick()
expect(document.querySelector('.n-button__content')?.textContent).toBe(
'test'
'test1'
)
wrapper.unmount()
})
it('should work with `positive-text` option', async () => {
const Test = createTestComponent('info', { positiveText: 'test' })
const wrapper = await mount(() => (
const Test = createTestComponent('info', { positiveText: 'test2' })
const wrapper = mount(() => (
<Provider>{{ default: () => <Test /> }}</Provider>
))
await nextTick()
expect(document.querySelector('.n-button__content')?.textContent).toBe(
'test'
'test2'
)
wrapper.unmount()
})

16
src/mention/tests/Mention.spec.ts
View File

@ -1,8 +1,6 @@
/* eslint-disable @typescript-eslint/no-confusing-void-expression */
/* eslint-disable @typescript-eslint/await-thenable */
import { mount } from '@vue/test-utils'
import { sleep } from 'seemly'
import { h } from 'vue'
import { h, nextTick } from 'vue'
import { NIcon } from '../../icon'
import { NMention } from '../index'
@ -198,8 +196,8 @@ describe('n-mention', () => {
props: { options, 'on-blur': onBlur }
})
await wrapper.find('input').element.focus()
await wrapper.find('input').element.blur()
wrapper.find('input').element.focus()
wrapper.find('input').element.blur()
expect(onBlur).toHaveBeenCalled()
wrapper.unmount()
})
@ -209,7 +207,8 @@ describe('n-mention', () => {
attachTo: document.body,
props: { options }
})
await wrapper.vm.focus()
wrapper.vm.focus()
await nextTick()
expect(wrapper.find('.n-input').classes()).toContain('n-input--focus')
wrapper.unmount()
})
@ -219,8 +218,9 @@ describe('n-mention', () => {
attachTo: document.body,
props: { options }
})
await wrapper.vm.focus()
await wrapper.vm.blur()
wrapper.vm.focus()
wrapper.vm.blur()
await nextTick()
expect(wrapper.find('.n-input').classes()).not.toContain('n-input--focus')
wrapper.unmount()
})

5
src/slider/tests/Slider.spec.ts
View File

@ -1,5 +1,6 @@
import { mount } from '@vue/test-utils'
import { NSlider } from '../index'
import { nextTick } from 'vue'
describe('n-slider', () => {
it('should work with import on demand', () => {
@ -205,8 +206,8 @@ describe('n-slider', () => {
const slider = wrapper.find('.n-slider')
const handle = wrapper.find('.n-slider-handle-wrapper')
;(slider.element as HTMLElement).style.width = '100px'
// eslint-disable-next-line @typescript-eslint/await-thenable
await (slider.element as HTMLElement).dispatchEvent(mouseDown)
;(slider.element as HTMLElement).dispatchEvent(mouseDown)
await nextTick()
expect((handle.element as HTMLElement).style.left).toEqual('30%')
wrapper.unmount()
})

3
src/upload/src/Upload.tsx
View File

@ -747,8 +747,7 @@ export default defineComponent({
accept={this.accept}
multiple={this.mergedMultiple}
onChange={this.handleFileInputChange}
// eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error, @typescript-eslint/ban-ts-comment
// @ts-ignore // seems vue-tsc will add the prop, so we can't use expect-error
// @ts-expect-error // seems vue-tsc will add the prop, so we can't use expect-error
webkitdirectory={directory || undefined}
directory={directory || undefined}
/>