react-dom#unmountComponentAtNode JavaScript Examples

describe('FormGroup test suite', () => {
  let container = null;

  beforeEach(() => {
    container = document.createElement('div');
    document.body.appendChild(container);
  });

  afterEach(() => {
    unmountComponentAtNode(container);
    container.remove();
    container = null;
  });

  it('renders FormGroup children props', () => {
    act(() => {
      render(<FormGroup>Form group component</FormGroup>, container);
    });

    expect(container.textContent).toBe('Form group component');
  });
});

describe('Home', () => {
  let container = null;

  beforeEach(() => {
    container = document.createElement('div');
    document.body.appendChild(container);
  });

  afterEach(() => {
    unmountComponentAtNode(container);
    container.remove();
    container = null;
  });

  it('it renders home component', () => {
    act(() => {
      render(
        <BrowserRouter>
          <Home />
        </BrowserRouter>,
        container,
      );
    });
  });
});

describe("Label test suite", () => {
	let container = null;

	beforeEach(() => {
		container = document.createElement("div");
		document.body.appendChild(container);
	});

	afterEach(() => {
		unmountComponentAtNode(container);
		container.remove();
		container = null;
	});

	it("renders Label children props", () => {
		act(() => {
			render(<Label>Label Text</Label>, container);
		});

		expect(container.textContent).toBe("Label Text");
	});
});

describe('App component', () => {
  let node

  beforeEach(() => {
    node = document.createElement('div')
  })

  afterEach(() => {
    unmountComponentAtNode(node)
  })

  it('displays a welcome message', () => {
    render(<App/>, node, () => {
      expect(node.textContent).toContain('Welcome to React')
    })
  })
})

destroy(detachCallbacks = true) {
    unmountComponentAtNode(this.root);

    if (this.store) {
      destroy(this.store);
    }

    if (detachCallbacks) {
      this.callbacks.forEach((callbacks) => callbacks.clear());
      this.callbacks.clear();
    }
  }

async createApp() {
    const { store, getRoot } = await configureStore(this.options, this.events);
    const rootElement = getRoot(this.root);

    this.store = store;
    window.Htx = this.store;

    render((
      <App
        store={this.store}
        panels={registerPanels(this.options.panels) ?? []}
      />
    ), rootElement);

    const destructor = () => {
      unmountComponentAtNode(rootElement);
      destroy(this.store);
    };

    this.destroy = destructor;
  }

function createWidget(widgetParams) {
  return createMerkurWidget({
    ...widgetProperties,
    ...widgetParams,
    $dependencies: {
      hydrate,
      render,
      unmountComponentAtNode,
    },
    async mount(widget) {
      return mapViews(widget, viewFactory, ({ View, container, isSlot }) => {
        if (!container) {
          return null;
        }

        return (
          container?.children?.length && !isSlot
            ? widget.$dependencies.hydrate
            : widget.$dependencies.render
        )(View(widget), container);
      });
    },
    async unmount(widget) {
      mapViews(widget, viewFactory, ({ container }) => {
        if (container) {
          widget.$dependencies.unmountComponentAtNode(container);
        }
      });
    },
    async update(widget) {
      return mapViews(
        widget,
        viewFactory,
        ({ View, container }) =>
          container && widget.$dependencies.render(View(widget), container)
      );
    },
  });
}

describe("Card test suite", () => {
	let container = null;

	beforeEach(() => {
		container = document.createElement("div");
		document.body.appendChild(container);
	});

	afterEach(() => {
		unmountComponentAtNode(container);
		container.remove();
		container = null;
	});

	it("renders Card children props", () => {
		const children = "I'm a Child to be rendered in the Card";
		act(() => {
			render(<Card>{children}</Card>, container);
		});

		expect(container.textContent).toBe(children);
	});
});

describe('Component', () => {
	let node;

	beforeEach(() => {
		node = document.createElement('div');
	});

	afterEach(() => {
		unmountComponentAtNode(node);
	});

	it('displays a welcome message', () => {
		render(<Component />, node, () => {
			expect(node.innerHTML).toContain('Welcome to React components');
		});
	});
});

describe('Component', () => {
  let node

  beforeEach(() => {
    node = document.createElement('div')
  })

  afterEach(() => {
    unmountComponentAtNode(node)
  })

  it('displays a welcome message', () => {
    render(<Component/>, node, () => {
      expect(node.innerHTML).toContain('Welcome to React components')
    })
  })
})

