From 8f94c0e431a1732bbaa9d77cd5d35276a3aecbb4 Mon Sep 17 00:00:00 2001 From: chenshiming <728988492@qq.com> Date: Wed, 6 Oct 2021 16:48:21 +0800 Subject: [PATCH 1/6] =?UTF-8?q?feat(fullscreen):=20=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E6=B5=8B=E8=AF=95=E7=94=A8=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/fullscreen/__tests__/fullscreen.spec.ts | 53 +++++++ devui/tree/__tests__/test.ts | 136 ++++++++++++++++++ 2 files changed, 189 insertions(+) create mode 100644 devui/fullscreen/__tests__/fullscreen.spec.ts create mode 100644 devui/tree/__tests__/test.ts diff --git a/devui/fullscreen/__tests__/fullscreen.spec.ts b/devui/fullscreen/__tests__/fullscreen.spec.ts new file mode 100644 index 00000000..82b047f5 --- /dev/null +++ b/devui/fullscreen/__tests__/fullscreen.spec.ts @@ -0,0 +1,53 @@ +import { mount, VueWrapper } from '@vue/test-utils' +import { ref, nextTick } from 'vue' + +describe('fullscreen', () => { + let wrapper: VueWrapper + + beforeEach(() => { + wrapper = mount({ + template: ` + +
+ +
+ + `, + setup() { + const btnContent = ref('FullScreen') + const fullscreenLaunch = (val) => { + if (val) { + btnContent.value = 'Exit' + } else { + btnContent.value = 'FullScreen' + } + } + return { + btnContent, + fullscreenLaunch + } + } + }) + }) + + // 样式判断 + it('judge html class correctly', async () => { + + // 初始样式 + expect(document.getElementsByTagName('html')[0].classList).not.toContain('devui-fullscreen') + // 点击之后，增加class + await wrapper.find('[test]').trigger('click') + await nextTick() + expect(document.getElementsByTagName('html')[0].classList).not.toContain('devui-fullscreen') + + // 再次点击，删除class + await wrapper.find('[test]').trigger('click') + await nextTick() + expect(document.getElementsByTagName('html')[0].classList).not.toContain('devui-fullscreen') + }) + + // 判断属性 + it('attr', () => { + expect(wrapper.attributes('mode')).toBe('normal') + }) +}) \ No newline at end of file diff --git a/devui/tree/__tests__/test.ts b/devui/tree/__tests__/test.ts new file mode 100644 index 00000000..f3cd9a06 --- /dev/null +++ b/devui/tree/__tests__/test.ts @@ -0,0 +1,136 @@ +import { Component, DebugElement, ViewChild } from '@angular/core'; +import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; +import { ButtonModule } from '../button/button.module'; +import { DomHelper } from '../utils/testing/dom-helper'; +import { FullscreenComponent } from './fullscreen.component'; +import { FullscreenModule } from './fullscreen.module'; +@Component({ + template: ` + +
+ +
+ + ` +}) +class TestFullscreenComponent { + @ViewChild('fullscreen') fullscreen: FullscreenComponent; + fullscreenMode = 'normal'; + btnIcon = 'icon-frame-expand'; + + launchFullscreen({ isFullscreen }) { + if (isFullscreen) { + this.btnIcon = 'icon-frame-contract'; + } else { + this.btnIcon = 'icon-frame-expand'; + } + } +} + +describe('fullscreen', () => { + let fixture: ComponentFixture; + let debugEl: DebugElement; + let component: TestFullscreenComponent; + let domHelper: DomHelper; + + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [FullscreenModule, ButtonModule], + declarations: [TestFullscreenComponent] + }); + fixture = TestBed.createComponent(TestFullscreenComponent); + domHelper = new DomHelper(fixture); + debugEl = fixture.debugElement; + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + describe('fullscreen normal mode', () => { + it('Fullscreen should display correctly', () => { + const classes = [ + '.fullscreen-container', + '.fullscreen-button', + '.devui-btn', + '.icon-frame-expand' + ]; + expect(domHelper.judgeStyleClasses(classes)).toBeTruthy(); + }); + + /* 初始状态不显示 */ + it('Fullscreen should not display at original state ', () => { + expect(debugEl.query(By.css('.fullscreen'))).toBeNull(); + }); + + it('Click can full-screen display content', () => { + const buttonEle = debugEl.query(By.css('.fullscreen-button')).nativeElement; + buttonEle.dispatchEvent(new Event('click')); + fixture.detectChanges(); + // 点击后全屏显示 + const classes = [ + '.fullscreen-container', + '.fullscreen', + '.devui-btn', + '.icon-frame-contract' + ]; + expect(domHelper.judgeStyleClasses(classes)).toBeTruthy(); + expect(document.fullscreenElement !== null).toBe(false); + buttonEle.dispatchEvent(new Event('click')); + fixture.detectChanges(); + expect(debugEl.query(By.css('.fullscreen'))).toBeNull(); + expect(document.fullscreenElement !== null).toBe(false); + }); + }); + describe('fullscreen immersive mode', () => { + beforeEach(() => { + component.fullscreenMode = 'immersive'; + fixture.detectChanges(); + }); + it('Fullscreen normal should create correctly', () => { + const classes = [ + '.fullscreen-container', + '.fullscreen-button', + '.devui-btn', + '.icon-frame-expand' + ]; + expect(domHelper.judgeStyleClasses(classes)).toBeTruthy(); + }); + + /* 初始状态不显示 */ + it('Fullscreen should not display at original state ', () => { + expect(debugEl.query(By.css('.fullscreen'))).toBeNull(); + expect(document.fullscreenElement !== null).toBe(false); + }); + + // fullscreen无法自动触发浏览器原生全屏，该用例无法测试 + xit('Click can immersive full-screen display content', fakeAsync(() => { + fixture.detectChanges(); + const buttonEle = debugEl.query(By.css('.fullscreen-button')); + buttonEle.triggerEventHandler('click', {}); // 未生效 + // buttonEle.nativeElement.dispatchEvent(new Event('click')); + tick(); + fixture.detectChanges(); + // 点击后全屏显示 + const classes = [ + '.fullscreen-container', + '.fullscreen', + '.icon-frame-contract' + ]; + expect(domHelper.judgeStyleClasses(classes)).toBeTruthy(); + expect(document.fullscreenElement !== null).toBe(false); + buttonEle.triggerEventHandler('click', {}); + fixture.detectChanges(); + expect(debugEl.query(By.css('.fullscreen'))).toBeNull(); + const closeClasses = [ + '.fullscreen-container', + '.icon-frame-expand' + ]; + expect(domHelper.judgeStyleClasses(closeClasses)).toBeTruthy(); + expect(document.fullscreenElement !== null).toBe(false); + })); + }); +}); -- Gitee From b861944579ee717627633ccdc1e27015f51e9bc2 Mon Sep 17 00:00:00 2001 From: MICD Date: Wed, 6 Oct 2021 08:50:55 +0000 Subject: [PATCH 2/6] =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=96=87=E4=BB=B6=20devu?= =?UTF-8?q?i/tree/=5F=5Ftests=5F=5F/test.ts?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/tree/__tests__/test.ts | 136 ----------------------------------- 1 file changed, 136 deletions(-) delete mode 100644 devui/tree/__tests__/test.ts diff --git a/devui/tree/__tests__/test.ts b/devui/tree/__tests__/test.ts deleted file mode 100644 index f3cd9a06..00000000 --- a/devui/tree/__tests__/test.ts +++ /dev/null @@ -1,136 +0,0 @@ -import { Component, DebugElement, ViewChild } from '@angular/core'; -import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; -import { ButtonModule } from '../button/button.module'; -import { DomHelper } from '../utils/testing/dom-helper'; -import { FullscreenComponent } from './fullscreen.component'; -import { FullscreenModule } from './fullscreen.module'; -@Component({ - template: ` - -
- -
- - ` -}) -class TestFullscreenComponent { - @ViewChild('fullscreen') fullscreen: FullscreenComponent; - fullscreenMode = 'normal'; - btnIcon = 'icon-frame-expand'; - - launchFullscreen({ isFullscreen }) { - if (isFullscreen) { - this.btnIcon = 'icon-frame-contract'; - } else { - this.btnIcon = 'icon-frame-expand'; - } - } -} - -describe('fullscreen', () => { - let fixture: ComponentFixture; - let debugEl: DebugElement; - let component: TestFullscreenComponent; - let domHelper: DomHelper; - - beforeEach(() => { - TestBed.configureTestingModule({ - imports: [FullscreenModule, ButtonModule], - declarations: [TestFullscreenComponent] - }); - fixture = TestBed.createComponent(TestFullscreenComponent); - domHelper = new DomHelper(fixture); - debugEl = fixture.debugElement; - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - describe('fullscreen normal mode', () => { - it('Fullscreen should display correctly', () => { - const classes = [ - '.fullscreen-container', - '.fullscreen-button', - '.devui-btn', - '.icon-frame-expand' - ]; - expect(domHelper.judgeStyleClasses(classes)).toBeTruthy(); - }); - - /* 初始状态不显示 */ - it('Fullscreen should not display at original state ', () => { - expect(debugEl.query(By.css('.fullscreen'))).toBeNull(); - }); - - it('Click can full-screen display content', () => { - const buttonEle = debugEl.query(By.css('.fullscreen-button')).nativeElement; - buttonEle.dispatchEvent(new Event('click')); - fixture.detectChanges(); - // 点击后全屏显示 - const classes = [ - '.fullscreen-container', - '.fullscreen', - '.devui-btn', - '.icon-frame-contract' - ]; - expect(domHelper.judgeStyleClasses(classes)).toBeTruthy(); - expect(document.fullscreenElement !== null).toBe(false); - buttonEle.dispatchEvent(new Event('click')); - fixture.detectChanges(); - expect(debugEl.query(By.css('.fullscreen'))).toBeNull(); - expect(document.fullscreenElement !== null).toBe(false); - }); - }); - describe('fullscreen immersive mode', () => { - beforeEach(() => { - component.fullscreenMode = 'immersive'; - fixture.detectChanges(); - }); - it('Fullscreen normal should create correctly', () => { - const classes = [ - '.fullscreen-container', - '.fullscreen-button', - '.devui-btn', - '.icon-frame-expand' - ]; - expect(domHelper.judgeStyleClasses(classes)).toBeTruthy(); - }); - - /* 初始状态不显示 */ - it('Fullscreen should not display at original state ', () => { - expect(debugEl.query(By.css('.fullscreen'))).toBeNull(); - expect(document.fullscreenElement !== null).toBe(false); - }); - - // fullscreen无法自动触发浏览器原生全屏，该用例无法测试 - xit('Click can immersive full-screen display content', fakeAsync(() => { - fixture.detectChanges(); - const buttonEle = debugEl.query(By.css('.fullscreen-button')); - buttonEle.triggerEventHandler('click', {}); // 未生效 - // buttonEle.nativeElement.dispatchEvent(new Event('click')); - tick(); - fixture.detectChanges(); - // 点击后全屏显示 - const classes = [ - '.fullscreen-container', - '.fullscreen', - '.icon-frame-contract' - ]; - expect(domHelper.judgeStyleClasses(classes)).toBeTruthy(); - expect(document.fullscreenElement !== null).toBe(false); - buttonEle.triggerEventHandler('click', {}); - fixture.detectChanges(); - expect(debugEl.query(By.css('.fullscreen'))).toBeNull(); - const closeClasses = [ - '.fullscreen-container', - '.icon-frame-expand' - ]; - expect(domHelper.judgeStyleClasses(closeClasses)).toBeTruthy(); - expect(document.fullscreenElement !== null).toBe(false); - })); - }); -}); -- Gitee From ea1e15a4c9582b384c923ebe97d6c693d38cd4e6 Mon Sep 17 00:00:00 2001 From: chenshiming <728988492@qq.com> Date: Wed, 6 Oct 2021 16:52:53 +0800 Subject: [PATCH 3/6] =?UTF-8?q?fix:=20=E5=88=A0=E9=99=A4=E5=A4=9A=E4=BD=99?= =?UTF-8?q?=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/tree/__tests__/test.ts | 136 ----------------------------------- 1 file changed, 136 deletions(-) delete mode 100644 devui/tree/__tests__/test.ts diff --git a/devui/tree/__tests__/test.ts b/devui/tree/__tests__/test.ts deleted file mode 100644 index f3cd9a06..00000000 --- a/devui/tree/__tests__/test.ts +++ /dev/null @@ -1,136 +0,0 @@ -import { Component, DebugElement, ViewChild } from '@angular/core'; -import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; -import { ButtonModule } from '../button/button.module'; -import { DomHelper } from '../utils/testing/dom-helper'; -import { FullscreenComponent } from './fullscreen.component'; -import { FullscreenModule } from './fullscreen.module'; -@Component({ - template: ` - -
- -
- - ` -}) -class TestFullscreenComponent { - @ViewChild('fullscreen') fullscreen: FullscreenComponent; - fullscreenMode = 'normal'; - btnIcon = 'icon-frame-expand'; - - launchFullscreen({ isFullscreen }) { - if (isFullscreen) { - this.btnIcon = 'icon-frame-contract'; - } else { - this.btnIcon = 'icon-frame-expand'; - } - } -} - -describe('fullscreen', () => { - let fixture: ComponentFixture; - let debugEl: DebugElement; - let component: TestFullscreenComponent; - let domHelper: DomHelper; - - beforeEach(() => { - TestBed.configureTestingModule({ - imports: [FullscreenModule, ButtonModule], - declarations: [TestFullscreenComponent] - }); - fixture = TestBed.createComponent(TestFullscreenComponent); - domHelper = new DomHelper(fixture); - debugEl = fixture.debugElement; - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - describe('fullscreen normal mode', () => { - it('Fullscreen should display correctly', () => { - const classes = [ - '.fullscreen-container', - '.fullscreen-button', - '.devui-btn', - '.icon-frame-expand' - ]; - expect(domHelper.judgeStyleClasses(classes)).toBeTruthy(); - }); - - /* 初始状态不显示 */ - it('Fullscreen should not display at original state ', () => { - expect(debugEl.query(By.css('.fullscreen'))).toBeNull(); - }); - - it('Click can full-screen display content', () => { - const buttonEle = debugEl.query(By.css('.fullscreen-button')).nativeElement; - buttonEle.dispatchEvent(new Event('click')); - fixture.detectChanges(); - // 点击后全屏显示 - const classes = [ - '.fullscreen-container', - '.fullscreen', - '.devui-btn', - '.icon-frame-contract' - ]; - expect(domHelper.judgeStyleClasses(classes)).toBeTruthy(); - expect(document.fullscreenElement !== null).toBe(false); - buttonEle.dispatchEvent(new Event('click')); - fixture.detectChanges(); - expect(debugEl.query(By.css('.fullscreen'))).toBeNull(); - expect(document.fullscreenElement !== null).toBe(false); - }); - }); - describe('fullscreen immersive mode', () => { - beforeEach(() => { - component.fullscreenMode = 'immersive'; - fixture.detectChanges(); - }); - it('Fullscreen normal should create correctly', () => { - const classes = [ - '.fullscreen-container', - '.fullscreen-button', - '.devui-btn', - '.icon-frame-expand' - ]; - expect(domHelper.judgeStyleClasses(classes)).toBeTruthy(); - }); - - /* 初始状态不显示 */ - it('Fullscreen should not display at original state ', () => { - expect(debugEl.query(By.css('.fullscreen'))).toBeNull(); - expect(document.fullscreenElement !== null).toBe(false); - }); - - // fullscreen无法自动触发浏览器原生全屏，该用例无法测试 - xit('Click can immersive full-screen display content', fakeAsync(() => { - fixture.detectChanges(); - const buttonEle = debugEl.query(By.css('.fullscreen-button')); - buttonEle.triggerEventHandler('click', {}); // 未生效 - // buttonEle.nativeElement.dispatchEvent(new Event('click')); - tick(); - fixture.detectChanges(); - // 点击后全屏显示 - const classes = [ - '.fullscreen-container', - '.fullscreen', - '.icon-frame-contract' - ]; - expect(domHelper.judgeStyleClasses(classes)).toBeTruthy(); - expect(document.fullscreenElement !== null).toBe(false); - buttonEle.triggerEventHandler('click', {}); - fixture.detectChanges(); - expect(debugEl.query(By.css('.fullscreen'))).toBeNull(); - const closeClasses = [ - '.fullscreen-container', - '.icon-frame-expand' - ]; - expect(domHelper.judgeStyleClasses(closeClasses)).toBeTruthy(); - expect(document.fullscreenElement !== null).toBe(false); - })); - }); -}); -- Gitee From 7b530d6694139d42843c7adcd0e2686267a81587 Mon Sep 17 00:00:00 2001 From: chenshiming <728988492@qq.com> Date: Wed, 6 Oct 2021 20:21:44 +0800 Subject: [PATCH 4/6] =?UTF-8?q?feat(fullscreen):=20=E5=8F=82=E6=95=B0API?= =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=B7=B3=E8=BD=AC=E8=87=B3Demo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/components/fullscreen/index.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/components/fullscreen/index.md b/docs/components/fullscreen/index.md index bf943b24..7132dcd5 100644 --- a/docs/components/fullscreen/index.md +++ b/docs/components/fullscreen/index.md @@ -80,11 +80,11 @@ export default { ### 参数及API -| 参数 | 类型 | 默认 | 说明 | -| :---------: | :------: | :-------: | :----------------------- | -| mode | `immersive` 或 `normal` | `immersive` | 可选，设置全屏模式 | -| zIndex | `Number` | 10 | 可选，设置全屏层级 | -| fullscreenLaunch | `EventEmitter` | | 可选，全屏之后的回调 | +| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | +| :---------: | :------: | :-------: | :----------------------- | --------------------------------- | +| mode | `immersive` 或 `normal` | `immersive` | 可选，设置全屏模式 | [沉浸式全屏](#沉浸式全屏) | +| zIndex | `Number` | 10 | 可选，设置全屏层级 | [普通全屏](#普通全屏) | +| fullscreenLaunch | `EventEmitter` | | 可选，全屏之后的回调 | [普通全屏](#普通全屏) | **fullscreen-target** 选择器 必含指令，内容投影，设置**需要全屏的元素**沉浸式全屏。 -- Gitee From 8f625091a32b3a83bfa7a29ac7e370678cc5b218 Mon Sep 17 00:00:00 2001 From: chenshiming <728988492@qq.com> Date: Wed, 6 Oct 2021 20:50:13 +0800 Subject: [PATCH 5/6] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=B5=8B=E8=AF=95?= =?UTF-8?q?=E7=94=A8=E4=BE=8B=E4=BB=A3=E7=A0=81=E9=94=99=E8=AF=AF=E7=9A=84?= =?UTF-8?q?bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/fullscreen/__tests__/fullscreen.spec.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/devui/fullscreen/__tests__/fullscreen.spec.ts b/devui/fullscreen/__tests__/fullscreen.spec.ts index 82b047f5..e8ed761e 100644 --- a/devui/fullscreen/__tests__/fullscreen.spec.ts +++ b/devui/fullscreen/__tests__/fullscreen.spec.ts @@ -34,16 +34,16 @@ describe('fullscreen', () => { it('judge html class correctly', async () => { // 初始样式 - expect(document.getElementsByTagName('html')[0].classList).not.toContain('devui-fullscreen') + expect(document.getElementsByTagName('html')[0].classList.value).toEqual('') // 点击之后，增加class await wrapper.find('[test]').trigger('click') await nextTick() - expect(document.getElementsByTagName('html')[0].classList).not.toContain('devui-fullscreen') + expect(document.getElementsByTagName('html')[0].classList.value).not.toContain('devui-fullscreen') // 再次点击，删除class await wrapper.find('[test]').trigger('click') await nextTick() - expect(document.getElementsByTagName('html')[0].classList).not.toContain('devui-fullscreen') + expect(document.getElementsByTagName('html')[0].classList.value).toEqual('') }) // 判断属性 -- Gitee From 78b7dd1667f447c7c60ede200f3906478e7c26ae Mon Sep 17 00:00:00 2001 From: chenshiming <728988492@qq.com> Date: Thu, 7 Oct 2021 16:32:59 +0800 Subject: [PATCH 6/6] =?UTF-8?q?feat:=20=E5=BF=AB=E9=80=9F=E5=BC=80?= =?UTF-8?q?=E5=A7=8B=E7=BC=BA=E5=B0=91=E5=BC=95=E5=85=A5@devui-design/icon?= =?UTF-8?q?s=E6=AD=A5=E9=AA=A4=E8=AF=B4=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/index.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/index.md b/docs/index.md index 0e850304..bc713836 100644 --- a/docs/index.md +++ b/docs/index.md @@ -23,6 +23,8 @@ yarn add vue-devui # 可选，字体图标库, 部分Demo依赖此字体库 # yarn add @devui-design/icons +# main.ts 文件引入 +# import '@devui-design/icons/icomoon/devui-icon.css' ``` ### 3. 引入模块和样式 -- Gitee