tests(react): run e2e tests on CI (#23147)

packages/react-router/test-app/cypress.json

@@ -2,5 +2,7 @@
   "pageLoadTimeout": 6000000000,
   "userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1",
   "viewportWidth": 375,
-  "viewportHeight": 812
+  "viewportHeight": 812,
+  "video": false,
+  "screenshotOnRunFailure": false
 }

packages/react-router/test-app/cypress/integration/swipe-to-go-back.js

@@ -10,8 +10,7 @@ describe('Swipe To Go Back', () => {
     cy.ionPageVisible('main');
     cy.ionNav('ion-item', 'Details');
     cy.ionPageVisible('details');
-    cy.wait(350);
-    cy.ionSwipeRight();
+    cy.ionSwipeToGoBack(true);
     cy.ionPageVisible('main');
   });
 });

packages/react-router/test-app/cypress/support/commands.js

@@ -68,13 +68,21 @@ Cypress.Commands.add('ionNav', (element, contains) => {
   cy.wait(250);
 });
 
-Cypress.Commands.add('ionSwipeRight', (element, contains) => {
-  cy.get('ion-router-outlet')
-    .trigger('mousedown', { position: 'left' })
-    .trigger('mousemove', { clientX: 100, clientY: 275 })
-    .trigger('mouseup', { force: true });
+Cypress.Commands.add('ionSwipeToGoBack', (complete = false, selector = 'ion-router-outlet') => {
+  const increment = (complete) ? 60 : 5;
+  cy.get(selector)
+    .first()
+    .trigger('mousedown', 0, 275, { which: 1, force: true })
+    .trigger('mousemove', increment * 1, 275, { which: 1, force: true })
+    .wait(25)
+    .trigger('mousemove', increment * 2, 275, { which: 1, force: true })
+    .wait(25)
+    .trigger('mousemove', increment * 3, 275, { which: 1, force: true })
+    .wait(25)
+    .trigger('mousemove', (complete) ? increment * 4 : increment * 0, 275, { which: 1, force: true })
+    .trigger('mouseup', (complete) ? increment * 4 : increment * 0, 275, { which: 1, force: true })
   cy.wait(150);
-});
+})
 
 Cypress.Commands.add('ionMenuNav', (contains) => {
   // cy.get('ion-menu.show-menu').should('exist');

packages/react-router/test-app/package.json

@@ -7,7 +7,8 @@
     "@capacitor/android": "^2.2.0",
     "@capacitor/core": "1.5.2",
     "@capacitor/ios": "^2.2.0",
-    "@ionic/react": "file:../../react/ionic-react-5.5.0.tgz",
+    "@ionic/react": "5.6.3",
+    "@ionic/react-router": "^5.6.3",
     "@svgr/webpack": "4.3.3",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.4.0",
@@ -26,7 +27,7 @@
     "babel-preset-react-app": "^9.1.1",
     "camelcase": "^5.3.1",
     "case-sensitive-paths-webpack-plugin": "2.3.0",
-    "concurrently": "^5.2.0",
+    "concurrently": "^6.0.0",
     "cpy-cli": "^3.1.1",
     "css-loader": "3.4.2",
     "dotenv": "8.2.0",
@@ -73,6 +74,7 @@
     "ts-pnp": "1.1.5",
     "typescript": "3.7.4",
     "url-loader": "2.3.0",
+    "wait-on": "^5.3.0",
     "webpack": "4.41.5",
     "webpack-dev-server": "3.10.2",
     "webpack-manifest-plugin": "2.2.0",
@@ -85,7 +87,10 @@
     "copyRouter": "cpy ../src/ReactRouter ./src/ReactRouter",
     "start": "concurrently \"npm-watch copyRouter\" \"node scripts/start.js --no-cache\"",
     "build": "node scripts/build.js",
-    "test": "cypress open"
+    "test": "cypress open",
+    "cypress": "node_modules/.bin/cypress run --headless --browser chrome",
+    "e2e": "npm run copyRouter && concurrently \"node scripts/start.js --no-cache\" \"wait-on http-get://localhost:3000 && npm run cypress\" --kill-others --success first",
+    "sync": "sh ./scripts/sync.sh"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -104,7 +109,7 @@
   },
   "devDependencies": {
     "@capacitor/cli": "1.5.2",
-    "cypress": "^4.9.0",
+    "cypress": "^6.8.0",
     "react-scripts": "3.4.1"
   },
   "description": "An Ionic project",

packages/react-router/test-app/scripts/sync.sh

@@ -0,0 +1,20 @@
+# Copy ionic react dist
+rm -rf node_modules/@ionic/react/dist node_modules/@ionic/react/css
+cp -a ../../react/dist node_modules/@ionic/react/dist
+cp -a ../../react/css node_modules/@ionic/react/css
+cp -a ../../react/package.json node_modules/@ionic/react/package.json
+
+# Copy ionic react router dist
+rm -rf node_modules/@ionic/react-router/dist
+cp -a ../dist node_modules/@ionic/react-router/dist
+cp -a ../package.json node_modules/@ionic/react-router/package.json
+
+# Copy core dist
+rm -rf node_modules/@ionic/core/dist node_modules/@ionic/core/loader
+cp -a ../../../core/dist node_modules/@ionic/core/dist
+cp -a ../../../core/loader node_modules/@ionic/core/loader
+cp -a ../../../core/package.json node_modules/@ionic/core/package.json
+
+# Copy ionicons
+rm -rf node_modules/ionicons
+cp -a ../../../core/node_modules/ionicons node_modules/ionicons