This is an automated email from the ASF dual-hosted git repository. (unknown) pushed a commit to branch mini-timeline in repository https://gitbox.apache.org/repos/asf/incubator-zipkin.git
commit 7a5dda534463d5d4e227e33df8831ee52e28b41e Author: tacigar <[email protected]> AuthorDate: Wed May 8 20:08:58 2019 +0900 Add unit tests for MiniTimelineLabel --- .../components/MiniTimeline/MiniTimelineLabel.js | 6 ++++- .../MiniTimeline/MiniTimelineLabel.test.js | 26 ++++++++++++++++++++++ 2 files changed, 31 insertions(+), 1 deletion(-) diff --git a/zipkin-lens/src/components/MiniTimeline/MiniTimelineLabel.js b/zipkin-lens/src/components/MiniTimeline/MiniTimelineLabel.js index ddb402a..d99be17 100644 --- a/zipkin-lens/src/components/MiniTimeline/MiniTimelineLabel.js +++ b/zipkin-lens/src/components/MiniTimeline/MiniTimelineLabel.js @@ -26,8 +26,12 @@ const MiniTimelineLabel = ({ numTimeMarkers, duration }) => { key={portion} className="mini-timeline-label__label-wrapper" style={{ left: `${portion * 100}%` }} + data-test="label-wrapper" > - <span className={`mini-timeline-label__label mini-timeline-label__label${modifier}`}> + <span + className={`mini-timeline-label__label mini-timeline-label__label${modifier}`} + data-test="label" + > {label} </span> </div>, diff --git a/zipkin-lens/src/components/MiniTimeline/MiniTimelineLabel.test.js b/zipkin-lens/src/components/MiniTimeline/MiniTimelineLabel.test.js new file mode 100644 index 0000000..9ab5b52 --- /dev/null +++ b/zipkin-lens/src/components/MiniTimeline/MiniTimelineLabel.test.js @@ -0,0 +1,26 @@ +import React from 'react'; +import { shallow } from 'enzyme'; + +import MiniTimelineLabel from './MiniTimelineLabel'; + +describe('<MiniTimelineLabel />', () => { + it('should set proper positions', () => { + const wrapper = shallow(<MiniTimelineLabel numTimeMarkers={5} duration={300} />); + const labelWrappers = wrapper.find('[data-test="label-wrapper"]'); + expect(labelWrappers.at(0).prop('style')).toEqual({ left: '0%' }); + expect(labelWrappers.at(1).prop('style')).toEqual({ left: '25%' }); + expect(labelWrappers.at(2).prop('style')).toEqual({ left: '50%' }); + expect(labelWrappers.at(3).prop('style')).toEqual({ left: '75%' }); + expect(labelWrappers.at(4).prop('style')).toEqual({ left: '100%' }); + }); + + it('should set proper modifiers', () => { + const wrapper = shallow(<MiniTimelineLabel numTimeMarkers={5} duration={300} />); + const labelWrappers = wrapper.find('[data-test="label"]'); + expect(labelWrappers.at(0).hasClass('mini-timeline-label__label--first')); + expect(labelWrappers.at(1).hasClass('mini-timeline-label__label--first')); + expect(labelWrappers.at(2).hasClass('mini-timeline-label__label--first')); + expect(labelWrappers.at(3).hasClass('mini-timeline-label__label--first')); + expect(labelWrappers.at(4).hasClass('mini-timeline-label__label--last')); + }); +});
