added cypress testing

.gitignore

@@ -0,0 +1 @@
+node_modules

cypress.json

@@ -0,0 +1 @@
+{}

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/integration/dist/test.spec.dev.js

@@ -0,0 +1,119 @@
+"use strict";
+
+// Cypress Testing
+// Test all basic operations
+// single digit: +/-/*/÷
+// double digit: +/-
+// Test more complex operations
+// chaining together operations
+// e.g. 2 + 2 * 5 - 1 + 27 / 3
+describe('My First Test', function () {
+  it('Does not do much!', function () {
+    expect(true).to.equal(true);
+  });
+});
+describe('Basic operations', function () {
+  it('should calculate 1 + 1 and return 2', function () {
+    //Arrange 
+    cy.visit("http://127.0.0.1:5500/index.html");
+    cy.get('[data-cy=one]').click();
+    cy.get('[data-cy=add]').click();
+    cy.get('[data-cy=one]').click();
+    cy.get('[data-cy=equals]').click(); // Assert 
+
+    cy.get('[data-cy=screenOutput]').should("have.value", '2');
+  });
+  it('should calculate 250-50 and returns 200', function () {
+    //Arrange 
+    cy.visit("http://127.0.0.1:5500/index.html");
+    cy.get('[data-cy=two]').click();
+    cy.get('[data-cy=five]').click();
+    cy.get('[data-cy=zero]').click();
+    cy.get('[data-cy=subtract]').click();
+    cy.get('[data-cy=five]').click();
+    cy.get('[data-cy=zero]').click();
+    cy.get('[data-cy=equals]').click(); // Assert 
+
+    cy.get('[data-cy=screenOutput]').should("have.value", '200');
+  });
+  it('should calculate 50 ÷ 5 and return 10', function () {
+    // Arrange 
+    cy.visit("http://127.0.0.1:5500/index.html");
+    cy.get('[data-cy=five]').click();
+    cy.get('[data-cy=zero]').click();
+    cy.get('[data-cy=divide]').click();
+    cy.get('[data-cy=five]').click();
+    cy.get('[data-cy=equals]').click(); // Assert 
+
+    cy.get('[data-cy=screenOutput]').should("have.value", '10');
+  });
+  it('should calculate 8 * 5 and return 40', function () {
+    // Arrange 
+    cy.visit("http://127.0.0.1:5500/index.html");
+    cy.get('[data-cy=eight]').click();
+    cy.get('[data-cy=multiply]').click();
+    cy.get('[data-cy=five]').click();
+    cy.get('[data-cy=equals]').click(); // Assert 
+
+    cy.get('[data-cy=screenOutput]').should("have.value", '40');
+  });
+});
+describe('Special operators and other functionality', function () {
+  it('should calculate 18.5-10.2 and return 8.3', function () {
+    cy.visit("http://127.0.0.1:5500/index.html");
+    cy.get('[data-cy=one]').click();
+    cy.get('[data-cy=eight]').click();
+    cy.get('[data-cy=decimalPoint]').click();
+    cy.get('[data-cy=five]').click();
+    cy.get('[data-cy=subtract]').click();
+    cy.get('[data-cy=one]').click();
+    cy.get('[data-cy=zero]').click();
+    cy.get('[data-cy=decimalPoint]').click();
+    cy.get('[data-cy=two]').click();
+    cy.get('[data-cy=equals]').click(); // Assert 
+
+    cy.get('[data-cy=screenOutput]').should("have.value", '8.3');
+  });
+  it('should erase the screen when the AC button is pressed', function () {
+    cy.visit("http://127.0.0.1:5500/index.html");
+    cy.get('[data-cy=one]').click();
+    cy.get('[data-cy=eight]').click();
+    cy.get('[data-cy=decimalPoint]').click();
+    cy.get('[data-cy=five]').click();
+    cy.get('[data-cy=subtract]').click();
+    cy.get('[data-cy=one]').click();
+    cy.get('[data-cy=zero]').click();
+    cy.get('[data-cy=decimalPoint]').click();
+    cy.get('[data-cy=two]').click();
+    cy.get('[data-cy=ac]').click(); // Assert 
+
+    cy.get('[data-cy=screenOutput]').should("have.value", '');
+    cy.get('[data-cy=screenInput]').should("have.value", '');
+  });
+  it('should delete a single character when the delete button is pressed, changing calculation from 18-10 to 18-1 and therefore should return 17', function () {
+    cy.visit("http://127.0.0.1:5500/index.html");
+    cy.get('[data-cy=one]').click();
+    cy.get('[data-cy=eight]').click();
+    cy.get('[data-cy=subtract]').click();
+    cy.get('[data-cy=one]').click();
+    cy.get('[data-cy=zero]').click();
+    cy.get('[data-cy=delete]').click();
+    cy.get('[data-cy=equals]').click(); // Assert 
+
+    cy.get('[data-cy=screenOutput]').should("have.value", '17');
+  });
+  it('should calculate 18-7+1/2 and return 6 by correctly chaining operators', function () {
+    cy.visit("http://127.0.0.1:5500/index.html");
+    cy.get('[data-cy=one]').click();
+    cy.get('[data-cy=eight]').click();
+    cy.get('[data-cy=subtract]').click();
+    cy.get('[data-cy=seven]').click();
+    cy.get('[data-cy=add]').click();
+    cy.get('[data-cy=one]').click();
+    cy.get('[data-cy=divide]').click();
+    cy.get('[data-cy=two]').click();
+    cy.get('[data-cy=equals]').click(); // Assert 
+
+    cy.get('[data-cy=screenOutput]').should("have.value", '6');
+  });
+});

