From b7782da37057932f728f41b11553bc0592b0a141 Mon Sep 17 00:00:00 2001 From: Mathieu Suen Date: Tue, 11 Oct 2022 16:38:18 +0200 Subject: [PATCH] SONAR-16971 State: Selected state of the element is missing or incorrect --- .../__tests__/SourceViewer-it.tsx | 16 +++++++---- .../js/components/common/SelectListItem.tsx | 11 ++++---- .../SelectListItem-test.tsx.snap | 28 +++++++++++-------- .../main/js/components/controls/buttons.tsx | 2 +- 4 files changed, 34 insertions(+), 23 deletions(-) diff --git a/server/sonar-web/src/main/js/components/SourceViewer/__tests__/SourceViewer-it.tsx b/server/sonar-web/src/main/js/components/SourceViewer/__tests__/SourceViewer-it.tsx index ed63bd77a08..265b0a4abdc 100644 --- a/server/sonar-web/src/main/js/components/SourceViewer/__tests__/SourceViewer-it.tsx +++ b/server/sonar-web/src/main/js/components/SourceViewer/__tests__/SourceViewer-it.tsx @@ -20,6 +20,7 @@ import { queryHelpers, screen, within } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import * as React from 'react'; +import { byRole } from 'testing-library-selector'; import { SourceViewerServiceMock } from '../../../api/mocks/SourceViewerServiceMock'; import { HttpStatus } from '../../../helpers/request'; import { mockIssue } from '../../../helpers/testMocks'; @@ -41,6 +42,11 @@ jest.mock('../helpers/lines', () => { }; }); +const ui = { + codeSmellTypeButton: byRole('button', { name: 'issue.type.CODE_SMELL' }), + minorSeverityButton: byRole('button', { name: 'severity.MINOR' }) +}; + const handler = new SourceViewerServiceMock(); beforeEach(() => { @@ -135,7 +141,7 @@ it('should be able to interact with issue action', async () => { await user.click( await screen.findByRole('button', { name: 'issue.type.type_x_click_to_change.issue.type.BUG' }) ); - expect(screen.getByRole('link', { name: 'issue.type.CODE_SMELL' })).toBeInTheDocument(); + expect(ui.codeSmellTypeButton.get()).toBeInTheDocument(); // Open severity await user.click( @@ -143,11 +149,11 @@ it('should be able to interact with issue action', async () => { name: 'issue.severity.severity_x_click_to_change.severity.MAJOR' }) ); - expect(screen.getByRole('link', { name: 'severity.MINOR' })).toBeInTheDocument(); + expect(ui.minorSeverityButton.get()).toBeInTheDocument(); // Close await user.keyboard('{Escape}'); - expect(screen.queryByRole('link', { name: 'severity.MINOR' })).not.toBeInTheDocument(); + expect(ui.minorSeverityButton.query()).not.toBeInTheDocument(); // Change the severity await user.click( @@ -155,8 +161,8 @@ it('should be able to interact with issue action', async () => { name: 'issue.severity.severity_x_click_to_change.severity.MAJOR' }) ); - expect(screen.getByRole('link', { name: 'severity.MINOR' })).toBeInTheDocument(); - await user.click(screen.getByRole('link', { name: 'severity.MINOR' })); + expect(ui.minorSeverityButton.get()).toBeInTheDocument(); + await user.click(ui.minorSeverityButton.get()); expect( screen.getByRole('button', { name: 'issue.severity.severity_x_click_to_change.severity.MINOR' diff --git a/server/sonar-web/src/main/js/components/common/SelectListItem.tsx b/server/sonar-web/src/main/js/components/common/SelectListItem.tsx index cbd66ee8899..b8d2f9200f2 100644 --- a/server/sonar-web/src/main/js/components/common/SelectListItem.tsx +++ b/server/sonar-web/src/main/js/components/common/SelectListItem.tsx @@ -20,6 +20,7 @@ import classNames from 'classnames'; import * as React from 'react'; import Tooltip from '../../components/controls/Tooltip'; +import { ButtonPlain } from '../controls/buttons'; interface Props { active?: string; @@ -32,8 +33,7 @@ interface Props { } export default class SelectListItem extends React.PureComponent { - handleSelect = (event: React.MouseEvent) => { - event.preventDefault(); + handleSelect = () => { if (this.props.onSelect) { this.props.onSelect(this.props.item); } @@ -49,7 +49,9 @@ export default class SelectListItem extends React.PureComponent { const children = this.props.children || this.props.item; return (
  • - { }, this.props.className )} - href="#" onClick={this.handleSelect} onFocus={this.handleHover} onMouseOver={this.handleHover}> {children} - +
    • ); } diff --git a/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/SelectListItem-test.tsx.snap b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/SelectListItem-test.tsx.snap index 09632d1a13d..131abbb83f8 100644 --- a/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/SelectListItem-test.tsx.snap +++ b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/SelectListItem-test.tsx.snap @@ -6,15 +6,16 @@ exports[`should render correctly with a tooltip 1`] = ` placement="right" >
  • - myitem - +
    • `; @@ -24,12 +25,13 @@ exports[`should render correctly with children 1`] = ` placement="right" >
  • - seconditem

    -     +
    • `; @@ -47,15 +49,16 @@ exports[`should render correctly without children 1`] = ` placement="right" >
  • - myitem - +
    • `; @@ -65,15 +68,16 @@ exports[`should render with the active class 1`] = ` placement="right" >
  • - myitem - +
    • `; diff --git a/server/sonar-web/src/main/js/components/controls/buttons.tsx b/server/sonar-web/src/main/js/components/controls/buttons.tsx index ad0d068724e..92036d82178 100644 --- a/server/sonar-web/src/main/js/components/controls/buttons.tsx +++ b/server/sonar-web/src/main/js/components/controls/buttons.tsx @@ -30,7 +30,7 @@ import Tooltip, { TooltipProps } from './Tooltip'; type AllowedButtonAttributes = Pick< React.ButtonHTMLAttributes, - 'aria-label' | 'className' | 'disabled' | 'id' | 'style' | 'title' + 'aria-label' | 'className' | 'disabled' | 'id' | 'style' | 'title' | 'onFocus' | 'onMouseOver' >; interface ButtonProps extends AllowedButtonAttributes { -- 2.39.5