IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Convert packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/Scrubber.test.js to RTL (#54822)

Browse Source 
Co-authored-by: Nitesh Singh <nitesh.singh@gitstart.dev>
Co-authored-by: gitstart <gitstart@users.noreply.github.com>
Co-authored-by: Rafael Toledo <87545086+Toledodev@users.noreply.github.com>
Co-authored-by: Murilo Amaral <87545137+MuriloAmarals@users.noreply.github.com>
Co-authored-by: Matheus Benini Ferreira <88898100+MatheusBeniniF@users.noreply.github.com>
Co-authored-by: Toledodev <rafael.toledo@engenharia.ufjf.br>
Co-authored-by: Rubens Rafael <70234898+RubensRafael@users.noreply.github.com>
Co-authored-by: Júlio Piubello da Silva Cabral <julio.piubello@gitstart.dev>

Co-authored-by: gitstart <gitstart@users.noreply.github.com>
Co-authored-by: Nitesh Singh <nitesh.singh@gitstart.dev>
Co-authored-by: Rafael Toledo <87545086+Toledodev@users.noreply.github.com>
Co-authored-by: Murilo Amaral <87545137+MuriloAmarals@users.noreply.github.com>
Co-authored-by: Matheus Benini Ferreira <88898100+MatheusBeniniF@users.noreply.github.com>
Co-authored-by: Toledodev <rafael.toledo@engenharia.ufjf.br>
Co-authored-by: Rubens Rafael <70234898+RubensRafael@users.noreply.github.com>
Co-authored-by: Júlio Piubello da Silva Cabral <julio.piubello@gitstart.dev>
This commit is contained in:
GitStart 2022-09-14 13:40:39 +01:00 committed by GitHub
parent bed531f5fb
commit 017b7c7a7f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 38 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.betterer.results
View File

@ -23,9 +23,6 @@ exports[`no enzyme tests`] = {
"packages/grafana-ui/src/slate-plugins/suggestions.test.tsx:2682912140": [
[0, 18, 13, "RegExp match", "2409514259"]
],
"packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/Scrubber.test.js:4256741694": [
[14, 19, 13, "RegExp match", "2409514259"]
],
"packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/TickLabels.test.js:2931161174": [
[14, 19, 13, "RegExp match", "2409514259"]
],

54
packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/Scrubber.test.js
View File

@ -12,51 +12,51 @@
// See the License for the specific language governing permissions and
// limitations under the License.
import { shallow } from 'enzyme';
import { render, screen, fireEvent, within } from '@testing-library/react';
import React from 'react';
import sinon from 'sinon';
import Scrubber, { getStyles } from './Scrubber';
import Scrubber from './Scrubber';
describe('<Scrubber>', () => {
const defaultProps = {
onMouseDown: sinon.spy(),
position: 0,
};
let wrapper;
let rerender;
beforeEach(() => {
wrapper = shallow(<Scrubber {...defaultProps} />);
({ rerender } = render(
<svg>
<Scrubber {...defaultProps} />
</svg>
));
});
it('contains the proper svg components', () => {
const styles = getStyles();
expect(
wrapper.matchesElement(
<g>
<g className={styles.ScrubberHandles}>
<rect className={styles.ScrubberHandleExpansion} />
<rect className={styles.ScrubberHandle} />
</g>
<line className={styles.ScrubberLine} />
</g>
)
).toBeTruthy();
const scrubberComponent = screen.getByTestId('scrubber-component');
const scrubberComponentG = screen.getByTestId('scrubber-component-g');
expect(within(scrubberComponent).getByTestId('scrubber-component-g')).toBeTruthy();
expect(within(scrubberComponent).getByTestId('scrubber-component-line')).toBeTruthy();
expect(within(scrubberComponentG).getByTestId('scrubber-component-rect-1')).toBeTruthy();
expect(within(scrubberComponentG).getByTestId('scrubber-component-rect-2')).toBeTruthy();
});
it('calculates the correct x% for a timestamp', () => {
wrapper = shallow(<Scrubber {...defaultProps} position={0.5} />);
const line = wrapper.find('line').first();
const rect = wrapper.find('rect').first();
expect(line.prop('x1')).toBe('50%');
expect(line.prop('x2')).toBe('50%');
expect(rect.prop('x')).toBe('50%');
rerender(
<svg>
<Scrubber {...defaultProps} position={0.5} />
</svg>
);
const line = screen.getByTestId('scrubber-component-line');
const rect = screen.getByTestId('scrubber-component-rect-1');
expect(line).toHaveAttribute('x1', '50%');
expect(line).toHaveAttribute('x2', '50%');
expect(rect).toHaveAttribute('x', '50%');
});
it('supports onMouseDown', () => {
const event = {};
wrapper.find(`.${getStyles().ScrubberHandles}`).prop('onMouseDown')(event);
expect(defaultProps.onMouseDown.calledWith(event)).toBeTruthy();
expect(fireEvent.mouseDown(screen.getByTestId('scrubber-component-g'))).toBeTruthy();
});
});

13
packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/Scrubber.tsx
View File

@ -85,8 +85,9 @@ export default function Scrubber({ isDragging, onMouseDown, onMouseEnter, onMous
const styles = useStyles2(getStyles);
const className = cx({ [styles.ScrubberDragging]: isDragging });
return (
<g className={className}>
<g className={className} data-testid="scrubber-component">
<g
data-testid="scrubber-component-g"
className={styles.ScrubberHandles}
onMouseDown={onMouseDown}
onMouseEnter={onMouseEnter}
@ -94,6 +95,7 @@ export default function Scrubber({ isDragging, onMouseDown, onMouseEnter, onMous
>
{/* handleExpansion is only visible when `isDragging` is true */}
<rect
data-testid="scrubber-component-rect-1"
x={xPercent}
className={styles.ScrubberHandleExpansion}
style={{ transform: `translate(-4.5px)` }}
@ -101,6 +103,7 @@ export default function Scrubber({ isDragging, onMouseDown, onMouseEnter, onMous
height="20"
/>
<rect
data-testid="scrubber-component-rect-2"
x={xPercent}
className={styles.ScrubberHandle}
style={{ transform: `translate(-1.5px)` }}
@ -108,7 +111,13 @@ export default function Scrubber({ isDragging, onMouseDown, onMouseEnter, onMous
height="20"
/>
</g>
<line className={styles.ScrubberLine} y2="100%" x1={xPercent} x2={xPercent} />
<line
className={styles.ScrubberLine}
y2="100%"
x1={xPercent}
x2={xPercent}
data-testid="scrubber-component-line"
/>
</g>
);
}