Merge pull request #94 from magjac/fix-missing-DoYouWantToDeleteDialo…

…g.js

Fix missing do you want to delete dialog.js

.circleci/config.yml

@@ -7,7 +7,7 @@ jobs:
   build:
     docker:
       # specify the version you desire here
-      - image: circleci/node:7.10
+      - image: circleci/node:8.12
 
       # Specify service dependencies here if necessary
       # CircleCI maintains a library of pre-built images

package.json

@@ -51,9 +51,11 @@
   },
   "homepage": ".",
   "devDependencies": {
+    "@harrison-ifeanyichukwu/xml-serializer": "^1.2.0",
     "codecov": "^3.1.0",
     "enzyme": "^3.6.0",
     "enzyme-adapter-react-16": "^1.5.0",
+    "jest-localstorage-mock": "^2.2.0",
     "markdown-to-html": "0.0.13",
     "pegjs": "^0.9.0",
     "react-test-renderer": "^16.5.2"

src/DoYouWantToDeleteDialog.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import withRoot from './withRoot';
+import CloseIcon from '@material-ui/icons/Close';
+import IconButton from '@material-ui/core/IconButton';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import DialogActions from '@material-ui/core/DialogActions';
+
+const styles = theme => ({
+  title: {
+    display: 'flex',
+    justifyContent: 'space-between',
+  },
+  content: {
+    overflowY: 'visible',
+  },
+});
+
+class DoYouWantToDeleteDialog extends React.Component {
+
+  handleClose = () => {
+    this.props.onClose();
+  };
+
+  handleChange = (event) => {
+    this.name = event.target.value;
+  };
+
+  handleDelete = (event) => {
+    const askForConfirmationIfExist = false;
+    this.props.onDelete(this.props.name, askForConfirmationIfExist);
+  };
+
+  render() {
+    const { classes } = this.props;
+    return (
+      <div>
+        <Dialog
+          className={classes.root}
+          open
+          onClose={this.handleClose}
+          aria-labelledby="form-dialog-title"
+        >
+          <div className={classes.title}>
+            <DialogTitle id="form-dialog-title">Delete {this.props.name}?</DialogTitle>
+            <IconButton
+              aria-label="Close"
+              onClick={this.handleClose}
+            >
+              <CloseIcon />
+            </IconButton>
+          </div>
+          <DialogContent classes={{root: classes.content}}>
+            <DialogContentText>
+              Do you want to delete <b>{this.props.name}</b> from the browser&apos;s local storage?
+            </DialogContentText>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={this.props.onClose} color="secondary">
+              Cancel
+            </Button>
+            <Button onClick={this.handleDelete} color="secondary">
+              Delete
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </div>
+    );
+  }
+}
+
+DoYouWantToDeleteDialog.propTypes = {
+  classes: PropTypes.object.isRequired,
+  name: PropTypes.string.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onDelete: PropTypes.func.isRequired,
+};
+
+export default withRoot(withStyles(styles)(DoYouWantToDeleteDialog));

src/pages/index.test.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { createMount } from '@material-ui/core/test-utils';
+import Index from './index';
+import polyfillSVGElement from '../test-utils/polyfillSVGElement';
+import polyfillXMLSerializer from '../test-utils/polyfillXMLSerializer';
+
+describe('<Index />', () => {
+
+  polyfillSVGElement();
+  polyfillXMLSerializer();
+
+  let mount;
+
+  beforeAll(() => {
+    mount = createMount();
+  });
+
+  afterAll(() => {
+    mount.cleanUp();
+  });
+
+  it('mounts', () => {
+    const wrapper = mount(<Index />);
+  });
+
+  it('state has default DOT source after mount', () => {
+    const wrapper = mount(<Index />);
+    const indexWrapper = wrapper.find('Index');
+    const index = indexWrapper.instance();
+    const expectedDotSrc = 'strict digraph {\n    a [shape="ellipse" style="filled" fillcolor="#1f77b4"]\n    b [shape="polygon" style="filled" fillcolor="#ff7f0e"]\n    a -> b [fillcolor="#a6cee3" color="#1f78b4"]\n}';
+    const actualDotSrc = index.state.dotSrc;
+    expect(actualDotSrc).toEqual(expectedDotSrc);
+  });
+
+  it('receives updated DOT source', () => {
+    const wrapper = mount(<Index />);
+    const indexWrapper = wrapper.find('Index');
+    const index = indexWrapper.instance();
+    const expectedDotSrc = 'digraph {a -> b}';
+    index.setState({dotSrc: expectedDotSrc});
+    const actualDotSrc = index.state.dotSrc;
+    expect(actualDotSrc).toEqual(expectedDotSrc);
+  });
+
+});

src/setupTests.js

@@ -2,3 +2,5 @@ import { configure } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 
 configure({ adapter: new Adapter() });
+
+require('jest-localstorage-mock');

src/test-utils/polyfillSVGElement.js

@@ -0,0 +1,139 @@
+export default function polyfillSVGElement() {
+
+  window.SVGElement.prototype.getPointAtLength = function (distance) {
+      if (this.nodeName != 'path') {
+          throw 'jsdom.js: getPointAtLength: unexpected element ' + this.nodeName;
+      }
+      return {
+          x: distance * 100.0,
+          y: distance * 100.0,
+      }
+  }
+  window.SVGElement.prototype.getTotalLength = function () {
+      if (this.nodeName != 'path') {
+          throw 'jsdom.js: getTotalLength: unexpected element ' + this.nodeName;
+      }
+      return 100.0;
+  }
+  window.SVGElement.prototype.getBBox = function () {
+
+      if (this.getAttribute('points')) {
+          var points = this.getAttribute('points').split(' ');
+          var x = points.map(function(p) {return +p.split(',')[0]});
+          var y = points.map(function(p) {return +p.split(',')[1]});
+          var xmin = Math.min.apply(null, x);
+          var xmax = Math.max.apply(null, x);
+          var ymin = Math.min.apply(null, y);
+          var ymax = Math.max.apply(null, y);
+      } else if (this.getAttribute('cx')) {
+          var cx = +this.getAttribute('cx');
+          var cy = +this.getAttribute('cy');
+          var rx = +this.getAttribute('rx');
+          var ry = +this.getAttribute('ry');
+          var xmin = cx - rx;
+          var xmax = cx + rx;
+          var ymin = cy - ry;
+          var ymax = cy + ry;
+      } else if (this.getAttribute('x')) {
+          var x = +this.getAttribute('x');
+          var y = +this.getAttribute('y');
+          var xmin = x;
+          var xmax = x + 0;
+          var ymin = y;
+          var ymax = y + 0;
+      } else if (this.getAttribute('d')) {
+          var d = this.getAttribute('d');
+          var points = d.split(/[A-Z ]/);
+          points.shift();
+          var x = points.map(function(p) {return +p.split(',')[0]});
+          var y = points.map(function(p) {return +p.split(',')[1]});
+          var xmin = Math.min.apply(null, x);
+          var xmax = Math.max.apply(null, x);
+          var ymin = Math.min.apply(null, y);
+          var ymax = Math.max.apply(null, y);
+      } else if (this.nodeName === 'g' && this.attributes[0].name === 'id' && this.attributes[0].value === 'graph0') {
+          const polygon = this.querySelector('polygon');
+          var x = +polygon.getAttribute('x');
+          var y = +polygon.getAttribute('y');
+          var xmin = x;
+          var xmax = x + 0;
+          var ymin = y;
+          var ymax = y + 0;
+      } else {
+          throw "WTF!" + this;
+      }
+      var bbox = {
+          x: xmin,
+          y: ymin,
+          width: xmax - xmin,
+          height: ymax - ymin,
+      };
+      return bbox;
+  }
+  if (!('width' in window.SVGElement.prototype)) {
+      Object.defineProperty(window.SVGElement.prototype, 'width', {
+          get: function() {
+              return {
+                  baseVal: {
+                          value: +this.getAttribute('width').replace('pt', ''),
+                  }
+              };
+          }
+      });
+  }
+  if (!('height' in window.SVGElement.prototype)) {
+      Object.defineProperty(window.SVGElement.prototype, 'height', {
+          get: function() {
+              return {
+                  baseVal: {
+                      value: +this.getAttribute('height').replace('pt', ''),
+                  }
+              };
+          }
+      });
+  }
+  if (!('transform' in window.SVGElement.prototype)) {
+      Object.defineProperty(window.SVGElement.prototype, 'transform', {
+          get: function() {
+              if (this.getAttribute('transform')) {
+                  var translate = this.getAttribute('transform').replace(/.*translate\((-*[\d.]+[ ,]+-*[\d.]+)\).*/, function(match, xy) {
+                      return xy;
+                  }).split(/[ ,]+/).map(function(v) {
+                      return +v;
+                  });
+                  var scale = this.getAttribute('transform').replace(/.*.*scale\((-*[\d.]+[ ,]*-*[\d.]*)\).*/, function(match, scale) {
+                      return scale;
+                  }).split(/[ ,]+/).map(function(v) {
+                      return +v;
+                  });
+                  return {
+                      baseVal: {
+                          numberOfItems: 1,
+                          consolidate: function() {
+                              return {
+                                  matrix: {
+                                      'a': scale[0],
+                                      'b': 0,
+                                      'c': 0,
+                                      'd': scale[1] || scale[0],
+                                      'e': translate[0],
+                                      'f': translate[1],
+                                  }
+                              };
+                          },
+                      },
+                  };
+              } else {
+                  return {
+                      baseVal: {
+                          numberOfItems: 0,
+                          consolidate: function() {
+                              return null;
+                          },
+                      },
+                  };
+              }
+          },
+      });
+  }
+}

src/test-utils/polyfillXMLSerializer.js

@@ -0,0 +1,5 @@
+import XMLSerializer from '@harrison-ifeanyichukwu/xml-serializer';
+
+export default function polyfillXMLSerializer() {
+  window.XMLSerializer = XMLSerializer;
+}