test: added e2e tests with docker and cypress

Author: RaschidJFR

test/component/home.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+import { IonicHeaderParallaxModule } from 'ionic-header-parallax'
+import { HomePage } from './home.page';
+
+@NgModule({
+  declarations: [HomePage],
+  imports: [IonicHeaderParallaxModule, IonicModule],
+  exports: [HomePage],
+})
+export class HomePageModule {
+  constructor() {}
+}

test/component/home.page.html

@@ -0,0 +1,24 @@
+<ion-header
+  [translucent]="true"
+  parallax
+  imageUrl="https://picsum.photos/720"
+>
+  <ion-toolbar color="secondary">
+    <ion-title> Ionic Header Parallax </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <div id="container">
+    <strong>Ready to create an app?</strong>
+    <p>
+      Start with Ionic
+      <a
+        target="_blank"
+        rel="noopener noreferrer"
+        href="https://ionicframework.com/docs/components"
+        >UI Components</a
+      >
+    </p>
+  </div>
+</ion-content>

test/component/home.page.scss

@@ -0,0 +1,27 @@
+#container {
+  text-align: center;
+
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  height: 200vh;
+}
+
+#container strong {
+  font-size: 20px;
+  line-height: 26px;
+}
+
+#container p {
+  font-size: 16px;
+  line-height: 22px;
+
+  color: #8c8c8c;
+
+  margin: 0;
+}
+
+#container a {
+  text-decoration: none;
+}

test/component/home.page.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
+import { ParallaxDirective } from 'ionic-header-parallax'
+
+@Component({
+  selector: 'app-home',
+  templateUrl: 'home.page.html',
+  styleUrls: ['home.page.scss'],
+  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ParallaxDirective],
+})
+export class HomePage {
+  constructor() {}
+}

test/test.sh

@@ -0,0 +1,24 @@
+#!/bin/sh
+# Use this to test the angular project with cypress
+
+HOME_COMPONENT_PATH="$PWD/component"
+CYPRESS_CONFIG_PATH="$PWD/tests"
+DIST_PATH="$PWD/../dist/ionic-header-parallax"
+
+docker run \
+  --rm \
+  -v "$HOME_COMPONENT_PATH:/app/src/app/home" \
+  -v "$CYPRESS_CONFIG_PATH:/cypress" \
+  -v "$DIST_PATH:/dist" \
+  -p 4200:4200 \
+  -ti \
+  raschidjfr/ionic-blank:ionic8-angular19-cypress14 \
+  sh -c "
+    npm i && \
+    npm i ionic-header-parallax@next cypress && \
+    npm i -g wait-on && \
+    cp -r /cypress/* . && \
+    (ng serve --host 0.0.0.0 --port 4200 & \
+    wait-on http://0.0.0.0:4200 && \
+    npx cypress run)
+  "

test/tests/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'
+  }
+
+})

test/tests/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);
+  });
+});

test/tests/cypress/tsconfig.json

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