zipkin-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From unknown ...@apache.org>
Subject [incubator-zipkin] 04/09: Add unit tests for MiniTimelineLabel
Date Thu, 09 May 2019 04:52:48 GMT
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.lhound@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'));
+  });
+});


Mime
View raw message