fix[angular-gen2]: add angular 19 ssr e2e and fix hydration errors

.github/workflows/ci.yml

@@ -70,8 +70,9 @@ jobs:
             'nextjs-sdk-next-app',
             'vue',
             'nuxt',
-            'angular',
-            'angular-ssr',
+            'angular-16',
+            'angular-16-ssr',
+            'angular-19-ssr',
           ]
 
     steps:
@@ -114,8 +115,8 @@ jobs:
             'vue',
             'nuxt',
             'react',
-            'angular',
-            'angular-ssr',
+            'angular-16',
+            'angular-16-ssr',
             'qwik-city',
             'nextjs-sdk-next-app',
             'react-sdk-next-14-app',

packages/sdks-tests/src/e2e-tests/angular-no-wrap.spec.ts

@@ -43,12 +43,12 @@ const testNoWrapPage = async (page: Page) => {
 
 test.describe('Angular noWrap', () => {
   test('correctly renders', async ({ page, sdk }) => {
-    test.skip(!['angular'].includes(sdk));
+    test.skip(!['angular-16'].includes(sdk));
 
     await testNoWrapPage(page);
   });
   test('correctly ssrs', async ({ browser, packageName }) => {
-    test.skip(!['angular-ssr'].includes(packageName));
+    test.skip(!['angular-16-ssr', 'angular-19-ssr'].includes(packageName));
 
     const context = await browser.newContext({
       javaScriptEnabled: false,
@@ -57,7 +57,7 @@ test.describe('Angular noWrap', () => {
     await testNoWrapPage(page);
   });
   test('style values are applied to the direct child element', async ({ page, sdk }) => {
-    test.skip(!['angular'].includes(sdk));
+    test.skip(!['angular-16'].includes(sdk));
 
     await page.goto('/custom-components-nowrap');
 
@@ -78,7 +78,7 @@ test.describe('Angular noWrap', () => {
     expect(isButtonParentInteractiveElement).toBe(true);
   });
   test('border radius is applied to the card itself', async ({ page, sdk }) => {
-    test.skip(!['angular'].includes(sdk));
+    test.skip(!['angular-16'].includes(sdk));
     await page.goto('/custom-components-nowrap');
     const cards = await page.locator('div[custom-card]').all();
 
@@ -95,7 +95,7 @@ test.describe('Angular noWrap', () => {
     }
   });
   test('correctly works with event bindings', async ({ page, sdk }) => {
-    test.skip(!['angular'].includes(sdk));
+    test.skip(!['angular-16'].includes(sdk));
     await page.goto('/custom-components-nowrap');
 
     const incrementButton = page.locator('text=increment');

packages/sdks-tests/src/e2e-tests/custom-components.spec.ts

@@ -9,7 +9,7 @@ const LAST_COMPONENT_REGISTERED_MESSAGE =
 
 test.describe('Custom components', () => {
   test('correctly renders custom component', async ({ page, packageName, sdk }) => {
-    test.skip(!['angular', 'react'].includes(sdk));
+    test.skip(!['angular-16', 'react'].includes(sdk));
     test.skip(
       ['react-sdk-next-14-app', 'react-sdk-next-15-app', 'remix', 'hydrogen'].includes(packageName)
     );
@@ -24,7 +24,7 @@ test.describe('Custom components', () => {
     packageName,
     sdk,
   }) => {
-    test.skip(!['angular', 'react'].includes(sdk));
+    test.skip(!['angular-16', 'react'].includes(sdk));
     test.skip(
       ['react-sdk-next-14-app', 'react-sdk-next-15-app', 'remix', 'hydrogen'].includes(packageName)
     );
@@ -41,15 +41,18 @@ test.describe('Custom components', () => {
   });
 
   test('children placement is correct', async ({ page, sdk }) => {
-    test.skip(!['angular'].includes(sdk));
+    test.skip(!['angular-16'].includes(sdk));
     await page.goto('/children-slot-placement');
     const h1 = page.locator('h1').first();
     await expect(h1).toBeVisible();
     await expect(h1.locator('text=inside an h1').first()).toBeVisible();
   });
 
   test('children content are ssred', async ({ browser, packageName }) => {
-    test.skip(!['angular-ssr'].includes(packageName));
+    test.skip(
+      !['angular-16-ssr', 'angular-19-ssr'].includes(packageName),
+      'Only run this for Angular SSR and Angular 19 SSR'
+    );
 
     const context = await browser.newContext({
       javaScriptEnabled: false,

packages/sdks-tests/src/e2e-tests/default-styles.spec.ts

@@ -16,7 +16,11 @@ test.describe('Default styles', () => {
     // dont have .builder-button class
     test.skip(excludeGen1(sdk));
     // TODO: need to check why angular-ssr is failing, working as expected though
-    test.fail(packageName === 'react-native' || packageName === 'angular-ssr');
+    test.fail(
+      packageName === 'react-native' ||
+        packageName === 'angular-16-ssr' ||
+        packageName === 'angular-19-ssr'
+    );
     await page.goto('/default-styles');
 
     const allStyleTags = await page.evaluate(() => {

packages/sdks-tests/src/e2e-tests/hydration.spec.ts

@@ -23,7 +23,10 @@ test.describe('Hydration', () => {
   });
 
   test('No mismatch on A/B test content', async ({ page, packageName }) => {
-    test.skip(packageName === 'angular-ssr', 'Angular SSR does not support A/B tests');
+    test.skip(
+      packageName === 'angular-16-ssr' || packageName === 'angular-19-ssr',
+      'Angular SSR does not support A/B tests'
+    );
     await page.goto('/ab-test-interactive');
     await page.locator('a').locator('visible=true').first().click({ timeout: 10000 });
     await findTextInPage({ page, text: 'Stack at tablet' });

packages/sdks-tests/src/e2e-tests/state-binding.spec.ts

@@ -1,12 +1,12 @@
 import { expect } from '@playwright/test';
-import { excludeTestFor, test } from '../helpers/index.js';
+import { test } from '../helpers/index.js';
 
 test.describe('State binding', () => {
   test.describe('inside repeater', () => {
-    test('writing to state should update binding', async ({ page, packageName, sdk }) => {
+    test('writing to state should update binding', async ({ page, packageName }) => {
       test.fail(
-        excludeTestFor({ angular: true }, sdk),
-        'Angular Gen2 event binding not working for other blocks than button.'
+        packageName === 'angular-16-ssr' || packageName === 'angular-16',
+        'Angular Gen2 event binding not working properly for repeat blocks.'
       );
       // hydration errors
       test.fail(packageName === 'gen1-next14-pages' || packageName === 'gen1-remix');

packages/sdks-tests/src/helpers/index.ts

@@ -95,7 +95,7 @@ export const isSSRFramework = (packageName: ServerName | 'DEFAULT') => {
     packageName === 'react' ||
     packageName === 'svelte' ||
     packageName === 'react-native' ||
-    packageName === 'angular' ||
+    packageName === 'angular-16' ||
     packageName === 'gen1-react';
   return !isNonSSR;
 };

packages/sdks-tests/src/helpers/sdk.ts

@@ -27,8 +27,9 @@ const serverNameEnumValues = [
   'nuxt',
   'svelte',
   'sveltekit',
-  'angular',
-  'angular-ssr',
+  'angular-16',
+  'angular-16-ssr',
+  'angular-19-ssr',
   'gen1-react',
   'gen1-remix',
   'gen1-next14-pages',
@@ -71,6 +72,7 @@ export const SDK_MAP: Record<ServerName, { sdk: Sdk; gen: Generation }> = {
   'gen1-next14-pages': { sdk: 'oldReact', gen: 'gen1' },
   'gen1-next15-app': { sdk: 'oldReact', gen: 'gen1' },
   'gen1-remix': { sdk: 'oldReact', gen: 'gen1' },
-  angular: { sdk: 'angular', gen: 'gen2' },
-  'angular-ssr': { sdk: 'angular', gen: 'gen2' },
+  'angular-16': { sdk: 'angular', gen: 'gen2' },
+  'angular-16-ssr': { sdk: 'angular', gen: 'gen2' },
+  'angular-19-ssr': { sdk: 'angular', gen: 'gen2' },
 };

packages/sdks-tests/src/snippet-tests/advanced-child.spec.ts

@@ -4,7 +4,7 @@ import { test, testClickAndVerifyVisibility } from '../helpers/index.js';
 test.describe('Advanced child sub components', () => {
   test('Display two buttons with label Tab 1 and Tab 2', async ({ page, packageName }) => {
     test.skip(
-      !['react', 'angular', 'angular-ssr', 'gen1-remix', 'gen1-react'].includes(packageName)
+      !['react', 'angular-16', 'angular-16-ssr', 'gen1-remix', 'gen1-react'].includes(packageName)
     );
 
     await page.goto('/advanced-child');
@@ -28,7 +28,7 @@ test.describe('Advanced child sub components', () => {
 
   test('Display content for the clicked tab and hide the other', async ({ page, packageName }) => {
     test.skip(
-      !['react', 'angular', 'angular-ssr', 'gen1-remix', 'gen1-react'].includes(packageName)
+      !['react', 'angular-16', 'angular-16-ssr', 'gen1-remix', 'gen1-react'].includes(packageName)
     );
 
     await page.goto('/advanced-child');

packages/sdks-tests/src/snippet-tests/blueprints-blogs.spec.ts

@@ -3,7 +3,7 @@ import { test } from '../helpers/index.js';
 
 test.describe('BlogArticleComponent', () => {
   test.beforeEach(async ({ page, packageName }) => {
-    test.skip(!['angular', 'angular-ssr'].includes(packageName));
+    test.skip(!['angular-16', 'angular-16-ssr'].includes(packageName));
     await page.goto('blogs/new-product-line');
   });
 

packages/sdks-tests/src/snippet-tests/blueprints-editorial.spec.ts

@@ -3,7 +3,7 @@ import { test } from '../helpers/index.js';
 
 test.describe('Product Editorial Page with Real Data', () => {
   test.beforeEach(async ({ page, packageName }) => {
-    test.skip(!['angular', 'angular-ssr'].includes(packageName));
+    test.skip(!['angular-16', 'angular-16-ssr'].includes(packageName));
     // Navigate to the product editorial page
     await page.goto('/products/1');
   });

packages/sdks-tests/src/snippet-tests/blueprints-navlinks.spec.ts

@@ -3,7 +3,7 @@ import { test } from '../helpers/index.js';
 
 test.describe('Nav Bar Components', () => {
   test.beforeEach(async ({ page, packageName }) => {
-    test.skip(!['angular', 'angular-ssr'].includes(packageName));
+    test.skip(!['angular-16', 'angular-16-ssr'].includes(packageName));
     // Visit the page where NavBarComponent is rendered
     await page.goto('/landing-page');
   });

packages/sdks-tests/src/snippet-tests/blueprints-product-details.spec.ts

@@ -3,7 +3,7 @@ import { test } from '../helpers/index.js';
 
 test.describe('Product Details Component', () => {
   test.beforeEach(async ({ page, packageName }) => {
-    test.skip(!['angular-ssr', 'angular'].includes(packageName));
+    test.skip(!['angular-16', 'angular-16-ssr'].includes(packageName));
     // Visit the page where ProductDetailsComponent is rendered
     await page.goto('/product/category/jacket');
   });

packages/sdks-tests/src/snippet-tests/custom-child.spec.ts

@@ -4,7 +4,7 @@ import { test } from '../helpers/index.js';
 test.describe('Div with Hero class, and text', () => {
   test('should render the page without 404', async ({ page, packageName }) => {
     test.skip(
-      !['react', 'angular', 'angular-ssr', 'gen1-remix', 'gen1-react'].includes(packageName)
+      !['react', 'angular-16', 'angular-16-ssr', 'gen1-remix', 'gen1-react'].includes(packageName)
     );
 
     const response = await page.goto('/custom-child');
@@ -13,7 +13,7 @@ test.describe('Div with Hero class, and text', () => {
 
   test('should verify builder-block with specific text', async ({ page, packageName }) => {
     test.skip(
-      !['react', 'angular', 'angular-ssr', 'gen1-remix', 'gen1-react'].includes(packageName)
+      !['react', 'angular-16', 'angular-16-ssr', 'gen1-remix', 'gen1-react'].includes(packageName)
     );
 
     await page.goto('/custom-child');

packages/sdks-tests/src/snippet-tests/editable-regions.spec.ts

@@ -6,7 +6,7 @@ test.describe('Editable regions in custom components', () => {
     page,
     packageName,
   }) => {
-    test.skip(!['react', 'angular', 'angular-ssr'].includes(packageName));
+    test.skip(!['react', 'angular-16', 'angular-16-ssr'].includes(packageName));
 
     await page.goto('/editable-region');
     await page.waitForLoadState('networkidle');
@@ -23,7 +23,7 @@ test.describe('Editable regions in custom components', () => {
     packageName,
   }) => {
     test.skip(
-      !['react', 'angular', 'angular-ssr', 'gen1-remix', 'gen1-react'].includes(packageName)
+      !['react', 'angular-16', 'angular-16-ssr', 'gen1-remix', 'gen1-react'].includes(packageName)
     );
 
     await page.goto('/editable-region');

packages/sdks-tests/src/specs/index.ts

@@ -185,7 +185,7 @@ export const PAGES: Record<string, Page> = {
   '/duplicated-content-using-nested-symbols': { content: DUPLICATED_CONTENT_USING_NESTED_SYMBOLS },
   '/custom-components-nowrap': {
     content: CUSTOM_COMPONENTS_NOWRAP,
-    target: ['angular', 'angular-ssr'],
+    target: ['angular-16', 'angular-16-ssr', 'angular-19-ssr'],
   },
   '/override-base-url': { content: HTTP_REQUESTS },
   '/xss-exploit': { content: XSS_EXPLOIT },

packages/sdks/e2e/angular-ssr/package.json → packages/sdks/e2e/angular-16-ssr/package.json

@@ -1,13 +1,13 @@
 {
-  "name": "@e2e/angular-ssr",
+  "name": "@e2e/angular-16-ssr",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
     "watch": "ng build --watch --configuration development",
     "dev": "ng run angular-app:serve-ssr",
     "serve": "node dist/angular-app/server/main.js",
     "build": "ng build && ng run angular-app:server",
-    "test": "SERVER_NAME=angular-ssr yarn g:nx test:e2e @sdk/tests",
+    "test": "SERVER_NAME=angular-16-ssr yarn g:nx test:e2e @sdk/tests",
     "prerender": "ng run angular-app:prerender"
   },
   "private": true,

packages/sdks/e2e/angular/package.json → packages/sdks/e2e/angular-16/package.json

@@ -1,12 +1,12 @@
 {
-  "name": "@e2e/angular",
+  "name": "@e2e/angular-16",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
     "serve": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "test": "SERVER_NAME=angular yarn g:nx test:e2e @sdk/tests"
+    "test": "SERVER_NAME=angular-16 yarn g:nx test:e2e @sdk/tests"
   },
   "private": true,
   "dependencies": {

packages/sdks/e2e/angular-19-ssr/.editorconfig

@@ -0,0 +1,17 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+ij_typescript_use_double_quotes = false
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

packages/sdks/e2e/angular-19-ssr/.gitignore

@@ -0,0 +1,42 @@
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db