From 425ed9dbceb5dbcd6747587fa8a4bf6c6e044ed6 Mon Sep 17 00:00:00 2001 From: remo5000 Date: Tue, 3 Jul 2018 12:51:09 +0800 Subject: [PATCH 01/17] Rename assessment files --- .../assessment/AssessmentListing.tsx | 146 ---------- .../assessment/assessmentWorkspace.tsx | 166 +++++++++++ src/components/assessment/index.tsx | 260 ++++++++---------- 3 files changed, 286 insertions(+), 286 deletions(-) delete mode 100644 src/components/assessment/AssessmentListing.tsx create mode 100644 src/components/assessment/assessmentWorkspace.tsx diff --git a/src/components/assessment/AssessmentListing.tsx b/src/components/assessment/AssessmentListing.tsx deleted file mode 100644 index 4e8f064ed0..0000000000 --- a/src/components/assessment/AssessmentListing.tsx +++ /dev/null @@ -1,146 +0,0 @@ -import { Button, Card, Icon, Intent, NonIdealState, Spinner, Text } from '@blueprintjs/core' -import { IconNames } from '@blueprintjs/icons' -import * as React from 'react' -import { RouteComponentProps } from 'react-router' -import { NavLink } from 'react-router-dom' - -import AssessmentContainer from '../../containers/assessment' -import { assessmentCategoryLink, stringParamToInt } from '../../utils/paramParseHelpers' -import { OwnProps as AssessmentProps } from '../assessment' -import { AssessmentCategory } from '../assessment/assessmentShape' -import { IAssessmentOverview } from '../assessment/assessmentShape' -import ContentDisplay, { IContentDisplayProps } from '../commons/ContentDisplay' - -export interface IAssessmentParams { - assessmentId?: string - questionId?: string -} - -export interface IAssessmentListingProps - extends IDispatchProps, - IOwnProps, - RouteComponentProps, - IStateProps {} - -export interface IDispatchProps { - handleAssessmentOverviewFetch: () => void - handleResetAssessmentWorkspace: () => void - handleUpdateCurrentAssessmentId: (assessmentId: number, questionId: number) => void -} - -export interface IOwnProps { - assessmentCategory: AssessmentCategory -} - -export interface IStateProps { - assessmentOverviews?: IAssessmentOverview[] - storedAssessmentId?: number - storedQuestionId?: number -} - -class AssessmentListing extends React.Component { - public componentWillMount() { - const assessmentId = stringParamToInt(this.props.match.params.assessmentId) - const questionId = stringParamToInt(this.props.match.params.questionId) - if (assessmentId === null || questionId === null) { - return - } - - if ( - this.props.storedAssessmentId !== assessmentId || - this.props.storedQuestionId !== questionId - ) { - this.props.handleUpdateCurrentAssessmentId(assessmentId, questionId) - this.props.handleResetAssessmentWorkspace() - } - } - - public render() { - const assessmentId: number | null = stringParamToInt(this.props.match.params.assessmentId) - // default questionId is 0 (the first question) - const questionId: number = stringParamToInt(this.props.match.params.questionId) || 0 - - // if there is no assessmentId specified, Render only information. - if (assessmentId === null) { - const props: IContentDisplayProps = { - display: ( - - ), - loadContentDispatch: this.props.handleAssessmentOverviewFetch - } - return ( -
- -
- ) - } else { - const props: AssessmentProps = { - assessmentId, - questionId - } - return - } - } -} - -interface IAssessmentOverviewCardProps { - assessmentOverviews?: IAssessmentOverview[] - questionId: number -} - -export const AssessmentOverviewCard: React.SFC = props => { - const questionId = props.questionId === undefined ? 0 : props.questionId - if (props.assessmentOverviews === undefined) { - return } /> - } else if (props.assessmentOverviews.length === 0) { - return - } - const cards = props.assessmentOverviews.map((overview, index) => ( -
- -
PICTURE
-
-
-

{overview.title}

-
-
-
Mission 0 : 123123 XP (hardcoded)
-
-
-

{overview.shortSummary}

-
-
-
- - - Due: 12/12/12 - -
-
- - - -
-
-
- -
- )) - return <>{cards} -} - -export default AssessmentListing diff --git a/src/components/assessment/assessmentWorkspace.tsx b/src/components/assessment/assessmentWorkspace.tsx new file mode 100644 index 0000000000..a897b7f663 --- /dev/null +++ b/src/components/assessment/assessmentWorkspace.tsx @@ -0,0 +1,166 @@ +import { Button, Card, Dialog, NonIdealState, Spinner, Text } from '@blueprintjs/core' +import { IconNames } from '@blueprintjs/icons' +import * as React from 'react' + +import { InterpreterOutput } from '../../reducers/states' +import { history } from '../../utils/history' +import { assessmentCategoryLink } from '../../utils/paramParseHelpers' +import Workspace, { WorkspaceProps } from '../workspace' +import { ControlBarProps } from '../workspace/ControlBar' +import { SideContentProps } from '../workspace/side-content' +import { + IAssessment, + IMCQQuestion, + IProgrammingQuestion, + IQuestion, + QuestionTypes +} from './assessmentShape' + +export type AssessmentProps = DispatchProps & OwnProps & StateProps + +export type StateProps = { + activeTab: number + assessment?: IAssessment + editorValue?: string + editorWidth: string + isRunning: boolean + output: InterpreterOutput[] + replValue: string + sideContentHeight?: number +} + +export type OwnProps = { + assessmentId: number + questionId: number +} + +export type DispatchProps = { + handleAssessmentFetch: (assessmentId: number) => void + handleChangeActiveTab: (activeTab: number) => void + handleChapterSelect: (chapter: any, changeEvent: any) => void + handleEditorEval: () => void + handleEditorValueChange: (val: string) => void + handleEditorWidthChange: (widthChange: number) => void + handleInterruptEval: () => void + handleReplEval: () => void + handleReplOutputClear: () => void + handleReplValueChange: (newValue: string) => void + handleSideContentHeightChange: (heightChange: number) => void +} + +class Assessment extends React.Component { + public state = { showOverlay: false } + + public componentWillMount() { + this.props.handleAssessmentFetch(this.props.assessmentId) + if (this.props.questionId === 0) { + this.setState({ showOverlay: true }) + } + } + + public render() { + if (this.props.assessment === undefined || this.props.assessment.questions.length === 0) { + return ( + } + /> + ) + } + const overlay = ( + + + {this.props.assessment.longSummary} + + ) + const question: IQuestion = this.props.assessment.questions[this.props.questionId] + const workspaceProps: WorkspaceProps = { + controlBarProps: this.controlBarProps(this.props), + editorProps: + question.type === QuestionTypes.programming + ? { + editorValue: + this.props.editorValue !== undefined + ? this.props.editorValue + : (question as IProgrammingQuestion).solutionTemplate, + handleEditorEval: this.props.handleEditorEval, + handleEditorValueChange: this.props.handleEditorValueChange + } + : undefined, + editorWidth: this.props.editorWidth, + handleEditorWidthChange: this.props.handleEditorWidthChange, + handleSideContentHeightChange: this.props.handleSideContentHeightChange, + mcq: question as IMCQQuestion, + sideContentHeight: this.props.sideContentHeight, + sideContentProps: this.sideContentProps(this.props), + replProps: { + output: this.props.output, + replValue: this.props.replValue, + handleReplEval: this.props.handleReplEval, + handleReplValueChange: this.props.handleReplValueChange + } + } + return ( +
+ {overlay} + +
+ ) + } + + /** Pre-condition: IAssessment has been loaded */ + private sideContentProps: (p: AssessmentProps) => SideContentProps = ( + props: AssessmentProps + ) => ({ + activeTab: 0, + handleChangeActiveTab: (aT: number) => {}, + tabs: [ + { + label: `Task ${props.questionId}`, + icon: IconNames.NINJA, + body: {props.assessment!.questions[props.questionId].content} + }, + { + label: `${props.assessment!.category} Briefing`, + icon: IconNames.BRIEFCASE, + body: {props.assessment!.longSummary} + } + ] + }) + + /** Pre-condition: IAssessment has been loaded */ + private controlBarProps: (p: AssessmentProps) => ControlBarProps = (props: AssessmentProps) => { + const listingPath = `/academy/${assessmentCategoryLink(this.props.assessment!.category)}` + const assessmentPath = listingPath + `/${this.props.assessment!.id.toString()}` + return { + handleChapterSelect: this.props.handleChapterSelect, + handleEditorEval: this.props.handleEditorEval, + handleInterruptEval: this.props.handleInterruptEval, + handleReplEval: this.props.handleReplEval, + handleReplOutputClear: this.props.handleReplOutputClear, + hasChapterSelect: false, + hasNextButton: this.props.questionId < this.props.assessment!.questions.length - 1, + hasPreviousButton: this.props.questionId > 0, + hasSaveButton: true, + hasShareButton: false, + hasSubmitButton: this.props.questionId === this.props.assessment!.questions.length - 1, + isRunning: this.props.isRunning, + onClickNext: () => + history.push(assessmentPath + `/${(this.props.questionId + 1).toString()}`), + onClickPrevious: () => + history.push(assessmentPath + `/${(this.props.questionId - 1).toString()}`), + onClickSubmit: () => history.push(listingPath), + sourceChapter: 2 // TODO dynamic library changing + } + } +} + +export default Assessment diff --git a/src/components/assessment/index.tsx b/src/components/assessment/index.tsx index a897b7f663..4e8f064ed0 100644 --- a/src/components/assessment/index.tsx +++ b/src/components/assessment/index.tsx @@ -1,166 +1,146 @@ -import { Button, Card, Dialog, NonIdealState, Spinner, Text } from '@blueprintjs/core' +import { Button, Card, Icon, Intent, NonIdealState, Spinner, Text } from '@blueprintjs/core' import { IconNames } from '@blueprintjs/icons' import * as React from 'react' +import { RouteComponentProps } from 'react-router' +import { NavLink } from 'react-router-dom' -import { InterpreterOutput } from '../../reducers/states' -import { history } from '../../utils/history' -import { assessmentCategoryLink } from '../../utils/paramParseHelpers' -import Workspace, { WorkspaceProps } from '../workspace' -import { ControlBarProps } from '../workspace/ControlBar' -import { SideContentProps } from '../workspace/side-content' -import { - IAssessment, - IMCQQuestion, - IProgrammingQuestion, - IQuestion, - QuestionTypes -} from './assessmentShape' +import AssessmentContainer from '../../containers/assessment' +import { assessmentCategoryLink, stringParamToInt } from '../../utils/paramParseHelpers' +import { OwnProps as AssessmentProps } from '../assessment' +import { AssessmentCategory } from '../assessment/assessmentShape' +import { IAssessmentOverview } from '../assessment/assessmentShape' +import ContentDisplay, { IContentDisplayProps } from '../commons/ContentDisplay' -export type AssessmentProps = DispatchProps & OwnProps & StateProps - -export type StateProps = { - activeTab: number - assessment?: IAssessment - editorValue?: string - editorWidth: string - isRunning: boolean - output: InterpreterOutput[] - replValue: string - sideContentHeight?: number +export interface IAssessmentParams { + assessmentId?: string + questionId?: string } -export type OwnProps = { - assessmentId: number - questionId: number +export interface IAssessmentListingProps + extends IDispatchProps, + IOwnProps, + RouteComponentProps, + IStateProps {} + +export interface IDispatchProps { + handleAssessmentOverviewFetch: () => void + handleResetAssessmentWorkspace: () => void + handleUpdateCurrentAssessmentId: (assessmentId: number, questionId: number) => void } -export type DispatchProps = { - handleAssessmentFetch: (assessmentId: number) => void - handleChangeActiveTab: (activeTab: number) => void - handleChapterSelect: (chapter: any, changeEvent: any) => void - handleEditorEval: () => void - handleEditorValueChange: (val: string) => void - handleEditorWidthChange: (widthChange: number) => void - handleInterruptEval: () => void - handleReplEval: () => void - handleReplOutputClear: () => void - handleReplValueChange: (newValue: string) => void - handleSideContentHeightChange: (heightChange: number) => void +export interface IOwnProps { + assessmentCategory: AssessmentCategory } -class Assessment extends React.Component { - public state = { showOverlay: false } +export interface IStateProps { + assessmentOverviews?: IAssessmentOverview[] + storedAssessmentId?: number + storedQuestionId?: number +} +class AssessmentListing extends React.Component { public componentWillMount() { - this.props.handleAssessmentFetch(this.props.assessmentId) - if (this.props.questionId === 0) { - this.setState({ showOverlay: true }) + const assessmentId = stringParamToInt(this.props.match.params.assessmentId) + const questionId = stringParamToInt(this.props.match.params.questionId) + if (assessmentId === null || questionId === null) { + return + } + + if ( + this.props.storedAssessmentId !== assessmentId || + this.props.storedQuestionId !== questionId + ) { + this.props.handleUpdateCurrentAssessmentId(assessmentId, questionId) + this.props.handleResetAssessmentWorkspace() } } public render() { - if (this.props.assessment === undefined || this.props.assessment.questions.length === 0) { + const assessmentId: number | null = stringParamToInt(this.props.match.params.assessmentId) + // default questionId is 0 (the first question) + const questionId: number = stringParamToInt(this.props.match.params.questionId) || 0 + + // if there is no assessmentId specified, Render only information. + if (assessmentId === null) { + const props: IContentDisplayProps = { + display: ( + + ), + loadContentDispatch: this.props.handleAssessmentOverviewFetch + } return ( - } - /> +
+ +
) - } - const overlay = ( - - - {this.props.assessment.longSummary} - - ) - const question: IQuestion = this.props.assessment.questions[this.props.questionId] - const workspaceProps: WorkspaceProps = { - controlBarProps: this.controlBarProps(this.props), - editorProps: - question.type === QuestionTypes.programming - ? { - editorValue: - this.props.editorValue !== undefined - ? this.props.editorValue - : (question as IProgrammingQuestion).solutionTemplate, - handleEditorEval: this.props.handleEditorEval, - handleEditorValueChange: this.props.handleEditorValueChange - } - : undefined, - editorWidth: this.props.editorWidth, - handleEditorWidthChange: this.props.handleEditorWidthChange, - handleSideContentHeightChange: this.props.handleSideContentHeightChange, - mcq: question as IMCQQuestion, - sideContentHeight: this.props.sideContentHeight, - sideContentProps: this.sideContentProps(this.props), - replProps: { - output: this.props.output, - replValue: this.props.replValue, - handleReplEval: this.props.handleReplEval, - handleReplValueChange: this.props.handleReplValueChange + } else { + const props: AssessmentProps = { + assessmentId, + questionId } + return } - return ( -
- {overlay} - -
- ) } +} - /** Pre-condition: IAssessment has been loaded */ - private sideContentProps: (p: AssessmentProps) => SideContentProps = ( - props: AssessmentProps - ) => ({ - activeTab: 0, - handleChangeActiveTab: (aT: number) => {}, - tabs: [ - { - label: `Task ${props.questionId}`, - icon: IconNames.NINJA, - body: {props.assessment!.questions[props.questionId].content} - }, - { - label: `${props.assessment!.category} Briefing`, - icon: IconNames.BRIEFCASE, - body: {props.assessment!.longSummary} - } - ] - }) +interface IAssessmentOverviewCardProps { + assessmentOverviews?: IAssessmentOverview[] + questionId: number +} - /** Pre-condition: IAssessment has been loaded */ - private controlBarProps: (p: AssessmentProps) => ControlBarProps = (props: AssessmentProps) => { - const listingPath = `/academy/${assessmentCategoryLink(this.props.assessment!.category)}` - const assessmentPath = listingPath + `/${this.props.assessment!.id.toString()}` - return { - handleChapterSelect: this.props.handleChapterSelect, - handleEditorEval: this.props.handleEditorEval, - handleInterruptEval: this.props.handleInterruptEval, - handleReplEval: this.props.handleReplEval, - handleReplOutputClear: this.props.handleReplOutputClear, - hasChapterSelect: false, - hasNextButton: this.props.questionId < this.props.assessment!.questions.length - 1, - hasPreviousButton: this.props.questionId > 0, - hasSaveButton: true, - hasShareButton: false, - hasSubmitButton: this.props.questionId === this.props.assessment!.questions.length - 1, - isRunning: this.props.isRunning, - onClickNext: () => - history.push(assessmentPath + `/${(this.props.questionId + 1).toString()}`), - onClickPrevious: () => - history.push(assessmentPath + `/${(this.props.questionId - 1).toString()}`), - onClickSubmit: () => history.push(listingPath), - sourceChapter: 2 // TODO dynamic library changing - } +export const AssessmentOverviewCard: React.SFC = props => { + const questionId = props.questionId === undefined ? 0 : props.questionId + if (props.assessmentOverviews === undefined) { + return } /> + } else if (props.assessmentOverviews.length === 0) { + return } + const cards = props.assessmentOverviews.map((overview, index) => ( +
+ +
PICTURE
+
+
+

{overview.title}

+
+
+
Mission 0 : 123123 XP (hardcoded)
+
+
+

{overview.shortSummary}

+
+
+
+ + + Due: 12/12/12 + +
+
+ + + +
+
+
+ +
+ )) + return <>{cards} } -export default Assessment +export default AssessmentListing From b0acca8abf33711593dc97ef7c55e671efdd0589 Mon Sep 17 00:00:00 2001 From: remo5000 Date: Tue, 3 Jul 2018 12:53:32 +0800 Subject: [PATCH 02/17] Move assessment containers --- .../assessment/AssessmentListingContainer.ts | 38 ----------- .../AssessmentWorkspaceContainer.ts | 56 +++++++++++++++ src/containers/assessment/index.ts | 68 +++++++------------ 3 files changed, 81 insertions(+), 81 deletions(-) delete mode 100644 src/containers/assessment/AssessmentListingContainer.ts create mode 100644 src/containers/assessment/AssessmentWorkspaceContainer.ts diff --git a/src/containers/assessment/AssessmentListingContainer.ts b/src/containers/assessment/AssessmentListingContainer.ts deleted file mode 100644 index 7ead6b4bc4..0000000000 --- a/src/containers/assessment/AssessmentListingContainer.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { connect, MapDispatchToProps, MapStateToProps } from 'react-redux' -import { withRouter } from 'react-router' -import { bindActionCreators, Dispatch } from 'redux' - -import { fetchAssessmentOverviews } from '../../actions/session' -import { resetAssessmentWorkspace, updateCurrentAssessmentId } from '../../actions/workspaces' -import AssessmentListing, { - IDispatchProps, - IOwnProps, - IStateProps -} from '../../components/assessment/AssessmentListing' -import { IAssessmentOverview } from '../../components/assessment/assessmentShape' -import { IState } from '../../reducers/states' - -const mapStateToProps: MapStateToProps = (state, props) => { - const categoryFilter = (overview: IAssessmentOverview) => - overview.category === props.assessmentCategory - const stateProps: IStateProps = { - assessmentOverviews: state.session.assessmentOverviews - ? state.session.assessmentOverviews.filter(categoryFilter) - : undefined, - storedAssessmentId: state.workspaces.currentAssessment, - storedQuestionId: state.workspaces.currentQuestion - } - return stateProps -} - -const mapDispatchToProps: MapDispatchToProps = (dispatch: Dispatch) => - bindActionCreators( - { - handleAssessmentOverviewFetch: fetchAssessmentOverviews, - handleResetAssessmentWorkspace: resetAssessmentWorkspace, - handleUpdateCurrentAssessmentId: updateCurrentAssessmentId - }, - dispatch - ) - -export default withRouter(connect(mapStateToProps, mapDispatchToProps)(AssessmentListing)) diff --git a/src/containers/assessment/AssessmentWorkspaceContainer.ts b/src/containers/assessment/AssessmentWorkspaceContainer.ts new file mode 100644 index 0000000000..2776b84141 --- /dev/null +++ b/src/containers/assessment/AssessmentWorkspaceContainer.ts @@ -0,0 +1,56 @@ +import { connect, MapDispatchToProps, MapStateToProps } from 'react-redux' +import { bindActionCreators, Dispatch } from 'redux' + +import { + changeActiveTab, + changeEditorWidth, + changeSideContentHeight, + chapterSelect, + clearReplOutput, + evalEditor, + evalRepl, + fetchAssessment, + handleInterruptExecution, + updateEditorValue, + updateReplValue, + WorkspaceLocation +} from '../../actions' +import Assessment, { DispatchProps, OwnProps, StateProps } from '../../components/assessment' +import { IState } from '../../reducers/states' + +const mapStateToProps: MapStateToProps = (state, props) => { + return { + assessment: state.session.assessments.get(props.assessmentId), + editorValue: state.workspaces.assessment.editorValue, + isRunning: state.workspaces.assessment.isRunning, + activeTab: state.workspaces.assessment.sideContentActiveTab, + editorWidth: state.workspaces.assessment.editorWidth, + sideContentHeight: state.workspaces.assessment.sideContentHeight, + output: state.workspaces.assessment.output, + replValue: state.workspaces.assessment.replValue + } +} + +const location: WorkspaceLocation = 'assessment' + +const mapDispatchToProps: MapDispatchToProps = (dispatch: Dispatch) => + bindActionCreators( + { + handleAssessmentFetch: fetchAssessment, + handleChangeActiveTab: (activeTab: number) => changeActiveTab(activeTab, location), + handleChapterSelect: (chapter: any, changeEvent: any) => + chapterSelect(chapter, changeEvent, location), + handleEditorEval: () => evalEditor(location), + handleEditorValueChange: (val: string) => updateEditorValue(val, location), + handleEditorWidthChange: (widthChange: number) => changeEditorWidth(widthChange, location), + handleInterruptEval: () => handleInterruptExecution(location), + handleReplEval: () => evalRepl(location), + handleReplOutputClear: () => clearReplOutput(location), + handleReplValueChange: (newValue: string) => updateReplValue(newValue, location), + handleSideContentHeightChange: (heightChange: number) => + changeSideContentHeight(heightChange, location) + }, + dispatch + ) + +export default connect(mapStateToProps, mapDispatchToProps)(Assessment) diff --git a/src/containers/assessment/index.ts b/src/containers/assessment/index.ts index 2776b84141..7ead6b4bc4 100644 --- a/src/containers/assessment/index.ts +++ b/src/containers/assessment/index.ts @@ -1,56 +1,38 @@ import { connect, MapDispatchToProps, MapStateToProps } from 'react-redux' +import { withRouter } from 'react-router' import { bindActionCreators, Dispatch } from 'redux' -import { - changeActiveTab, - changeEditorWidth, - changeSideContentHeight, - chapterSelect, - clearReplOutput, - evalEditor, - evalRepl, - fetchAssessment, - handleInterruptExecution, - updateEditorValue, - updateReplValue, - WorkspaceLocation -} from '../../actions' -import Assessment, { DispatchProps, OwnProps, StateProps } from '../../components/assessment' +import { fetchAssessmentOverviews } from '../../actions/session' +import { resetAssessmentWorkspace, updateCurrentAssessmentId } from '../../actions/workspaces' +import AssessmentListing, { + IDispatchProps, + IOwnProps, + IStateProps +} from '../../components/assessment/AssessmentListing' +import { IAssessmentOverview } from '../../components/assessment/assessmentShape' import { IState } from '../../reducers/states' -const mapStateToProps: MapStateToProps = (state, props) => { - return { - assessment: state.session.assessments.get(props.assessmentId), - editorValue: state.workspaces.assessment.editorValue, - isRunning: state.workspaces.assessment.isRunning, - activeTab: state.workspaces.assessment.sideContentActiveTab, - editorWidth: state.workspaces.assessment.editorWidth, - sideContentHeight: state.workspaces.assessment.sideContentHeight, - output: state.workspaces.assessment.output, - replValue: state.workspaces.assessment.replValue +const mapStateToProps: MapStateToProps = (state, props) => { + const categoryFilter = (overview: IAssessmentOverview) => + overview.category === props.assessmentCategory + const stateProps: IStateProps = { + assessmentOverviews: state.session.assessmentOverviews + ? state.session.assessmentOverviews.filter(categoryFilter) + : undefined, + storedAssessmentId: state.workspaces.currentAssessment, + storedQuestionId: state.workspaces.currentQuestion } + return stateProps } -const location: WorkspaceLocation = 'assessment' - -const mapDispatchToProps: MapDispatchToProps = (dispatch: Dispatch) => - bindActionCreators( +const mapDispatchToProps: MapDispatchToProps = (dispatch: Dispatch) => + bindActionCreators( { - handleAssessmentFetch: fetchAssessment, - handleChangeActiveTab: (activeTab: number) => changeActiveTab(activeTab, location), - handleChapterSelect: (chapter: any, changeEvent: any) => - chapterSelect(chapter, changeEvent, location), - handleEditorEval: () => evalEditor(location), - handleEditorValueChange: (val: string) => updateEditorValue(val, location), - handleEditorWidthChange: (widthChange: number) => changeEditorWidth(widthChange, location), - handleInterruptEval: () => handleInterruptExecution(location), - handleReplEval: () => evalRepl(location), - handleReplOutputClear: () => clearReplOutput(location), - handleReplValueChange: (newValue: string) => updateReplValue(newValue, location), - handleSideContentHeightChange: (heightChange: number) => - changeSideContentHeight(heightChange, location) + handleAssessmentOverviewFetch: fetchAssessmentOverviews, + handleResetAssessmentWorkspace: resetAssessmentWorkspace, + handleUpdateCurrentAssessmentId: updateCurrentAssessmentId }, dispatch ) -export default connect(mapStateToProps, mapDispatchToProps)(Assessment) +export default withRouter(connect(mapStateToProps, mapDispatchToProps)(AssessmentListing)) From e5447b350aa90f96d76ee76f5f7615b4010b88a2 Mon Sep 17 00:00:00 2001 From: remo5000 Date: Tue, 3 Jul 2018 12:54:55 +0800 Subject: [PATCH 03/17] Rename reference in academy/index --- src/components/academy/index.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/academy/index.tsx b/src/components/academy/index.tsx index 5751fd6fa7..284bb73bae 100644 --- a/src/components/academy/index.tsx +++ b/src/components/academy/index.tsx @@ -4,7 +4,7 @@ import * as React from 'react' import { Redirect, Route, RouteComponentProps, Switch } from 'react-router' import Grading from '../../containers/academy/grading' -import AssessmentListingContainer from '../../containers/assessment/AssessmentListingContainer' +import AssessmentContainer from '../../containers/assessment' import Game from '../../containers/GameContainer' import { isAcademyRe } from '../../reducers/session' import { HistoryHelper } from '../../utils/history' @@ -27,9 +27,9 @@ export interface IStateProps { historyHelper: HistoryHelper } -const assessmentListingRenderFactory = (cat: AssessmentCategory) => ( +const assessmentRenderFactory = (cat: AssessmentCategory) => ( routerProps: RouteComponentProps -) => +) => const assessmentRegExp = ':assessmentId(\\d+)?/:questionId(\\d+)?' @@ -42,24 +42,24 @@ export const Academy: React.SFC = props => ( path={`/academy/${assessmentCategoryLink( AssessmentCategories.Contest )}/${assessmentRegExp}`} - render={assessmentListingRenderFactory(AssessmentCategories.Contest)} + render={assessmentRenderFactory(AssessmentCategories.Contest)} /> From b380d30763a96f178943f5a5edd02253273aa380 Mon Sep 17 00:00:00 2001 From: remo5000 Date: Tue, 3 Jul 2018 12:56:04 +0800 Subject: [PATCH 04/17] Rename reference in assessment/index --- src/components/assessment/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/assessment/index.tsx b/src/components/assessment/index.tsx index 4e8f064ed0..d7ed00bb5c 100644 --- a/src/components/assessment/index.tsx +++ b/src/components/assessment/index.tsx @@ -4,7 +4,7 @@ import * as React from 'react' import { RouteComponentProps } from 'react-router' import { NavLink } from 'react-router-dom' -import AssessmentContainer from '../../containers/assessment' +import AssessmentWorkspaceContainer from '../../containers/assessment/AssessmentWorkspaceContainer' import { assessmentCategoryLink, stringParamToInt } from '../../utils/paramParseHelpers' import { OwnProps as AssessmentProps } from '../assessment' import { AssessmentCategory } from '../assessment/assessmentShape' @@ -81,7 +81,7 @@ class AssessmentListing extends React.Component { assessmentId, questionId } - return + return } } } From 1c7e625fec7aee04b993e207a097df5cb77979da Mon Sep 17 00:00:00 2001 From: remo5000 Date: Tue, 3 Jul 2018 12:59:28 +0800 Subject: [PATCH 05/17] Move tests --- .../__tests__/AssessmentListing.tsx | 62 ------------- .../__tests__/AssessmentWorkspace.tsx | 62 +++++++++++++ src/components/assessment/__tests__/index.tsx | 86 +++++++++---------- 3 files changed, 105 insertions(+), 105 deletions(-) delete mode 100644 src/components/assessment/__tests__/AssessmentListing.tsx create mode 100644 src/components/assessment/__tests__/AssessmentWorkspace.tsx diff --git a/src/components/assessment/__tests__/AssessmentListing.tsx b/src/components/assessment/__tests__/AssessmentListing.tsx deleted file mode 100644 index 16aab238fd..0000000000 --- a/src/components/assessment/__tests__/AssessmentListing.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { mount } from 'enzyme' -import * as React from 'react' -import { MemoryRouter } from 'react-router' - -import { mockAssessmentOverviews } from '../../../mocks/assessmentAPI' -import { mockRouterProps } from '../../../mocks/components' -import AssessmentListing, { IAssessmentListingProps } from '../AssessmentListing' -import { AssessmentCategories } from '../assessmentShape' - -const defaultProps: IAssessmentListingProps = { - assessmentCategory: AssessmentCategories.Mission, - assessmentOverviews: undefined, - handleAssessmentOverviewFetch: () => {}, - handleResetAssessmentWorkspace: () => {}, - handleUpdateCurrentAssessmentId: (assessmentId: number, questionId: number) => {}, - ...mockRouterProps('/academy/missions', {}) -} - -const mockUndefinedAssessmentListing: IAssessmentListingProps = { - ...defaultProps, - assessmentOverviews: undefined -} - -const mockEmptyAssessmentListing: IAssessmentListingProps = { - ...defaultProps, - assessmentOverviews: [] -} - -const mockPresentAssessmentListing: IAssessmentListingProps = { - ...defaultProps, - assessmentOverviews: mockAssessmentOverviews -} - -test('AssessmentListing page "loading" content renders correctly', () => { - const app = ( - - - - ) - const tree = mount(app) - expect(tree.debug()).toMatchSnapshot() -}) - -test('AssessmentListing page with 0 missions renders correctly', () => { - const app = ( - - - - ) - const tree = mount(app) - expect(tree.debug()).toMatchSnapshot() -}) - -test('AssessmentListing page with multiple loaded missions renders correctly', () => { - const app = ( - - - - ) - const tree = mount(app) - expect(tree.debug()).toMatchSnapshot() -}) diff --git a/src/components/assessment/__tests__/AssessmentWorkspace.tsx b/src/components/assessment/__tests__/AssessmentWorkspace.tsx new file mode 100644 index 0000000000..765136cc27 --- /dev/null +++ b/src/components/assessment/__tests__/AssessmentWorkspace.tsx @@ -0,0 +1,62 @@ +import { shallow } from 'enzyme' +import * as React from 'react' + +import { mockAssessments } from '../../../mocks/assessmentAPI' +import Assessment, { AssessmentProps } from '../index' + +const defaultProps: AssessmentProps = { + activeTab: 0, + assessmentId: 0, + editorWidth: '50%', + handleAssessmentFetch: (assessmentId: number) => {}, + handleChangeActiveTab: (activeTab: number) => {}, + handleChapterSelect: (chapter: any, changeEvent: any) => {}, + handleEditorEval: () => {}, + handleEditorValueChange: (val: string) => {}, + handleEditorWidthChange: (widthChange: number) => {}, + handleInterruptEval: () => {}, + handleReplEval: () => {}, + handleReplOutputClear: () => {}, + handleReplValueChange: (newValue: string) => {}, + handleSideContentHeightChange: (heightChange: number) => {}, + isRunning: false, + output: [], + questionId: 0, + replValue: '' +} + +const mockUndefinedAssessmentProps: AssessmentProps = { + ...defaultProps +} + +const mockProgrammingAssessmentProps: AssessmentProps = { + ...defaultProps, + assessment: mockAssessments[0], + assessmentId: 0, + questionId: 0 +} + +const mockMcqAssessmentProps: AssessmentProps = { + ...defaultProps, + assessment: mockAssessments[0], + assessmentId: 0, + questionId: 2 +} + +test('Assessment page "loading" content renders correctly', () => { + const app = + const tree = shallow(app) + expect(tree.debug()).toMatchSnapshot() +}) + +test('Assessment page with programming question renders correctly', () => { + const app = + const tree = shallow(app) + expect(tree.debug()).toMatchSnapshot() +}) + +test('Assessment page with MCQ question renders correctly', () => { + const app = + const tree = shallow(app) + expect(tree.debug()).toMatchSnapshot() +}) diff --git a/src/components/assessment/__tests__/index.tsx b/src/components/assessment/__tests__/index.tsx index 765136cc27..16aab238fd 100644 --- a/src/components/assessment/__tests__/index.tsx +++ b/src/components/assessment/__tests__/index.tsx @@ -1,62 +1,62 @@ -import { shallow } from 'enzyme' +import { mount } from 'enzyme' import * as React from 'react' - -import { mockAssessments } from '../../../mocks/assessmentAPI' -import Assessment, { AssessmentProps } from '../index' - -const defaultProps: AssessmentProps = { - activeTab: 0, - assessmentId: 0, - editorWidth: '50%', - handleAssessmentFetch: (assessmentId: number) => {}, - handleChangeActiveTab: (activeTab: number) => {}, - handleChapterSelect: (chapter: any, changeEvent: any) => {}, - handleEditorEval: () => {}, - handleEditorValueChange: (val: string) => {}, - handleEditorWidthChange: (widthChange: number) => {}, - handleInterruptEval: () => {}, - handleReplEval: () => {}, - handleReplOutputClear: () => {}, - handleReplValueChange: (newValue: string) => {}, - handleSideContentHeightChange: (heightChange: number) => {}, - isRunning: false, - output: [], - questionId: 0, - replValue: '' +import { MemoryRouter } from 'react-router' + +import { mockAssessmentOverviews } from '../../../mocks/assessmentAPI' +import { mockRouterProps } from '../../../mocks/components' +import AssessmentListing, { IAssessmentListingProps } from '../AssessmentListing' +import { AssessmentCategories } from '../assessmentShape' + +const defaultProps: IAssessmentListingProps = { + assessmentCategory: AssessmentCategories.Mission, + assessmentOverviews: undefined, + handleAssessmentOverviewFetch: () => {}, + handleResetAssessmentWorkspace: () => {}, + handleUpdateCurrentAssessmentId: (assessmentId: number, questionId: number) => {}, + ...mockRouterProps('/academy/missions', {}) } -const mockUndefinedAssessmentProps: AssessmentProps = { - ...defaultProps +const mockUndefinedAssessmentListing: IAssessmentListingProps = { + ...defaultProps, + assessmentOverviews: undefined } -const mockProgrammingAssessmentProps: AssessmentProps = { +const mockEmptyAssessmentListing: IAssessmentListingProps = { ...defaultProps, - assessment: mockAssessments[0], - assessmentId: 0, - questionId: 0 + assessmentOverviews: [] } -const mockMcqAssessmentProps: AssessmentProps = { +const mockPresentAssessmentListing: IAssessmentListingProps = { ...defaultProps, - assessment: mockAssessments[0], - assessmentId: 0, - questionId: 2 + assessmentOverviews: mockAssessmentOverviews } -test('Assessment page "loading" content renders correctly', () => { - const app = - const tree = shallow(app) +test('AssessmentListing page "loading" content renders correctly', () => { + const app = ( + + + + ) + const tree = mount(app) expect(tree.debug()).toMatchSnapshot() }) -test('Assessment page with programming question renders correctly', () => { - const app = - const tree = shallow(app) +test('AssessmentListing page with 0 missions renders correctly', () => { + const app = ( + + + + ) + const tree = mount(app) expect(tree.debug()).toMatchSnapshot() }) -test('Assessment page with MCQ question renders correctly', () => { - const app = - const tree = shallow(app) +test('AssessmentListing page with multiple loaded missions renders correctly', () => { + const app = ( + + + + ) + const tree = mount(app) expect(tree.debug()).toMatchSnapshot() }) From 75185afc45899f6a99196bcc12d67c9545d5c4aa Mon Sep 17 00:00:00 2001 From: remo5000 Date: Tue, 3 Jul 2018 12:59:53 +0800 Subject: [PATCH 06/17] Rename references in containers --- src/containers/assessment/AssessmentWorkspaceContainer.ts | 4 ++-- src/containers/assessment/index.ts | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/containers/assessment/AssessmentWorkspaceContainer.ts b/src/containers/assessment/AssessmentWorkspaceContainer.ts index 2776b84141..c57d94f1f5 100644 --- a/src/containers/assessment/AssessmentWorkspaceContainer.ts +++ b/src/containers/assessment/AssessmentWorkspaceContainer.ts @@ -15,7 +15,7 @@ import { updateReplValue, WorkspaceLocation } from '../../actions' -import Assessment, { DispatchProps, OwnProps, StateProps } from '../../components/assessment' +import AssessmentWorkspace, { DispatchProps, OwnProps, StateProps } from '../../components/assessment/AssessmentWorkspace' import { IState } from '../../reducers/states' const mapStateToProps: MapStateToProps = (state, props) => { @@ -53,4 +53,4 @@ const mapDispatchToProps: MapDispatchToProps = (dispatch: Dis dispatch ) -export default connect(mapStateToProps, mapDispatchToProps)(Assessment) +export default connect(mapStateToProps, mapDispatchToProps)(AssessmentWorkspace) diff --git a/src/containers/assessment/index.ts b/src/containers/assessment/index.ts index 7ead6b4bc4..32ee3af877 100644 --- a/src/containers/assessment/index.ts +++ b/src/containers/assessment/index.ts @@ -4,11 +4,11 @@ import { bindActionCreators, Dispatch } from 'redux' import { fetchAssessmentOverviews } from '../../actions/session' import { resetAssessmentWorkspace, updateCurrentAssessmentId } from '../../actions/workspaces' -import AssessmentListing, { +import Assessment, { IDispatchProps, IOwnProps, IStateProps -} from '../../components/assessment/AssessmentListing' +} from '../../components/assessment' import { IAssessmentOverview } from '../../components/assessment/assessmentShape' import { IState } from '../../reducers/states' @@ -35,4 +35,4 @@ const mapDispatchToProps: MapDispatchToProps = (dispatch: Di dispatch ) -export default withRouter(connect(mapStateToProps, mapDispatchToProps)(AssessmentListing)) +export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Assessment)) From e326b5eb8fa6f30aad8d5f44de67cf46a5ee019d Mon Sep 17 00:00:00 2001 From: remo5000 Date: Tue, 3 Jul 2018 13:05:07 +0800 Subject: [PATCH 07/17] Rename component references in tests --- .../assessment/__tests__/AssessmentWorkspace.tsx | 8 ++++---- src/components/assessment/__tests__/index.tsx | 14 +++++++------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/components/assessment/__tests__/AssessmentWorkspace.tsx b/src/components/assessment/__tests__/AssessmentWorkspace.tsx index 765136cc27..38ed71aa37 100644 --- a/src/components/assessment/__tests__/AssessmentWorkspace.tsx +++ b/src/components/assessment/__tests__/AssessmentWorkspace.tsx @@ -2,7 +2,7 @@ import { shallow } from 'enzyme' import * as React from 'react' import { mockAssessments } from '../../../mocks/assessmentAPI' -import Assessment, { AssessmentProps } from '../index' +import AssessmentWorkspace, { AssessmentProps } from '../AssessmentWorkspace' const defaultProps: AssessmentProps = { activeTab: 0, @@ -44,19 +44,19 @@ const mockMcqAssessmentProps: AssessmentProps = { } test('Assessment page "loading" content renders correctly', () => { - const app = + const app = const tree = shallow(app) expect(tree.debug()).toMatchSnapshot() }) test('Assessment page with programming question renders correctly', () => { - const app = + const app = const tree = shallow(app) expect(tree.debug()).toMatchSnapshot() }) test('Assessment page with MCQ question renders correctly', () => { - const app = + const app = const tree = shallow(app) expect(tree.debug()).toMatchSnapshot() }) diff --git a/src/components/assessment/__tests__/index.tsx b/src/components/assessment/__tests__/index.tsx index 16aab238fd..6dedb9ecd0 100644 --- a/src/components/assessment/__tests__/index.tsx +++ b/src/components/assessment/__tests__/index.tsx @@ -4,7 +4,7 @@ import { MemoryRouter } from 'react-router' import { mockAssessmentOverviews } from '../../../mocks/assessmentAPI' import { mockRouterProps } from '../../../mocks/components' -import AssessmentListing, { IAssessmentListingProps } from '../AssessmentListing' +import Assessment, { IAssessmentListingProps } from '../' import { AssessmentCategories } from '../assessmentShape' const defaultProps: IAssessmentListingProps = { @@ -31,30 +31,30 @@ const mockPresentAssessmentListing: IAssessmentListingProps = { assessmentOverviews: mockAssessmentOverviews } -test('AssessmentListing page "loading" content renders correctly', () => { +test('Assessment page "loading" content renders correctly', () => { const app = ( - + ) const tree = mount(app) expect(tree.debug()).toMatchSnapshot() }) -test('AssessmentListing page with 0 missions renders correctly', () => { +test('Assessment page with 0 missions renders correctly', () => { const app = ( - + ) const tree = mount(app) expect(tree.debug()).toMatchSnapshot() }) -test('AssessmentListing page with multiple loaded missions renders correctly', () => { +test('Assessment page with multiple loaded missions renders correctly', () => { const app = ( - + ) const tree = mount(app) From 163bbbe3c7f683da187189954fc11fd0c34f3d2d Mon Sep 17 00:00:00 2001 From: remo5000 Date: Tue, 3 Jul 2018 13:07:11 +0800 Subject: [PATCH 08/17] Rename assessment/index references --- src/components/assessment/__tests__/index.tsx | 2 +- src/components/assessment/index.tsx | 5 ++--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/assessment/__tests__/index.tsx b/src/components/assessment/__tests__/index.tsx index 6dedb9ecd0..88d0978cb3 100644 --- a/src/components/assessment/__tests__/index.tsx +++ b/src/components/assessment/__tests__/index.tsx @@ -2,9 +2,9 @@ import { mount } from 'enzyme' import * as React from 'react' import { MemoryRouter } from 'react-router' +import Assessment, { IAssessmentListingProps } from '../' import { mockAssessmentOverviews } from '../../../mocks/assessmentAPI' import { mockRouterProps } from '../../../mocks/components' -import Assessment, { IAssessmentListingProps } from '../' import { AssessmentCategories } from '../assessmentShape' const defaultProps: IAssessmentListingProps = { diff --git a/src/components/assessment/index.tsx b/src/components/assessment/index.tsx index d7ed00bb5c..b29dd33613 100644 --- a/src/components/assessment/index.tsx +++ b/src/components/assessment/index.tsx @@ -6,9 +6,8 @@ import { NavLink } from 'react-router-dom' import AssessmentWorkspaceContainer from '../../containers/assessment/AssessmentWorkspaceContainer' import { assessmentCategoryLink, stringParamToInt } from '../../utils/paramParseHelpers' -import { OwnProps as AssessmentProps } from '../assessment' -import { AssessmentCategory } from '../assessment/assessmentShape' -import { IAssessmentOverview } from '../assessment/assessmentShape' +import { AssessmentCategory, IAssessmentOverview } from '../assessment/assessmentShape' +import { OwnProps as AssessmentProps } from '../assessment/AssessmentWorkspace' import ContentDisplay, { IContentDisplayProps } from '../commons/ContentDisplay' export interface IAssessmentParams { From 5fa3bc1c2eebb29fa74ecd43aff85ce8dcd558b9 Mon Sep 17 00:00:00 2001 From: remo5000 Date: Tue, 3 Jul 2018 13:09:08 +0800 Subject: [PATCH 09/17] Rename match param type --- src/components/assessment/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/assessment/index.tsx b/src/components/assessment/index.tsx index b29dd33613..5e9f353b23 100644 --- a/src/components/assessment/index.tsx +++ b/src/components/assessment/index.tsx @@ -10,7 +10,7 @@ import { AssessmentCategory, IAssessmentOverview } from '../assessment/assessmen import { OwnProps as AssessmentProps } from '../assessment/AssessmentWorkspace' import ContentDisplay, { IContentDisplayProps } from '../commons/ContentDisplay' -export interface IAssessmentParams { +export interface IAssessmentWorkspaceParams { assessmentId?: string questionId?: string } @@ -18,7 +18,7 @@ export interface IAssessmentParams { export interface IAssessmentListingProps extends IDispatchProps, IOwnProps, - RouteComponentProps, + RouteComponentProps, IStateProps {} export interface IDispatchProps { From c22c463837f9f6d52d05343a1f77bc1eab4467fc Mon Sep 17 00:00:00 2001 From: remo5000 Date: Tue, 3 Jul 2018 13:10:58 +0800 Subject: [PATCH 10/17] Rename AssessmentListing props to AssessmentProps --- src/components/assessment/__tests__/index.tsx | 16 ++++++++-------- src/components/assessment/index.tsx | 4 ++-- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/assessment/__tests__/index.tsx b/src/components/assessment/__tests__/index.tsx index 88d0978cb3..e448a0796f 100644 --- a/src/components/assessment/__tests__/index.tsx +++ b/src/components/assessment/__tests__/index.tsx @@ -2,12 +2,12 @@ import { mount } from 'enzyme' import * as React from 'react' import { MemoryRouter } from 'react-router' -import Assessment, { IAssessmentListingProps } from '../' +import Assessment, { IAssessmentProps } from '../' import { mockAssessmentOverviews } from '../../../mocks/assessmentAPI' import { mockRouterProps } from '../../../mocks/components' import { AssessmentCategories } from '../assessmentShape' -const defaultProps: IAssessmentListingProps = { +const defaultProps: IAssessmentProps = { assessmentCategory: AssessmentCategories.Mission, assessmentOverviews: undefined, handleAssessmentOverviewFetch: () => {}, @@ -16,17 +16,17 @@ const defaultProps: IAssessmentListingProps = { ...mockRouterProps('/academy/missions', {}) } -const mockUndefinedAssessmentListing: IAssessmentListingProps = { +const mockUndefinedAssessment: IAssessmentProps = { ...defaultProps, assessmentOverviews: undefined } -const mockEmptyAssessmentListing: IAssessmentListingProps = { +const mockEmptyAssessment: IAssessmentProps = { ...defaultProps, assessmentOverviews: [] } -const mockPresentAssessmentListing: IAssessmentListingProps = { +const mockPresentAssessment: IAssessmentProps = { ...defaultProps, assessmentOverviews: mockAssessmentOverviews } @@ -34,7 +34,7 @@ const mockPresentAssessmentListing: IAssessmentListingProps = { test('Assessment page "loading" content renders correctly', () => { const app = ( - + ) const tree = mount(app) @@ -44,7 +44,7 @@ test('Assessment page "loading" content renders correctly', () => { test('Assessment page with 0 missions renders correctly', () => { const app = ( - + ) const tree = mount(app) @@ -54,7 +54,7 @@ test('Assessment page with 0 missions renders correctly', () => { test('Assessment page with multiple loaded missions renders correctly', () => { const app = ( - + ) const tree = mount(app) diff --git a/src/components/assessment/index.tsx b/src/components/assessment/index.tsx index 5e9f353b23..5e1576d0db 100644 --- a/src/components/assessment/index.tsx +++ b/src/components/assessment/index.tsx @@ -15,7 +15,7 @@ export interface IAssessmentWorkspaceParams { questionId?: string } -export interface IAssessmentListingProps +export interface IAssessmentProps extends IDispatchProps, IOwnProps, RouteComponentProps, @@ -37,7 +37,7 @@ export interface IStateProps { storedQuestionId?: number } -class AssessmentListing extends React.Component { +class AssessmentListing extends React.Component { public componentWillMount() { const assessmentId = stringParamToInt(this.props.match.params.assessmentId) const questionId = stringParamToInt(this.props.match.params.questionId) From f550401fe3e2bc5389582020c18f2b47985d9733 Mon Sep 17 00:00:00 2001 From: remo5000 Date: Tue, 3 Jul 2018 13:20:30 +0800 Subject: [PATCH 11/17] Rename props for AssessmentWorkspace --- .../__tests__/AssessmentWorkspace.tsx | 22 +++++++++---------- .../assessment/assessmentWorkspace.tsx | 12 +++++----- 2 files changed, 17 insertions(+), 17 deletions(-) diff --git a/src/components/assessment/__tests__/AssessmentWorkspace.tsx b/src/components/assessment/__tests__/AssessmentWorkspace.tsx index 38ed71aa37..2522d2b041 100644 --- a/src/components/assessment/__tests__/AssessmentWorkspace.tsx +++ b/src/components/assessment/__tests__/AssessmentWorkspace.tsx @@ -2,9 +2,9 @@ import { shallow } from 'enzyme' import * as React from 'react' import { mockAssessments } from '../../../mocks/assessmentAPI' -import AssessmentWorkspace, { AssessmentProps } from '../AssessmentWorkspace' +import AssessmentWorkspace, { AssessmentWorkspaceProps } from '../AssessmentWorkspace' -const defaultProps: AssessmentProps = { +const defaultProps: AssessmentWorkspaceProps = { activeTab: 0, assessmentId: 0, editorWidth: '50%', @@ -25,38 +25,38 @@ const defaultProps: AssessmentProps = { replValue: '' } -const mockUndefinedAssessmentProps: AssessmentProps = { +const mockUndefinedAssessmentWorkspaceProps: AssessmentWorkspaceProps = { ...defaultProps } -const mockProgrammingAssessmentProps: AssessmentProps = { +const mockProgrammingAssessmentWorkspaceProps: AssessmentWorkspaceProps = { ...defaultProps, assessment: mockAssessments[0], assessmentId: 0, questionId: 0 } -const mockMcqAssessmentProps: AssessmentProps = { +const mockMcqAssessmentWorkspaceProps: AssessmentWorkspaceProps = { ...defaultProps, assessment: mockAssessments[0], assessmentId: 0, questionId: 2 } -test('Assessment page "loading" content renders correctly', () => { - const app = +test('AssessmentWorkspace page "loading" content renders correctly', () => { + const app = const tree = shallow(app) expect(tree.debug()).toMatchSnapshot() }) -test('Assessment page with programming question renders correctly', () => { - const app = +test('AssessmentWorkspace page with programming question renders correctly', () => { + const app = const tree = shallow(app) expect(tree.debug()).toMatchSnapshot() }) -test('Assessment page with MCQ question renders correctly', () => { - const app = +test('AssessmentWorkspace page with MCQ question renders correctly', () => { + const app = const tree = shallow(app) expect(tree.debug()).toMatchSnapshot() }) diff --git a/src/components/assessment/assessmentWorkspace.tsx b/src/components/assessment/assessmentWorkspace.tsx index a897b7f663..bd57dcf55e 100644 --- a/src/components/assessment/assessmentWorkspace.tsx +++ b/src/components/assessment/assessmentWorkspace.tsx @@ -16,7 +16,7 @@ import { QuestionTypes } from './assessmentShape' -export type AssessmentProps = DispatchProps & OwnProps & StateProps +export type AssessmentWorkspaceProps = DispatchProps & OwnProps & StateProps export type StateProps = { activeTab: number @@ -48,7 +48,7 @@ export type DispatchProps = { handleSideContentHeightChange: (heightChange: number) => void } -class Assessment extends React.Component { +class AssessmentWorkspace extends React.Component { public state = { showOverlay: false } public componentWillMount() { @@ -117,8 +117,8 @@ class Assessment extends React.Component SideContentProps = ( - props: AssessmentProps + private sideContentProps: (p: AssessmentWorkspaceProps) => SideContentProps = ( + props: AssessmentWorkspaceProps ) => ({ activeTab: 0, handleChangeActiveTab: (aT: number) => {}, @@ -137,7 +137,7 @@ class Assessment extends React.Component ControlBarProps = (props: AssessmentProps) => { + private controlBarProps: (p: AssessmentWorkspaceProps) => ControlBarProps = (props: AssessmentWorkspaceProps) => { const listingPath = `/academy/${assessmentCategoryLink(this.props.assessment!.category)}` const assessmentPath = listingPath + `/${this.props.assessment!.id.toString()}` return { @@ -163,4 +163,4 @@ class Assessment extends React.Component Date: Tue, 3 Jul 2018 13:22:17 +0800 Subject: [PATCH 12/17] Rename link naming --- src/components/assessment/assessmentWorkspace.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/assessment/assessmentWorkspace.tsx b/src/components/assessment/assessmentWorkspace.tsx index bd57dcf55e..6ee431f7c9 100644 --- a/src/components/assessment/assessmentWorkspace.tsx +++ b/src/components/assessment/assessmentWorkspace.tsx @@ -139,7 +139,7 @@ class AssessmentWorkspace extends React.Component ControlBarProps = (props: AssessmentWorkspaceProps) => { const listingPath = `/academy/${assessmentCategoryLink(this.props.assessment!.category)}` - const assessmentPath = listingPath + `/${this.props.assessment!.id.toString()}` + const assessmentWorkspacePath = listingPath + `/${this.props.assessment!.id.toString()}` return { handleChapterSelect: this.props.handleChapterSelect, handleEditorEval: this.props.handleEditorEval, @@ -154,9 +154,9 @@ class AssessmentWorkspace extends React.Component - history.push(assessmentPath + `/${(this.props.questionId + 1).toString()}`), + history.push(assessmentWorkspacePath + `/${(this.props.questionId + 1).toString()}`), onClickPrevious: () => - history.push(assessmentPath + `/${(this.props.questionId - 1).toString()}`), + history.push(assessmentWorkspacePath + `/${(this.props.questionId - 1).toString()}`), onClickSubmit: () => history.push(listingPath), sourceChapter: 2 // TODO dynamic library changing } From be75ea0279619d4bfd444700dbc44039bf6ab9d2 Mon Sep 17 00:00:00 2001 From: remo5000 Date: Tue, 3 Jul 2018 13:25:41 +0800 Subject: [PATCH 13/17] Move tests --- .../__snapshots__/AssessmentListing.tsx.snap | 451 ----------------- .../AssessmentWorkspace.tsx.snap | 35 ++ .../__tests__/__snapshots__/index.tsx.snap | 474 ++++++++++++++++-- 3 files changed, 480 insertions(+), 480 deletions(-) delete mode 100644 src/components/assessment/__tests__/__snapshots__/AssessmentListing.tsx.snap create mode 100644 src/components/assessment/__tests__/__snapshots__/AssessmentWorkspace.tsx.snap diff --git a/src/components/assessment/__tests__/__snapshots__/AssessmentListing.tsx.snap b/src/components/assessment/__tests__/__snapshots__/AssessmentListing.tsx.snap deleted file mode 100644 index c6859ed306..0000000000 --- a/src/components/assessment/__tests__/__snapshots__/AssessmentListing.tsx.snap +++ /dev/null @@ -1,451 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`AssessmentListing page "loading" content renders correctly 1`] = ` -" - - -
- -
-
- -
- - -
-
- -
-
- - - - -
-
- -
-
- Fetching assessment... -
-
- - -
- -
-
- -
- - -" -`; - -exports[`AssessmentListing page with 0 missions renders correctly 1`] = ` -" - - -
- -
-
- -
- - -
-
- - - - flame - - - - -
-

- There are no assessments. -

-
- - -
- -
-
- -
- - -" -`; - -exports[`AssessmentListing page with multiple loaded missions renders correctly 1`] = ` -" - - -
- -
-
- -
- -
- -
-
- PICTURE -
-
-
-

- An Odessey to Runes -

-
-
-
- Mission 0 : 123123 XP (hardcoded) -
-
-
-

- Once upon a time, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec vulputate sapien. Fusce vel lacus fermentum, efficitur ipsum. -

-
-
-
- -
- - - - time - - - - - Due: 12/12/12 -
- -
- -
-
-
- -
-
- -
-
- PICTURE -
-
-
-

- The Secret to Streams -

-
-
-
- Mission 0 : 123123 XP (hardcoded) -
-
-
-

- Once upon a time, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec vulputate sapien. Fusce vel lacus fermentum, efficitur ipsum. -

-
-
-
- -
- - - - time - - - - - Due: 12/12/12 -
- -
- -
-
-
- -
-
- -
-
- PICTURE -
-
-
-

- A sample Sidequest -

-
-
-
- Mission 0 : 123123 XP (hardcoded) -
-
-
-

- Once upon a time, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec vulputate sapien. Fusce vel lacus fermentum, efficitur ipsum. -

-
-
-
- -
- - - - time - - - - - Due: 12/12/12 -
- -
- -
-
-
- -
-
- -
-
- PICTURE -
-
-
-

- A closed Mission -

-
-
-
- Mission 0 : 123123 XP (hardcoded) -
-
-
-

- Once upon a time, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec vulputate sapien. Fusce vel lacus fermentum, efficitur ipsum. -

-
-
-
- -
- - - - time - - - - - Due: 12/12/12 -
- -
- -
-
-
- -
-
- -
-
- PICTURE -
-
-
-

- A closed sidequest -

-
-
-
- Mission 0 : 123123 XP (hardcoded) -
-
-
-

- Once upon a time, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec vulputate sapien. Fusce vel lacus fermentum, efficitur ipsum. -

-
-
-
- -
- - - - time - - - - - Due: 12/12/12 -
- -
- -
-
-
- -
- -
- -
-
- -
- - -" -`; diff --git a/src/components/assessment/__tests__/__snapshots__/AssessmentWorkspace.tsx.snap b/src/components/assessment/__tests__/__snapshots__/AssessmentWorkspace.tsx.snap new file mode 100644 index 0000000000..8733d4fd58 --- /dev/null +++ b/src/components/assessment/__tests__/__snapshots__/AssessmentWorkspace.tsx.snap @@ -0,0 +1,35 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`AssessmentWorkspace page "loading" content renders correctly 1`] = `""`; + +exports[`AssessmentWorkspace page with MCQ question renders correctly 1`] = ` +"
+ + + + + This is the mission briefing. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas viverra, sem scelerisque ultricies ullamcorper, sem nibh sollicitudin enim, at ultricies sem orci eget odio. Pellentesque varius et mauris quis vestibulum. Etiam in egestas dolor. Nunc consectetur, sapien sodales accumsan convallis, lectus mi tempus ipsum, vel ornare metus turpis sed justo. Vivamus at tellus sed ex convallis commodo at in lectus. Pellentesque pharetra pulvinar sapien pellentesque facilisis. Curabitur efficitur malesuada urna sed aliquam. Quisque massa metus, aliquam in sagittis non, cursus in sem. Morbi vel nunc at nunc pharetra lobortis. Aliquam feugiat ultricies ipsum vel sollicitudin. Vivamus nulla massa, hendrerit sit amet nibh quis, porttitor convallis nisi. + + + + + + +
" +`; + +exports[`AssessmentWorkspace page with programming question renders correctly 1`] = ` +"
+ + + + + This is the mission briefing. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas viverra, sem scelerisque ultricies ullamcorper, sem nibh sollicitudin enim, at ultricies sem orci eget odio. Pellentesque varius et mauris quis vestibulum. Etiam in egestas dolor. Nunc consectetur, sapien sodales accumsan convallis, lectus mi tempus ipsum, vel ornare metus turpis sed justo. Vivamus at tellus sed ex convallis commodo at in lectus. Pellentesque pharetra pulvinar sapien pellentesque facilisis. Curabitur efficitur malesuada urna sed aliquam. Quisque massa metus, aliquam in sagittis non, cursus in sem. Morbi vel nunc at nunc pharetra lobortis. Aliquam feugiat ultricies ipsum vel sollicitudin. Vivamus nulla massa, hendrerit sit amet nibh quis, porttitor convallis nisi. + + + + + + +
" +`; diff --git a/src/components/assessment/__tests__/__snapshots__/index.tsx.snap b/src/components/assessment/__tests__/__snapshots__/index.tsx.snap index fed4a8f1d4..d473d7695e 100644 --- a/src/components/assessment/__tests__/__snapshots__/index.tsx.snap +++ b/src/components/assessment/__tests__/__snapshots__/index.tsx.snap @@ -1,35 +1,451 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Assessment page "loading" content renders correctly 1`] = `""`; +exports[`Assessment page "loading" content renders correctly 1`] = ` +" + + +
+ +
+
+ +
+ + +
+
+ +
+
+ + + + +
+
+ +
+
+ Fetching assessment... +
+
+ + +
+ +
+
+ +
+ + +" +`; -exports[`Assessment page with MCQ question renders correctly 1`] = ` -"
- - - - - This is the mission briefing. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas viverra, sem scelerisque ultricies ullamcorper, sem nibh sollicitudin enim, at ultricies sem orci eget odio. Pellentesque varius et mauris quis vestibulum. Etiam in egestas dolor. Nunc consectetur, sapien sodales accumsan convallis, lectus mi tempus ipsum, vel ornare metus turpis sed justo. Vivamus at tellus sed ex convallis commodo at in lectus. Pellentesque pharetra pulvinar sapien pellentesque facilisis. Curabitur efficitur malesuada urna sed aliquam. Quisque massa metus, aliquam in sagittis non, cursus in sem. Morbi vel nunc at nunc pharetra lobortis. Aliquam feugiat ultricies ipsum vel sollicitudin. Vivamus nulla massa, hendrerit sit amet nibh quis, porttitor convallis nisi. - - - - - - -
" +exports[`Assessment page with 0 missions renders correctly 1`] = ` +" + + +
+ +
+
+ +
+ + +
+
+ + + + flame + + + + +
+

+ There are no assessments. +

+
+ + +
+ +
+
+ +
+ + +" `; -exports[`Assessment page with programming question renders correctly 1`] = ` -"
- - - - - This is the mission briefing. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas viverra, sem scelerisque ultricies ullamcorper, sem nibh sollicitudin enim, at ultricies sem orci eget odio. Pellentesque varius et mauris quis vestibulum. Etiam in egestas dolor. Nunc consectetur, sapien sodales accumsan convallis, lectus mi tempus ipsum, vel ornare metus turpis sed justo. Vivamus at tellus sed ex convallis commodo at in lectus. Pellentesque pharetra pulvinar sapien pellentesque facilisis. Curabitur efficitur malesuada urna sed aliquam. Quisque massa metus, aliquam in sagittis non, cursus in sem. Morbi vel nunc at nunc pharetra lobortis. Aliquam feugiat ultricies ipsum vel sollicitudin. Vivamus nulla massa, hendrerit sit amet nibh quis, porttitor convallis nisi. - - - - - - -
" +exports[`Assessment page with multiple loaded missions renders correctly 1`] = ` +" + + +
+ +
+
+ +
+ +
+ +
+
+ PICTURE +
+
+
+

+ An Odessey to Runes +

+
+
+
+ Mission 0 : 123123 XP (hardcoded) +
+
+
+

+ Once upon a time, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec vulputate sapien. Fusce vel lacus fermentum, efficitur ipsum. +

+
+
+
+ +
+ + + + time + + + + + Due: 12/12/12 +
+ +
+ +
+
+
+ +
+
+ +
+
+ PICTURE +
+
+
+

+ The Secret to Streams +

+
+
+
+ Mission 0 : 123123 XP (hardcoded) +
+
+
+

+ Once upon a time, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec vulputate sapien. Fusce vel lacus fermentum, efficitur ipsum. +

+
+
+
+ +
+ + + + time + + + + + Due: 12/12/12 +
+ +
+ +
+
+
+ +
+
+ +
+
+ PICTURE +
+
+
+

+ A sample Sidequest +

+
+
+
+ Mission 0 : 123123 XP (hardcoded) +
+
+
+

+ Once upon a time, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec vulputate sapien. Fusce vel lacus fermentum, efficitur ipsum. +

+
+
+
+ +
+ + + + time + + + + + Due: 12/12/12 +
+ +
+ +
+
+
+ +
+
+ +
+
+ PICTURE +
+
+
+

+ A closed Mission +

+
+
+
+ Mission 0 : 123123 XP (hardcoded) +
+
+
+

+ Once upon a time, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec vulputate sapien. Fusce vel lacus fermentum, efficitur ipsum. +

+
+
+
+ +
+ + + + time + + + + + Due: 12/12/12 +
+ +
+ +
+
+
+ +
+
+ +
+
+ PICTURE +
+
+
+

+ A closed sidequest +

+
+
+
+ Mission 0 : 123123 XP (hardcoded) +
+
+
+

+ Once upon a time, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec vulputate sapien. Fusce vel lacus fermentum, efficitur ipsum. +

+
+
+
+ +
+ + + + time + + + + + Due: 12/12/12 +
+ +
+ +
+
+
+ +
+ +
+ +
+
+ +
+ + +" `; From d62cb7f18c4e04f31b7c58444bb8d0b86cbdb60f Mon Sep 17 00:00:00 2001 From: remo5000 Date: Tue, 3 Jul 2018 13:35:08 +0800 Subject: [PATCH 14/17] Rename styles Also fixed a negative margin caused by row --- src/components/assessment/assessmentWorkspace.tsx | 8 ++++---- src/components/assessment/index.tsx | 6 +++--- src/styles/_assessment.scss | 9 +++++---- 3 files changed, 12 insertions(+), 11 deletions(-) diff --git a/src/components/assessment/assessmentWorkspace.tsx b/src/components/assessment/assessmentWorkspace.tsx index 6ee431f7c9..0370cc1c1e 100644 --- a/src/components/assessment/assessmentWorkspace.tsx +++ b/src/components/assessment/assessmentWorkspace.tsx @@ -62,18 +62,18 @@ class AssessmentWorkspace extends React.Component} /> ) } const overlay = ( - + {this.props.assessment.longSummary}