test(ivy): enable running cli-hello-world-ivy integration test suite (#27438)

PR Close #27438

integration/cli-hello-world-ivy/debug-test.sh

@@ -0,0 +1,29 @@
+#!/usr/bin/env bash
+
+##### Test Debug Utility #####
+##############################
+
+# Use this script to run the ngcc integration test locally
+# in isolation from the other integration tests.
+# This is useful when debugging the ngcc code-base.
+
+set -u -e -o pipefail
+
+cd "$(dirname "$0")"
+
+$(pwd)/../../scripts/build-packages-dist.sh
+
+# Workaround https://github.com/yarnpkg/yarn/issues/2165
+# Yarn will cache file://dist URIs and not update Angular code
+readonly cache=../.yarn_local_cache
+function rm_cache {
+  rm -rf $cache
+}
+rm_cache
+mkdir $cache
+trap rm_cache EXIT
+
+rm -rf dist
+rm -rf node_modules
+yarn install --cache-folder $cache
+yarn test

integration/cli-hello-world-ivy/package.json

@@ -9,6 +9,8 @@
     "ng": "ng",
     "postinstall": "webdriver-manager update --gecko=false --standalone=false $CHROMEDRIVER_VERSION_ARG && yarn ivy-ngcc",
     "start": "ng serve",
+    "//test1": "TODO FW-813: Re-enable `ci-production`. Currently, it fails after a timeout as Protractor reports Angular cannot be found on the page",
+    "//test2": "ng test --progress=false --watch=false && yarn e2e --configuration=ci && yarn e2e --configuration=ci-production",
     "test": "ng test --progress=false --watch=false && yarn e2e --configuration=ci"
   },
   "private": true,

integration/cli-hello-world-ivy/src/app/app.component.html

@@ -5,7 +5,7 @@
   </h1>
   <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
 </div>
-<p>{{ 100 | json }}% awesome</p>
+<p>{{ 1 | percent }} awesome</p>
 <h2>Here are some links to help you start: </h2>
 <ul>
   <li>