denkondratiev · denkondratiev · Jul 29, 2020 · Jul 30, 2020 · Jul 30, 2020
diff --git a/coverage-ts/assets/source-file.css b/coverage-ts/assets/source-file.css
@@ -0,0 +1,21 @@
+.uncovered {
+  background: rgba(235, 26, 26, 0.3);
+}
+.CodeMirror {
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  height: auto;
+}
+.TS-lineuncovered {
+  background: rgba(255, 255, 255, 0.3);
+  width: 24px;
+}
+/* NOTE: I have to increase the specificity because of semantic-ui */
+p.footer-text {
+  text-align: center;
+  margin: 3em 0;
+}
+.gutter-marker {
+  text-align: center;
+  font-size: 0.6em;
+}
diff --git a/coverage-ts/assets/source-file.js b/coverage-ts/assets/source-file.js
@@ -0,0 +1,40 @@
+"use strict";
+
+document.addEventListener("DOMContentLoaded", () => {
+  const myTextArea = document.getElementById("editor");
+  const codeMirrorInstance = CodeMirror.fromTextArea(myTextArea, {
+    readOnly: true,
+    lineNumbers: true,
+    lineWrapping: false,
+    mode: "text/typescript",
+    gutters: ["TS-lineuncovered", "CodeMirror-linenumbers"]
+  });
+  const annotations = JSON.parse(
+    document.getElementById("annotations").textContent
+  );
+  const gutters = {};
+
+  annotations.forEach((annotation) => {
+    gutters[annotation.line] = (gutters[annotation.line] || 0) + 1;
+    codeMirrorInstance.markText(
+      { line: annotation.line, ch: annotation.character },
+      {
+        line: annotation.line,
+        ch: annotation.character + annotation.text.length
+      },
+      {
+        className: "uncovered"
+      }
+    );
+  });
+
+  Object.entries(gutters).forEach(([line, count]) => {
+    const gutterMarker = document.createElement("div");
+
+    gutterMarker.textContent = count + "x";
+    gutterMarker.classList.add("gutter-marker");
+    gutterMarker.style.background = "rgba(255,0,0," + count * 0.2 + ")";
+
+    codeMirrorInstance.setGutterMarker(+line, "TS-lineuncovered", gutterMarker);
+  });
+});
diff --git a/coverage-ts/files/src/App.tsx.html b/coverage-ts/files/src/App.tsx.html
@@ -0,0 +1,33 @@
+
+  <!DOCTYPE html>
+  <html>
+    <head>
+      <title>App.tsx</title>
+      <link href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" type="text/css" rel="stylesheet">
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/codemirror.min.js" type="text/javascript" charset="utf-8"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/mode/javascript/javascript.min.js" type="text/javascript" charset="utf-8"></script>
+<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/codemirror.min.css" type="text/css" rel="stylesheet">
+<script src="..\..\assets\source-file.js" type="text/javascript" charset="utf-8"></script>
+<link href="..\..\assets\source-file.css" type="text/css" rel="stylesheet">
+    </head>
+    <body>
+    <div style="margin-top:3em" class="ui container"><h1 class="ui header"><a href="..\..\index.html">TypeScript coverage report</a></h1><table style="margin-top:2em" class="ui celled table"><thead class=""><tr class=""><th class="">Filename</th><th class="">Percent</th><th class="">Threshold</th><th class="">Total</th><th class="">Covered</th><th class="">Uncovered</th></tr></thead><tbody class=""><tr class="positive"><td class="">src\App.tsx</td><td class="">100.00%</td><td class="">80%</td><td class="">14</td><td class="">14</td><td class="">0</td></tr></tbody></table><textarea id="editor" readonly="" style="margin-top:3em">import React from &#x27;react&#x27;
+import Form from &#x27;./components/Form/Form&#x27;
+import Table from &#x27;./components/Table/Table&#x27;
+import Buttons from &#x27;./components/Buttons/Buttons&#x27;
+import &#x27;./App.css&#x27;
+
+const App: React.FC = () =&gt; (
+  &lt;div className=&quot;main&quot;&gt;
+    &lt;Form /&gt;
+    &lt;Buttons /&gt;
+    &lt;Table /&gt;
+  &lt;/div&gt;
+)
+
+export default App
+</textarea><pre id="annotations" style="display:none">[]</pre></div>
+    <p class="footer-text">TypeScript Coverage Report generated by <a href="https://github.com/plantain-00/type-coverage">type-coverage</a> and <a href="https://github.com/alexcanessa/typescript-coverage-report">typescript-coverage-report</a> at Thu, 30 Jul 2020 09:48:47 GMT</p>
+    </body>
+  </html>
+
diff --git a/coverage-ts/files/src/components/AverageRow/AverageRow.tsx.html b/coverage-ts/files/src/components/AverageRow/AverageRow.tsx.html
@@ -0,0 +1,36 @@
+
+  <!DOCTYPE html>
+  <html>
+    <head>
+      <title>AverageRow.tsx</title>
+      <link href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" type="text/css" rel="stylesheet">
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/codemirror.min.js" type="text/javascript" charset="utf-8"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/mode/javascript/javascript.min.js" type="text/javascript" charset="utf-8"></script>
+<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/codemirror.min.css" type="text/css" rel="stylesheet">
+<script src="..\..\..\..\assets\source-file.js" type="text/javascript" charset="utf-8"></script>
+<link href="..\..\..\..\assets\source-file.css" type="text/css" rel="stylesheet">
+    </head>
+    <body>
+    <div style="margin-top:3em" class="ui container"><h1 class="ui header"><a href="..\..\..\..\index.html">TypeScript coverage report</a></h1><table style="margin-top:2em" class="ui celled table"><thead class=""><tr class=""><th class="">Filename</th><th class="">Percent</th><th class="">Threshold</th><th class="">Total</th><th class="">Covered</th><th class="">Uncovered</th></tr></thead><tbody class=""><tr class="positive"><td class="">src\components\AverageRow\AverageRow.tsx</td><td class="">100.00%</td><td class="">80%</td><td class="">23</td><td class="">23</td><td class="">0</td></tr></tbody></table><textarea id="editor" readonly="" style="margin-top:3em">import React from &#x27;react&#x27;
+import { getAverageRowSum } from &#x27;../../helpers/selectors&#x27;
+import { useSelector } from &#x27;react-redux&#x27;
+
+const AverageRow: React.FC = () =&gt; {
+  const averageArray = useSelector(getAverageRowSum)
+
+  return (
+    &lt;&gt;
+      {&lt;tr&gt;{averageArray.map((item, index) =&gt; (
+        &lt;td key={index}&gt;Average sum: {item}&lt;/td&gt;
+      ))}
+      &lt;/tr&gt;}
+    &lt;/&gt;
+  )
+}
+
+export default React.memo(AverageRow)
+</textarea><pre id="annotations" style="display:none">[]</pre></div>
+    <p class="footer-text">TypeScript Coverage Report generated by <a href="https://github.com/plantain-00/type-coverage">type-coverage</a> and <a href="https://github.com/alexcanessa/typescript-coverage-report">typescript-coverage-report</a> at Thu, 30 Jul 2020 09:48:47 GMT</p>
+    </body>
+  </html>
+
diff --git a/coverage-ts/files/src/components/ButtonAdd/ButtonAdd.tsx.html b/coverage-ts/files/src/components/ButtonAdd/ButtonAdd.tsx.html
@@ -0,0 +1,35 @@
+
+  <!DOCTYPE html>
+  <html>
+    <head>
+      <title>ButtonAdd.tsx</title>
+      <link href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" type="text/css" rel="stylesheet">
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/codemirror.min.js" type="text/javascript" charset="utf-8"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/mode/javascript/javascript.min.js" type="text/javascript" charset="utf-8"></script>
+<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/codemirror.min.css" type="text/css" rel="stylesheet">
+<script src="..\..\..\..\assets\source-file.js" type="text/javascript" charset="utf-8"></script>
+<link href="..\..\..\..\assets\source-file.css" type="text/css" rel="stylesheet">
+    </head>
+    <body>
+    <div style="margin-top:3em" class="ui container"><h1 class="ui header"><a href="..\..\..\..\index.html">TypeScript coverage report</a></h1><table style="margin-top:2em" class="ui celled table"><thead class=""><tr class=""><th class="">Filename</th><th class="">Percent</th><th class="">Threshold</th><th class="">Total</th><th class="">Covered</th><th class="">Uncovered</th></tr></thead><tbody class=""><tr class="positive"><td class="">src\components\ButtonAdd\ButtonAdd.tsx</td><td class="">100.00%</td><td class="">80%</td><td class="">14</td><td class="">14</td><td class="">0</td></tr></tbody></table><textarea id="editor" readonly="" style="margin-top:3em">import React from &#x27;react&#x27;
+
+interface Props {
+  addRow: () =&gt; void
+}
+
+export const ButtonAdd: React.FC&lt;Props&gt; = ({ addRow }) =&gt; {
+  return (
+    &lt;button
+      type=&quot;button&quot;
+      className=&quot;btn btn-dark&quot;
+      onClick={addRow}
+    &gt;
+      Add row +
+    &lt;/button&gt;
+  )
+}
+</textarea><pre id="annotations" style="display:none">[]</pre></div>
+    <p class="footer-text">TypeScript Coverage Report generated by <a href="https://github.com/plantain-00/type-coverage">type-coverage</a> and <a href="https://github.com/alexcanessa/typescript-coverage-report">typescript-coverage-report</a> at Thu, 30 Jul 2020 09:48:47 GMT</p>
+    </body>
+  </html>
+
diff --git a/coverage-ts/files/src/components/ButtonDelete/ButtonDelete.tsx.html b/coverage-ts/files/src/components/ButtonDelete/ButtonDelete.tsx.html
@@ -0,0 +1,37 @@
+
+  <!DOCTYPE html>
+  <html>
+    <head>
+      <title>ButtonDelete.tsx</title>
+      <link href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" type="text/css" rel="stylesheet">
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/codemirror.min.js" type="text/javascript" charset="utf-8"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/mode/javascript/javascript.min.js" type="text/javascript" charset="utf-8"></script>
+<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/codemirror.min.css" type="text/css" rel="stylesheet">
+<script src="..\..\..\..\assets\source-file.js" type="text/javascript" charset="utf-8"></script>
+<link href="..\..\..\..\assets\source-file.css" type="text/css" rel="stylesheet">
+    </head>
+    <body>
+    <div style="margin-top:3em" class="ui container"><h1 class="ui header"><a href="..\..\..\..\index.html">TypeScript coverage report</a></h1><table style="margin-top:2em" class="ui celled table"><thead class=""><tr class=""><th class="">Filename</th><th class="">Percent</th><th class="">Threshold</th><th class="">Total</th><th class="">Covered</th><th class="">Uncovered</th></tr></thead><tbody class=""><tr class="positive"><td class="">src\components\ButtonDelete\ButtonDelete.tsx</td><td class="">100.00%</td><td class="">80%</td><td class="">16</td><td class="">16</td><td class="">0</td></tr></tbody></table><textarea id="editor" readonly="" style="margin-top:3em">import React from &#x27;react&#x27;
+
+interface Props {
+  deleteRow: () =&gt; void
+}
+
+export const ButtonDelete: React.FC&lt;Props&gt; = (props) =&gt; {
+  const { deleteRow } = props
+
+  return (
+    &lt;button
+      type=&quot;button&quot;
+      className=&quot;btn btn-dark&quot;
+      onClick={deleteRow}
+    &gt;
+      Delete row -
+    &lt;/button&gt;
+  )
+}
+</textarea><pre id="annotations" style="display:none">[]</pre></div>
+    <p class="footer-text">TypeScript Coverage Report generated by <a href="https://github.com/plantain-00/type-coverage">type-coverage</a> and <a href="https://github.com/alexcanessa/typescript-coverage-report">typescript-coverage-report</a> at Thu, 30 Jul 2020 09:48:47 GMT</p>
+    </body>
+  </html>
+
diff --git a/coverage-ts/files/src/components/Buttons/Buttons.tsx.html b/coverage-ts/files/src/components/Buttons/Buttons.tsx.html
@@ -0,0 +1,60 @@
+
+  <!DOCTYPE html>
+  <html>
+    <head>
+      <title>Buttons.tsx</title>
+      <link href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" type="text/css" rel="stylesheet">
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/codemirror.min.js" type="text/javascript" charset="utf-8"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/mode/javascript/javascript.min.js" type="text/javascript" charset="utf-8"></script>
+<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/codemirror.min.css" type="text/css" rel="stylesheet">
+<script src="..\..\..\..\assets\source-file.js" type="text/javascript" charset="utf-8"></script>
+<link href="..\..\..\..\assets\source-file.css" type="text/css" rel="stylesheet">
+    </head>
+    <body>
+    <div style="margin-top:3em" class="ui container"><h1 class="ui header"><a href="..\..\..\..\index.html">TypeScript coverage report</a></h1><table style="margin-top:2em" class="ui celled table"><thead class=""><tr class=""><th class="">Filename</th><th class="">Percent</th><th class="">Threshold</th><th class="">Total</th><th class="">Covered</th><th class="">Uncovered</th></tr></thead><tbody class=""><tr class="positive"><td class="">src\components\Buttons\Buttons.tsx</td><td class="">100.00%</td><td class="">80%</td><td class="">56</td><td class="">56</td><td class="">0</td></tr></tbody></table><textarea id="editor" readonly="" style="margin-top:3em">import React from &#x27;react&#x27;
+import { generateTable } from &#x27;../../helpers/generate&#x27;
+import { ButtonDelete } from &#x27;../ButtonDelete/ButtonDelete&#x27;
+import { ButtonAdd } from &#x27;../ButtonAdd/ButtonAdd&#x27;
+import { getColumnsAmount, getTable, getShowButtons } from &#x27;../../helpers/selectors&#x27;
+import &#x27;./Buttons.css&#x27;
+import { setNewRow, removeRow } from &#x27;../../store/actions&#x27;
+import { useDispatch, useSelector } from &#x27;react-redux&#x27;
+
+const Buttons: React.FC = () =&gt; {
+
+  const dispatch = useDispatch()
+
+  const columnsAmount = useSelector(getColumnsAmount)
+  const showButtons = useSelector(getShowButtons)
+  const table = useSelector(getTable)
+
+  const addRow = (): void =&gt; {
+    const { table, rows, cells } = generateTable(1, columnsAmount)
+
+    dispatch(setNewRow({ table, rows, cells}))
+  }
+
+  const deleteRow = (): void =&gt; {
+    const lastRowKey = table[table.length - 1]
+
+    dispatch(removeRow({ lastRowKey, columnsAmount }))
+  }
+
+  return (
+    &lt;&gt;
+      {showButtons &amp;&amp; (
+        &lt;div className=&quot;buttons&quot;&gt;
+          &lt;ButtonDelete deleteRow={deleteRow} /&gt;
+          &lt;ButtonAdd addRow={addRow} /&gt;
+        &lt;/div&gt;
+      )}
+    &lt;/&gt;
+  )
+}
+
+export default Buttons
+</textarea><pre id="annotations" style="display:none">[]</pre></div>
+    <p class="footer-text">TypeScript Coverage Report generated by <a href="https://github.com/plantain-00/type-coverage">type-coverage</a> and <a href="https://github.com/alexcanessa/typescript-coverage-report">typescript-coverage-report</a> at Thu, 30 Jul 2020 09:48:47 GMT</p>
+    </body>
+  </html>
+