fix: Resolve prettier formatting error (#77)

cypress/integration/smokeTest.spec.js

@@ -1,7 +1,9 @@
 import {
+  formatCode,
   typeCode,
   assertFrameContains,
-  assertCodePaneContains
+  assertCodePaneContains,
+  assertCodePaneLineCount
 } from '../support/utils';
 
 describe('Smoke test', () => {
@@ -18,4 +20,13 @@ describe('Smoke test', () => {
     assertFrameContains('Foo');
     assertCodePaneContains('<Foo color="blue" />');
   });
+
+  it('formats', () => {
+    cy.visit(
+      'http://localhost:9000/#?code=PEZvbz48Rm9vPjxCYXIvPjwvRm9vPjwvRm9vPg'
+    ).reload();
+    assertCodePaneLineCount(1);
+    formatCode();
+    assertCodePaneLineCount(6);
+  });
 });

cypress/support/index.js

@@ -1,7 +1,9 @@
-beforeEach(async () => {
-  cy.visit('http://localhost:9000');
-
-  const win = await cy.window();
-  const { storageKey } = win.__playroomConfig__;
-  indexedDB.deleteDatabase(storageKey);
+beforeEach(() => {
+  cy.visit('http://localhost:9000')
+    .window()
+    .then(win => {
+      const { storageKey } = win.__playroomConfig__;
+      indexedDB.deleteDatabase(storageKey);
+    })
+    .visit('http://localhost:9000');
 });

cypress/support/utils.js

@@ -1,21 +1,35 @@
+const getCodeEditor = () => cy.get('.CodeMirror');
+
 export const typeCode = code =>
-  cy
-    .get('.CodeMirror')
+  getCodeEditor()
     .click()
     .focused()
     .clear({ force: true })
     .type(code, { force: true, delay: 100 })
     .wait(1000);
 
+export const formatCode = () =>
+  getCodeEditor()
+    .click()
+    .focused()
+    .type(`${navigator.platform.match('Mac') ? '{cmd}' : '{ctrl}'}s`)
+    .wait(1000);
+
 export const assertFrameContains = async text => {
   const iframe = await cy.get('iframe').first();
 
-  return iframe
+  iframe
     .contents()
     .find('body')
     .contains(text);
 };
 
-export const assertCodePaneContains = async text => {
-  return cy.get('.react-codemirror2').contains(text);
+export const assertCodePaneContains = text => {
+  getCodeEditor().contains(text);
+};
+
+export const assertCodePaneLineCount = lines => {
+  getCodeEditor().within(() =>
+    cy.get('.CodeMirror-line').should('have.length', lines)
+  );
 };

package.json

@@ -77,7 +77,7 @@
     "less": "^3.8.1",
     "less-loader": "^4.1.0",
     "localforage": "^1.7.2",
-    "lodash": "^4.17.11",
+    "lodash": "^4.17.15",
     "mini-css-extract-plugin": "^0.4.3",
     "opn": "^5.4.0",
     "parse-prop-types": "^0.3.0",

src/Playroom/Playroom.js

@@ -197,7 +197,7 @@ export default class Playroom extends Component {
 
       const { formattedCode, line, ch } = formatCode({
         code,
-        cursor: this.editorInstance.codeMirror.getCursor()
+        cursor: this.editorInstance.getCursor()
       });
 
       this.setState({ code: formattedCode });

yarn.lock

@@ -6322,6 +6322,11 @@ [email protected], lodash@^4.13.1, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.2
   version "4.17.11"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
 
+lodash@^4.17.15:
+  version "4.17.15"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
+  integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
+
 [email protected], log-symbols@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"