-
Notifications
You must be signed in to change notification settings - Fork 140
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
da09bd5
commit b2b1005
Showing
15 changed files
with
579 additions
and
67 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
3 changes: 3 additions & 0 deletions
3
packages/components/spin/__tests__/__snapshots__/spinProvider.spec.ts.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
// Vitest Snapshot v1 | ||
|
||
exports[`SpinProvider > basic > render work 1`] = `"<div class=\\"ix-spin-provider\\">content</div>"`; |
101 changes: 101 additions & 0 deletions
101
packages/components/spin/__tests__/spinProvider.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,101 @@ | ||
import { MountingOptions, VueWrapper, flushPromises, mount } from '@vue/test-utils' | ||
|
||
import { renderWork } from '@tests' | ||
|
||
import SpinProvider from '../src/SpinProvider' | ||
import { SpinProviderInstance, SpinProviderProps } from '../src/types' | ||
|
||
describe('SpinProvider', () => { | ||
const SpinProviderMount = (options?: MountingOptions<SpinProviderProps>) => { | ||
return mount(SpinProvider, { ...options }) as VueWrapper<SpinProviderInstance> | ||
} | ||
|
||
const tip = 'This is a tip' | ||
|
||
const newTip = 'This is a newTip' | ||
|
||
describe('basic', () => { | ||
renderWork(SpinProvider, { slots: { default: 'content' } }) | ||
|
||
test('update and destroy and destroyAll work', async () => { | ||
const wrapper = SpinProviderMount() | ||
|
||
document.body.innerHTML = '<div class="target">This is a content</div>' | ||
|
||
wrapper.vm.open({ tip, target: '.target' }) | ||
await flushPromises() | ||
|
||
expect(document.querySelectorAll('.ix-spin').length).toBe(1) | ||
|
||
expect(document.querySelector('.target')?.classList.contains('ix-spin-target-container')).toBe(true) | ||
|
||
expect(document.querySelector('.ix-spin-spinner-tip')!.textContent).toBe(tip) | ||
|
||
wrapper.vm.update({ | ||
tip: newTip, | ||
target: '.target', | ||
}) | ||
|
||
await flushPromises() | ||
|
||
expect(document.querySelector('.ix-spin-spinner-tip')!.textContent).toBe(newTip) | ||
|
||
wrapper.vm.open({ tip }) | ||
await flushPromises() | ||
|
||
expect(document.querySelectorAll('.ix-spin').length).toBe(2) | ||
|
||
wrapper.vm.destroy() | ||
|
||
await flushPromises() | ||
|
||
expect(document.querySelectorAll('.ix-spin').length).toBe(1) | ||
|
||
// // will not generate spins repeatedly | ||
wrapper.vm.open({ tip, target: '.target' }) | ||
|
||
await flushPromises() | ||
|
||
expect(document.querySelectorAll('.ix-spin').length).toBe(1) | ||
|
||
wrapper.vm.destroyAll() | ||
|
||
await flushPromises() | ||
|
||
expect(document.querySelectorAll('.ix-spin').length).toBe(0) | ||
}) | ||
}) | ||
|
||
describe('spinRef', () => { | ||
test.skip('update and destroy work', async () => { | ||
const wrapper = SpinProviderMount() | ||
const spinProviderRef = wrapper.vm.open({ tip }) | ||
await flushPromises() | ||
|
||
expect(document.body.classList.contains('ix-spin-target-container')).toBe(true) | ||
|
||
expect(document.querySelectorAll('.ix-spin').length).toBe(1) | ||
|
||
expect(document.querySelectorAll('.ix-spin')[0].style.zIndex).toBe('2000') | ||
|
||
expect(document.querySelector('.ix-spin-spinner-tip')!.textContent).toBe(tip) | ||
|
||
spinProviderRef.update({ | ||
tip: 'new text', | ||
zIndex: 3000, | ||
}) | ||
|
||
await flushPromises() | ||
|
||
expect(document.querySelector('.ix-spin-spinner-tip')!.textContent).toBe('new text') | ||
|
||
expect(document.querySelectorAll('.ix-spin')[0].style.zIndex).toBe('3000') | ||
|
||
spinProviderRef.destroy() | ||
|
||
await flushPromises() | ||
|
||
expect(document.querySelectorAll('.ix-spin').length).toBe(0) | ||
}) | ||
}) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
--- | ||
order: 4 | ||
title: | ||
zh: UseSpin | ||
en: UseSpin | ||
hidden: true | ||
--- | ||
|
||
## zh | ||
|
||
你可以通过`useSpin`来灵活的使用`spin`组件,前提是需要把子组件包裹在`IxSpinProvider`里面 | ||
|
||
``` html | ||
<IxSpinProvider> | ||
<App /> | ||
</IxSpinProvider> | ||
``` | ||
|
||
## en |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,65 @@ | ||
<template> | ||
<IxSpace vertical :size="20"> | ||
<div class="card"> | ||
<div class="content">content</div> | ||
</div> | ||
<IxSpace> | ||
<IxButton @click="openSpin">Open</IxButton> | ||
<IxButton @click="upldateSpin">Update</IxButton> | ||
<IxButton @click="destroySpin">Destroy</IxButton> | ||
<IxButton @click="fullScreenSpin">fullScreen</IxButton> | ||
<IxButton @click="destroyAllSpin">DestroyAll</IxButton> | ||
</IxSpace> | ||
</IxSpace> | ||
</template> | ||
|
||
<script setup lang="ts"> | ||
import { type SpinRef, useSpin } from '@idux/components/spin' | ||
const { open, destroy, destroyAll } = useSpin() | ||
let spinRef: SpinRef | ||
const openSpin = () => { | ||
spinRef = open({ | ||
tip: '等待', | ||
target: '.card', | ||
}) | ||
} | ||
const upldateSpin = () => { | ||
spinRef?.update({ | ||
tip: '更新', | ||
}) | ||
} | ||
const destroySpin = () => { | ||
spinRef?.destroy() | ||
} | ||
const fullScreenSpin = () => { | ||
open({ | ||
tip: '2S后关闭', | ||
}) | ||
setTimeout(() => { | ||
destroy() | ||
}, 2000) | ||
} | ||
const destroyAllSpin = () => { | ||
destroyAll() | ||
} | ||
</script> | ||
<style lang="less" scoped> | ||
.card { | ||
text-align: center; | ||
padding: 50px; | ||
background-color: #eee; | ||
height: 300px; | ||
overflow: auto; | ||
.content { | ||
height: 500px; | ||
} | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.