export default function createTests(scrollbarWidth) {
    // Not for mobile environment
    if (!scrollbarWidth) return;

    let node;
    beforeEach(() => {
        node = document.createElement('div');
        document.body.appendChild(node);
    });
    afterEach(() => {
        unmountComponentAtNode(node);
        document.body.removeChild(node);
    });

    describe('when resizing window', () => {
        it('should update scrollbars', done => {
            render((
                <Scrollbars style={{ width: 100, height: 100 }}>
                    <div style={{ width: 200, height: 200 }}/>
                </Scrollbars>
            ), node, function callback() {
                setTimeout(() => {
                    const spy = spyOn(this, 'update');
                    simulant.fire(window, 'resize');
                    expect(spy.calls.length).toEqual(1);
                    done();
                }, 100);
            });
        });
    });
}

afterEach(() => {
  // cleanup on exiting
  unmountComponentAtNode(container);
  container.remove();
  container = null;
});

afterEach( () => {
  unmountComponentAtNode(container);
  container.remove();
});

function removeElementReconfirm() {
    const target = document.getElementById('react-custom-confirm-dialog')
    if (target) {
        unmountComponentAtNode(target)
        target.parentNode.removeChild(target)
    }
}

afterEach(() => {
  // cleanup on exiting
  unmountComponentAtNode(container);
  container.remove();
  container = null;
});

snackbar = {
    remove: () => {
        const snackbarContainer = document.getElementById('rui-snackbar-container');
        if (snackbarContainer) unmountComponentAtNode(snackbarContainer)
        snackbar.currentToast = false
        if (snackbar.timeout){
            clearTimeout(snackbar.timeout)
            snackbar.timeout = null
        }
    },
    currentToast: false,
    timeout: null,
    /**
     * Snackbar options description
     * @typedef {Object} SnackbarOptions
     * @property {string} type success | error | info
     * @property {string} borderType tile | rounded
     * @property {boolean} dark
     * @property {any} controls
     * @property {number} duration
     */
    /**
     * message function description
     * @param {string} message
     * @param {SnackbarOptions | null} options
     */
    message: (message, options = null) => {
        let duration = 5
        if (options) {
            if (options.duration)
            duration = options.duration
        } 
  
        if (snackbar.currentToast) snackbar.remove()
        let trasitionPercentage = 0.3*(100/duration)

        render(<SnackbarItem 
            message={message} 
            slideIn
            borderType={options?.borderType} 
            type={options?.type}
            dark={options?.dark}
            controls={options?.controls}
            transitionPercentage={trasitionPercentage} 
            duration={duration} />, 
            document.getElementById('rui-snackbar-container'));

        snackbar.currentToast = true
        snackbar.timeout = setTimeout(snackbar.remove, duration * 1000)
    }
}

afterEach(() => {
  // cleanup on exiting
  unmountComponentAtNode(container);
  container.remove();
  container = null;
});

afterEach(() => {
  // cleanup on exiting
  unmountComponentAtNode(container);
  container.remove();
  container = null;
});

describe('<Sort />', () => {
  let container = null;
  beforeEach(() => {
    container = document.createElement('div');
    document.body.appendChild(container);
  });
  afterEach(() => {
    unmountComponentAtNode(container);
    container.remove();
    container = null;
  });

  test('renders without exploding', () => {
    render(<Sort />, container);
  });

  test('Sorts Buttons by order', () => {
    const tree = renderer
      .create(
        <Sort>
          <Button
            name="twitch"
            href="twitch.tv"
            displayName="Twitch"
            logo={twitchLogo}
            order={0}
          />

          <Button
            name="youtube"
            href="youtube.com"
            displayName="YouTube"
            logo={youtubeLogo}
            order={-1}
          />
          <Button
            name="linkedin"
            href="linkedin.com"
            displayName="LinkedIn"
            logo={linkedinLogo}
            order={2}
          />
          <Button
            name="github"
            href="github.com"
            displayName="GitHub"
            logo={githubLogo}
            order={1}
          />
        </Sort>,
      )
      .toJSON();

    expect(tree.length).toEqual(4);
    expect(tree[0].props.href).toEqual('linkedin.com');
    expect(tree[1].props.href).toEqual('github.com');
    expect(tree[2].props.href).toEqual('twitch.tv');
    expect(tree[3].props.href).toEqual('youtube.com');
    expect(tree).toMatchSnapshot();
  });
});

afterEach(() => {
  // cleanup on exiting
  unmountComponentAtNode(container);
  container.remove();
  container = null;
});