cypress/integration/test.spec.js

@@ -0,0 +1,125 @@
+// Cypress Testing
+// Test all basic operations
+// single digit: +/-/*/÷
+// double digit: +/-
+// Test more complex operations
+// chaining together operations
+// e.g. 2 + 2 * 5 - 1 + 27 / 3
+
+
+describe('My First Test', () => {
+  it('Does not do much!', () => {
+    expect(true).to.equal(true)
+  })
+})
+
+describe('Basic operations', () => {
+  it('should calculate 1 + 1 and return 2', () => {
+    //Arrange 
+    cy.visit("http://127.0.0.1:5500/index.html")
+    cy.get('[data-cy=one]').click();
+    cy.get('[data-cy=add]').click();
+    cy.get('[data-cy=one]').click();
+    cy.get('[data-cy=equals]').click();
+    // Assert 
+    cy.get('[data-cy=screenOutput]').should("have.value", '2');
+})
+it('should calculate 250-50 and returns 200', function () {
+  //Arrange 
+  cy.visit("http://127.0.0.1:5500/index.html");
+  cy.get('[data-cy=two]').click();
+  cy.get('[data-cy=five]').click();
+  cy.get('[data-cy=zero]').click();
+  cy.get('[data-cy=subtract]').click();
+  cy.get('[data-cy=five]').click();
+  cy.get('[data-cy=zero]').click();
+  cy.get('[data-cy=equals]').click(); // Assert 
+
+  cy.get('[data-cy=screenOutput]').should("have.value", '200');
+});
+
+it('should calculate 50 ÷ 5 and return 10', function () {
+  // Arrange 
+  cy.visit("http://127.0.0.1:5500/index.html");
+  cy.get('[data-cy=five]').click();
+  cy.get('[data-cy=zero]').click();
+  cy.get('[data-cy=divide]').click();
+  cy.get('[data-cy=five]').click(); 
+  cy.get('[data-cy=equals]').click();
+  // Assert 
+
+  cy.get('[data-cy=screenOutput]').should("have.value", '10');
+});
+
+it('should calculate 8 * 5 and return 40', function () {
+  // Arrange 
+  cy.visit("http://127.0.0.1:5500/index.html");
+  cy.get('[data-cy=eight]').click();
+  cy.get('[data-cy=multiply]').click();
+  cy.get('[data-cy=five]').click();
+  cy.get('[data-cy=equals]').click(); 
+  // Assert 
+  cy.get('[data-cy=screenOutput]').should("have.value", '40');
+});
+})
+
+
+describe('Special operators and other functionality', () => {
+  it('should calculate 18.5-10.2 and return 8.3', () => {
+    cy.visit("http://127.0.0.1:5500/index.html");
+    cy.get('[data-cy=one]').click();
+    cy.get('[data-cy=eight]').click();
+    cy.get('[data-cy=decimalPoint]').click();
+    cy.get('[data-cy=five]').click(); 
+    cy.get('[data-cy=subtract]').click();
+    cy.get('[data-cy=one]').click();
+    cy.get('[data-cy=zero]').click();
+    cy.get('[data-cy=decimalPoint]').click();
+    cy.get('[data-cy=two]').click();
+    cy.get('[data-cy=equals]').click();
+    // Assert 
+    cy.get('[data-cy=screenOutput]').should("have.value", '8.3'); 
+  })
+  it('should erase the screen when the AC button is pressed', () => {
+    cy.visit("http://127.0.0.1:5500/index.html");
+    cy.get('[data-cy=one]').click();
+    cy.get('[data-cy=eight]').click();
+    cy.get('[data-cy=decimalPoint]').click();
+    cy.get('[data-cy=five]').click(); 
+    cy.get('[data-cy=subtract]').click();
+    cy.get('[data-cy=one]').click();
+    cy.get('[data-cy=zero]').click();
+    cy.get('[data-cy=decimalPoint]').click();
+    cy.get('[data-cy=two]').click();
+    cy.get('[data-cy=ac]').click();
+    // Assert 
+    cy.get('[data-cy=screenOutput]').should("have.value", ''); 
+    cy.get('[data-cy=screenInput]').should("have.value", '');
+  })
+  it('should delete a single character when the delete button is pressed, changing calculation from 18-10 to 18-1 and therefore should return 17', () => {
+    cy.visit("http://127.0.0.1:5500/index.html");
+    cy.get('[data-cy=one]').click();
+    cy.get('[data-cy=eight]').click();
+    cy.get('[data-cy=subtract]').click();
+    cy.get('[data-cy=one]').click();
+    cy.get('[data-cy=zero]').click();
+    cy.get('[data-cy=delete]').click();
+    cy.get('[data-cy=equals]').click();
+    // Assert 
+    cy.get('[data-cy=screenOutput]').should("have.value", '17'); 
+  })
+  it('should calculate 18-7+1/2 and return 6 by correctly chaining operators', () => {
+    cy.visit("http://127.0.0.1:5500/index.html");
+    cy.get('[data-cy=one]').click();
+    cy.get('[data-cy=eight]').click();
+    cy.get('[data-cy=subtract]').click();
+    cy.get('[data-cy=seven]').click();
+    cy.get('[data-cy=add]').click();
+    cy.get('[data-cy=one]').click();
+    cy.get('[data-cy=divide]').click();
+    cy.get('[data-cy=two]').click();
+    cy.get('[data-cy=equals]').click();
+    // Assert 
+    cy.get('[data-cy=screenOutput]').should("have.value", '6'); 
+  })
+})

