From b95760b9cd6777d6f338996e6a53db73d38b14dc Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Sat, 22 Feb 2020 16:28:21 +0800 Subject: [PATCH] feat: update notification --- build/config.js | 2 +- .../__tests__/__snapshots__/demo.test.js.snap | 18 +- .../notification/__tests__/index.test.js | 30 +++ .../notification/__tests__/placement.test.js | 211 +++++++++--------- components/notification/demo/placement.md | 40 ++-- components/notification/index.en-US.md | 45 ++-- components/notification/index.js | 145 ++++++------ components/notification/index.zh-CN.md | 45 ++-- types/notification.d.ts | 8 + 9 files changed, 296 insertions(+), 248 deletions(-) diff --git a/build/config.js b/build/config.js index 6ad118ad5..711f8e157 100644 --- a/build/config.js +++ b/build/config.js @@ -1,5 +1,5 @@ module.exports = { dev: { - componentName: 'modal', // dev components + componentName: 'notification', // dev components }, }; diff --git a/components/notification/__tests__/__snapshots__/demo.test.js.snap b/components/notification/__tests__/__snapshots__/demo.test.js.snap index fd4ba4904..ee9f345e7 100644 --- a/components/notification/__tests__/__snapshots__/demo.test.js.snap +++ b/components/notification/__tests__/__snapshots__/demo.test.js.snap @@ -9,14 +9,16 @@ exports[`renders ./components/notification/demo/custom-style.md correctly 1`] = exports[`renders ./components/notification/demo/duration.md correctly 1`] = ``; exports[`renders ./components/notification/demo/placement.md correctly 1`] = ` -
-
-
-
-
topRight
-
-
-
+
+
`; diff --git a/components/notification/__tests__/index.test.js b/components/notification/__tests__/index.test.js index b860aefdd..68a3ceed9 100644 --- a/components/notification/__tests__/index.test.js +++ b/components/notification/__tests__/index.test.js @@ -1,5 +1,6 @@ import { asyncExpect } from '@/tests/utils'; import notification from '..'; +import Icon from '../../icon'; describe('notification', () => { beforeEach(() => { @@ -90,4 +91,33 @@ describe('notification', () => { }); expect(document.querySelectorAll('.ant-notification').length).toBe(1); }); + + it('support closeIcon', async () => { + await asyncExpect(() => { + notification.open({ + message: 'Notification Title', + duration: 0, + closeIcon: h => , + }); + }); + await asyncExpect(() => { + expect(document.querySelectorAll('.anticon-step-backward').length).toBe(1); + }); + }); + + it('support config closeIcon', async () => { + notification.config({ + closeIcon: h => , + }); + await asyncExpect(() => { + notification.open({ + message: 'Notification Title', + duration: 0, + closeIcon: h => , + }); + }); + await asyncExpect(() => { + expect(document.querySelectorAll('.anticon-step-backward').length).toBe(1); + }); + }); }); diff --git a/components/notification/__tests__/placement.test.js b/components/notification/__tests__/placement.test.js index a73ca611a..c9f6924dc 100644 --- a/components/notification/__tests__/placement.test.js +++ b/components/notification/__tests__/placement.test.js @@ -30,125 +30,128 @@ describe('Notification.placement', () => { open(); } - it('change notification placement by `open` method', async () => { - const defaultTop = '24px'; - const defaultBottom = '24px'; - let style; + describe('placement', () => { + it('change notification placement by `open` method', async () => { + const defaultTop = '24px'; + const defaultBottom = '24px'; + let style; - // topLeft - open({ - placement: 'topLeft', + // topLeft + open({ + placement: 'topLeft', + }); + await asyncExpect(() => { + style = getStyle($$('.ant-notification-topLeft')[0]); + expect(style.top).toBe(defaultTop); + expect(style.left).toBe('0px'); + expect(style.bottom).toBe(''); + }); + open({ + placement: 'topLeft', + }); + await asyncExpect(() => { + expect($$('.ant-notification-topLeft').length).toBe(1); + }); + // topRight + open({ + placement: 'topRight', + }); + await asyncExpect(() => { + style = getStyle($$('.ant-notification-topRight')[0]); + expect(style.top).toBe(defaultTop); + expect(style.right).toBe('0px'); + expect(style.bottom).toBe(''); + }); + open({ + placement: 'topRight', + }); + await asyncExpect(() => { + expect($$('.ant-notification-topRight').length).toBe(1); + }); + // bottomRight + open({ + placement: 'bottomRight', + bottom: '100px', + }); + await asyncExpect(() => { + style = getStyle($$('.ant-notification-bottomRight')[0]); + expect(style.top).toBe(''); + expect(style.right).toBe('0px'); + expect(style.bottom).toBe('100px'); + }); + open({ + placement: 'bottomRight', + }); + await asyncExpect(() => { + expect($$('.ant-notification-bottomRight').length).toBe(1); + }); + // bottomLeft + open({ + placement: 'bottomLeft', + }); + await asyncExpect(() => { + style = getStyle($$('.ant-notification-bottomLeft')[0]); + expect(style.top).toBe(''); + expect(style.left).toBe('0px'); + expect(style.bottom).toBe(defaultBottom); + }); + open({ + placement: 'bottomLeft', + }); + await asyncExpect(() => { + expect($$('.ant-notification-bottomLeft').length).toBe(1); + }); + await asyncExpect(() => {}); + await asyncExpect(() => {}); }); - await asyncExpect(() => { + + it('change notification placement by `config` method', () => { + let style; + + // topLeft + config({ + placement: 'topLeft', + top: '50px', + bottom: '50px', + }); style = getStyle($$('.ant-notification-topLeft')[0]); - expect(style.top).toBe(defaultTop); + expect(style.top).toBe('50px'); expect(style.left).toBe('0px'); expect(style.bottom).toBe(''); - }); - open({ - placement: 'topLeft', - }); - await asyncExpect(() => { - expect($$('.ant-notification-topLeft').length).toBe(1); - }); - // topRight - open({ - placement: 'topRight', - }); - await asyncExpect(() => { + + // topRight + config({ + placement: 'topRight', + top: '100px', + bottom: '50px', + }); style = getStyle($$('.ant-notification-topRight')[0]); - expect(style.top).toBe(defaultTop); + expect(style.top).toBe('100px'); expect(style.right).toBe('0px'); expect(style.bottom).toBe(''); - }); - open({ - placement: 'topRight', - }); - await asyncExpect(() => { - expect($$('.ant-notification-topRight').length).toBe(1); - }); - // bottomRight - open({ - placement: 'bottomRight', - }); - await asyncExpect(() => { + + // bottomRight + config({ + placement: 'bottomRight', + top: '50px', + bottom: '100px', + }); style = getStyle($$('.ant-notification-bottomRight')[0]); expect(style.top).toBe(''); expect(style.right).toBe('0px'); - expect(style.bottom).toBe(defaultBottom); - }); - open({ - placement: 'bottomRight', - }); - await asyncExpect(() => { - expect($$('.ant-notification-bottomRight').length).toBe(1); - }); - // bottomLeft - open({ - placement: 'bottomLeft', - }); - await asyncExpect(() => { + expect(style.bottom).toBe('100px'); + + // bottomLeft + config({ + placement: 'bottomLeft', + top: 100, + bottom: 50, + }); style = getStyle($$('.ant-notification-bottomLeft')[0]); expect(style.top).toBe(''); expect(style.left).toBe('0px'); - expect(style.bottom).toBe(defaultBottom); + expect(style.bottom).toBe('50px'); }); - open({ - placement: 'bottomLeft', - }); - await asyncExpect(() => { - expect($$('.ant-notification-bottomLeft').length).toBe(1); - }); - await asyncExpect(() => {}); - await asyncExpect(() => {}); - }); - - it('change notification placement by `config` method', () => { - let style; - - // topLeft - config({ - placement: 'topLeft', - top: '50px', - bottom: '50px', - }); - style = getStyle($$('.ant-notification-topLeft')[0]); - expect(style.top).toBe('50px'); - expect(style.left).toBe('0px'); - expect(style.bottom).toBe(''); - - // topRight - config({ - placement: 'topRight', - top: '100px', - bottom: '50px', - }); - style = getStyle($$('.ant-notification-topRight')[0]); - expect(style.top).toBe('100px'); - expect(style.right).toBe('0px'); - expect(style.bottom).toBe(''); - - // bottomRight - config({ - placement: 'bottomRight', - top: '50px', - bottom: '100px', - }); - style = getStyle($$('.ant-notification-bottomRight')[0]); - expect(style.top).toBe(''); - expect(style.right).toBe('0px'); - expect(style.bottom).toBe('100px'); - - // bottomLeft - config({ - placement: 'bottomLeft', - top: 100, - bottom: 50, - }); - style = getStyle($$('.ant-notification-bottomLeft')[0]); - expect(style.top).toBe(''); - expect(style.left).toBe('0px'); - expect(style.bottom).toBe('50px'); }); it('change notification mountNode by `config` method', () => { const $container = document.createElement('div'); diff --git a/components/notification/demo/placement.md b/components/notification/demo/placement.md index 77ecefa2c..b99052fd9 100644 --- a/components/notification/demo/placement.md +++ b/components/notification/demo/placement.md @@ -11,34 +11,34 @@ A notification box can pop up from `topRight` or `bottomRight` or `bottomLeft` o ```tpl