export default function createTests(scrollbarWidth) {
    describe('hide tracks', () => {
        let node;
        beforeEach(() => {
            node = document.createElement('div');
            document.body.appendChild(node);
        });
        afterEach(() => {
            unmountComponentAtNode(node);
            document.body.removeChild(node);
        });

        describe('when native scrollbars have a width', () => {
            if (!scrollbarWidth) return;
            describe('when content is greater than wrapper', () => {
                it('should show tracks', done => {
                    render((
                        <Scrollbars
                            hideTracksWhenNotNeeded
                            style={{ width: 100, height: 100 }}>
                            <div style={{ width: 200, height: 200 }}/>
                        </Scrollbars>
                    ), node, function callback() {
                        setTimeout(() => {
                            const { trackHorizontal, trackVertical } = this;
                            expect(trackHorizontal.style.visibility).toEqual('visible');
                            expect(trackVertical.style.visibility).toEqual('visible');
                            done();
                        }, 100);
                    });
                });
            });
            describe('when content is smaller than wrapper', () => {
                it('should hide tracks', done => {
                    render((
                        <Scrollbars
                            hideTracksWhenNotNeeded
                            style={{ width: 100, height: 100 }}>
                            <div style={{ width: 50, height: 50 }}/>
                        </Scrollbars>
                    ), node, function callback() {
                        setTimeout(() => {
                            const { trackHorizontal, trackVertical } = this;
                            expect(trackHorizontal.style.visibility).toEqual('hidden');
                            expect(trackVertical.style.visibility).toEqual('hidden');
                            done();
                        }, 100);
                    });
                });
            });
        });
    });
}

describe("ListItem test", () => {
  let container = null;

  beforeEach(() => {
    container = document.createElement("div");
    document.body.appendChild(container);
  });

  afterEach(() => {
    unmountComponentAtNode(container);
    container.remove();
    container = null;
  });

  it("renders ListItem children props", () => {
    const children = "I'm a Child to be rendered in the ListItem";
    act(() => {
      render(<ListItem>{children}</ListItem>, container);
    });

    expect(container.textContent).toBe(children);
  });

  it("renders ListItem children props horizontal and disabled", () => {
    const children = "I'm a Child to be rendered in the ListItem";
    act(() => {
      render(
        <ListItem horizontal={true} disabled={true} active={true}>
          {children}
        </ListItem>,
        container
      );
    });

    expect(container.textContent).toBe(children);
  });

  it("renders ListItem children props active", () => {
    const children = "I'm a Child to be rendered in the ListItem";
    act(() => {
      render(<ListItem active={true}>{children}</ListItem>, container);
    });

    expect(container.textContent).toBe(children);
  });

  it("renders a 'link' child", () => {
    const children = "I'm a Child to be rendered in the ListItem";
    act(() => {
      render(<ListItem type="link">{children}</ListItem>, container);
    });

    expect(container.textContent).toBe(children);
  });

  it("renders a 'button' child", () => {
    const children = "I'm a Child to be rendered in the ListItem";
    act(() => {
      render(<ListItem type="button">{children}</ListItem>, container);
    });

    expect(container.textContent).toBe(children);
  });

  it("renders a 'link' child horizontal", () => {
    const children = "I'm a Child to be rendered in the ListItem";
    act(() => {
      render(
        <ListItem type="link" horizontal={true}>
          {children}
        </ListItem>,
        container
      );
    });

    expect(container.textContent).toBe(children);
  });

  it("renders a 'button' child horizontal", () => {
    const children = "I'm a Child to be rendered in the ListItem";
    act(() => {
      render(
        <ListItem type="button" horizontal={true}>
          {children}
        </ListItem>,
        container
      );
    });

    expect(container.textContent).toBe(children);
  });
});

