From bb6ce4ff9d10810d278fa989fe52e7fcc8df5019 Mon Sep 17 00:00:00 2001 From: FatumaA <67555014+FatumaA@users.noreply.github.com> Date: Wed, 9 Oct 2024 17:54:58 +0300 Subject: [PATCH 01/36] refactor: replace text with input --- src/components/CompareResults/ResultsMain.tsx | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/src/components/CompareResults/ResultsMain.tsx b/src/components/CompareResults/ResultsMain.tsx index 0dae59c11..96e60650b 100644 --- a/src/components/CompareResults/ResultsMain.tsx +++ b/src/components/CompareResults/ResultsMain.tsx @@ -1,6 +1,6 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; -import { Link } from '@mui/material'; +import { Input, Link } from '@mui/material'; import { Grid } from '@mui/material'; import Alert from '@mui/material/Alert'; import { Container } from '@mui/system'; @@ -24,6 +24,11 @@ function getPunctuationMark(index: number, newRevs: string[]) { } function ResultsMain() { + const [resultsTitle, setResultsTitle] = useState('Results'); + + const handleResultsChange = (event: React.ChangeEvent) => { + setResultsTitle(event.target.value); + }; const loaderData = useLoaderData() as | LoaderReturnValue | OverTimeLoaderReturnValue; @@ -97,7 +102,12 @@ function ResultsMain() {
- Results + {subtitles[view]} From a62c56017dfcf312249f66c8880ef1f620db2e10 Mon Sep 17 00:00:00 2001 From: FatumaA <67555014+FatumaA@users.noreply.github.com> Date: Wed, 9 Oct 2024 18:07:58 +0300 Subject: [PATCH 02/36] fix: Sync URL state and input value --- src/components/CompareResults/ResultsMain.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/components/CompareResults/ResultsMain.tsx b/src/components/CompareResults/ResultsMain.tsx index 96e60650b..22fc33852 100644 --- a/src/components/CompareResults/ResultsMain.tsx +++ b/src/components/CompareResults/ResultsMain.tsx @@ -1,4 +1,5 @@ -import { Fragment, useState } from 'react'; +import { Fragment, useEffect, useState } from 'react'; +import { useSearchParams } from 'react-router-dom'; import { Input, Link } from '@mui/material'; import { Grid } from '@mui/material'; @@ -24,11 +25,20 @@ function getPunctuationMark(index: number, newRevs: string[]) { } function ResultsMain() { + const [, setSearchParams] = useSearchParams(); const [resultsTitle, setResultsTitle] = useState('Results'); const handleResultsChange = (event: React.ChangeEvent) => { setResultsTitle(event.target.value); }; + + useEffect(() => { + setSearchParams((prev) => { + prev.set('title', resultsTitle); + return prev; + }); + }, [resultsTitle, setSearchParams]); + const loaderData = useLoaderData() as | LoaderReturnValue | OverTimeLoaderReturnValue; @@ -131,5 +141,4 @@ function ResultsMain() { ); } - export default ResultsMain; From 327c03a1f374866db42c36adc4ede25d44ee6a84 Mon Sep 17 00:00:00 2001 From: FatumaA <67555014+FatumaA@users.noreply.github.com> Date: Wed, 9 Oct 2024 18:19:00 +0300 Subject: [PATCH 03/36] fix: order imports correctly --- src/components/CompareResults/ResultsMain.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/CompareResults/ResultsMain.tsx b/src/components/CompareResults/ResultsMain.tsx index 22fc33852..896ff61ee 100644 --- a/src/components/CompareResults/ResultsMain.tsx +++ b/src/components/CompareResults/ResultsMain.tsx @@ -1,11 +1,10 @@ import { Fragment, useEffect, useState } from 'react'; -import { useSearchParams } from 'react-router-dom'; import { Input, Link } from '@mui/material'; import { Grid } from '@mui/material'; import Alert from '@mui/material/Alert'; import { Container } from '@mui/system'; -import { useLoaderData } from 'react-router-dom'; +import { useLoaderData, useSearchParams } from 'react-router-dom'; import { style } from 'typestyle'; import { compareView } from '../../common/constants'; @@ -51,6 +50,7 @@ function ResultsMain() { const { view } = useLoaderData() as | LoaderReturnValue | OverTimeLoaderReturnValue; + const styles = { alert: style({ width: '100%', From 138540688c0334584674a3aa12bef652aa13011f Mon Sep 17 00:00:00 2001 From: FatumaA <67555014+FatumaA@users.noreply.github.com> Date: Wed, 9 Oct 2024 18:19:36 +0300 Subject: [PATCH 04/36] style: Mirror original title styles --- src/components/CompareResults/ResultsMain.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/components/CompareResults/ResultsMain.tsx b/src/components/CompareResults/ResultsMain.tsx index 896ff61ee..7b8a7e05d 100644 --- a/src/components/CompareResults/ResultsMain.tsx +++ b/src/components/CompareResults/ResultsMain.tsx @@ -66,6 +66,12 @@ function ResultsMain() { letterSpacing: '-0.01em', margin: 0, }), + titleInput: style({ + ...FontsRaw.HeadingXS, + fontWeight: 700, + letterSpacing: '-0.01em', + margin: 0, + }), subtitle: style({ ...FontsRaw.BodyDefault, fontSize: '15px', @@ -117,6 +123,7 @@ function ResultsMain() { name='results-title' value={resultsTitle} onChange={handleResultsChange} + className={styles.titleInput} /> From 282252e13795b79ca810865ca12b7383de967902 Mon Sep 17 00:00:00 2001 From: FatumaA <67555014+FatumaA@users.noreply.github.com> Date: Thu, 10 Oct 2024 15:28:55 +0300 Subject: [PATCH 05/36] fix: persist the URL state and title when page is refreshed --- src/components/CompareResults/ResultsMain.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/CompareResults/ResultsMain.tsx b/src/components/CompareResults/ResultsMain.tsx index 7b8a7e05d..b94bac68c 100644 --- a/src/components/CompareResults/ResultsMain.tsx +++ b/src/components/CompareResults/ResultsMain.tsx @@ -1,4 +1,4 @@ -import { Fragment, useEffect, useState } from 'react'; +import { Fragment, useState } from 'react'; import { Input, Link } from '@mui/material'; import { Grid } from '@mui/material'; @@ -24,19 +24,19 @@ function getPunctuationMark(index: number, newRevs: string[]) { } function ResultsMain() { - const [, setSearchParams] = useSearchParams(); - const [resultsTitle, setResultsTitle] = useState('Results'); + const [searchParams, setSearchParams] = useSearchParams(); + const [resultsTitle, setResultsTitle] = useState( + searchParams.get('title') || 'Results', + ); const handleResultsChange = (event: React.ChangeEvent) => { - setResultsTitle(event.target.value); - }; - - useEffect(() => { + const newTitle = event.target.value; + setResultsTitle(newTitle); setSearchParams((prev) => { - prev.set('title', resultsTitle); + prev.set('title', newTitle); return prev; }); - }, [resultsTitle, setSearchParams]); + }; const loaderData = useLoaderData() as | LoaderReturnValue From 8093d551efb9cdef204ef2587991ba4840b3059f Mon Sep 17 00:00:00 2001 From: FatumaA <67555014+FatumaA@users.noreply.github.com> Date: Thu, 10 Oct 2024 15:33:51 +0300 Subject: [PATCH 06/36] style: remove unused class and its definition --- src/components/CompareResults/ResultsMain.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/components/CompareResults/ResultsMain.tsx b/src/components/CompareResults/ResultsMain.tsx index b94bac68c..4f0818bf9 100644 --- a/src/components/CompareResults/ResultsMain.tsx +++ b/src/components/CompareResults/ResultsMain.tsx @@ -60,12 +60,6 @@ function ResultsMain() { margin: '0 auto', marginBottom: '80px', }), - title: style({ - ...FontsRaw.HeadingXS, - fontWeight: 700, - letterSpacing: '-0.01em', - margin: 0, - }), titleInput: style({ ...FontsRaw.HeadingXS, fontWeight: 700, @@ -117,7 +111,7 @@ function ResultsMain() {
- + Date: Thu, 10 Oct 2024 16:21:04 +0300 Subject: [PATCH 07/36] fix: a11y add hidden label text to input --- src/components/CompareResults/ResultsMain.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/components/CompareResults/ResultsMain.tsx b/src/components/CompareResults/ResultsMain.tsx index 4f0818bf9..e3daa7499 100644 --- a/src/components/CompareResults/ResultsMain.tsx +++ b/src/components/CompareResults/ResultsMain.tsx @@ -78,6 +78,16 @@ function ResultsMain() { gap: '9px', margin: `0 0 ${Spacing.Medium}px 0`, }), + screenReaderOnly: style({ + position: 'absolute', + width: '1px', + height: '1px', + margin: '-1px', + padding: '0', + overflow: 'hidden', + clip: 'rect(0, 0, 0, 0)', + border: '0', + }), }; const subtitles = { @@ -112,7 +122,11 @@ function ResultsMain() {
+ Date: Thu, 10 Oct 2024 16:21:53 +0300 Subject: [PATCH 08/36] test: update the resultsView corresponding test --- src/__tests__/CompareResults/ResultsView.test.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/__tests__/CompareResults/ResultsView.test.tsx b/src/__tests__/CompareResults/ResultsView.test.tsx index 6f9fec416..6c30e08a3 100644 --- a/src/__tests__/CompareResults/ResultsView.test.tsx +++ b/src/__tests__/CompareResults/ResultsView.test.tsx @@ -50,7 +50,7 @@ describe('Results View', () => { const user = userEvent.setup({ delay: null }); renderWithRoute(); - const header = await screen.findByText('Results'); + const header = await screen.findByLabelText('Results Title'); expect(header).toBeInTheDocument(); @@ -67,7 +67,6 @@ describe('Results View', () => { await user.click(frameworkDropdown); expect(screen.getByText(/awsy/i)).toBeInTheDocument(); }); - it('Should render revision header with link to suite docs', async () => { const revisionHeader: RevisionsHeader = { extra_options: 'e10s fission stylo webgl-ipc webrender', From 3acd06547a283b8448984568ddb227e735c35027 Mon Sep 17 00:00:00 2001 From: FatumaA <67555014+FatumaA@users.noreply.github.com> Date: Thu, 10 Oct 2024 16:31:31 +0300 Subject: [PATCH 09/36] test: update snapshots --- .../__snapshots__/ResultsTable.test.tsx.snap | 20 ++- .../CompareWithBase.test.tsx.snap | 138 ------------------ 2 files changed, 18 insertions(+), 140 deletions(-) diff --git a/src/__tests__/CompareResults/__snapshots__/ResultsTable.test.tsx.snap b/src/__tests__/CompareResults/__snapshots__/ResultsTable.test.tsx.snap index d4c914c4e..125ce04db 100644 --- a/src/__tests__/CompareResults/__snapshots__/ResultsTable.test.tsx.snap +++ b/src/__tests__/CompareResults/__snapshots__/ResultsTable.test.tsx.snap @@ -690,9 +690,25 @@ exports[`Results Table Should match snapshot 1`] = ` class="MuiGrid-root MuiGrid-container fau5w0k css-jryjzr-MuiGrid-root" >
- Results + +
+ +
`; - -exports[`Compare With Base updates the framework and url when a new one is selected: after awsy is selected 1`] = ` -
    -
  • - awsy - - - - - -
    • -
  • - browsertime - -
    • -
  • - build_metrics - -
    • -
  • - devtools - -
    • -
  • - fxrecord - -
    • -
  • - js-bench - -
    • -
  • - mozperftest - -
    • -
  • - platform_microbench - -
    • -
  • - raptor - -
    • -
  • - talos - -
    • -
-`; From 5c96760a78d0f1c757818f0d5e189cd18d9a780d Mon Sep 17 00:00:00 2001 From: FatumaA <67555014+FatumaA@users.noreply.github.com> Date: Thu, 10 Oct 2024 16:31:44 +0300 Subject: [PATCH 10/36] fix: lint --- src/__tests__/CompareResults/ResultsView.test.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/__tests__/CompareResults/ResultsView.test.tsx b/src/__tests__/CompareResults/ResultsView.test.tsx index 6c30e08a3..10272a262 100644 --- a/src/__tests__/CompareResults/ResultsView.test.tsx +++ b/src/__tests__/CompareResults/ResultsView.test.tsx @@ -67,6 +67,7 @@ describe('Results View', () => { await user.click(frameworkDropdown); expect(screen.getByText(/awsy/i)).toBeInTheDocument(); }); + it('Should render revision header with link to suite docs', async () => { const revisionHeader: RevisionsHeader = { extra_options: 'e10s fission stylo webgl-ipc webrender', From 5623b970932e5e16aa4083d976024fd44cb37ef5 Mon Sep 17 00:00:00 2001 From: FatumaA <67555014+FatumaA@users.noreply.github.com> Date: Mon, 14 Oct 2024 12:40:22 +0300 Subject: [PATCH 11/36] feat: extract logic into component --- .../CompareResults/ResultsTitle.tsx | 57 +++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 src/components/CompareResults/ResultsTitle.tsx diff --git a/src/components/CompareResults/ResultsTitle.tsx b/src/components/CompareResults/ResultsTitle.tsx new file mode 100644 index 000000000..2a0317ecd --- /dev/null +++ b/src/components/CompareResults/ResultsTitle.tsx @@ -0,0 +1,57 @@ +import { useState } from 'react'; + +import { Input } from '@mui/material'; +import { useSearchParams } from 'react-router-dom'; +import { style } from 'typestyle'; + +import { FontsRaw } from '../../styles'; + +export const ResultsTitle = () => { + const [searchParams, setSearchParams] = useSearchParams(); + const [resultsTitle, setResultsTitle] = useState( + searchParams.get('title') || 'Results', + ); + + const styles = { + titleInput: style({ + ...FontsRaw.HeadingXS, + fontWeight: 700, + letterSpacing: '-0.01em', + margin: 0, + }), + screenReaderOnly: style({ + position: 'absolute', + width: '1px', + height: '1px', + margin: '-1px', + padding: '0', + overflow: 'hidden', + clip: 'rect(0, 0, 0, 0)', + border: '0', + }), + }; + + const handleResultsChange = (event: React.ChangeEvent) => { + const newTitle = event.target.value; + setResultsTitle(newTitle); + setSearchParams((prev) => { + prev.set('title', newTitle); + return prev; + }); + }; + return ( + <> + + + + ); +}; From 447de2d5fd2f52e6c0160d88fef635d098f9bd6d Mon Sep 17 00:00:00 2001 From: FatumaA <67555014+FatumaA@users.noreply.github.com> Date: Mon, 14 Oct 2024 12:40:58 +0300 Subject: [PATCH 12/36] chore: clean up results main and use new component --- src/components/CompareResults/ResultsMain.tsx | 49 ++----------------- 1 file changed, 5 insertions(+), 44 deletions(-) diff --git a/src/components/CompareResults/ResultsMain.tsx b/src/components/CompareResults/ResultsMain.tsx index e3daa7499..54fbf1299 100644 --- a/src/components/CompareResults/ResultsMain.tsx +++ b/src/components/CompareResults/ResultsMain.tsx @@ -1,10 +1,10 @@ -import { Fragment, useState } from 'react'; +import { Fragment } from 'react'; -import { Input, Link } from '@mui/material'; +import { Link } from '@mui/material'; import { Grid } from '@mui/material'; import Alert from '@mui/material/Alert'; import { Container } from '@mui/system'; -import { useLoaderData, useSearchParams } from 'react-router-dom'; +import { useLoaderData } from 'react-router-dom'; import { style } from 'typestyle'; import { compareView } from '../../common/constants'; @@ -18,26 +18,13 @@ import { truncateHash } from '../../utils/helpers'; import type { LoaderReturnValue } from './loader'; import type { LoaderReturnValue as OverTimeLoaderReturnValue } from './overTimeLoader'; import ResultsTable from './ResultsTable'; +import { ResultsTitle } from './ResultsTitle'; function getPunctuationMark(index: number, newRevs: string[]) { return index != newRevs.length - 1 ? ', ' : '.'; } function ResultsMain() { - const [searchParams, setSearchParams] = useSearchParams(); - const [resultsTitle, setResultsTitle] = useState( - searchParams.get('title') || 'Results', - ); - - const handleResultsChange = (event: React.ChangeEvent) => { - const newTitle = event.target.value; - setResultsTitle(newTitle); - setSearchParams((prev) => { - prev.set('title', newTitle); - return prev; - }); - }; - const loaderData = useLoaderData() as | LoaderReturnValue | OverTimeLoaderReturnValue; @@ -60,12 +47,6 @@ function ResultsMain() { margin: '0 auto', marginBottom: '80px', }), - titleInput: style({ - ...FontsRaw.HeadingXS, - fontWeight: 700, - letterSpacing: '-0.01em', - margin: 0, - }), subtitle: style({ ...FontsRaw.BodyDefault, fontSize: '15px', @@ -78,16 +59,6 @@ function ResultsMain() { gap: '9px', margin: `0 0 ${Spacing.Medium}px 0`, }), - screenReaderOnly: style({ - position: 'absolute', - width: '1px', - height: '1px', - margin: '-1px', - padding: '0', - overflow: 'hidden', - clip: 'rect(0, 0, 0, 0)', - border: '0', - }), }; const subtitles = { @@ -122,17 +93,7 @@ function ResultsMain() {
- - + {subtitles[view]} From e9483d6a3036593b6a23472c97b6f7293466a407 Mon Sep 17 00:00:00 2001 From: FatumaA <67555014+FatumaA@users.noreply.github.com> Date: Mon, 14 Oct 2024 12:52:52 +0300 Subject: [PATCH 13/36] refactor: prefer custom search param hook --- src/components/CompareResults/ResultsTitle.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/CompareResults/ResultsTitle.tsx b/src/components/CompareResults/ResultsTitle.tsx index 2a0317ecd..07698522a 100644 --- a/src/components/CompareResults/ResultsTitle.tsx +++ b/src/components/CompareResults/ResultsTitle.tsx @@ -1,13 +1,13 @@ import { useState } from 'react'; import { Input } from '@mui/material'; -import { useSearchParams } from 'react-router-dom'; import { style } from 'typestyle'; +import useRawSearchParams from '../../hooks/useRawSearchParams'; import { FontsRaw } from '../../styles'; export const ResultsTitle = () => { - const [searchParams, setSearchParams] = useSearchParams(); + const [searchParams, updateSearchParams] = useRawSearchParams(); const [resultsTitle, setResultsTitle] = useState( searchParams.get('title') || 'Results', ); @@ -34,9 +34,10 @@ export const ResultsTitle = () => { const handleResultsChange = (event: React.ChangeEvent) => { const newTitle = event.target.value; setResultsTitle(newTitle); - setSearchParams((prev) => { - prev.set('title', newTitle); - return prev; + const newSearchParams = new URLSearchParams(searchParams); + newSearchParams.set('title', newTitle); + updateSearchParams(newSearchParams, { + method: 'push', }); }; return ( From bfabdad5da59064bf1bfda783ae896f25a834d0c Mon Sep 17 00:00:00 2001 From: FatumaA <67555014+FatumaA@users.noreply.github.com> Date: Mon, 14 Oct 2024 14:22:01 +0300 Subject: [PATCH 14/36] feat: toggle between the value of label and input --- .../CompareResults/ResultsTitle.tsx | 62 ++++++++++++------- 1 file changed, 40 insertions(+), 22 deletions(-) diff --git a/src/components/CompareResults/ResultsTitle.tsx b/src/components/CompareResults/ResultsTitle.tsx index 07698522a..5a49cf99b 100644 --- a/src/components/CompareResults/ResultsTitle.tsx +++ b/src/components/CompareResults/ResultsTitle.tsx @@ -1,33 +1,33 @@ import { useState } from 'react'; +import EditIcon from '@mui/icons-material/EditOutlined'; import { Input } from '@mui/material'; import { style } from 'typestyle'; import useRawSearchParams from '../../hooks/useRawSearchParams'; -import { FontsRaw } from '../../styles'; +import { FontsRaw, Colors } from '../../styles'; export const ResultsTitle = () => { const [searchParams, updateSearchParams] = useRawSearchParams(); const [resultsTitle, setResultsTitle] = useState( searchParams.get('title') || 'Results', ); + const [isEditing, setIsEditing] = useState(false); const styles = { - titleInput: style({ + title: style({ ...FontsRaw.HeadingXS, fontWeight: 700, letterSpacing: '-0.01em', margin: 0, }), - screenReaderOnly: style({ - position: 'absolute', - width: '1px', - height: '1px', - margin: '-1px', - padding: '0', - overflow: 'hidden', - clip: 'rect(0, 0, 0, 0)', - border: '0', + editIcon: style({ + marginLeft: '10px', + cursor: 'pointer', + color: Colors.LinkText, + }), + hide: style({ + display: 'none', }), }; @@ -40,19 +40,37 @@ export const ResultsTitle = () => { method: 'push', }); }; + + const handleEdit = () => { + setIsEditing(true); + }; + + const handleEditComplete = ( + event: React.FocusEvent | React.KeyboardEvent, + ) => { + if ((event as React.KeyboardEvent).key === 'Enter') { + setIsEditing(false); + } + }; + return ( <> - - +
+ + +
+ {isEditing && ( + + )} ); }; From 52a16a1a3896055098095ae0b6d243a84d4fe452 Mon Sep 17 00:00:00 2001 From: FatumaA <67555014+FatumaA@users.noreply.github.com> Date: Mon, 14 Oct 2024 14:32:21 +0300 Subject: [PATCH 15/36] fix: switch to label on blur too --- src/components/CompareResults/ResultsTitle.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/CompareResults/ResultsTitle.tsx b/src/components/CompareResults/ResultsTitle.tsx index 5a49cf99b..db288af17 100644 --- a/src/components/CompareResults/ResultsTitle.tsx +++ b/src/components/CompareResults/ResultsTitle.tsx @@ -48,7 +48,10 @@ export const ResultsTitle = () => { const handleEditComplete = ( event: React.FocusEvent | React.KeyboardEvent, ) => { - if ((event as React.KeyboardEvent).key === 'Enter') { + if ( + (event as React.KeyboardEvent).key === 'Enter' || + event.type === 'blur' + ) { setIsEditing(false); } }; From 8e75e50f5633045c374ddf96b3e688084901fa2c Mon Sep 17 00:00:00 2001 From: FatumaA <67555014+FatumaA@users.noreply.github.com> Date: Mon, 14 Oct 2024 14:58:06 +0300 Subject: [PATCH 16/36] fix: protect against empty strings --- .../CompareResults/ResultsTitle.tsx | 20 ++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/src/components/CompareResults/ResultsTitle.tsx b/src/components/CompareResults/ResultsTitle.tsx index db288af17..daf6b0ba4 100644 --- a/src/components/CompareResults/ResultsTitle.tsx +++ b/src/components/CompareResults/ResultsTitle.tsx @@ -32,18 +32,11 @@ export const ResultsTitle = () => { }; const handleResultsChange = (event: React.ChangeEvent) => { - const newTitle = event.target.value; + const newTitle = event.target.value.trim(); setResultsTitle(newTitle); - const newSearchParams = new URLSearchParams(searchParams); - newSearchParams.set('title', newTitle); - updateSearchParams(newSearchParams, { - method: 'push', - }); }; - const handleEdit = () => { - setIsEditing(true); - }; + const handleEdit = () => setIsEditing(true); const handleEditComplete = ( event: React.FocusEvent | React.KeyboardEvent, @@ -52,6 +45,15 @@ export const ResultsTitle = () => { (event as React.KeyboardEvent).key === 'Enter' || event.type === 'blur' ) { + const safeTitle = resultsTitle || 'Results'; + setResultsTitle(safeTitle); + + const newSearchParams = new URLSearchParams(searchParams); + newSearchParams.set('title', safeTitle); + updateSearchParams(newSearchParams, { + method: 'push', + }); + setIsEditing(false); } }; From 694e07e5014dfc32ac8161157a3be566119310ae Mon Sep 17 00:00:00 2001 From: FatumaA <67555014+FatumaA@users.noreply.github.com> Date: Mon, 14 Oct 2024 15:17:30 +0300 Subject: [PATCH 17/36] test: add testable data attribute to label --- src/components/CompareResults/ResultsTitle.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/CompareResults/ResultsTitle.tsx b/src/components/CompareResults/ResultsTitle.tsx index daf6b0ba4..b9ba10b4b 100644 --- a/src/components/CompareResults/ResultsTitle.tsx +++ b/src/components/CompareResults/ResultsTitle.tsx @@ -61,7 +61,9 @@ export const ResultsTitle = () => { return ( <>
- +
{isEditing && ( From f33e4eeff7692f4b533dda8a9ea7718d5f225fe0 Mon Sep 17 00:00:00 2001 From: FatumaA <67555014+FatumaA@users.noreply.github.com> Date: Mon, 14 Oct 2024 15:17:59 +0300 Subject: [PATCH 18/36] test: update test to look for label data testid attribute --- src/__tests__/CompareResults/ResultsView.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/__tests__/CompareResults/ResultsView.test.tsx b/src/__tests__/CompareResults/ResultsView.test.tsx index 10272a262..14c6e20a0 100644 --- a/src/__tests__/CompareResults/ResultsView.test.tsx +++ b/src/__tests__/CompareResults/ResultsView.test.tsx @@ -50,7 +50,7 @@ describe('Results View', () => { const user = userEvent.setup({ delay: null }); renderWithRoute(); - const header = await screen.findByLabelText('Results Title'); + const header = await screen.findByTestId('results-title-label'); expect(header).toBeInTheDocument(); From 603be9d9bb0a34da36758b785d2e0b929cde557b Mon Sep 17 00:00:00 2001 From: FatumaA <67555014+FatumaA@users.noreply.github.com> Date: Mon, 14 Oct 2024 17:53:09 +0300 Subject: [PATCH 19/36] test: add draft test for results title component --- .../CompareResults/ResultsTitle.test.tsx | 79 +++++++++++++++++++ .../CompareResults/ResultsTitle.tsx | 6 +- 2 files changed, 84 insertions(+), 1 deletion(-) create mode 100644 src/__tests__/CompareResults/ResultsTitle.test.tsx diff --git a/src/__tests__/CompareResults/ResultsTitle.test.tsx b/src/__tests__/CompareResults/ResultsTitle.test.tsx new file mode 100644 index 000000000..bdd011ce1 --- /dev/null +++ b/src/__tests__/CompareResults/ResultsTitle.test.tsx @@ -0,0 +1,79 @@ +import { render, screen, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; + +import { ResultsTitle } from '../../components/CompareResults/ResultsTitle'; +import useRawSearchParams from '../../hooks/useRawSearchParams'; + +jest.mock('../../hooks/useRawSearchParams'); +jest.setTimeout(1000000); + +describe('Results Title', () => { + it('renders "Results" by default when no title in URL', () => { + (useRawSearchParams as jest.Mock).mockReturnValue([ + new URLSearchParams(), + jest.fn(), + ]); + + render(); + expect(screen.getByText('Results')).toBeInTheDocument(); + }); + + it('renders title from URL when present', () => { + const urlParams = new URLSearchParams('title=Custom+Title'); + (useRawSearchParams as jest.Mock).mockReturnValue([urlParams, jest.fn()]); + + render(); + expect(screen.getByText('Custom Title')).toBeInTheDocument(); + }); + + // it('changes text to editable input when edit icon is clicked', async () => { + // (useRawSearchParams as jest.Mock).mockReturnValue([ + // new URLSearchParams(), + // jest.fn(), + // ]); + // render(); + + // expect(screen.getByText('Results')).toBeInTheDocument(); + // expect(screen.queryByRole('textbox')).not.toBeInTheDocument(); + + // const editIcon = screen.getByTestId('edit-icon'); + // await userEvent.click(editIcon); + + // const inputField = screen.getByRole('textbox'); + // expect(inputField).toBeInTheDocument(); + // expect(inputField).toHaveValue('Results'); + + // expect(screen.queryByTestId('results-title-label')).not.toBeVisible(); + // }); + + // it('updates title and URL when user inputs a new value', async () => { + // const updateSearchParams = jest.fn(); + // (useRawSearchParams as jest.Mock).mockReturnValue([ + // new URLSearchParams(), + // updateSearchParams, + // ]); + + // render(); + + // const editIcon = screen.getByTestId('edit-icon'); + // await userEvent.click(editIcon); + + // const inputField = screen.getByRole('textbox'); + // await userEvent.clear(inputField); + // await userEvent.type(inputField, 'New Title'); + // await userEvent.keyboard('{Enter}'); + + // expect(screen.getByText('New Title')).toBeInTheDocument(); + + // expect(updateSearchParams).toHaveBeenCalledWith( + // expect.objectContaining({ + // toString: expect.any(Function), + // }), + // { method: 'push' }, + // ); + + // const updatedParams = updateSearchParams.mock + // .calls[0][0] as URLSearchParams; + // expect(updatedParams.get('title')).toBe('New Title'); + // }); +}); diff --git a/src/components/CompareResults/ResultsTitle.tsx b/src/components/CompareResults/ResultsTitle.tsx index b9ba10b4b..fbd2b4797 100644 --- a/src/components/CompareResults/ResultsTitle.tsx +++ b/src/components/CompareResults/ResultsTitle.tsx @@ -64,7 +64,11 @@ export const ResultsTitle = () => { - +
{isEditing && ( Date: Mon, 14 Oct 2024 17:54:28 +0300 Subject: [PATCH 20/36] chore: remove timeout --- src/__tests__/CompareResults/ResultsTitle.test.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/__tests__/CompareResults/ResultsTitle.test.tsx b/src/__tests__/CompareResults/ResultsTitle.test.tsx index bdd011ce1..c3c8130a2 100644 --- a/src/__tests__/CompareResults/ResultsTitle.test.tsx +++ b/src/__tests__/CompareResults/ResultsTitle.test.tsx @@ -1,11 +1,10 @@ -import { render, screen, waitFor } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { ResultsTitle } from '../../components/CompareResults/ResultsTitle'; import useRawSearchParams from '../../hooks/useRawSearchParams'; jest.mock('../../hooks/useRawSearchParams'); -jest.setTimeout(1000000); describe('Results Title', () => { it('renders "Results" by default when no title in URL', () => { From 8d4f8916ea5150093fada6a98ab062eb57ffaa99 Mon Sep 17 00:00:00 2001 From: FatumaA <67555014+FatumaA@users.noreply.github.com> Date: Tue, 22 Oct 2024 22:40:19 +0300 Subject: [PATCH 21/36] fix: use ternary for entire component --- .../CompareResults/ResultsTitle.tsx | 21 +++++++++---------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/src/components/CompareResults/ResultsTitle.tsx b/src/components/CompareResults/ResultsTitle.tsx index fbd2b4797..a8c4d5ad6 100644 --- a/src/components/CompareResults/ResultsTitle.tsx +++ b/src/components/CompareResults/ResultsTitle.tsx @@ -60,17 +60,7 @@ export const ResultsTitle = () => { return ( <> -
- - -
- {isEditing && ( + {isEditing ? ( { onKeyDown={handleEditComplete} className={styles.title} /> + ) : ( +
+ {resultsTitle} + +
)} ); From f0168bcfc4407e9ef5ece963968fd001837b1fa2 Mon Sep 17 00:00:00 2001 From: FatumaA <67555014+FatumaA@users.noreply.github.com> Date: Tue, 22 Oct 2024 22:41:56 +0300 Subject: [PATCH 22/36] chore: add wrapper div for testing --- src/components/CompareResults/ResultsTitle.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/CompareResults/ResultsTitle.tsx b/src/components/CompareResults/ResultsTitle.tsx index a8c4d5ad6..f1561bd10 100644 --- a/src/components/CompareResults/ResultsTitle.tsx +++ b/src/components/CompareResults/ResultsTitle.tsx @@ -59,7 +59,7 @@ export const ResultsTitle = () => { }; return ( - <> +
{isEditing ? ( { className={styles.title} /> ) : ( -
- {resultsTitle} + <> + {resultsTitle} -
+ )} - +
); }; From 1633d54664bae43f89cbd00549ad8bc2f7c8c05a Mon Sep 17 00:00:00 2001 From: FatumaA <67555014+FatumaA@users.noreply.github.com> Date: Tue, 22 Oct 2024 22:42:40 +0300 Subject: [PATCH 23/36] test: update test definition in ResultsView.test --- src/__tests__/CompareResults/ResultsView.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/__tests__/CompareResults/ResultsView.test.tsx b/src/__tests__/CompareResults/ResultsView.test.tsx index 14c6e20a0..5c34a0b17 100644 --- a/src/__tests__/CompareResults/ResultsView.test.tsx +++ b/src/__tests__/CompareResults/ResultsView.test.tsx @@ -50,7 +50,7 @@ describe('Results View', () => { const user = userEvent.setup({ delay: null }); renderWithRoute(); - const header = await screen.findByTestId('results-title-label'); + const header = await screen.findByTestId('results-title-component'); expect(header).toBeInTheDocument(); From 6ca405545e67adc5a3dcaa27dbe9190f391bd565 Mon Sep 17 00:00:00 2001 From: FatumaA <67555014+FatumaA@users.noreply.github.com> Date: Tue, 22 Oct 2024 22:55:17 +0300 Subject: [PATCH 24/36] fix: a11y - add a label on input for screen readers --- .../CompareResults/ResultsTitle.tsx | 32 ++++++++++++------- 1 file changed, 20 insertions(+), 12 deletions(-) diff --git a/src/components/CompareResults/ResultsTitle.tsx b/src/components/CompareResults/ResultsTitle.tsx index f1561bd10..67d9ca10c 100644 --- a/src/components/CompareResults/ResultsTitle.tsx +++ b/src/components/CompareResults/ResultsTitle.tsx @@ -26,8 +26,11 @@ export const ResultsTitle = () => { cursor: 'pointer', color: Colors.LinkText, }), - hide: style({ - display: 'none', + screenReaderOnly: style({ + position: 'absolute', + left: '-9999px', + overflow: 'hidden', + whiteSpace: 'nowrap', }), }; @@ -61,16 +64,21 @@ export const ResultsTitle = () => { return (
{isEditing ? ( - + <> + + + ) : ( <> {resultsTitle} From 8fa4b944e5717bb8111675c976185a9d8d13114a Mon Sep 17 00:00:00 2001 From: FatumaA <67555014+FatumaA@users.noreply.github.com> Date: Tue, 22 Oct 2024 22:59:42 +0300 Subject: [PATCH 25/36] style: add class to span containing the title --- src/components/CompareResults/ResultsTitle.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/CompareResults/ResultsTitle.tsx b/src/components/CompareResults/ResultsTitle.tsx index 67d9ca10c..72810ff11 100644 --- a/src/components/CompareResults/ResultsTitle.tsx +++ b/src/components/CompareResults/ResultsTitle.tsx @@ -81,7 +81,7 @@ export const ResultsTitle = () => { ) : ( <> - {resultsTitle} + {resultsTitle} Date: Tue, 22 Oct 2024 23:15:42 +0300 Subject: [PATCH 26/36] refactor: use existing button --- .../CompareResults/ResultsTitle.tsx | 30 +++++++++++++++---- 1 file changed, 24 insertions(+), 6 deletions(-) diff --git a/src/components/CompareResults/ResultsTitle.tsx b/src/components/CompareResults/ResultsTitle.tsx index 72810ff11..3b117d446 100644 --- a/src/components/CompareResults/ResultsTitle.tsx +++ b/src/components/CompareResults/ResultsTitle.tsx @@ -1,13 +1,18 @@ import { useState } from 'react'; -import EditIcon from '@mui/icons-material/EditOutlined'; -import { Input } from '@mui/material'; +import { Button, Input } from '@mui/material'; import { style } from 'typestyle'; import useRawSearchParams from '../../hooks/useRawSearchParams'; import { FontsRaw, Colors } from '../../styles'; +import pencilDark from '../../theme/img/pencil-dark.svg'; +import pencil from '../../theme/img/pencil.svg'; -export const ResultsTitle = () => { +interface EditButtonProps { + mode: string; +} + +export const ResultsTitle = ({ mode }: EditButtonProps) => { const [searchParams, updateSearchParams] = useRawSearchParams(); const [resultsTitle, setResultsTitle] = useState( searchParams.get('title') || 'Results', @@ -61,6 +66,15 @@ export const ResultsTitle = () => { } }; + const buttonIcon = ( + edit-icon + ); + return (
{isEditing ? ( @@ -82,10 +96,14 @@ export const ResultsTitle = () => { ) : ( <> {resultsTitle} - )} From 4bf4ef48c9139af7c5cb2a92470c106c14ab26d3 Mon Sep 17 00:00:00 2001 From: FatumaA <67555014+FatumaA@users.noreply.github.com> Date: Tue, 22 Oct 2024 23:16:33 +0300 Subject: [PATCH 27/36] chore: remove unused style definition --- src/components/CompareResults/ResultsTitle.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/components/CompareResults/ResultsTitle.tsx b/src/components/CompareResults/ResultsTitle.tsx index 3b117d446..2238e46a8 100644 --- a/src/components/CompareResults/ResultsTitle.tsx +++ b/src/components/CompareResults/ResultsTitle.tsx @@ -26,11 +26,6 @@ export const ResultsTitle = ({ mode }: EditButtonProps) => { letterSpacing: '-0.01em', margin: 0, }), - editIcon: style({ - marginLeft: '10px', - cursor: 'pointer', - color: Colors.LinkText, - }), screenReaderOnly: style({ position: 'absolute', left: '-9999px', From 1b2bc642c4c1a87422af230191bbe34f7cbdee21 Mon Sep 17 00:00:00 2001 From: FatumaA <67555014+FatumaA@users.noreply.github.com> Date: Tue, 22 Oct 2024 23:18:13 +0300 Subject: [PATCH 28/36] chore: remove unused id and class on edit button --- src/components/CompareResults/ResultsTitle.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/CompareResults/ResultsTitle.tsx b/src/components/CompareResults/ResultsTitle.tsx index 2238e46a8..56a04628d 100644 --- a/src/components/CompareResults/ResultsTitle.tsx +++ b/src/components/CompareResults/ResultsTitle.tsx @@ -63,8 +63,6 @@ export const ResultsTitle = ({ mode }: EditButtonProps) => { const buttonIcon = ( edit-icon From 2696f6c11ecdfc27d78480a4fbb53fb7a35a4b51 Mon Sep 17 00:00:00 2001 From: FatumaA <67555014+FatumaA@users.noreply.github.com> Date: Tue, 22 Oct 2024 23:24:08 +0300 Subject: [PATCH 29/36] fix: wrap the edit button in MUI's icon button component --- .../CompareResults/ResultsTitle.tsx | 23 ++++++++++--------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/src/components/CompareResults/ResultsTitle.tsx b/src/components/CompareResults/ResultsTitle.tsx index 56a04628d..764a20d29 100644 --- a/src/components/CompareResults/ResultsTitle.tsx +++ b/src/components/CompareResults/ResultsTitle.tsx @@ -1,10 +1,10 @@ import { useState } from 'react'; -import { Button, Input } from '@mui/material'; +import { Button, IconButton, Input } from '@mui/material'; import { style } from 'typestyle'; import useRawSearchParams from '../../hooks/useRawSearchParams'; -import { FontsRaw, Colors } from '../../styles'; +import { FontsRaw } from '../../styles'; import pencilDark from '../../theme/img/pencil-dark.svg'; import pencil from '../../theme/img/pencil.svg'; @@ -89,15 +89,16 @@ export const ResultsTitle = ({ mode }: EditButtonProps) => { ) : ( <> {resultsTitle} -
From cdd275ffdb5a0ab4cc4c2304706000cf5bcc8092 Mon Sep 17 00:00:00 2001 From: FatumaA <67555014+FatumaA@users.noreply.github.com> Date: Tue, 22 Oct 2024 23:41:01 +0300 Subject: [PATCH 30/36] style: make text and icon centered --- src/components/CompareResults/ResultsTitle.tsx | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/src/components/CompareResults/ResultsTitle.tsx b/src/components/CompareResults/ResultsTitle.tsx index 764a20d29..94258088b 100644 --- a/src/components/CompareResults/ResultsTitle.tsx +++ b/src/components/CompareResults/ResultsTitle.tsx @@ -26,6 +26,11 @@ export const ResultsTitle = ({ mode }: EditButtonProps) => { letterSpacing: '-0.01em', margin: 0, }), + titleWrapper: style({ + alignItems: 'center', + display: 'flex', + gap: '10px', + }), screenReaderOnly: style({ position: 'absolute', left: '-9999px', @@ -87,19 +92,23 @@ export const ResultsTitle = ({ mode }: EditButtonProps) => { /> ) : ( - <> +
{resultsTitle} - +
)}
); From f5588d22c7331a1c002cf64f8d4a238ecb6a3d6b Mon Sep 17 00:00:00 2001 From: FatumaA <67555014+FatumaA@users.noreply.github.com> Date: Tue, 22 Oct 2024 23:42:01 +0300 Subject: [PATCH 31/36] fix: remove button in button with icon image --- src/components/CompareResults/ResultsTitle.tsx | 17 +++-------------- 1 file changed, 3 insertions(+), 14 deletions(-) diff --git a/src/components/CompareResults/ResultsTitle.tsx b/src/components/CompareResults/ResultsTitle.tsx index 94258088b..2eefa1a17 100644 --- a/src/components/CompareResults/ResultsTitle.tsx +++ b/src/components/CompareResults/ResultsTitle.tsx @@ -1,6 +1,6 @@ import { useState } from 'react'; -import { Button, IconButton, Input } from '@mui/material'; +import { IconButton, Input } from '@mui/material'; import { style } from 'typestyle'; import useRawSearchParams from '../../hooks/useRawSearchParams'; @@ -94,19 +94,8 @@ export const ResultsTitle = ({ mode }: EditButtonProps) => { ) : (
{resultsTitle} - -
)} From 161366367a8e9a7626bbfe0e3333b2afa65a69d9 Mon Sep 17 00:00:00 2001 From: FatumaA <67555014+FatumaA@users.noreply.github.com> Date: Tue, 22 Oct 2024 23:51:14 +0300 Subject: [PATCH 32/36] fix: pass the correct theme mode to ResultsTitle component --- src/components/CompareResults/ResultsMain.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/CompareResults/ResultsMain.tsx b/src/components/CompareResults/ResultsMain.tsx index 54fbf1299..bb13c178d 100644 --- a/src/components/CompareResults/ResultsMain.tsx +++ b/src/components/CompareResults/ResultsMain.tsx @@ -93,7 +93,7 @@ function ResultsMain() {
- + {subtitles[view]} From d613e18f807accef62f29edace149fe196d59965 Mon Sep 17 00:00:00 2001 From: FatumaA <67555014+FatumaA@users.noreply.github.com> Date: Wed, 23 Oct 2024 00:16:57 +0300 Subject: [PATCH 33/36] fix: handle escape when editing title --- src/components/CompareResults/ResultsTitle.tsx | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/src/components/CompareResults/ResultsTitle.tsx b/src/components/CompareResults/ResultsTitle.tsx index 2eefa1a17..982c8ec81 100644 --- a/src/components/CompareResults/ResultsTitle.tsx +++ b/src/components/CompareResults/ResultsTitle.tsx @@ -49,10 +49,17 @@ export const ResultsTitle = ({ mode }: EditButtonProps) => { const handleEditComplete = ( event: React.FocusEvent | React.KeyboardEvent, ) => { - if ( - (event as React.KeyboardEvent).key === 'Enter' || - event.type === 'blur' - ) { + if ((event as React.KeyboardEvent).key === 'Escape') { + const title = searchParams.get('title'); + setResultsTitle(title || 'Results'); + setIsEditing(false); + return; + } + + const isDoneEditing = + (event as React.KeyboardEvent).key === 'Enter' || event.type === 'blur'; + + if (isDoneEditing) { const safeTitle = resultsTitle || 'Results'; setResultsTitle(safeTitle); From 6add9ba027069b075a628163e9670cb9e6059958 Mon Sep 17 00:00:00 2001 From: FatumaA <67555014+FatumaA@users.noreply.github.com> Date: Wed, 23 Oct 2024 00:23:11 +0300 Subject: [PATCH 34/36] fix: a11y - add focus to input when in edit mode --- src/components/CompareResults/ResultsTitle.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/components/CompareResults/ResultsTitle.tsx b/src/components/CompareResults/ResultsTitle.tsx index 982c8ec81..cb35b66b9 100644 --- a/src/components/CompareResults/ResultsTitle.tsx +++ b/src/components/CompareResults/ResultsTitle.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { IconButton, Input } from '@mui/material'; import { style } from 'typestyle'; @@ -18,6 +18,7 @@ export const ResultsTitle = ({ mode }: EditButtonProps) => { searchParams.get('title') || 'Results', ); const [isEditing, setIsEditing] = useState(false); + const inputRef = useRef(null); const styles = { title: style({ @@ -80,6 +81,13 @@ export const ResultsTitle = ({ mode }: EditButtonProps) => { /> ); + useEffect(() => { + if (isEditing && inputRef.current) { + inputRef.current.focus(); + inputRef.current.select(); + } + }, [isEditing]); + return (
{isEditing ? ( @@ -90,6 +98,7 @@ export const ResultsTitle = ({ mode }: EditButtonProps) => { Date: Wed, 23 Oct 2024 01:47:42 +0300 Subject: [PATCH 35/36] test: update tests for ResultsTitle component --- .../CompareResults/ResultsTitle.test.tsx | 114 +++++++++--------- 1 file changed, 60 insertions(+), 54 deletions(-) diff --git a/src/__tests__/CompareResults/ResultsTitle.test.tsx b/src/__tests__/CompareResults/ResultsTitle.test.tsx index c3c8130a2..931658280 100644 --- a/src/__tests__/CompareResults/ResultsTitle.test.tsx +++ b/src/__tests__/CompareResults/ResultsTitle.test.tsx @@ -1,78 +1,84 @@ import { render, screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import userEvent, { UserEvent } from '@testing-library/user-event'; import { ResultsTitle } from '../../components/CompareResults/ResultsTitle'; import useRawSearchParams from '../../hooks/useRawSearchParams'; jest.mock('../../hooks/useRawSearchParams'); +let user: UserEvent; + +const setupTest = (initialParams = new URLSearchParams()) => { + const updateSearchParams = jest.fn(); + (useRawSearchParams as jest.Mock).mockReturnValue([ + initialParams, + updateSearchParams, + ]); + return { updateSearchParams }; +}; + describe('Results Title', () => { - it('renders "Results" by default when no title in URL', () => { - (useRawSearchParams as jest.Mock).mockReturnValue([ - new URLSearchParams(), - jest.fn(), - ]); - - render(); - expect(screen.getByText('Results')).toBeInTheDocument(); + beforeEach(() => { + user = userEvent.setup({ delay: null }); }); - it('renders title from URL when present', () => { - const urlParams = new URLSearchParams('title=Custom+Title'); - (useRawSearchParams as jest.Mock).mockReturnValue([urlParams, jest.fn()]); - - render(); - expect(screen.getByText('Custom Title')).toBeInTheDocument(); + test.each([ + ['default title', new URLSearchParams(), 'Results'], + ['custom title', new URLSearchParams('title=Custom+Title'), 'Custom Title'], + ])('renders spaces correctly', (_, params, expected) => { + setupTest(params); + render(); + expect(screen.getByText(expected)).toBeInTheDocument(); }); - // it('changes text to editable input when edit icon is clicked', async () => { - // (useRawSearchParams as jest.Mock).mockReturnValue([ - // new URLSearchParams(), - // jest.fn(), - // ]); - // render(); + it('enables editing when edit icon is clicked', async () => { + setupTest(); + render(); - // expect(screen.getByText('Results')).toBeInTheDocument(); - // expect(screen.queryByRole('textbox')).not.toBeInTheDocument(); + const editIcon = screen.getByRole('button', { name: 'edit the title' }); + await user.click(editIcon); - // const editIcon = screen.getByTestId('edit-icon'); - // await userEvent.click(editIcon); + const inputField = screen.getByRole('textbox'); + expect(inputField).toBeInTheDocument(); + expect(inputField).toHaveValue('Results'); + }); - // const inputField = screen.getByRole('textbox'); - // expect(inputField).toBeInTheDocument(); - // expect(inputField).toHaveValue('Results'); + it('updates title and URL with new value', async () => { + const { updateSearchParams } = setupTest(); + render(); - // expect(screen.queryByTestId('results-title-label')).not.toBeVisible(); - // }); + await user.click(screen.getByRole('button', { name: 'edit the title' })); + const inputField = screen.getByRole('textbox'); - // it('updates title and URL when user inputs a new value', async () => { - // const updateSearchParams = jest.fn(); - // (useRawSearchParams as jest.Mock).mockReturnValue([ - // new URLSearchParams(), - // updateSearchParams, - // ]); + await user.clear(inputField); + await user.type(inputField, 'New Title'); + await user.keyboard('{Enter}'); - // render(); + expect(screen.getByTestId('results-title-component')).toHaveTextContent( + 'NewTitle', + ); - // const editIcon = screen.getByTestId('edit-icon'); - // await userEvent.click(editIcon); + const updatedParams = updateSearchParams.mock + .calls[0][0] as URLSearchParams; - // const inputField = screen.getByRole('textbox'); - // await userEvent.clear(inputField); - // await userEvent.type(inputField, 'New Title'); - // await userEvent.keyboard('{Enter}'); + expect(updatedParams.get('title')).toBe('NewTitle'); + expect(updateSearchParams).toHaveBeenCalledWith( + expect.any(URLSearchParams), + { method: 'push' }, + ); + }); + + it('reverts to original title on escape', async () => { + setupTest(new URLSearchParams('title=Original+Title')); + render(); - // expect(screen.getByText('New Title')).toBeInTheDocument(); + await user.click(screen.getByRole('button', { name: 'edit the title' })); + const inputField = screen.getByRole('textbox'); - // expect(updateSearchParams).toHaveBeenCalledWith( - // expect.objectContaining({ - // toString: expect.any(Function), - // }), - // { method: 'push' }, - // ); + await user.clear(inputField); + await user.type(inputField, 'New Title'); + await user.keyboard('{Escape}'); - // const updatedParams = updateSearchParams.mock - // .calls[0][0] as URLSearchParams; - // expect(updatedParams.get('title')).toBe('New Title'); - // }); + expect(screen.getByText('Original Title')).toBeInTheDocument(); + }); }); From 77338532ac39ee068305bf6c4c80067d90518f6e Mon Sep 17 00:00:00 2001 From: FatumaA <67555014+FatumaA@users.noreply.github.com> Date: Wed, 23 Oct 2024 01:51:48 +0300 Subject: [PATCH 36/36] test: update snapshots in ResultsTable and CompareWithBase tests --- .../__snapshots__/ResultsTable.test.tsx.snap | 38 +++-- .../CompareWithBase.test.tsx.snap | 138 ++++++++++++++++++ 2 files changed, 162 insertions(+), 14 deletions(-) diff --git a/src/__tests__/CompareResults/__snapshots__/ResultsTable.test.tsx.snap b/src/__tests__/CompareResults/__snapshots__/ResultsTable.test.tsx.snap index 125ce04db..ff3b9aee4 100644 --- a/src/__tests__/CompareResults/__snapshots__/ResultsTable.test.tsx.snap +++ b/src/__tests__/CompareResults/__snapshots__/ResultsTable.test.tsx.snap @@ -692,22 +692,32 @@ exports[`Results Table Should match snapshot 1`] = `
-
- +
+ + Results + + +
`; + +exports[`Compare With Base updates the framework and url when a new one is selected: after awsy is selected 1`] = ` +
    +
  • + awsy + + + + + +
    • +
  • + browsertime + +
    • +
  • + build_metrics + +
    • +
  • + devtools + +
    • +
  • + fxrecord + +
    • +
  • + js-bench + +
    • +
  • + mozperftest + +
    • +
  • + platform_microbench + +
    • +
  • + raptor + +
    • +
  • + talos + +
    • +
+`;