Automate backwards compatibility check (SAP#354)

* added npm script and readme for test:compatibility * added jq dependency to the readme
parostatkiem-zz · Jan 29, 2019 · 49ea5b0 · 49ea5b0
1 parent c5a21af
commit 49ea5b0
Show file tree

Hide file tree

Showing 12 changed files with 1,023 additions and 1,260 deletions.
diff --git a/README.md b/README.md
@@ -28,11 +28,25 @@ For details, see [Luigi documentation](docs/README.md).
 
 All projects in the repository use [Prettier](https://prettier.io) to format source code. Run the `npm install` command in the root folder to install it along with [husky](https://github.com/typicode/husky), the Git hooks manager. Both tools ensure proper codebase formatting before committing it.
 
-### Tests
+### Unit tests
+
+To ensure that existing features still work as expected after your changes, run unit tests using the `npm run test` command in the [core](/core) folder.
+
+### E2E tests
 
 To ensure that existing features still work as expected after your changes, run UI tests from the [Angular example application](/core/examples/luigi-sample-angular). Before running the tests, start the sample application by using the `npm start` command in the application folder.
 
 When the application is ready:
 
-- Run `npm run e2e:run` in the `core/examples/luigi-sample-angular` folder to start tests in the headless browser.
 - Run `npm run e2e:open` in the `core/examples/luigi-sample-angular` folder to start tests in the interactive mode.
+- Run `npm run e2e:run` in the `core/examples/luigi-sample-angular` folder to start tests in the headless browser.
+
+### Backward compatibility tests
+
+Use these tests to ensure that applications written for previous versions of Luigi still work after Luigi gets updated with npm. Before running the tests, bundle Luigi by running `lerna run bundle` in the main repository folder.
+
+Install [jq](https://stedolan.github.io/jq/) using the `brew install jq` command. It is required for the script to work, however, you can omit it if the command you are using to run your tests is tagged `latest`. 
+
+- Run `npm run test:compatibility` in the main repository folder to start regression testing. The system will prompt you to select the previous version. 
+- Run `npm run test:compatibility -- --tag latest` in the main repository folder to start regression testing with the last version preselected. 
+- On the CI, run `npm run test:compatibility -- --install --tag latest` in the main repository folder to install dependencies, bundle Luigi and run the tests with the last version preselected. 
diff --git a/core/examples/luigi-sample-angular/src/assets/404.html b/core/examples/luigi-sample-angular/src/assets/404.html
@@ -1,87 +1,85 @@
 <!DOCTYPE html>
 <html lang="en_EN">
-<head>
-  <title>Page not found</title>
-  <link rel='stylesheet' href='/fiori-fundamentals/fiori-fundamentals.min.css'>
-  <style type="text/css">
-  body {
-    font-family: Arial, Helvetica, sans-serif;
-  }
-  @keyframes goAndHitSomeCorners {
-    0% {
-      transform: scaleX(1);
-    }
-    33% {
-      transform: scaleX(0);
-    }
+  <head>
+    <title>Page not found</title>
+    <link
+      rel="stylesheet"
+      href="/fiori-fundamentals/fiori-fundamentals.min.css"
+    />
+    <style type="text/css">
+      body {
+        font-family: Arial, Helvetica, sans-serif;
+      }
+      @keyframes goAndHitSomeCorners {
+        0% {
+          transform: scaleX(1);
+        }
+        33% {
+          transform: scaleX(0);
+        }
 
-    66% {
-      transform: scaleX(-1);
-    }
-    100% {
-      transform: scaleX(1);
-    }
-  }
-  .section-spacer {
-    height: 800px;
-  }
-  .fd-panel {
-    padding: 15px;
-  }
-  a {
-    color: #0a6ed1;
-    text-decoration: none;
-  }
-  a:hover {
-    color: #085caf;
-  }
-  .fd-page__header {
-    padding: 1em;
-    text-align: center;
-  }
+        66% {
+          transform: scaleX(-1);
+        }
+        100% {
+          transform: scaleX(1);
+        }
+      }
+      .section-spacer {
+        height: 800px;
+      }
+      .fd-panel {
+        padding: 15px;
+      }
+      a {
+        color: #0a6ed1;
+        text-decoration: none;
+      }
+      a:hover {
+        color: #085caf;
+      }
+      .fd-page__header {
+        padding: 1em;
+        text-align: center;
+      }
 
-  .fd-action-bar__title {
-    font-size: 6em;
-  }
-  .fd-action-bar__description {
-    font-size: 4em;
-  }
+      .fd-action-bar__title {
+        font-size: 6em;
+      }
+      .fd-action-bar__description {
+        font-size: 4em;
+      }
 
-  .error-number--spacer {
-    visibility: hidden;
-    color: yellow;
-  }
-  .error-number--real {
-    color: #34495f;
-    transition: 1s;
-    animation-name: goAndHitSomeCorners;
-    animation-delay: 5s;
-    position: absolute;
-    animation-duration: 3s;
-    animation-iteration-count: infinite;
-    animation-timing-function: ease;
-  }
-</style>
-</head>
-<body>
-<header class="fd-page__header">
+      .error-number--spacer {
+        visibility: hidden;
+        color: yellow;
+      }
+      .error-number--real {
+        color: #34495f;
+        transition: 1s;
+        animation-name: goAndHitSomeCorners;
+        animation-delay: 5s;
+        position: absolute;
+        animation-duration: 3s;
+        animation-iteration-count: infinite;
+        animation-timing-function: ease;
+      }
+    </style>
+  </head>
+  <body>
+    <header class="fd-page__header">
       <h1 class="fd-action-bar__title">
-          Ooooooooops :(
+        Ooooooooops :(
       </h1>
-      <h2 class="fd-action-bar__description">Yes, you guessed right, it's a 
+      <h2 class="fd-action-bar__description">
+        Yes, you guessed right, it's a
         <strong class="error-number--real">404</strong>
-        <strong class='error-number--spacer'>404</strong>
+        <strong class="error-number--spacer">404</strong>
         error
-      </h2> 
-</header>
+      </h2>
+    </header>
 
-
-
-<script type="text/javascript" src="/luigi-client/luigi-client.js"></script>
-<script type="text/javascript">
-
-
-</script>
-
-</body>
+    <script type="text/javascript" src="/luigi-client/luigi-client.js"></script>
+    <script type="text/javascript"></script>
+  </body>
 </html>
diff --git a/core/examples/luigi-sample-angular/src/luigi-config/extended/navigation.js b/core/examples/luigi-sample-angular/src/luigi-config/extended/navigation.js
@@ -115,10 +115,12 @@ class Navigation {
     parentNodePath: '/environments', // absolute path
     lazyloadOptions: true, // load options on click instead on page load
     options: () =>
-      [...Array(10).keys()].filter(n => n !== 0).map(n => ({
-        label: 'Environment ' + n, // (i.e mapping between what the user sees and what is taken to replace the dynamic part for the dynamic node)
-        pathValue: 'env' + n // will be used to replace dynamic part
-      })),
+      [...Array(10).keys()]
+        .filter(n => n !== 0)
+        .map(n => ({
+          label: 'Environment ' + n, // (i.e mapping between what the user sees and what is taken to replace the dynamic part for the dynamic node)
+          pathValue: 'env' + n // will be used to replace dynamic part
+        })),
 
     actions: [
       {