export default function createTests(scrollbarWidth) {
    // Not for mobile environment
    if (!scrollbarWidth) return;

    let node;
    beforeEach(() => {
        node = document.createElement('div');
        document.body.appendChild(node);
    });
    afterEach(() => {
        unmountComponentAtNode(node);
        document.body.removeChild(node);
    });

    describe('autoHide', () => {
        describe('when Scrollbars are rendered', () => {
            it('should hide tracks', done => {
                render((
                    <Scrollbars autoHide style={{ width: 100, height: 100 }}>
                        <div style={{ width: 200, height: 200 }}/>
                    </Scrollbars>
                ), node, function callback() {
                    expect(this.trackHorizontal.style.opacity).toEqual('0');
                    expect(this.trackVertical.style.opacity).toEqual('0');
                    done();
                });
            });
        });
        describe('enter/leave track', () => {
            describe('when entering horizontal track', () => {
                it('should show tracks', done => {
                    render((
                        <Scrollbars autoHide style={{ width: 100, height: 100 }}>
                            <div style={{ width: 200, height: 200 }}/>
                        </Scrollbars>
                    ), node, function callback() {
                        const { trackHorizontal: track } = this;
                        simulant.fire(track, 'mouseenter');
                        expect(track.style.opacity).toEqual('1');
                        done();
                    });
                });
                it('should not hide tracks', done => {
                    render((
                        <Scrollbars
                            autoHide
                            autoHideTimeout={0}
                            style={{ width: 100, height: 100 }}>
                            <div style={{ width: 200, height: 200 }}/>
                        </Scrollbars>
                    ), node, function callback() {
                        const { trackHorizontal: track } = this;
                        simulant.fire(track, 'mouseenter');
                        setTimeout(() => this.hideTracks(), 10);
                        setTimeout(() => {
                            expect(track.style.opacity).toEqual('1');
                        }, 100);
                        done();
                    });
                });
            });
            describe('when leaving horizontal track', () => {
                it('should hide tracks', done => {
                    render((
                        <Scrollbars
                            autoHide
                            autoHideTimeout={10}
                            autoHideDuration={10}
                            style={{ width: 100, height: 100 }}>
                            <div style={{ width: 200, height: 200 }}/>
                        </Scrollbars>
                    ), node, function callback() {
                        const { trackHorizontal: track } = this;
                        simulant.fire(track, 'mouseenter');
                        simulant.fire(track, 'mouseleave');
                        setTimeout(() => {
                            expect(track.style.opacity).toEqual('0');
                            done();
                        }, 100);
                    });
                });
            });
            describe('when entering vertical track', () => {
                it('should show tracks', done => {
                    render((
                        <Scrollbars autoHide style={{ width: 100, height: 100 }}>
                            <div style={{ width: 200, height: 200 }}/>
                        </Scrollbars>
                    ), node, function callback() {
                        const { trackVertical: track } = this;
                        simulant.fire(track, 'mouseenter');
                        expect(track.style.opacity).toEqual('1');
                        done();
                    });
                });
                it('should not hide tracks', done => {
                    render((
                        <Scrollbars
                            autoHide
                            autoHideTimeout={0}
                            style={{ width: 100, height: 100 }}>
                            <div style={{ width: 200, height: 200 }}/>
                        </Scrollbars>
                    ), node, function callback() {
                        const { trackVertical: track } = this;
                        simulant.fire(track, 'mouseenter');
                        setTimeout(() => this.hideTracks(), 10);
                        setTimeout(() => {
                            expect(track.style.opacity).toEqual('1');
                        }, 100);
                        done();
                    });
                });
            });
            describe('when leaving vertical track', () => {
                it('should hide tracks', done => {
                    render((
                        <Scrollbars
                            autoHide
                            autoHideTimeout={10}
                            autoHideDuration={10}
                            style={{ width: 100, height: 100 }}>
                            <div style={{ width: 200, height: 200 }}/>
                        </Scrollbars>
                    ), node, function callback() {
                        const { trackVertical: track } = this;
                        simulant.fire(track, 'mouseenter');
                        simulant.fire(track, 'mouseleave');
                        setTimeout(() => {
                            expect(track.style.opacity).toEqual('0');
                            done();
                        }, 100);
                    });
                });
            });
        });
        describe('when scrolling', () => {
            it('should show tracks', done => {
                render((
                    <Scrollbars autoHide style={{ width: 100, height: 100 }}>
                        <div style={{ width: 200, height: 200 }}/>
                    </Scrollbars>
                ), node, function callback() {
                    this.scrollTop(50);
                    setTimeout(() => {
                        const { trackHorizontal, trackVertical } = this;
                        expect(trackHorizontal.style.opacity).toEqual('1');
                        expect(trackVertical.style.opacity).toEqual('1');
                        done();
                    }, 100);
                });
            });
            it('should hide tracks after scrolling', done => {
                render((
                    <Scrollbars
                        autoHide
                        autoHideTimeout={10}
                        autoHideDuration={10}
                        style={{ width: 100, height: 100 }}>
                        <div style={{ width: 200, height: 200 }}/>
                    </Scrollbars>
                ), node, function callback() {
                    this.scrollTop(50);
                    setTimeout(() => {
                        const { trackHorizontal, trackVertical } = this;
                        expect(trackHorizontal.style.opacity).toEqual('0');
                        expect(trackVertical.style.opacity).toEqual('0');
                        done();
                    }, 300);
                });
            });
            it('should not hide tracks', done => {
                render((
                    <Scrollbars
                        autoHide
                        autoHideTimeout={0}
                        style={{ width: 100, height: 100 }}>
                        <div style={{ width: 200, height: 200 }}/>
                    </Scrollbars>
                ), node, function callback() {
                    this.scrollTop(50);
                    setTimeout(() => this.hideTracks());
                    setTimeout(() => {
                        const { trackHorizontal, trackVertical } = this;
                        expect(trackHorizontal.style.opacity).toEqual('1');
                        expect(trackVertical.style.opacity).toEqual('1');
                        done();
                    }, 50);
                });
            });
        });
        describe('when dragging x-axis', () => {
            it('should show tracks', done => {
                render((
                    <Scrollbars
                        autoHide
                        autoHideTimeout={10}
                        autoHideDuration={10}
                        style={{ width: 100, height: 100 }}>
                        <div style={{ width: 200, height: 200 }}/>
                    </Scrollbars>
                ), node, function callback() {
                    const { thumbHorizontal: thumb, trackHorizontal: track } = this;
                    const { left } = thumb.getBoundingClientRect();
                    simulant.fire(thumb, 'mousedown', {
                        target: thumb,
                        clientX: left + 1
                    });
                    simulant.fire(document, 'mousemove', {
                        clientX: left + 100
                    });
                    setTimeout(() => {
                        expect(track.style.opacity).toEqual('1');
                        done();
                    }, 100);
                });
            });

            it('should hide tracks on end', done => {
                render((
                    <Scrollbars
                        autoHide
                        autoHideTimeout={10}
                        autoHideDuration={10}
                        style={{ width: 100, height: 100 }}>
                        <div style={{ width: 200, height: 200 }}/>
                    </Scrollbars>
                ), node, function callback() {
                    const { thumbHorizontal: thumb, trackHorizontal: track } = this;
                    const { left } = thumb.getBoundingClientRect();
                    simulant.fire(thumb, 'mousedown', {
                        target: thumb,
                        clientX: left + 1
                    });
                    simulant.fire(document, 'mouseup');
                    setTimeout(() => {
                        expect(track.style.opacity).toEqual('0');
                        done();
                    }, 100);
                });
            });

            describe('and leaving track', () => {
                it('should not hide tracks', done => {
                    render((
                        <Scrollbars
                            autoHide
                            autoHideTimeout={10}
                            autoHideDuration={10}
                            style={{ width: 100, height: 100 }}>
                            <div style={{ width: 200, height: 200 }}/>
                        </Scrollbars>
                    ), node, function callback() {
                        setTimeout(() => {
                            const { thumbHorizontal: thumb, trackHorizontal: track } = this;
                            const { left } = thumb.getBoundingClientRect();
                            simulant.fire(thumb, 'mousedown', {
                                target: thumb,
                                clientX: left + 1
                            });
                            simulant.fire(document, 'mousemove', {
                                clientX: left + 100
                            });
                            simulant.fire(track, 'mouseleave');
                            setTimeout(() => {
                                expect(track.style.opacity).toEqual('1');
                                done();
                            }, 200);
                        }, 100);
                    });
                });
            });
        });
        describe('when dragging y-axis', () => {
            it('should show tracks', done => {
                render((
                    <Scrollbars
                        autoHide
                        autoHideTimeout={10}
                        autoHideDuration={10}
                        style={{ width: 100, height: 100 }}>
                        <div style={{ width: 200, height: 200 }}/>
                    </Scrollbars>
                ), node, function callback() {
                    const { thumbVertical: thumb, trackVertical: track } = this;
                    const { top } = thumb.getBoundingClientRect();
                    simulant.fire(thumb, 'mousedown', {
                        target: thumb,
                        clientY: top + 1
                    });
                    simulant.fire(document, 'mousemove', {
                        clientY: top + 100
                    });
                    setTimeout(() => {
                        expect(track.style.opacity).toEqual('1');
                        done();
                    }, 100);
                });
            });
            it('should hide tracks on end', done => {
                render((
                    <Scrollbars
                        autoHide
                        autoHideTimeout={10}
                        autoHideDuration={10}
                        style={{ width: 100, height: 100 }}>
                        <div style={{ width: 200, height: 200 }}/>
                    </Scrollbars>
                ), node, function callback() {
                    const { thumbVertical: thumb, trackVertical: track } = this;
                    const { top } = thumb.getBoundingClientRect();
                    simulant.fire(thumb, 'mousedown', {
                        target: thumb,
                        clientY: top + 1
                    });
                    simulant.fire(document, 'mouseup');
                    setTimeout(() => {
                        expect(track.style.opacity).toEqual('0');
                        done();
                    }, 100);
                });
            });
            describe('and leaving track', () => {
                it('should not hide tracks', done => {
                    render((
                        <Scrollbars
                            autoHide
                            autoHideTimeout={10}
                            autoHideDuration={10}
                            style={{ width: 100, height: 100 }}>
                            <div style={{ width: 200, height: 200 }}/>
                        </Scrollbars>
                    ), node, function callback() {
                        setTimeout(() => {
                            const { thumbVertical: thumb, trackVertical: track } = this;
                            const { top } = thumb.getBoundingClientRect();
                            simulant.fire(thumb, 'mousedown', {
                                target: thumb,
                                clientY: top + 1
                            });
                            simulant.fire(document, 'mousemove', {
                                clientY: top + 100
                            });
                            simulant.fire(track, 'mouseleave');
                            setTimeout(() => {
                                expect(track.style.opacity).toEqual('1');
                                done();
                            }, 200);
                        }, 100);
                    });
                });
            });
        });
    });

    describe('when autoHide is disabed', () => {
        describe('enter/leave track', () => {
            describe('when entering horizontal track', () => {
                it('should not call `showTracks`', done => {
                    render((
                        <Scrollbars style={{ width: 100, height: 100 }}>
                            <div style={{ width: 200, height: 200 }}/>
                        </Scrollbars>
                    ), node, function callback() {
                        const spy = spyOn(this, 'showTracks');
                        const { trackHorizontal: track } = this;
                        simulant.fire(track, 'mouseenter');
                        expect(spy.calls.length).toEqual(0);
                        done();
                    });
                });
            });
            describe('when leaving horizontal track', () => {
                it('should not call `hideTracks`', done => {
                    render((
                        <Scrollbars style={{ width: 100, height: 100 }}>
                            <div style={{ width: 200, height: 200 }}/>
                        </Scrollbars>
                    ), node, function callback() {
                        const spy = spyOn(this, 'hideTracks');
                        const { trackHorizontal: track } = this;
                        simulant.fire(track, 'mouseenter');
                        simulant.fire(track, 'mouseleave');
                        setTimeout(() => {
                            expect(spy.calls.length).toEqual(0);
                            done();
                        }, 100);
                    });
                });
            });
            describe('when entering vertical track', () => {
                it('should not call `showTracks`', done => {
                    render((
                        <Scrollbars style={{ width: 100, height: 100 }}>
                            <div style={{ width: 200, height: 200 }}/>
                        </Scrollbars>
                    ), node, function callback() {
                        const spy = spyOn(this, 'showTracks');
                        const { trackVertical: track } = this;
                        simulant.fire(track, 'mouseenter');
                        expect(spy.calls.length).toEqual(0);
                        done();
                    });
                });
            });
            describe('when leaving vertical track', () => {
                it('should not call `hideTracks`', done => {
                    render((
                        <Scrollbars style={{ width: 100, height: 100 }}>
                            <div style={{ width: 200, height: 200 }}/>
                        </Scrollbars>
                    ), node, function callback() {
                        const spy = spyOn(this, 'hideTracks');
                        const { trackVertical: track } = this;
                        simulant.fire(track, 'mouseenter');
                        simulant.fire(track, 'mouseleave');
                        setTimeout(() => {
                            expect(spy.calls.length).toEqual(0);
                            done();
                        }, 100);
                    });
                });
            });
        });
    });
}

