From c2499586a8539c3dc9d7c051418a159d58169972 Mon Sep 17 00:00:00 2001 From: Ismail Cherri Date: Fri, 23 Feb 2024 10:25:43 +0100 Subject: [PATCH] SONAR-21692 Fix jest warnings related to Valid DOM in IssuesApp (#10695) --- .../src/components/ExecutionFlowAccordion.tsx | 2 +- .../js/apps/issues/__tests__/IssueApp-it.tsx | 10 +++++----- .../issues-subnavigation/IssueLocation.tsx | 18 +++++++---------- .../IssueLocationsCrossFile.tsx | 14 +++++-------- .../IssueLocationsNavigator.tsx | 20 +++++++++++++------ .../__tests__/SubnavigationIssues-it.tsx | 4 ++-- 6 files changed, 34 insertions(+), 34 deletions(-) diff --git a/server/sonar-web/design-system/src/components/ExecutionFlowAccordion.tsx b/server/sonar-web/design-system/src/components/ExecutionFlowAccordion.tsx index 9e9ab5cf6f1..cc37544272a 100644 --- a/server/sonar-web/design-system/src/components/ExecutionFlowAccordion.tsx +++ b/server/sonar-web/design-system/src/components/ExecutionFlowAccordion.tsx @@ -35,7 +35,7 @@ interface Props { onClick?: () => void; } -export function ExecutionFlowAccordion(props: Props) { +export function ExecutionFlowAccordion(props: Readonly) { const { children, expanded, header, hidden, id, innerRef, onClick } = props; return ( diff --git a/server/sonar-web/src/main/js/apps/issues/__tests__/IssueApp-it.tsx b/server/sonar-web/src/main/js/apps/issues/__tests__/IssueApp-it.tsx index d1135cda01e..ddce033ae5f 100644 --- a/server/sonar-web/src/main/js/apps/issues/__tests__/IssueApp-it.tsx +++ b/server/sonar-web/src/main/js/apps/issues/__tests__/IssueApp-it.tsx @@ -97,7 +97,7 @@ describe('issue app', () => { const dataFlowButton = await screen.findByRole('button', { name: 'issue.flow.x_steps.2 Backtracking 1', }); - const exectionFlowButton = screen.getByRole('link', { + const exectionFlowButton = screen.getByRole('button', { name: 'issue.show_full_execution_flow.3', }); @@ -345,8 +345,8 @@ describe('issue app', () => { await user.click(await ui.issueItemAction4.find()); - expect(screen.getByRole('link', { name: 'location 1' })).toBeInTheDocument(); - expect(screen.getByRole('link', { name: 'location 2' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: 'location 1' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: 'location 2' })).toBeInTheDocument(); // Select the "why is this an issue" tab await user.click( @@ -359,7 +359,7 @@ describe('issue app', () => { }), ).toHaveAttribute('aria-current', 'false'); - await user.click(screen.getByRole('link', { name: 'location 1' })); + await user.click(screen.getByRole('button', { name: 'location 1' })); expect( screen.queryByRole('tab', { @@ -378,7 +378,7 @@ describe('issue app', () => { }), ).toHaveAttribute('aria-current', 'false'); - await user.click(screen.getByRole('link', { name: 'location 1' })); + await user.click(screen.getByRole('button', { name: 'location 1' })); expect( screen.queryByRole('tab', { diff --git a/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueLocation.tsx b/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueLocation.tsx index c2414f6579b..a1d910f2eb5 100644 --- a/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueLocation.tsx +++ b/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueLocation.tsx @@ -19,7 +19,7 @@ */ import styled from '@emotion/styled'; import classNames from 'classnames'; -import { BaseLink, LocationMarker, StyledMarker, themeColor } from 'design-system'; +import { LocationMarker, StyledMarker, themeColor } from 'design-system'; import React, { useCallback, useEffect, useMemo, useRef } from 'react'; import { translate } from '../../../helpers/l10n'; @@ -31,7 +31,7 @@ interface Props { selected: boolean; } -export default function IssueLocation(props: Props) { +export default function IssueLocation(props: Readonly) { const { index, message, selected, concealed, onClick } = props; const node = useRef(null); const locationType = useMemo(() => getLocationType(message), [message]); @@ -47,7 +47,7 @@ export default function IssueLocation(props: Props) { }, [selected]); const handleClick = useCallback( - (event: React.MouseEvent) => { + (event: React.MouseEvent) => { event.preventDefault(); onClick(index); }, @@ -55,12 +55,7 @@ export default function IssueLocation(props: Props) { ); return ( - + - + ); } @@ -96,9 +91,10 @@ const StyledLocation = styled.div` } `; -const StyledLink = styled(BaseLink)` +const StyledButton = styled.button` color: ${themeColor('pageContent')}; border: none; + background: none; `; const StyledLocationName = styled.span` diff --git a/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueLocationsCrossFile.tsx b/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueLocationsCrossFile.tsx index a3e4d544a97..bb2f02a738c 100644 --- a/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueLocationsCrossFile.tsx +++ b/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueLocationsCrossFile.tsx @@ -18,7 +18,7 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import styled from '@emotion/styled'; -import { DiscreetLink, themeBorder, themeContrast } from 'design-system'; +import { BareButton, themeBorder, themeContrast } from 'design-system'; import React, { PureComponent } from 'react'; import { translateWithParameters } from '../../../helpers/l10n'; import { collapsePath } from '../../../helpers/path'; @@ -171,17 +171,12 @@ export default class IssueLocationsCrossFile extends PureComponent
{this.renderGroup(firstGroup, 0, { onlyFirst: true })}
- + {translateWithParameters( 'issues.show_x_more_locations', locations.length - VISIBLE_LOCATIONS_COLLAPSE, )} - +
{this.renderGroup(lastGroup, groups.length - 1, { onlyLast: true })}
@@ -203,6 +198,7 @@ const ComponentName = styled.div` color: ${themeContrast('subnavigation')}; `; -const ExpandLink = styled(DiscreetLink)` +const ExpandButton = styled(BareButton)` color: ${themeContrast('subnavigationSubheading')}; + border-bottom: ${themeBorder('default', 'currentColor')}; `; diff --git a/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueLocationsNavigator.tsx b/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueLocationsNavigator.tsx index f0af1b1b19b..22bc6fc1ec4 100644 --- a/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueLocationsNavigator.tsx +++ b/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueLocationsNavigator.tsx @@ -17,7 +17,13 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { DiscreetLink, ExecutionFlowAccordion, SubnavigationFlowSeparator } from 'design-system'; +import styled from '@emotion/styled'; +import { + BareButton, + ExecutionFlowAccordion, + SubnavigationFlowSeparator, + themeBorder, +} from 'design-system'; import React, { Fragment, useCallback, useRef } from 'react'; import { translate, translateWithParameters } from '../../../helpers/l10n'; import { Flow, FlowType, Issue } from '../../../types/types'; @@ -36,7 +42,7 @@ interface Props { selectedLocationIndex: number | undefined; } -export default function IssueLocationsNavigator(props: Props) { +export default function IssueLocationsNavigator(props: Readonly) { const { issue, onFlowSelect, onLocationSelect, selectedFlowIndex, selectedLocationIndex } = props; const accordionElement = useRef(null); const hasFlows = @@ -133,18 +139,16 @@ export default function IssueLocationsNavigator(props: Props) { flow.type === FlowType.EXECUTION && hasFlowsWithType && (
- { handleAccordionClick(index); }} - preventDefault - to="{{}}" > {translateWithParameters( 'issue.show_full_execution_flow', flow.locations.length, )} - +
)} @@ -165,3 +169,7 @@ function getExecutionFlowLabel(flow: Flow, hasFlowsWithType: boolean) { return translate('issues.execution_flow'); } + +const StyledBareButton = styled(BareButton)` + border-bottom: ${themeBorder('default', 'currentColor')}; +`; diff --git a/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/__tests__/SubnavigationIssues-it.tsx b/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/__tests__/SubnavigationIssues-it.tsx index eb9445b407c..60cd0a4dfb5 100644 --- a/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/__tests__/SubnavigationIssues-it.tsx +++ b/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/__tests__/SubnavigationIssues-it.tsx @@ -22,7 +22,7 @@ import userEvent from '@testing-library/user-event'; import * as React from 'react'; import { mockFlowLocation, mockIssue, mockPaging } from '../../../../helpers/testMocks'; import { renderComponent } from '../../../../helpers/testReactTestingUtils'; -import { byRole, byText } from '../../../../helpers/testSelector'; +import { byRole } from '../../../../helpers/testSelector'; import { ComponentPropsType } from '../../../../helpers/testUtils'; import { FlowType, Issue } from '../../../../types/types'; import { VISIBLE_LOCATIONS_COLLAPSE } from '../IssueLocationsCrossFile'; @@ -228,7 +228,7 @@ describe('interacting', () => { function getPageObject() { const selectors = { headerBackButton: byRole('link', { name: 'issues.return_to_list' }), - expandBadgesButton: byText(/issues.show_x_more_locations.\d/), + expandBadgesButton: byRole('button', { name: /issues.show_x_more_locations.\d/ }), }; const user = userEvent.setup(); const ui = { -- 2.39.5