fix: exception on initialization for NgModule projects (#55)

* fix: fixed an issue causing an exception on initialization

* ci: fixed error with prepublish script

* test: added e2e tests with docker and cypress

* Feature/ci setup GitHub actions (#53)

* chore(demo): add `to-px` as devDependency

* test: update test file structure and scripts

* ci(actions): set up

* ci(actions): fix yaml

* ci(actions): fix path to workspace inside container

* ci(actions): remove `\"`from version en var to fix CI error

* chore: bump version to 6.1.2

* chore(package.json): update scripts

* test: improved test script to use images with different angular versions

* test(home): updated module to enable testing non-standalone projects

* ci(test): added job for testing compatibility with angular v16

Author: RaschidJFR

.github/workflows/run-tests.sh

@@ -0,0 +1,11 @@
+#!/bin/sh
+PKG_VERSION=$(cd $GITHUB_WORKSPACE/dist/ionic-header-parallax && npm pkg get version | tr -d '"')
+mkdir cypress
+cp -r $GITHUB_WORKSPACE/cypress/* ./cypress
+cp $GITHUB_WORKSPACE/cypress.config.ts .
+cp -r $GITHUB_WORKSPACE/src/app/home/* ./src/app/home
+npm i $GITHUB_WORKSPACE/dist/ionic-header-parallax-$PKG_VERSION.tgz
+cypress install
+ng serve --host 0.0.0.0 --port 4200 & \
+(wait-on http://0.0.0.0:4200 --timeout 30000 --interval 1000 && cypress run --headless) \
+|| { echo 'Angular server failed to start'; exit 1; }

.github/workflows/test.yml

@@ -0,0 +1,42 @@
+name: Run Tests
+
+on: [push, pull_request]
+
+jobs:
+  test-angular19:
+    runs-on: ubuntu-latest
+    container:
+      image: raschidjfr/ionic-blank:ionic8-angular19-cypress14
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Build project
+      run: npm run build
+
+    - name: Run tests
+      working-directory: /app
+      run: bash $GITHUB_WORKSPACE/.github/workflows/run-tests.sh
+
+  test-angular16:
+    runs-on: ubuntu-latest
+    container:
+      image: raschidjfr/ionic-blank:ionic8-angular16-cypress14
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Build project
+      run: npm run build
+
+    - name: Run tests
+      working-directory: /app
+      run: bash $GITHUB_WORKSPACE/.github/workflows/run-tests.sh

CONTRIBUTING.md

@@ -10,3 +10,8 @@ In the root folder:
 1. Run `npm run link` to point the demo app to use the local directive's source.
 2. Run `ng serve` to launch the demo app.
 
+### Test
+1. Build: `npm run build`
+2. Test with Docker: `bin/test.sh`
+
+

bin/test.sh

@@ -0,0 +1,32 @@
+#!/bin/bash
+# Use this to test the angular project with cypress.
+# Execute from the project's root folder.
+# Usage: bin/test.sh [angular_version]
+
+get_lib_version() {
+  echo $(cd dist/ionic-header-parallax && npm pkg get version)
+}
+
+run_test() {
+  ng_version=$1
+  lib_version=$(get_lib_version)
+  docker run \
+    --rm \
+    -ti \
+    -v "$PWD:/project" \
+    -v "$PWD/dist:/dist" \
+    raschidjfr/ionic-blank:ionic8-angular$ng_version-cypress14 \
+    bash -c "\
+      mkdir cypress \
+      && cp -r /project/cypress/* ./cypress \
+      && cp /project/cypress.config.ts . \
+      && cp -r /project/src/app/home/* ./src/app/home \
+      && npm i /dist/ionic-header-parallax-$lib_version.tgz \
+      && (ng serve --host 0.0.0.0 --port 4200 \
+      & (wait-on http://0.0.0.0:4200 && cypress run --headless) \
+      || { echo 'Angular server failed to start'; exit 1; })"
+}
+
+ng_version="${1:-19}"
+echo "Testing library in Ionic v8 and Angular v$ng_version..."
+run_test $ng_version

cypress.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+
+  e2e: {
+    baseUrl: 'http://0.0.0.0:4200',
+    supportFile: false
+  },
+
+
+  component: {
+    devServer: {
+      framework: 'angular',
+      bundler: 'webpack',
+    },
+    specPattern: '**/*.cy.ts'
+  }
+
+})

cypress/e2e/spec.cy.ts

@@ -0,0 +1,15 @@
+describe('Ionic Header Parallax', () => {
+  it('Main component can load', () => {
+    cy.visit('/');
+    cy.contains('Start with Ionic UI Components');
+  });
+
+  it('Parallax effect works', () => {
+    cy.visit('/');
+    cy.wait(200);
+
+    cy.get('ion-header').should('have.css', 'height', '300px');
+    cy.get('ion-content').shadow().find('.inner-scroll').scrollTo('bottom');
+    cy.get('ion-header').invoke('height').should('be.lessThan', 60);
+  });
+});

cypress/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../tsconfig.json",
+  "include": ["**/*.ts"],
+  "compilerOptions": {
+    "sourceMap": false,
+    "types": ["cypress"]
+  }
+}