describe('use chart', () => {
  let container;
  const data = [
    {
      type: '分类一',
      value: 27,
    },
    {
      type: '分类二',
      value: 25,
    },
  ];
  const areaData = [
    {
      date: '2010-01',
      scales: 1998,
    },
    {
      date: '2010-02',
      scales: 1850,
    },
  ];
  beforeEach(() => {
    container = document.createElement('div');
    document.body.appendChild(container);
  });
  afterEach(() => {
    unmountComponentAtNode(container);
    document.body.removeChild(container);
    container = null;
  });

  it('chart init', () => {
    let chartRef = undefined;
    const props = {
      data,
      angleField: 'value',
      colorField: 'type',
      chartRef: (ref) => {
        chartRef = ref;
      },
    };
    act(() => {
      ReactDOM.render(<Pie {...props} />, container);
    });
    // chartRef 存在，图表一定渲染。
    expect(chartRef).not.toBeUndefined();
    const toDataURL = chartRef.toDataURL;
    const regPng = /^data:image\/png;base64/;
    const regJpeg = /^data:image\/jpeg;base64/;
    const imgDataDefaultArg = toDataURL();
    const imgDataWithCustomArg = toDataURL('image/jpeg');
    expect(regPng.test(imgDataDefaultArg)).toBeTruthy();
    expect(regJpeg.test(imgDataWithCustomArg)).toBeTruthy();
    expect(isFunction(chartRef.downloadImage)).toBeTruthy();
    expect(chartRef.downloadImage()).toBe('download.png');
    expect(chartRef.downloadImage('test')).toBe('test.png');
    expect(chartRef.downloadImage('test.jpeg')).toBe('test.jpeg');
    expect(chartRef.downloadImage('test', 'image/jpeg')).toBe('test.jpeg');
  });

  it('chart init with onReady & onEvent', () => {
    let readyChart = undefined;
    let events = undefined;
    const props = {
      data,
      angleField: 'value',
      colorField: 'type',
      onReady: (chart) => {
        readyChart = chart;
      },
      onEvent: (chart, event) => {
        events = event;
      },
    };
    act(() => {
      ReactDOM.render(<Pie {...props} />, container);
    });
    expect(readyChart).not.toBeUndefined();
    readyChart.chart.showTooltip({ x: 10, y: 10 });
    readyChart.chart.hideTooltip();
    expect(events.type).toBe('tooltip:hide');
  });

  it('chart destroy', () => {
    let chartRef = undefined;
    const props = {
      data,
      angleField: 'value',
      colorField: 'type',
      chartRef: (ref) => {
        chartRef = ref;
      },
    };
    const wrapper = mount(<Pie {...props} />);
    wrapper.unmount();
    expect(chartRef.chart.destroyed).toBeTruthy();
  });

  it('chart change data with normal chart', () => {
    let chartRef;
    const props = {
      data: [],
      xField: 'date',
      yField: 'scales',
      chartRef: (ref) => {
        chartRef = ref;
      },
    };
    const wrapper = mount(<Area {...props} />);
    chartRef.update = jest.fn();
    wrapper.setProps({
      data: areaData,
    });
    expect(chartRef.update).not.toHaveBeenCalled();
    expect(chartRef.chart.getData()).toEqual(areaData);
  });

  it('update config with normal chart', () => {
    let chartRef;
    const props = {
      data: areaData,
      xField: 'date',
      yField: 'scales',
      chartRef: (ref) => {
        chartRef = ref;
      },
    };
    const wrapper = mount(<Area {...props} />);
    chartRef.changeData = jest.fn();
    wrapper.setProps({
      point: {
        size: 5,
      },
    });
    expect(chartRef.changeData).not.toHaveBeenCalled();
    expect(chartRef.options.point).toEqual({ size: 5 });
  });

  it('change data with special chart', () => {
    let chartRef;
    const props = {
      percent: 0.2,
      xField: 'date',
      yField: 'scales',
      chartRef: (ref) => {
        chartRef = ref;
      },
    };
    const wrapper = mount(<RingProgress {...props} />);
    chartRef.update = jest.fn();
    wrapper.setProps({
      percent: 0.5,
    });
    expect(chartRef.chart.getData()).toEqual([
      { percent: 0.5, type: 'current' },
      { percent: 0.5, type: 'target' },
    ]);
  });

  it('processConfig * reactDomToString with virtual DOM', () => {
    let chartRef = undefined;
    const props = {
      data,
      angleField: 'value',
      colorField: 'type',
      chartRef: (ref) => {
        chartRef = ref;
      },
      statistic: {
        content: {
          customHtml: <div>customHtml content</div>,
        },
        title: {
          customHtml: () => <div>customHtml title</div>,
        },
      },
      tooltip: {
        container: () => <div className="toooltip-container"></div>,
        customContent: () => <div>custom tooltip</div>,
      },
    };
    act(() => {
      ReactDOM.render(<Pie {...props} />, container);
    });
    // chartRef 存在，图表一定渲染。
    expect(chartRef).not.toBeUndefined();
    expect(chartRef.options.tooltip.customContent().className).toBe('g2-tooltip');
    expect(chartRef.options.tooltip.customContent().innerHTML).toBe('<div>custom tooltip</div>');
    expect(chartRef.options.tooltip.container().innerHTML).toBe('<div class="toooltip-container"></div>');
    expect(chartRef.options.statistic.title.customHtml().className).toBe('');
    expect(chartRef.options.statistic.title.customHtml().innerHTML).toEqual('<div>customHtml title</div>');
    expect(chartRef.options.statistic.content.customHtml().className).toBe('');
    expect(chartRef.options.statistic.content.customHtml().innerHTML).toEqual('<div>customHtml content</div>');
  });

  it('processConfig * reactDomToString with string', () => {
    let chartRef = undefined;
    const props = {
      data,
      angleField: 'value',
      colorField: 'type',
      chartRef: (ref) => {
        chartRef = ref;
      },
      statistic: {
        content: {
          customHtml: 'customHtml content',
        },
        title: {
          customHtml: () => 'customHtml title',
        },
      },
      tooltip: {
        container: '<div class="toooltip-container"></div>',
        customContent: () => 'custom tooltip',
      },
    };
    act(() => {
      ReactDOM.render(<Pie {...props} />, container);
    });
    // chartRef 存在，图表一定渲染。
    expect(chartRef).not.toBeUndefined();
    expect(chartRef.options.tooltip.customContent()).toBe('custom tooltip');
    expect(chartRef.options.tooltip.container()).toBe('<div class="toooltip-container"></div>');
    expect(chartRef.options.statistic.content.customHtml()).toBe('customHtml content');
    expect(chartRef.options.statistic.title.customHtml()).toBe('customHtml title');
  });

  it('processConfig * reactDomToString with number', () => {
    let chartRef = undefined;
    const props = {
      data,
      angleField: 'value',
      colorField: 'type',
      chartRef: (ref) => {
        chartRef = ref;
      },
      statistic: {
        title: {
          customHtml: () => 1,
        },
        content: {
          customHtml: 2,
        },
      },
      tooltip: {
        customContent: () => 3,
      },
    };
    act(() => {
      ReactDOM.render(<Pie {...props} />, container);
    });
    // chartRef 存在，图表一定渲染。
    expect(chartRef).not.toBeUndefined();
    expect(chartRef.options.tooltip.customContent()).toBe(3);
    expect(chartRef.options.statistic.content.customHtml()).toBe(2);
    expect(chartRef.options.statistic.title.customHtml()).toBe(1);
  });

  it('processConfig * reactDomToString with HTMLElement', () => {
    let chartRef = undefined;
    const props = {
      data,
      angleField: 'value',
      colorField: 'type',
      chartRef: (ref) => {
        chartRef = ref;
      },
      statistic: {
        title: {
          customHtml: () => {
            const div = document.createElement('div');
            div.innerHTML = 'title';
            return div;
          },
        },
        content: {
          customHtml: () => {
            const div = document.createElement('div');
            div.innerHTML = 'content';
            return div;
          },
        },
      },
      tooltip: {
        container: () => {
          const div = document.createElement('div');
          div.innerHTML = 'container';
          return div;
        },
        customContent: () => {
          const div = document.createElement('div');
          div.innerHTML = 'tooltip';
          return div;
        },
      },
    };
    act(() => {
      ReactDOM.render(<Pie {...props} />, container);
    });
    // chartRef 存在，图表一定渲染。
    expect(chartRef).not.toBeUndefined();
    expect(chartRef.options.tooltip.customContent().innerHTML).toBe('tooltip');
    expect(chartRef.options.tooltip.container().innerHTML).toBe('container');
    expect(chartRef.options.statistic.content.customHtml().innerHTML).toBe('content');
    expect(chartRef.options.statistic.title.customHtml().innerHTML).toBe('title');
  });

  it('deep clone', () => {
    const title = {
      text: 'net work',
    };
    let chartRef;
    const props = {
      percent: 0.2,
      xField: 'date',
      yField: 'scales',
      xAxis: { title },
      chartRef: (ref) => {
        chartRef = ref;
      },
    };
    const wrapper = mount(<RingProgress {...props} />);
    title.text = 'work';
    wrapper.setProps({
      xAxis: { title },
    });
    expect(chartRef.options.xAxis.title).toEqual({ text: 'work' });
  });
});