fix(updates): updated snapshots and check for rubric entries

Author: millcour

src/Rubric/RubricModels.ts

@@ -37,3 +37,9 @@ export interface SmarterAppOptionModel {
   language: string;
   answer: string;
 }
+
+export interface RubricTableRowModel {
+  score: string;
+  rationale: string;
+  sample: string;
+}

src/Rubric/RubricTable.tsx

@@ -1,29 +1,32 @@
 import * as React from "react";
-import { RubricModel } from "./RubricModels";
+import { RubricModel, RubricTableRowModel } from "./RubricModels";
 
 export interface RubricTableProps {
   rubrics: RubricModel[];
 }
 
 export class RubricTable extends React.Component<RubricTableProps, {}> {
   renderRubric(rubric: RubricModel, index: number) {
-    const rows = rubric.rubricEntries.map(entry => {
-      const sample = rubric.samples.find(
-        s =>
-          s.sampleResponses &&
-          s.sampleResponses[0] &&
-          s.sampleResponses[0].scorePoint === entry.scorepoint
-      );
-      const sampleHtml = sample
-        ? sample.sampleResponses.map(sr => sr.sampleContent).join("<br/>")
-        : "";
+    let rows: RubricTableRowModel[] = [];
+    if (rubric.rubricEntries && rubric.rubricEntries.length > 0) {
+      rows = rubric.rubricEntries.map(entry => {
+        const sample = rubric.samples.find(
+          s =>
+            s.sampleResponses &&
+            s.sampleResponses[0] &&
+            s.sampleResponses[0].scorePoint === entry.scorepoint
+        );
+        const sampleHtml = sample
+          ? sample.sampleResponses.map(sr => sr.sampleContent).join("<br/>")
+          : "";
 
-      return {
-        score: entry.scorepoint,
-        rationale: entry.value,
-        sample: sampleHtml
-      };
-    });
+        return {
+          score: entry.scorepoint,
+          rationale: entry.value,
+          sample: sampleHtml
+        };
+      });
+    }
 
     const showSample = rubric.samples.length !== 0;
 
@@ -34,8 +37,11 @@ export class RubricTable extends React.Component<RubricTableProps, {}> {
     // tslint:disable:react-no-dangerous-html
     const rowsJsx = rows.map((row, i) => (
       <tr key={i}>
-        <td dangerouslySetInnerHTML={{ __html: row.rationale }} />
-        <td dangerouslySetInnerHTML={{ __html: row.score }} style={leftAlign} />
+        <td>{row.score}</td>
+        <td
+          dangerouslySetInnerHTML={{ __html: row.rationale }}
+          style={leftAlign}
+        />
         {showSample ? (
           <td
             dangerouslySetInnerHTML={{ __html: row.sample }}

stories/Rubric/RubricModal.storybook.tsx

@@ -11,8 +11,7 @@ const rubricModalMockProps: RubricModalProps = {
       language: "English",
       rubricEntries: [
         {
-          scorepoint:
-            '<p style=""><span style="font-weight:bold; ">Exemplar</span>: <img id="item_3200_Object3" style="vertical-align:middle;" src="item_3200_v0_Object3_png16malpha.png" width="23" height="36" /> or &#xA0;3<img id="item_3200_Object4" style="vertical-align:middle;" src="item_3200_v0_Object4_png16malpha.png" width="12" height="35" /></p><p style="">&#xA0;</p><p style="">For this item, a full-credit response includes:</p><p style="">&#xA0;</p><p style=""><span style="font-weight:bold; ">1 point</span>: correct response of 32/9 or 3 5/9.</p>',
+          scorepoint: "0",
           name: "\n        Rubric 2",
           value:
             '<p style="text-decoration:underline; font-weight:bold; ">3 point text </p><p style="">&#xA0;</p><p style="">The student determines that Emily can make it to school on time at her current rate of speed and includes a valid explanation containing a full chain of reasoning that supports this conclusion. The student may make minor computation errors that do not affect the reasonableness of the explanation. </p><p style="">&#xA0;</p><p style="">&#xA0;</p><p style="text-decoration:underline; font-weight:bold; ">2 point text </p><p style="text-decoration:underline; font-weight:bold; ">&#xA0;</p><p style="">The student determines that Emily can make it to school on time at her current rate of speed and includes a valid explanation containing an incomplete chain of reasoning that supports this conclusion. (An incomplete chain of reasoning can be defined by missing process steps or unsupported calculations in an otherwise complete chain of reasoning.) </p><p style="">OR </p><p style="">The student determines that Emily can make it to school on time at her current rate of speed and includes a valid explanation containing a full chain of reasoning that supports this conclusion, but makes computation errors that affect the reasonableness of the explanation. </p>'

stories/Rubric/RubricTable.storybook.tsx

@@ -9,22 +9,22 @@ const rubricTableMockProps: RubricTableProps = {
       language: "English",
       rubricEntries: [
         {
-          scorepoint:
-            '<p style=""><span style="font-weight:bold; ">Exemplar</span>: <img id="item_3200_Object3" style="vertical-align:middle;" src="item_3200_v0_Object3_png16malpha.png" width="23" height="36" /> or &#xA0;3<img id="item_3200_Object4" style="vertical-align:middle;" src="item_3200_v0_Object4_png16malpha.png" width="12" height="35" /></p><p style="">&#xA0;</p><p style="">For this item, a full-credit response includes:</p><p style="">&#xA0;</p><p style=""><span style="font-weight:bold; ">1 point</span>: correct response of 32/9 or 3 5/9.</p>',
+          scorepoint: "0",
           name: "\n        Rubric 2",
-          value: "0"
+          value:
+            '<p style="text-decoration:underline; font-weight:bold; ">3 point text </p><p style="">&#xA0;</p><p style="">The student determines that Emily can make it to school on time at her current rate of speed and includes a valid explanation containing a full chain of reasoning that supports this conclusion. The student may make minor computation errors that do not affect the reasonableness of the explanation. </p><p style="">&#xA0;</p><p style="">&#xA0;</p><p style="text-decoration:underline; font-weight:bold; ">2 point text </p><p style="text-decoration:underline; font-weight:bold; ">&#xA0;</p><p style="">The student determines that Emily can make it to school on time at her current rate of speed and includes a valid explanation containing an incomplete chain of reasoning that supports this conclusion. (An incomplete chain of reasoning can be defined by missing process steps or unsupported calculations in an otherwise complete chain of reasoning.) </p><p style="">OR </p><p style="">The student determines that Emily can make it to school on time at her current rate of speed and includes a valid explanation containing a full chain of reasoning that supports this conclusion, but makes computation errors that affect the reasonableness of the explanation. </p>'
         },
         {
-          scorepoint:
-            '<p style="">The student completes the task and reaches a conclusion. The student\'s explanation attempts to relate distance to time, but contains errors in fundamental mathematical procedures. </p><p style="">&#xA0;</p>',
+          scorepoint: "1",
           name: "\n        Rubric 1",
-          value: "1"
+          value:
+            '<p style="">The student completes the task and reaches a conclusion. The student\'s explanation attempts to relate distance to time, but contains errors in fundamental mathematical procedures. </p><p style="">&#xA0;</p>'
         },
         {
-          scorepoint:
-            '<p style="">The student demonstrates a lack of comprehension in regard to the mathematical content and practices essential to the task. </p>',
+          scorepoint: "0",
           name: "\n        Rubric 0",
-          value: "2"
+          value:
+            '<p style="">The student demonstrates a lack of comprehension in regard to the mathematical content and practices essential to the task. </p>'
         }
       ],
       samples: [

stories/Rubric/__snapshots__/RubricModal.storybook.storyshot

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Rubric Modal with rubric modal 1`] = `
+<div>
+  <button
+    aria-label="Open Rubric Modal"
+    className="item-nav-btn btn btn-default btn-sm rubric-btn"
+    onClick={[Function]}
+    role="button"
+    tabIndex={0}
+  >
+    <span
+      aria-hidden="true"
+      className="fa fa-check-circle-o"
+    />
+    Rubric
+  </button>
+</div>
+`;

stories/Rubric/__snapshots__/RubricTable.storybook.storyshot

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots RubricTable with a rubric table 1`] = `
+exports[`Storyshots Rubric Table with a rubric table 1`] = `
 <div>
   <table
     className="item-data-table"
@@ -21,7 +21,7 @@ exports[`Storyshots RubricTable with a rubric table 1`] = `
     <tbody>
       <tr>
         <td>
-          2
+          0
         </td>
         <td
           dangerouslySetInnerHTML={
@@ -38,7 +38,7 @@ exports[`Storyshots RubricTable with a rubric table 1`] = `
         <td
           dangerouslySetInnerHTML={
             Object {
-              "__html": "<p style=\\"\\"><span style=\\"text-decoration:underline; font-weight:bold; \\">Sample 1: </span>&#xA0;</p><p style=\\"\\">Emily can travel 3/4 mile in under 5 minutes, so she can travel 3 miles (4x as far) in under 20 minutes (4x as long.) This means that Emily will have traveled 3 miles before 8:45 (20 minutes after she left.) Then there is only .42 miles left to go, and since .42 miles is less than 3/4 mile, we know she can cover that distance in less than 5 minutes. That means she will get to school before 8:50, so she will be on time. </p><p style=\\"\\">&#xA0;</p><p style=\\"\\"><span style=\\"text-decoration:underline; font-weight:bold; \\">Sample 2:</span> &#xA0;</p><p style=\\"\\">Emily travels 3/4 mile in 4.5 minutes, so to find her rate of travel we would divide time by distance and get (4.5) / (.75) = 6 minutes per mile. Multiply 6 minutes per mile times the distance she has to travel (3.42 miles) to find the time it would take for her to get to school (20.52.) Since 20.52 is less than 21 minutes, we know it will take her less than 21 minutes to get to school. 8:25 + 21 minutes is 8:46, which is before 8:50, so she will make it to school on time. </p>",
+              "__html": "",
             }
           }
           style={