You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@zipkin.apache.org by unknown <""...@apache.org> on 2019/05/09 04:52:48 UTC
[incubator-zipkin] 04/09: Add unit tests for MiniTimelineLabel
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 <ig...@gmail.com>
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'));
+ });
+});