From 9c453ff66e3604ce09e953e5d0fd3e465db9216a Mon Sep 17 00:00:00 2001 From: Filipp Riabchun Date: Fri, 28 May 2021 19:35:26 +0200 Subject: [PATCH] Remove findDOMNode usages --- components/button/button.js | 5 ++++- components/progress-bar/progress-bar.test.js | 20 +++++++++----------- components/query-assist/query-assist.test.js | 9 ++++----- components/select/select.test.js | 9 ++++----- 4 files changed, 21 insertions(+), 22 deletions(-) diff --git a/components/button/button.js b/components/button/button.js index a0fed3b4ca8..2e02462a245 100644 --- a/components/button/button.js +++ b/components/button/button.js @@ -1,5 +1,5 @@ import 'focus-visible'; -import React, {PureComponent} from 'react'; +import React, {createRef, PureComponent} from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import chevronDown from '@jetbrains/icons/chevron-10px'; @@ -47,6 +47,8 @@ class Button extends PureComponent { static IconSize = Size; static Theme = Theme; + buttonRef = createRef(); + render() { const { // Modifiers @@ -102,6 +104,7 @@ class Button extends PureComponent { const Tag = isLink ? ClickableLink : 'button'; return ( { className: 'test-class' }); - findDOMNode(wrapper.instance().progressbarWrapper).should.have.class('test-class'); + wrapper.instance().progressbarWrapper.should.have.class('test-class'); }); it('should set light modifier', () => { const wrapper = mountProgressBar({ theme: Theme.DARK }); - findDOMNode(wrapper.instance().progressbarWrapper). + wrapper.instance().progressbarWrapper. should.have.class(styles.dark); }); @@ -64,7 +62,7 @@ describe('Progress Bar', () => { global: true }); - findDOMNode(wrapper.instance().progressbarWrapper). + wrapper.instance().progressbarWrapper. should.have.class(styles.globalMode); }); }); @@ -76,7 +74,7 @@ describe('Progress Bar', () => { describe('#render', () => { it('should set min value to equal zero', () => { const wrapper = mountProgressBar(); - findDOMNode(wrapper.instance().progressbar).should.have.attr('aria-valuemin', '0'); + wrapper.instance().progressbar.should.have.attr('aria-valuemin', '0'); }); it('should update max value in DOM', () => { @@ -84,7 +82,7 @@ describe('Progress Bar', () => { max: 100 }); - findDOMNode(wrapper.instance().progressbar).should.have.attr('aria-valuemax', '100'); + wrapper.instance().progressbar.should.have.attr('aria-valuemax', '100'); }); it('should update progress value in DOM', () => { @@ -92,8 +90,8 @@ describe('Progress Bar', () => { value: 0.5 }); - findDOMNode(wrapper.instance().progressbar).should.have.attr('aria-valuenow', '0.5'); - findDOMNode(wrapper.instance().progressbar).should.have.attr('style').match(/width: 50%;/); + wrapper.instance().progressbar.should.have.attr('aria-valuenow', '0.5'); + wrapper.instance().progressbar.should.have.attr('style').match(/width: 50%;/); }); it('should set width equal 100% if progress value more than max value', () => { @@ -102,14 +100,14 @@ describe('Progress Bar', () => { value: 10 }); - findDOMNode(wrapper.instance().progressbar).should.have.attr('style').match(/width: 100%;/); + wrapper.instance().progressbar.should.have.attr('style').match(/width: 100%;/); }); it('should not set style if value is not a number', () => { const wrapper = mountProgressBar({ value: null }); - findDOMNode(wrapper.instance().progressbar).should.not.have.attr('style'); + wrapper.instance().progressbar.should.not.have.attr('style'); }); }); }); diff --git a/components/query-assist/query-assist.test.js b/components/query-assist/query-assist.test.js index dff4d72b295..3f6703ea7e9 100644 --- a/components/query-assist/query-assist.test.js +++ b/components/query-assist/query-assist.test.js @@ -1,7 +1,6 @@ -/* eslint-disable no-magic-numbers,react/no-find-dom-node */ +/* eslint-disable no-magic-numbers */ import React from 'react'; -import {findDOMNode} from 'react-dom'; import {Simulate} from 'react-dom/test-utils'; import {mount} from 'enzyme'; @@ -474,7 +473,7 @@ describe('Query Assist', () => { instance.requestData(). then(() => { - const list = findDOMNode(instance._popup.list); + const list = instance._popup.list.container; const {length} = suggestions; list.querySelectorAll('[data-test~=ring-list-item]').should.have.length(length); @@ -598,7 +597,7 @@ describe('Query Assist', () => { onApply }).find('QueryAssist').instance(); - Simulate.click(findDOMNode(instance.glass)); + Simulate.click(instance.glass.buttonRef.current); onApply.should.have.been.calledWithMatch({ query: testQuery, caret: testQueryLength @@ -612,7 +611,7 @@ describe('Query Assist', () => { onClear }).find('QueryAssist').instance(); - Simulate.click(findDOMNode(instance.clear)); + Simulate.click(instance.clear.buttonRef.current); onClear.should.have.been.calledWithExactly(); }); }); diff --git a/components/select/select.test.js b/components/select/select.test.js index ac26407cfb0..7acb0728c8f 100644 --- a/components/select/select.test.js +++ b/components/select/select.test.js @@ -1,6 +1,5 @@ -/* eslint-disable no-magic-numbers, react/no-find-dom-node */ +/* eslint-disable no-magic-numbers*/ import React from 'react'; -import {findDOMNode} from 'react-dom'; import {Simulate} from 'react-dom/test-utils'; import {shallow, mount} from 'enzyme'; @@ -212,7 +211,7 @@ describe('Select', () => { const instance = wrapper.instance(); instance._showPopup(); - Simulate.mouseDown(findDOMNode(instance._popup.list)); + Simulate.mouseDown(instance._popup.list.container); Simulate.blur(instance.filter); sandbox.clock.tick(); instance._popup.props.hidden.should.be.false; @@ -623,7 +622,7 @@ describe('Select', () => { const instance = wrapper.instance(); instance._showPopup(); instance.filterValue('test'); - findDOMNode(instance._popup.filter).value.should.equal('test'); + instance._popup.filter.value.should.equal('test'); }); it('Should set target input value in input mode', () => { @@ -642,7 +641,7 @@ describe('Select', () => { instance._showPopup(); instance._hidePopup(); instance._showPopup(); - findDOMNode(instance._popup.filter).value.should.equal(''); + instance._popup.filter.value.should.equal(''); }); });