Integrate cypress component tests (#1922)

* Integrate cypress component tests

* Install latest cypress version

* Fix new tests

* Skip TimePicker tests

cypress.json

@@ -4,5 +4,7 @@
   "supportFile": "e2e/support/index.js",
   "pluginsFile": "e2e/plugins/index.js",
   "chromeWebSecurity": false,
-  "projectId": "qow28y"
+  "projectId": "qow28y",
+  "experimentalComponentTesting": true,
+  "componentFolder": "./e2e/component"
 }

docs/package.json

@@ -71,7 +71,6 @@
     "safe-json-stringify": "^1.2.0",
     "sinon": "^9.0.2",
     "styled-jsx": "^3.3.0",
-    "ts-loader": "^7.0.5",
     "typescript": "^3.8.3",
     "yup": "^0.28.5"
   },

e2e/component/DatePicker.spec.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { mountStaticPicker } from '../test-utils';
+import { StaticDatePicker } from '@material-ui/pickers';
+
+describe('<DatePicker />', () => {
+  it('Renders and show todays date', () => {
+    mountStaticPicker(defaultProps => <StaticDatePicker {...defaultProps} />);
+
+    cy.findByTestId('datepicker-toolbar-date').contains('Sat, Oct 7');
+  });
+
+  it('Switches between months', () => {
+    mountStaticPicker(defaultProps => <StaticDatePicker {...defaultProps} />);
+
+    cy.findByTestId('calendar-month-text').contains('October');
+
+    cy.findByTestId('previous-arrow-button')
+      .click()
+      .click();
+    cy.findByTestId('next-arrow-button')
+      .click()
+      .click()
+      .click();
+
+    cy.wait(350);
+
+    cy.findByTestId('calendar-month-text').contains('November');
+  });
+});