Added Ids to help automated testing

client/src/components/EditQuestionComponent.tsx

@@ -38,7 +38,7 @@ export const EditQuestionComponent = (
     const createOptions = (): ICheckboxProps[] => {
         const createOneOption = (optionId: number): ICheckboxProps => {
             return {
-                id: optionId.toString(),
+                id: `check-box-${optionId.toString()}`,
                 onRenderLabel: (props, render) => {
                     return (
                         <div className={optionRootClass}>
@@ -107,7 +107,7 @@ export const EditQuestionComponent = (
                 <Label style={{ textAlign: "left" }}>Options</Label>
             </Col>
             <Col md={6}>
-                {createOptions().map((value:ICheckboxProps , index: number) =>  <Checkbox {...value}/>)}
+                {createOptions().map((value:ICheckboxProps , index: number) =>  <Checkbox {...value} id={'checkbox'+ index.toString()}/>)}
             </Col>
         </Row><br /><Row>
                 <Col md={2} />
@@ -129,7 +129,8 @@ export const EditQuestionComponent = (
             </Col>
             <Col md={6}>
                 <ChoiceGroup
-                    options={[{key:'0', text:'True'}, {key:'1', text:'False'}]}
+                    id={"tf"}
+                    options={[{key:'0', text:'True'}, { key:'1', text:'False'}]}
                     required={true}
                     selectedKey={`${question.answer}`} 
                     onChange={updateCorrectAnswer}/>
@@ -221,15 +222,16 @@ export const EditQuestionComponent = (
             </Row>
             <br/>
             <Row>
-                <Col md={2}>
+                {/* <Col md={2}>
                     <Label style={{textAlign: "left"}}>Question format</Label>
                 </Col>
                 <Col md = {6}>
                     <Dropdown 
+                        id="question-format"
                         defaultSelectedKey={question.textType}
                         options={[{text:"Text", key: 'text'}, {text:"HTML", key:'html'}]}  
                         onChange={(_, key)=> setQuestion({...question, textType:key?.key})} />
-                </Col>
+                </Col> */}
             </Row>
             <br/>
             <Row>
@@ -238,8 +240,9 @@ export const EditQuestionComponent = (
                 </Col>
                 <Col md={6}>
                 <Dropdown 
+                        id="question-type-drop-down"
                         defaultSelectedKey={question.questionType}
-                        options={[{text:"Multiple Choice", key: 'MCQ'}, {text:"True/False", key:'TF'}, {text:"Question/Answer", key:'QA'}]}  
+                        options={[{text:"Multiple Choice", key: 'MCQ', id:"1"}, {text:"True/False", key:'TF', id:"2"}, {text:"Question/Answer", key:'QA', id:"3"}]}  
                         onChange={(_, key)=> setQuestion({...question, questionType: key?.key.toString() || '', answer:[], options:[]})} />
                 </Col>
             </Row>

client/src/components/UploadQuestionBanksComponent.tsx

@@ -100,10 +100,10 @@ export const UploadQuestionBanksComponent = (
 
     const dropdownRef = React.createRef<IDropdown>();
     const uploadOptions = [
-        { key: 'A', text: 'Assessment App JSON'},
-        { key: 'B', text: 'Microsoft Open Source Curriculum JSON ' },
-        { key: 'C', text: 'GIFT Export'},
-        { key: 'D', text: 'QTI Export' },
+        { key: 'A', text: 'Assessment App JSON', id:"Assessment App Json"},
+        { key: 'B', text: 'Microsoft Open Source Curriculum JSON ', id:"Microsoft Open Source Curriculum JSON" },
+        { key: 'C', text: 'GIFT Export', id:"GIFT Export"},
+        { key: 'D', text: 'QTI Export', id:"QTI Export" },
     ];
 
     return(
@@ -116,6 +116,7 @@ export const UploadQuestionBanksComponent = (
              <Dropdown
                 placeholder="Choose import format"
                 ariaLabel="Required dropdown example"
+                id="upload format"
                 options={uploadOptions}
                 required={true}
                 styles={dropdownStyles}
@@ -131,7 +132,7 @@ export const UploadQuestionBanksComponent = (
                 {inProgress && <Spinner
                     label="Uploading..."
                 />}
-                <PrimaryButton text="Upload" disabled={selectedFile === null} onClick={doUpload}/>
+                <PrimaryButton id = "final-upload" text="Upload" disabled={selectedFile === null} onClick={doUpload} className="Upload"/>
                 <DefaultButton text="Cancel" onClick={() => onFinish(false)}/>
             </DialogFooter>
         </Dialog>

client/src/pages/home/HomePage.tsx

@@ -275,6 +275,7 @@ export const HomePage = () => {
         {
             key: 'upload',
             text: 'Upload',
+            className: 'upload-button',
             iconProps: { iconName: 'Upload' },
             onClick: () => {
                 setShowUploadSuccessMsg(false);
@@ -321,6 +322,7 @@ export const HomePage = () => {
                     messageBarType={MessageBarType.success}
                     onDismiss={() => setShowUploadSuccessMsg(false)}
                     isMultiline={false}
+                    className="successMsg"
                 >
                     Question Banks were uploaded successfully!
                 </MessageBar>}