From f2b8b50f58c239c7518745f100d86aa3a121de00 Mon Sep 17 00:00:00 2001 From: dewanshDT Date: Sun, 6 Aug 2023 01:53:51 +0530 Subject: [PATCH 1/5] toolbar and the test file --- .../modules/IDE/components/Header/Toolbar.jsx | 378 ++++++++---------- .../components/Header/Toolbar.unit.test.jsx | 246 +++++++++--- client/modules/IDE/hooks/useSketchActions.js | 13 +- client/modules/IDE/selectors/project.js | 1 + 4 files changed, 360 insertions(+), 278 deletions(-) diff --git a/client/modules/IDE/components/Header/Toolbar.jsx b/client/modules/IDE/components/Header/Toolbar.jsx index 35470e97ad..0c1aa33a0c 100644 --- a/client/modules/IDE/components/Header/Toolbar.jsx +++ b/client/modules/IDE/components/Header/Toolbar.jsx @@ -1,253 +1,189 @@ +import React, { useRef } from 'react'; +import classNames from 'classnames'; import PropTypes from 'prop-types'; -import React from 'react'; -import { connect } from 'react-redux'; +import { useTranslation } from 'react-i18next'; +import { useDispatch, useSelector } from 'react-redux'; import { Link } from 'react-router-dom'; -import classNames from 'classnames'; -import { withTranslation } from 'react-i18next'; -import * as IDEActions from '../../actions/ide'; -import * as preferenceActions from '../../actions/preferences'; -import * as projectActions from '../../actions/project'; +import { + hideEditProjectName, + showEditProjectName +} from '../../actions/project'; +import { + openPreferences, + startAccessibleSketch, + startSketch, + stopSketch +} from '../../actions/ide'; +import { + setAutorefresh, + setGridOutput, + setTextOutput +} from '../../actions/preferences'; +import { useSketchActions } from '../../hooks'; import PlayIcon from '../../../../images/play.svg'; import StopIcon from '../../../../images/stop.svg'; import PreferencesIcon from '../../../../images/preferences.svg'; import EditProjectNameIcon from '../../../../images/pencil.svg'; -class Toolbar extends React.Component { - constructor(props) { - super(props); - this.handleKeyPress = this.handleKeyPress.bind(this); - this.handleProjectNameChange = this.handleProjectNameChange.bind(this); - this.handleProjectNameClick = this.handleProjectNameClick.bind(this); - this.handleProjectNameSave = this.handleProjectNameSave.bind(this); +const Toolbar = (props) => { + const { isPlaying, infiniteLoop, preferencesIsVisible } = useSelector( + (state) => state.ide + ); + const project = useSelector((state) => state.project); + const { autorefresh } = useSelector((state) => state.preferences); + const dispatch = useDispatch(); - this.state = { - projectNameInputValue: props.project.name - }; - } + const { t } = useTranslation(); + const { changeSketchName, canEditProjectName } = useSketchActions(); + + const projectNameInputRef = useRef(); - handleKeyPress(event) { + function handleKeyPress(event) { if (event.key === 'Enter') { - this.props.hideEditProjectName(); - this.projectNameInput.blur(); + dispatch(hideEditProjectName()); + projectNameInputRef.current.blur(); } } - handleProjectNameChange(event) { - this.setState({ projectNameInputValue: event.target.value }); - } - - handleProjectNameClick() { - if (this.canEditProjectName) { - this.props.showEditProjectName(); + function handleProjectNameClick() { + if (canEditProjectName) { + dispatch(showEditProjectName()); setTimeout(() => { - this.projectNameInput?.focus(); + projectNameInputRef.current?.focus(); }, 140); } } - handleProjectNameSave() { - const newProjectName = this.state.projectNameInputValue.trim(); - if (newProjectName.length === 0) { - this.setState({ - projectNameInputValue: this.props.project.name - }); - } else { - this.props.setProjectName(newProjectName); - this.props.hideEditProjectName(); - if (this.props.project.id) { - this.props.saveProject(); - } + function handleProjectNameSave() { + const newName = projectNameInputRef.current?.value; + if (newName.length > 0) { + dispatch(hideEditProjectName()); + changeSketchName(newName); } } - canEditProjectName() { - return ( - (this.props.owner && - this.props.owner.username && - this.props.owner.username === this.props.currentUser) || - !this.props.owner || - !this.props.owner.username - ); - } - - render() { - const playButtonClass = classNames({ - 'toolbar__play-button': true, - 'toolbar__play-button--selected': this.props.isPlaying - }); - const stopButtonClass = classNames({ - 'toolbar__stop-button': true, - 'toolbar__stop-button--selected': !this.props.isPlaying - }); - const preferencesButtonClass = classNames({ - 'toolbar__preferences-button': true, - 'toolbar__preferences-button--selected': this.props.preferencesIsVisible - }); - const nameContainerClass = classNames({ - 'toolbar__project-name-container': true, - 'toolbar__project-name-container--editing': this.props.project - .isEditingName - }); - - const canEditProjectName = this.canEditProjectName(); - - return ( -
- - + + +
+ { + dispatch(setAutorefresh(event.target.checked)); }} - aria-label={this.props.t('Toolbar.PlayOnlyVisualSketchARIA')} - title={this.props.t('Toolbar.PlaySketchARIA')} - disabled={this.props.infiniteLoop} - > -
+
+ (event.target.value = project.name)} + onKeyPress={handleKeyPress} + /> + {(() => { + if (project.owner) { + return ( +

+ {t('Toolbar.By')}{' '} + + {project.owner.username} + +

+ ); + } + return null; + })()}
- ); - } -} + +
+ ); +}; Toolbar.propTypes = { - isPlaying: PropTypes.bool.isRequired, - preferencesIsVisible: PropTypes.bool.isRequired, - stopSketch: PropTypes.func.isRequired, - setProjectName: PropTypes.func.isRequired, - openPreferences: PropTypes.func.isRequired, - owner: PropTypes.shape({ - username: PropTypes.string - }), - project: PropTypes.shape({ - name: PropTypes.string.isRequired, - isEditingName: PropTypes.bool, - id: PropTypes.string - }).isRequired, - showEditProjectName: PropTypes.func.isRequired, - hideEditProjectName: PropTypes.func.isRequired, - infiniteLoop: PropTypes.bool.isRequired, - autorefresh: PropTypes.bool.isRequired, - setAutorefresh: PropTypes.func.isRequired, - setTextOutput: PropTypes.func.isRequired, - setGridOutput: PropTypes.func.isRequired, - startSketch: PropTypes.func.isRequired, - startAccessibleSketch: PropTypes.func.isRequired, - saveProject: PropTypes.func.isRequired, - currentUser: PropTypes.string, - t: PropTypes.func.isRequired, syncFileContent: PropTypes.func.isRequired }; -Toolbar.defaultProps = { - owner: undefined, - currentUser: undefined -}; - -function mapStateToProps(state) { - return { - autorefresh: state.preferences.autorefresh, - currentUser: state.user.username, - infiniteLoop: state.ide.infiniteLoop, - isPlaying: state.ide.isPlaying, - owner: state.project.owner, - preferencesIsVisible: state.ide.preferencesIsVisible, - project: state.project - }; -} - -const mapDispatchToProps = { - ...IDEActions, - ...preferenceActions, - ...projectActions -}; - -export const ToolbarComponent = withTranslation()(Toolbar); -export default connect(mapStateToProps, mapDispatchToProps)(ToolbarComponent); +export default Toolbar; diff --git a/client/modules/IDE/components/Header/Toolbar.unit.test.jsx b/client/modules/IDE/components/Header/Toolbar.unit.test.jsx index cd3365d62d..d464bd18d2 100644 --- a/client/modules/IDE/components/Header/Toolbar.unit.test.jsx +++ b/client/modules/IDE/components/Header/Toolbar.unit.test.jsx @@ -1,73 +1,227 @@ +// import { rest } from 'msw'; +// import { setupServer } from 'msw/node'; +// import React from 'react'; +// import lodash from 'lodash'; +// import { Provider } from 'react-redux'; // Import the Provider from react-redux +// import { createStore, applyMiddleware } from 'redux'; +// import thunk from 'redux-thunk'; + +// import { +// fireEvent, +// reduxRender, +// screen, +// waitFor +// } from '../../../../test-utils'; +// import { selectProjectName } from '../../selectors/project'; +// import ToolbarComponent from './Toolbar'; +// import rootReducer from '../../../../reducers'; + +// const server = setupServer( +// rest.put(`/projects/id`, (req, res, ctx) => res(ctx.json(req.body))) +// ); + +// beforeAll(() => server.listen()); +// afterEach(() => server.resetHandlers()); +// afterAll(() => server.close()); + +// // Set up the Redux store with the root reducer and thunk middleware +// const store = createStore(rootReducer, applyMiddleware(thunk)); + +// const renderComponent = (extraState = {}) => { +// const initialState = lodash.merge( +// { +// ide: { +// isPlaying: false +// }, +// user: { +// authenticated: true, +// username: 'me', +// id: 'userId' +// }, +// project: { +// name: 'testname', +// id: 'id', +// owner: { +// username: 'me', +// id: 'userId' +// } +// } +// }, +// extraState +// ); + +// const props = { +// syncFileContent: jest.fn() +// }; + +// return { +// ...props, +// ...reduxRender( +// +// +// , +// { initialState } +// ) +// }; +// }; + +// describe('', () => { +// it('sketch owner can switch to sketch name editing mode', async () => { +// renderComponent(); +// const sketchName = screen.getByLabelText('Edit sketch name'); + +// fireEvent.click(sketchName); + +// await waitFor(() => { +// expect(screen.getByLabelText('New sketch name')).toHaveFocus(); +// expect(screen.getByLabelText('New sketch name')).toBeEnabled(); +// }); +// }); + +// it("non-owner can't switch to sketch editing mode", async () => { +// renderComponent({ user: { username: 'not-me', id: 'not-me' } }); +// const sketchName = screen.getByLabelText('Edit sketch name'); + +// fireEvent.click(sketchName); + +// expect(sketchName).toBeDisabled(); +// await waitFor(() => +// expect(screen.getByLabelText('New sketch name')).toBeDisabled() +// ); +// }); + +// it("sketch owner can't change to empty name", async () => { +// renderComponent(); +// const sketchNameInput = screen.getByLabelText('New sketch name'); +// fireEvent.change(sketchNameInput, { target: { value: '' } }); +// fireEvent.blur(sketchNameInput); + +// await waitFor(() => +// expect(selectProjectName(store.getState())).toBe('testname') +// ); +// }); + +// it('sketch owner can change name', async () => { +// renderComponent(); +// const sketchNameInput = screen.getByLabelText('New sketch name'); +// fireEvent.change(sketchNameInput, { +// target: { value: 'my new sketch name' } +// }); +// fireEvent.blur(sketchNameInput); + +// await waitFor(() => +// expect(selectProjectName(store.getState())).toBe('my new sketch name') +// ); +// }); + +// it('sketch is stopped when stop button is clicked', async () => { +// renderComponent(); +// const stopButton = screen.getByLabelText('Stop sketch'); + +// fireEvent.click(stopButton); + +// await waitFor(() => expect(store.getState().ide.isPlaying).toBe(false)); +// }); + +// it('sketch is started when play button is clicked', async () => { +// renderComponent(); +// const playButton = screen.getByLabelText('Play only visual sketch'); +// fireEvent.click(playButton); + +// await waitFor(() => expect(store.getState().ide.isPlaying).toBe(true)); +// }); + +// it('sketch content is synched when play button is clicked', async () => { +// const props = renderComponent(); +// const playButton = screen.getByLabelText('Play only visual sketch'); +// fireEvent.click(playButton); + +// await waitFor(() => expect(props.syncFileContent).toHaveBeenCalled()); +// }); +// }); + +import { rest } from 'msw'; +import { setupServer } from 'msw/node'; import React from 'react'; import lodash from 'lodash'; -import { fireEvent, render, screen, waitFor } from '../../../../test-utils'; -import { ToolbarComponent } from './Toolbar'; +import { + fireEvent, + reduxRender, + screen, + waitFor +} from '../../../../test-utils'; +import { selectProjectName } from '../../selectors/project'; +import ToolbarComponent from './Toolbar'; + +const server = setupServer( + rest.put(`/projects/id`, (req, res, ctx) => res(ctx.json(req.body))) +); -const renderComponent = (extraProps = {}) => { - const props = lodash.merge( +beforeAll(() => server.listen()); +afterEach(() => server.resetHandlers()); +afterAll(() => server.close()); + +const renderComponent = (extraState = {}) => { + const initialState = lodash.merge( { - isPlaying: false, - preferencesIsVisible: false, - stopSketch: jest.fn(), - setProjectName: jest.fn(), - openPreferences: jest.fn(), - showEditProjectName: jest.fn(), - hideEditProjectName: jest.fn(), - infiniteLoop: false, - autorefresh: false, - setAutorefresh: jest.fn(), - setTextOutput: jest.fn(), - setGridOutput: jest.fn(), - startSketch: jest.fn(), - startAccessibleSketch: jest.fn(), - saveProject: jest.fn(), - syncFileContent: jest.fn(), - currentUser: 'me', - originalProjectName: 'testname', - - owner: { - username: 'me' + ide: { + isPlaying: false + }, + user: { + authenticated: true, + username: 'me', + id: 'userId' }, project: { name: 'testname', - isEditingName: false, - id: 'id' - }, - t: jest.fn() + id: 'id', + owner: { + username: 'me', + id: 'userId' + } + } }, - extraProps + extraState ); - render(); + const props = { + syncFileContent: jest.fn() + }; - return props; + return { + ...props, + ...reduxRender(, { initialState }) + }; }; describe('', () => { it('sketch owner can switch to sketch name editing mode', async () => { - const props = renderComponent(); + renderComponent(); const sketchName = screen.getByLabelText('Edit sketch name'); fireEvent.click(sketchName); - await waitFor(() => expect(props.showEditProjectName).toHaveBeenCalled()); + await waitFor(() => { + expect(screen.getByLabelText('New sketch name')).toHaveFocus(); + expect(screen.getByLabelText('New sketch name')).toBeEnabled(); + }); }); it("non-owner can't switch to sketch editing mode", async () => { - const props = renderComponent({ currentUser: 'not-me' }); + renderComponent({ user: { username: 'not-me', id: 'not-me' } }); const sketchName = screen.getByLabelText('Edit sketch name'); fireEvent.click(sketchName); expect(sketchName).toBeDisabled(); await waitFor(() => - expect(props.showEditProjectName).not.toHaveBeenCalled() + expect(screen.getByLabelText('New sketch name')).toBeDisabled() ); }); it('sketch owner can change name', async () => { - const props = renderComponent({ project: { isEditingName: true } }); + const { store } = renderComponent(); const sketchNameInput = screen.getByLabelText('New sketch name'); fireEvent.change(sketchNameInput, { @@ -76,38 +230,38 @@ describe('', () => { fireEvent.blur(sketchNameInput); await waitFor(() => - expect(props.setProjectName).toHaveBeenCalledWith('my new sketch name') + expect(selectProjectName(store.getState())).toBe('my new sketch name') ); - await waitFor(() => expect(props.saveProject).toHaveBeenCalled()); }); it("sketch owner can't change to empty name", async () => { - const props = renderComponent({ project: { isEditingName: true } }); + const { store } = renderComponent(); const sketchNameInput = screen.getByLabelText('New sketch name'); fireEvent.change(sketchNameInput, { target: { value: '' } }); fireEvent.blur(sketchNameInput); - await waitFor(() => expect(props.setProjectName).not.toHaveBeenCalled()); - await waitFor(() => expect(props.saveProject).not.toHaveBeenCalled()); + await waitFor(() => + expect(selectProjectName(store.getState())).toBe('testname') + ); }); it('sketch is stopped when stop button is clicked', async () => { - const props = renderComponent({ isPlaying: true }); + const { store } = renderComponent({ ide: { isPlaying: true } }); const stopButton = screen.getByLabelText('Stop sketch'); fireEvent.click(stopButton); - await waitFor(() => expect(props.stopSketch).toHaveBeenCalled()); + await waitFor(() => expect(store.getState().ide.isPlaying).toBe(false)); }); it('sketch is started when play button is clicked', async () => { - const props = renderComponent(); + const { store } = renderComponent(); const playButton = screen.getByLabelText('Play only visual sketch'); fireEvent.click(playButton); - await waitFor(() => expect(props.startSketch).toHaveBeenCalled()); + await waitFor(() => expect(store.getState().ide.isPlaying).toBe(true)); }); it('sketch content is synched when play button is clicked', async () => { diff --git a/client/modules/IDE/hooks/useSketchActions.js b/client/modules/IDE/hooks/useSketchActions.js index c03abb2665..10f548b1a4 100644 --- a/client/modules/IDE/hooks/useSketchActions.js +++ b/client/modules/IDE/hooks/useSketchActions.js @@ -10,12 +10,13 @@ import { } from '../actions/project'; import { showToast } from '../actions/toast'; import { showErrorModal, showShareModal } from '../actions/ide'; +import { selectCanEditSketch } from '../selectors/users'; const useSketchActions = () => { const unsavedChanges = useSelector((state) => state.ide.unsavedChanges); const authenticated = useSelector((state) => state.user.authenticated); const project = useSelector((state) => state.project); - const currentUser = useSelector((state) => state.user.username); + const canEditProjectName = useSelector(selectCanEditSketch); const dispatch = useDispatch(); const { t } = useTranslation(); const params = useParams(); @@ -56,16 +57,6 @@ const useSketchActions = () => { } } - function canEditProjectName() { - return ( - (project.owner && - project.owner.username && - project.owner.username === currentUser) || - !project.owner || - !project.owner.username - ); - } - return { newSketch, saveSketch, diff --git a/client/modules/IDE/selectors/project.js b/client/modules/IDE/selectors/project.js index 26197f3b00..bb536e3242 100644 --- a/client/modules/IDE/selectors/project.js +++ b/client/modules/IDE/selectors/project.js @@ -2,6 +2,7 @@ import { createSelector } from 'reselect'; export const selectProjectOwner = (state) => state.project.owner; export const selectProjectId = (state) => state.project.id; +export const selectProjectName = (state) => state.project.name; export const selectSketchPath = createSelector( selectProjectOwner, From eb8c4b39bd2cf5099a2c86f1497c1edd4cec6e31 Mon Sep 17 00:00:00 2001 From: Linda Paiste Date: Wed, 26 Jul 2023 16:54:51 -0500 Subject: [PATCH 2/5] Improve Redux test utilities. --- client/test-utils.js | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/client/test-utils.js b/client/test-utils.js index fcd288974f..8265cdfbd4 100644 --- a/client/test-utils.js +++ b/client/test-utils.js @@ -14,7 +14,6 @@ import { render } from '@testing-library/react'; import React from 'react'; import PropTypes from 'prop-types'; -import { createStore } from 'redux'; import { Provider } from 'react-redux'; import { Router } from 'react-router-dom'; import { I18nextProvider } from 'react-i18next'; @@ -22,8 +21,8 @@ import { ThemeProvider as StyledThemeProvider } from 'styled-components'; import browserHistory from './browserHistory'; import i18n from './i18n-test'; -import rootReducer from './reducers'; import ThemeProvider from './modules/App/components/ThemeProvider'; +import configureStore from './store'; import theme, { Theme } from './theme'; // re-export everything @@ -45,11 +44,7 @@ Providers.propTypes = { function reduxRender( ui, - { - initialState, - store = createStore(rootReducer, initialState), - ...renderOptions - } = {} + { initialState, store = configureStore(initialState), ...renderOptions } = {} ) { function Wrapper({ children }) { return ( @@ -67,7 +62,7 @@ function reduxRender( children: PropTypes.element.isRequired }; - return render(ui, { wrapper: Wrapper, ...renderOptions }); + return { store, ...render(ui, { wrapper: Wrapper, ...renderOptions }) }; } const customRender = (ui, options) => From e8aa35e84590e4d4ec5ddc95771e0d690e588d7f Mon Sep 17 00:00:00 2001 From: dewanshDT Date: Sun, 6 Aug 2023 03:32:39 +0530 Subject: [PATCH 3/5] added state to the name input --- client/modules/IDE/components/Header/Toolbar.jsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/client/modules/IDE/components/Header/Toolbar.jsx b/client/modules/IDE/components/Header/Toolbar.jsx index 0c1aa33a0c..d705ecb33e 100644 --- a/client/modules/IDE/components/Header/Toolbar.jsx +++ b/client/modules/IDE/components/Header/Toolbar.jsx @@ -1,4 +1,4 @@ -import React, { useRef } from 'react'; +import React, { useRef, useState } from 'react'; import classNames from 'classnames'; import PropTypes from 'prop-types'; import { useTranslation } from 'react-i18next'; @@ -38,6 +38,7 @@ const Toolbar = (props) => { const { changeSketchName, canEditProjectName } = useSketchActions(); const projectNameInputRef = useRef(); + const [nameInputValue, setNameInputValue] = useState(project.name); function handleKeyPress(event) { if (event.key === 'Enter') { @@ -56,7 +57,7 @@ const Toolbar = (props) => { } function handleProjectNameSave() { - const newName = projectNameInputRef.current?.value; + const newName = nameInputValue; if (newName.length > 0) { dispatch(hideEditProjectName()); changeSketchName(newName); @@ -151,9 +152,11 @@ const Toolbar = (props) => { maxLength="128" className="toolbar__project-name-input" aria-label={t('Toolbar.NewSketchNameARIA')} + disabled={!canEditProjectName} ref={projectNameInputRef} + value={nameInputValue} + onChange={(e) => setNameInputValue(e.target.value)} onBlur={handleProjectNameSave} - onFocus={(event) => (event.target.value = project.name)} onKeyPress={handleKeyPress} /> {(() => { From 6889e7059e963503c1d25067646c956521bf86b6 Mon Sep 17 00:00:00 2001 From: dewanshDT Date: Sun, 6 Aug 2023 03:33:18 +0530 Subject: [PATCH 4/5] applied changes to the test file --- .../components/Header/Toolbar.unit.test.jsx | 144 +----------------- 1 file changed, 1 insertion(+), 143 deletions(-) diff --git a/client/modules/IDE/components/Header/Toolbar.unit.test.jsx b/client/modules/IDE/components/Header/Toolbar.unit.test.jsx index d464bd18d2..bcec6f2f6d 100644 --- a/client/modules/IDE/components/Header/Toolbar.unit.test.jsx +++ b/client/modules/IDE/components/Header/Toolbar.unit.test.jsx @@ -1,145 +1,3 @@ -// import { rest } from 'msw'; -// import { setupServer } from 'msw/node'; -// import React from 'react'; -// import lodash from 'lodash'; -// import { Provider } from 'react-redux'; // Import the Provider from react-redux -// import { createStore, applyMiddleware } from 'redux'; -// import thunk from 'redux-thunk'; - -// import { -// fireEvent, -// reduxRender, -// screen, -// waitFor -// } from '../../../../test-utils'; -// import { selectProjectName } from '../../selectors/project'; -// import ToolbarComponent from './Toolbar'; -// import rootReducer from '../../../../reducers'; - -// const server = setupServer( -// rest.put(`/projects/id`, (req, res, ctx) => res(ctx.json(req.body))) -// ); - -// beforeAll(() => server.listen()); -// afterEach(() => server.resetHandlers()); -// afterAll(() => server.close()); - -// // Set up the Redux store with the root reducer and thunk middleware -// const store = createStore(rootReducer, applyMiddleware(thunk)); - -// const renderComponent = (extraState = {}) => { -// const initialState = lodash.merge( -// { -// ide: { -// isPlaying: false -// }, -// user: { -// authenticated: true, -// username: 'me', -// id: 'userId' -// }, -// project: { -// name: 'testname', -// id: 'id', -// owner: { -// username: 'me', -// id: 'userId' -// } -// } -// }, -// extraState -// ); - -// const props = { -// syncFileContent: jest.fn() -// }; - -// return { -// ...props, -// ...reduxRender( -// -// -// , -// { initialState } -// ) -// }; -// }; - -// describe('', () => { -// it('sketch owner can switch to sketch name editing mode', async () => { -// renderComponent(); -// const sketchName = screen.getByLabelText('Edit sketch name'); - -// fireEvent.click(sketchName); - -// await waitFor(() => { -// expect(screen.getByLabelText('New sketch name')).toHaveFocus(); -// expect(screen.getByLabelText('New sketch name')).toBeEnabled(); -// }); -// }); - -// it("non-owner can't switch to sketch editing mode", async () => { -// renderComponent({ user: { username: 'not-me', id: 'not-me' } }); -// const sketchName = screen.getByLabelText('Edit sketch name'); - -// fireEvent.click(sketchName); - -// expect(sketchName).toBeDisabled(); -// await waitFor(() => -// expect(screen.getByLabelText('New sketch name')).toBeDisabled() -// ); -// }); - -// it("sketch owner can't change to empty name", async () => { -// renderComponent(); -// const sketchNameInput = screen.getByLabelText('New sketch name'); -// fireEvent.change(sketchNameInput, { target: { value: '' } }); -// fireEvent.blur(sketchNameInput); - -// await waitFor(() => -// expect(selectProjectName(store.getState())).toBe('testname') -// ); -// }); - -// it('sketch owner can change name', async () => { -// renderComponent(); -// const sketchNameInput = screen.getByLabelText('New sketch name'); -// fireEvent.change(sketchNameInput, { -// target: { value: 'my new sketch name' } -// }); -// fireEvent.blur(sketchNameInput); - -// await waitFor(() => -// expect(selectProjectName(store.getState())).toBe('my new sketch name') -// ); -// }); - -// it('sketch is stopped when stop button is clicked', async () => { -// renderComponent(); -// const stopButton = screen.getByLabelText('Stop sketch'); - -// fireEvent.click(stopButton); - -// await waitFor(() => expect(store.getState().ide.isPlaying).toBe(false)); -// }); - -// it('sketch is started when play button is clicked', async () => { -// renderComponent(); -// const playButton = screen.getByLabelText('Play only visual sketch'); -// fireEvent.click(playButton); - -// await waitFor(() => expect(store.getState().ide.isPlaying).toBe(true)); -// }); - -// it('sketch content is synched when play button is clicked', async () => { -// const props = renderComponent(); -// const playButton = screen.getByLabelText('Play only visual sketch'); -// fireEvent.click(playButton); - -// await waitFor(() => expect(props.syncFileContent).toHaveBeenCalled()); -// }); -// }); - import { rest } from 'msw'; import { setupServer } from 'msw/node'; import React from 'react'; @@ -216,7 +74,7 @@ describe('', () => { expect(sketchName).toBeDisabled(); await waitFor(() => - expect(screen.getByLabelText('New sketch name')).toBeDisabled() + expect(screen.getByLabelText('New sketch name').disabled).toBe(true) ); }); From 341eb3cf0c424a5f2689c69dce18dfcabf87a3c1 Mon Sep 17 00:00:00 2001 From: dewanshDT Date: Sun, 6 Aug 2023 22:41:37 +0530 Subject: [PATCH 5/5] suggested changes --- client/modules/IDE/components/Header/Toolbar.jsx | 5 ++--- client/modules/IDE/components/Header/Toolbar.unit.test.jsx | 3 ++- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/client/modules/IDE/components/Header/Toolbar.jsx b/client/modules/IDE/components/Header/Toolbar.jsx index d705ecb33e..46aeb9a652 100644 --- a/client/modules/IDE/components/Header/Toolbar.jsx +++ b/client/modules/IDE/components/Header/Toolbar.jsx @@ -31,7 +31,7 @@ const Toolbar = (props) => { (state) => state.ide ); const project = useSelector((state) => state.project); - const { autorefresh } = useSelector((state) => state.preferences); + const autorefresh = useSelector((state) => state.preferences.autorefresh); const dispatch = useDispatch(); const { t } = useTranslation(); @@ -43,7 +43,7 @@ const Toolbar = (props) => { function handleKeyPress(event) { if (event.key === 'Enter') { dispatch(hideEditProjectName()); - projectNameInputRef.current.blur(); + projectNameInputRef.current?.blur(); } } @@ -101,7 +101,6 @@ const Toolbar = (props) => { onClick={() => { props.syncFileContent(); dispatch(startSketch()); - console.log('play button pressed'); }} aria-label={t('Toolbar.PlayOnlyVisualSketchARIA')} title={t('Toolbar.PlaySketchARIA')} diff --git a/client/modules/IDE/components/Header/Toolbar.unit.test.jsx b/client/modules/IDE/components/Header/Toolbar.unit.test.jsx index bcec6f2f6d..82b4cb7f4c 100644 --- a/client/modules/IDE/components/Header/Toolbar.unit.test.jsx +++ b/client/modules/IDE/components/Header/Toolbar.unit.test.jsx @@ -74,7 +74,8 @@ describe('', () => { expect(sketchName).toBeDisabled(); await waitFor(() => - expect(screen.getByLabelText('New sketch name').disabled).toBe(true) + // expect(screen.getByLabelText('New sketch name').disabled).toBe(true) + expect(screen.getByLabelText('New sketch name')).toBeDisabled() ); });