cypress/plugins/index.js

@@ -0,0 +1,22 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

dist/main.dev.js

@@ -44,7 +44,7 @@ function calculateAnswer() {
   } // If the number is recurring, then round it. 
 
 
-  regexRecurring = /(\d)\1+/;
+  regexRecurring = /(\d)\2+/;
 
   if (regexRecurring.test(answer)) {
     return answer.toFixed(1) + " (Recurring)";
@@ -56,6 +56,7 @@ function calculateAnswer() {
 function handleEquals(event) {
   screenOutput.innerText = "";
   screenOutput.innerText += "= ".concat(calculateAnswer());
+  screenOutput.value = calculateAnswer().toString();
 }
 
 function handleDecimalInput(event) {

index.html

@@ -10,29 +10,29 @@
 <body>
   <div id ="calculator">
     <div id="screenContainer">  
-      <div id ="screenInput"> </div> 
-      <div id="screenOutput"> </div> 
+      <div id ="screenInput" data-cy="screenInput"> </div> 
+      <div id="screenOutput" data-cy=screenOutput> </div> 
     </div>
     <div id = "buttons"> 
-      <button id="ac" class="buttons specialButtons">AC</button>
-      <button id="delete" class="buttons specialButtons">DEL</button>
-      <button id="multiply" class="buttons specialButtons">*</button>
-      <button id="add" class="buttons specialButtons">+</button>
-      <button id="subtract" class="buttons specialButtons">-</button>
-      <button id="divide" class="buttons specialButtons">÷</button>
-      <button id="decimalPoint" class="buttons specialButtons">.</button>
-      <button id="equals" class="buttons specialButtons">=</button>
-      <button id="one" class="buttons numbers">1</button>
-      <button id="two" class="buttons numbers">2</button>
-      <button id="three" class="buttons numbers">3</button>
-      <button id="four" class="buttons numbers">4</button>
-      <button id="five" class="buttons numbers">5</button>
-      <button id="six" class="buttons numbers">6</button>
-      <button id="seven" class="buttons numbers">7</button>
-      <button id="eight" class="buttons numbers">8</button>
-      <button id="nine" class="buttons numbers">9</button>
-      <button id="zero" class="buttons numbers">0</button>
-      </div>
+      <button id="ac" class="buttons specialButtons" data-cy="ac">AC</button>
+      <button id="delete" class="buttons specialButtons" data-cy="delete">DEL</button>
+      <button id="multiply" class="buttons specialButtons" data-cy="multiply">*</button>
+      <button id="add" class="buttons specialButtons" data-cy="add">+</button>
+      <button id="subtract" class="buttons specialButtons" data-cy="subtract">-</button>
+      <button id="divide" class="buttons specialButtons" data-cy="divide">÷</button>
+      <button id="decimalPoint" class="buttons specialButtons" data-cy="decimalPoint">.</button>
+      <button id="equals" class="buttons specialButtons" data-cy="equals">=</button>
+      <button id="one" class="buttons numbers" data-cy="one">1</button>
+      <button id="two" class="buttons numbers" data-cy="two">2</button>
+      <button id="three" class="buttons numbers" data-cy="three">3</button>
+      <button id="four" class="buttons numbers" data-cy="four">4</button>
+      <button id="five" class="buttons numbers" data-cy="five">5</button>
+      <button id="six" class="buttons numbers" data-cy="six">6</button>
+      <button id="seven" class="buttons numbers" data-cy="seven">7</button>
+      <button id="eight" class="buttons numbers" data-cy="eight">8</button>
+      <button id="nine" class="buttons numbers" data-cy="nine">9</button>
+      <button id="zero" class="buttons numbers" data-cy="zero">0</button>
+    </div>
   <script src="main.js" defer> </script> 
 </body>
 </html>