Add ui test for key tester (qmk#503)

* add ui test for key tester

* disable video recording

cypress.json

@@ -1,5 +1,6 @@
 {
   "baseUrl": "http://localhost:8080/",
   "integrationFolder": "tests/integration",
-  "chromeWebSecurity": false
+  "chromeWebSecurity": false,
+  "video": false
 }

tests/integration/tester.spec.js

@@ -0,0 +1,49 @@
+describe('Tester feature', function() {
+  beforeEach(() => {
+    cy.viewport('macbook-15');
+    cy.visit('/#/test');
+  });
+  it('Tester should be accessible and instantiated', function() {
+    cy.get('.visual-tester-keymap', { timeout: 4000 }).should('be.visible');
+  });
+  it('Should have an ANSI layout default', function() {
+    // Ansi has 104 keys
+    cy.get('.visual-tester-keymap')
+      .find('div')
+      .should('have.length', 104);
+  });
+  it('Should change layout', function() {
+    // ISO has 105 keys
+    cy.get('.layout-selector-radios > :nth-child(2)').click();
+    cy.get('.visual-tester-keymap')
+      .find('div')
+      .should('have.length', 105);
+  });
+  it('Handle typing', function() {
+    cy.get('body').trigger('keydown', { keyCode: 80, code: 'KeyP', key: 'p' });
+    cy.get('.tester-key[title="P"]').should('have.class', 'active');
+    cy.get('body').trigger('keyup', { keyCode: 80, code: 'KeyP', key: 'p' });
+    cy.get('.tester-key[title="P"]').should('have.class', 'detected');
+    cy.get('.letter-code').contains('KeyP');
+    cy.get('.letter-key').contains('p');
+    cy.get('.letter-key-code').contains('80');
+    cy.get('.status-log').contains('KEY-DOWN');
+    cy.get('.status-log').contains('KC_P');
+    cy.get('.status-log').contains('p');
+    cy.get('.status-log').contains('KeyP');
+    cy.get('.status-log').contains('80');
+    cy.get('.status-log').contains('KEY-UP');
+  });
+  it('Detects chatter', function() {
+    cy.get('#chatter-threshold')
+      .clear()
+      .type('666');
+    cy.get('body').click();
+    cy.get('body').trigger('keydown', { keyCode: 80, code: 'KeyP', key: 'p' });
+    cy.get('body').trigger('keyup', { keyCode: 80, code: 'KeyP', key: 'p' });
+    cy.get('body').trigger('keydown', { keyCode: 80, code: 'KeyP', key: 'p' });
+    cy.get('body').trigger('keyup', { keyCode: 80, code: 'KeyP', key: 'p' });
+    cy.get('#chatter-alert').should('be.visible');
+    cy.get('.tester-key[title="P"]').should('have.class', 'chatter-detected');
+  });
+});