test: move slider tooltip test from unit test to e2e test, #1402

cypress/integration/slider.spec.js

@@ -38,7 +38,7 @@ describe('slider', () => {
         // test knob slide
         cy.get(sliderHandleSelector)
             .trigger('mousedown')
-            .trigger('mousemove', { pageX: 600, pageY:0 })
+            .trigger('mousemove', { pageX: 600, pageY: 0 })
             .trigger('mouseup', { force: true });
         
         cy.get(sliderHandleSelector).should(($button) => {
@@ -59,7 +59,7 @@ describe('slider', () => {
         // test knob slide (pageX 300 = 32%)
         cy.get(sliderHandleSelector)
             .trigger('mousedown')
-            .trigger('mousemove', { pageX: 300, pageY:0 })
+            .trigger('mousemove', { pageX: 300, pageY: 0 })
             .trigger('mouseup', { force: true });
         
         // left 32% = 247.68px;
@@ -98,13 +98,13 @@ describe('slider', () => {
         // test left knob slide
         cy.get(sliderHandleSelector).eq(0)
             .trigger('mousedown')
-            .trigger('mousemove', { pageX: 100, pageY:0 })
+            .trigger('mousemove', { pageX: 100, pageY: 0 })
             .trigger('mouseup', { force: true });
 
         // test right knob slide
         cy.get(sliderHandleSelector).eq(1)
             .trigger('mousedown')
-            .trigger('mousemove', { pageX: 600, pageY:0 })
+            .trigger('mousemove', { pageX: 600, pageY: 0 })
             .trigger('mouseup', { force: true });
 
         cy.get(sliderHandleSelector).should((handles) => {
@@ -134,7 +134,7 @@ describe('slider', () => {
         // test knob slide
         cy.get(sliderHandleSelector)
             .trigger('mousedown')
-            .trigger('mousemove', { pageX: 0, pageY:600 })
+            .trigger('mousemove', { pageX: 0, pageY: 600 })
             .trigger('mouseup', { force: true });
         
         cy.get(sliderHandleSelector).should(($button) => {
@@ -206,4 +206,10 @@ describe('slider', () => {
         cy.get('.semi-slider-handle').eq(2).type('{Home}');
         cy.get('.semi-slider-handle').eq(2).should('have.attr', 'aria-valuenow', '0');
     });  
+
+    it('should show tooltip when hovering slider handler', () => {
+        cy.visit('http://127.0.0.1:6006/iframe.html?id=slider--horizontal-slider&args=&viewMode=story');
+        cy.get('.semi-slider-handle').eq(0).trigger('mouseover');
+        cy.get('.semi-slider-handle-tooltip').eq(0).should('have.text', '0');
+    });
 });

packages/semi-ui/slider/__test__/slider.test.js

@@ -86,21 +86,6 @@ describe('Slider', () => {
     //     expect(wrapper.state('currentValue')).toBe(54);
     // });
 
-    // Cannot test snapShot becase of random generated wrapperId in tooltip
-    // it('should show tooltip when hovering slider handler', () => {
-    //     const wrapper = mount(<Slider defaultValue={30} />);
-    //     wrapper
-    //         .find(`.${BASE_CLASS_PREFIX}-slider-handle`)
-    //         .at(0)
-    //         .simulate('mouseEnter');
-    //     expect(render(wrapper.find(`.${BASE_CLASS_PREFIX}-tooltip-wrapper`))).toMatchSnapshot();
-    //     wrapper
-    //         .find(`.${BASE_CLASS_PREFIX}-slider-handle`)
-    //         .at(0)
-    //         .simulate('mouseLeave');
-    //     expect(render(wrapper.find(`.${BASE_CLASS_PREFIX}-tooltip-wrapper`))).toMatchSnapshot();
-    // });
-
     it('when hover into slider', () => {
         let wrapper = mount(<Slider showBoundary={true} />);
         wrapper

packages/semi-ui/tooltip/index.tsx

@@ -496,7 +496,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
             "[Semi Tooltip] 'mouseLeaveDelay' cannot be less than 'mouseEnterDelay', which may cause the dropdown layer to not be hidden."
         );
         if (prevProps.visible !== this.props.visible) {
-            if (["hover", "focus"].includes(this.props.trigger)) {
+            if (['hover', 'focus'].includes(this.props.trigger)) {
                 this.props.visible ? this.foundation.delayShow() : this.foundation.delayHide();
             } else {
                 this.props.visible ? this.foundation.show() : this.foundation.hide();