@testgorilla/tgo-ui 2.31.0 → 2.31.1

package/e2e/logo.spec.ts

@@ -0,0 +1,45 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+import { expect, test } from '@playwright/test';
+// import { checkA11y, injectAxe } from 'axe-playwright';
+
+var urls = [
+  ['/iframe.html?viewMode=story&id=logo--default', 'ui-logo img'],
+  ['/iframe.html?viewMode=story&id=logo--powered-by', 'ui-logo img'],
+  ['/iframe.html?viewMode=story&id=logo--reverse', 'ui-logo img']
+];
+
+const singleURL = process.env['singleURL'];
+if ( singleURL != undefined) {
+  urls = [[singleURL]]
+}
+
+for (const url of urls) {
+  const componentName = url[0].split('&')[1];
+  test.describe(`Validating the accessibility and snapshot for ${componentName}`, () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto(url[0]);
+      // await injectAxe(page);
+    });
+
+    test(`Visual snapshot test for ${componentName}`, async ({ page }) => {
+      await page.waitForLoadState('domcontentloaded');
+      await page.waitForLoadState('load');
+      const locator = url[1]
+      expect(page.locator(locator)).toBeVisible({ timeout: 10000 });
+      await page.waitForLoadState('domcontentloaded');
+      await page.waitForLoadState('load');
+      await page.waitForTimeout(1000);
+      await expect(page).toHaveScreenshot(`${componentName}.png`, {
+        animations: 'disabled',
+        caret: 'hide',
+        fullPage: true,
+        omitBackground: true,
+        scale: 'css',
+        maxDiffPixelRatio: 0.01,
+      });
+      // as of now ignoring the failures for accessibility tests
+      // await checkA11y(page, undefined, undefined, true);
+    });
+  });
+}

package/e2e/navbar.spec.ts

@@ -0,0 +1,42 @@
+// /* eslint-disable @typescript-eslint/no-unsafe-member-access */
+// /* eslint-disable @typescript-eslint/no-unsafe-call */
+// import { expect, test } from '@playwright/test';
+// // import { checkA11y, injectAxe } from 'axe-playwright';
+
+// var urls = [
+//   ['/iframe.html?viewMode=story&id=navbar--default', 'ui-navbar'],
+// ];
+// const singleURL = process.env['singleURL'];
+// if ( singleURL != undefined) {
+//   urls = [[singleURL]]
+// }
+
+// for (const url of urls) {
+//   const componentName = url[0].split('&')[1];
+//   test.describe(`Validating the accessibility and snapshot for ${componentName}`, () => {
+//     test.beforeEach(async ({ page }) => {
+//       await page.goto(url[0]);
+//       // await injectAxe(page);
+//     });
+
+//     test(`Visual snapshot test for ${componentName}`, async ({ page }) => {
+//       await page.waitForLoadState('domcontentloaded');
+//       await page.waitForLoadState('load');
+//       const locator = url[1]
+//       expect(page.locator(locator)).toBeVisible({ timeout: 10000 });
+//       await page.waitForLoadState('domcontentloaded');
+//       await page.waitForLoadState('load');
+//       await page.waitForTimeout(1000);
+//       await expect(page).toHaveScreenshot(`${componentName}.png`, {
+//         animations: 'disabled',
+//         caret: 'hide',
+//         fullPage: true,
+//         omitBackground: true,
+//         scale: 'css',
+//         maxDiffPixelRatio: 0.01,
+//       });
+//       // as of now ignoring the failures for accessibility tests
+//       // await checkA11y(page, undefined, undefined, true);
+//     });
+//   });
+// }

package/e2e/navigation.spec.ts

@@ -0,0 +1,43 @@
+// /* eslint-disable @typescript-eslint/no-unsafe-member-access */
+// /* eslint-disable @typescript-eslint/no-unsafe-call */
+// import { expect, test } from '@playwright/test';
+// // import { checkA11y, injectAxe } from 'axe-playwright';
+
+// var urls = [
+//   ['/iframe.html?viewMode=story&id=navigation--default', 'ui-navigation button'],
+// ];
+
+// const singleURL = process.env['singleURL'];
+// if ( singleURL != undefined) {
+//   urls = [[singleURL]]
+// }
+
+// for (const url of urls) {
+//   const componentName = url[0].split('&')[1];
+//   test.describe(`Validating the accessibility and snapshot for ${componentName}`, () => {
+//     test.beforeEach(async ({ page }) => {
+//       await page.goto(url[0]);
+//       // await injectAxe(page);
+//     });
+
+//     test(`Visual snapshot test for ${componentName}`, async ({ page }) => {
+//       await page.waitForLoadState('domcontentloaded');
+//       await page.waitForLoadState('load');
+//       const locator = url[1]
+//       expect(page.locator(locator)).toBeVisible({ timeout: 10000 });
+//       await page.waitForLoadState('domcontentloaded');
+//       await page.waitForLoadState('load');
+//       await page.waitForTimeout(1000);
+//       await expect(page).toHaveScreenshot(`${componentName}.png`, {
+//         animations: 'disabled',
+//         caret: 'hide',
+//         fullPage: true,
+//         omitBackground: true,
+//         scale: 'css',
+//         maxDiffPixelRatio: 0.01,
+//       });
+//       // as of now ignoring the failures for accessibility tests
+//       // await checkA11y(page, undefined, undefined, true);
+//     });
+//   });
+// }

package/e2e/paginator.spec.ts

@@ -0,0 +1,42 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+import { expect, test } from '@playwright/test';
+// import { checkA11y, injectAxe } from 'axe-playwright';
+
+var urls = [
+  ['/iframe.html?viewMode=story&id=paginator--default', 'ui-paginator'],
+];
+const singleURL = process.env['singleURL'];
+if ( singleURL != undefined) {
+  urls = [[singleURL]]
+}
+
+for (const url of urls) {
+  const componentName = url[0].split('&')[1];
+  test.describe(`Validating the accessibility and snapshot for ${componentName}`, () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto(url[0]);
+      // await injectAxe(page);
+    });
+
+    test(`Visual snapshot test for ${componentName}`, async ({ page }) => {
+      await page.waitForLoadState('domcontentloaded');
+      await page.waitForLoadState('load');
+      const locator = url[1]
+      expect(page.locator(locator)).toBeVisible({ timeout: 10000 });
+      await page.waitForLoadState('domcontentloaded');
+      await page.waitForLoadState('load');
+      await page.waitForTimeout(1000);
+      await expect(page).toHaveScreenshot(`${componentName}.png`, {
+        animations: 'disabled',
+        caret: 'hide',
+        fullPage: true,
+        omitBackground: true,
+        scale: 'css',
+        maxDiffPixelRatio: 0.01,
+      });
+      // as of now ignoring the failures for accessibility tests
+      // await checkA11y(page, undefined, undefined, true);
+    });
+  });
+}

package/e2e/progressBar.spec.ts

@@ -0,0 +1,42 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+import { expect, test } from '@playwright/test';
+// import { checkA11y, injectAxe } from 'axe-playwright';
+
+var urls = [
+  ['/iframe.html?viewMode=story&id=progressbar--determinate', 'ui-progress-bar'],
+];
+const singleURL = process.env['singleURL'];
+if ( singleURL != undefined) {
+  urls = [[singleURL]]
+}
+
+for (const url of urls) {
+  const componentName = url[0].split('&')[1];
+  test.describe(`Validating the accessibility and snapshot for ${componentName}`, () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto(url[0]);
+      // await injectAxe(page);
+    });
+
+    test(`Visual snapshot test for ${componentName}`, async ({ page }) => {
+      await page.waitForLoadState('domcontentloaded');
+      await page.waitForLoadState('load');
+      const locator = url[1]
+      expect(page.locator(locator)).toBeVisible({ timeout: 10000 });
+      await page.waitForLoadState('domcontentloaded');
+      await page.waitForLoadState('load');
+      await page.waitForTimeout(1000);
+      await expect(page).toHaveScreenshot(`${componentName}.png`, {
+        animations: 'disabled',
+        caret: 'hide',
+        fullPage: true,
+        omitBackground: true,
+        scale: 'css',
+        maxDiffPixelRatio: 0.01,
+      });
+      // as of now ignoring the failures for accessibility tests
+      // await checkA11y(page, undefined, undefined, true);
+    });
+  });
+}

package/e2e/table.spec.ts

@@ -0,0 +1,47 @@
+// /* eslint-disable @typescript-eslint/no-unsafe-member-access */
+// /* eslint-disable @typescript-eslint/no-unsafe-call */
+// import { expect, test } from '@playwright/test';
+// // import { checkA11y, injectAxe } from 'axe-playwright';
+
+// var urls = [
+//   ['/iframe.html?viewMode=story&id=deprecated-table--default', 'ui-table'],
+//   ['/iframe.html?viewMode=story&id=deprecated-table--expandable', 'ui-table']
+// ];
+// const singleURL = process.env['singleURL'];
+// if ( singleURL != undefined) {
+//   urls = [[singleURL]]
+// }
+
+// for (const url of urls) {
+//   const componentName = url[0].split('&')[1];
+//   test.describe(`Validating the accessibility and snapshot for ${componentName}`, () => {
+//     test.beforeEach(async ({ page }) => {
+//       await page.goto(url[0]);
+//       // await injectAxe(page);
+//     });
+
+//     test(`Visual snapshot test for ${componentName}`, async ({ page }) => {
+//       await page.waitForLoadState('domcontentloaded');
+//       await page.waitForLoadState('load');
+//       const expandTable = page.locator('ui-table table tbody').first();
+//       const locator = url[1]
+//       expect(page.locator(locator)).toBeVisible({ timeout: 10000 });
+//       await page.waitForLoadState('domcontentloaded');
+//       await page.waitForLoadState('load');
+//       if (componentName.includes('expandable')) {
+//         await expandTable.click();
+//       }
+//       await page.waitForTimeout(1000);
+//       await expect(page).toHaveScreenshot(`${componentName}.png`, {
+//         animations: 'disabled',
+//         caret: 'hide',
+//         fullPage: true,
+//         omitBackground: true,
+//         scale: 'css',
+//         maxDiffPixelRatio: 0.01,
+//       });
+//       // as of now ignoring the failures for accessibility tests
+//       // await checkA11y(page, undefined, undefined, true);
+//     });
+//   });
+// }

package/e2e/typography.spec.ts

@@ -0,0 +1,42 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+import { expect, test } from '@playwright/test';
+// import { checkA11y, injectAxe } from 'axe-playwright';
+
+var urls = [
+  ['/iframe.html?viewMode=story&id=foundations-typography--page&args=&viewMode=story', 'div.sbdocs-content'],
+];
+const singleURL = process.env['singleURL'];
+if ( singleURL != undefined) {
+  urls = [[singleURL]]
+}
+
+for (const url of urls) {
+  const componentName = url[0].split('&')[1];
+  test.describe(`Validating the accessibility and snapshot for ${componentName}`, () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto(url[0]);
+      // await injectAxe(page);
+    });
+
+    test.skip(`Visual snapshot test for ${componentName}`, async ({ page }) => {
+      await page.waitForLoadState('domcontentloaded');
+      await page.waitForLoadState('load');
+      const locator = url[1]
+      expect(page.locator(locator)).toBeVisible({ timeout: 10000 });
+      await page.waitForLoadState('domcontentloaded');
+      await page.waitForLoadState('load');
+      await page.waitForTimeout(1000);
+      await expect(page).toHaveScreenshot(`${componentName}.png`, {
+        animations: 'disabled',
+        caret: 'hide',
+        fullPage: true,
+        omitBackground: true,
+        scale: 'css',
+        maxDiffPixelRatio: 0.01,
+      });
+      // as of now ignoring the failures for accessibility tests
+      // await checkA11y(page, undefined, undefined, true);
+    });
+  });
+}

package/globalSetup.js

@@ -0,0 +1,9 @@
+/* eslint-disable @typescript-eslint/require-await */
+/* eslint-disable prefer-arrow/prefer-arrow-functions */
+
+// This file is a jest config which is run once before all tests are executed.
+// Right now we are only using it to set the timezone for unit tests execution
+// so that date calculation related tests run fine.
+module.exports = async function (globalConfig, projectConfig) {
+  process.env.TZ = 'America/Cordoba';
+};

package/jest.config.js

@@ -0,0 +1,56 @@
+/* eslint-disable @typescript-eslint/restrict-template-expressions */
+/* eslint-disable @typescript-eslint/restrict-plus-operands */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable prefer-arrow/prefer-arrow-functions */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+const TS_CONFIG_PATH = './tsconfig.json';
+const SRC_PATH = '<rootDir>/projects/tgo-canopy-ui';
+
+function makeModuleNameMapper(srcPath, tsconfigPath) {
+  // Get paths from tsconfig
+  const { paths } = require(tsconfigPath).compilerOptions;
+
+  const aliases = {};
+
+  // Iterate over paths and convert them into moduleNameMapper format
+  Object.keys(paths).forEach(item => {
+    const key = item.replace('/*', '/(.*)');
+    const path = paths[item][0].replace('/*', '/$1');
+    aliases[key] = `${srcPath}/${path}`;
+  });
+  return aliases;
+}
+
+module.exports = {
+  preset: 'jest-preset-angular',
+  roots: [SRC_PATH],
+  testMatch: ['**/+(*.)+(spec).+(ts)'],
+  setupFilesAfterEnv: ['<rootDir>/projects/tgo-canopy-ui/test.ts'],
+  // globalSetup: 'jest-preset-angular/global-setup',
+  collectCoverage: true,
+  coverageReporters: ['json', 'html', 'text'],
+  coverageDirectory: 'coverage',
+  moduleDirectories: ['node_modules', 'src'],
+  transform: {},
+  moduleNameMapper: {
+    '^lodash-es$': 'lodash',
+  },
+  collectCoverageFrom: [
+    'projects/tgo-canopy-ui/**/*.ts',
+    '!projects/tgo-canopy-ui/**/*module.ts',
+    '!projects/tgo-canopy-ui/**/*enums.ts',
+    '!projects/tgo-canopy-ui/**/*mocks.ts',
+    '!projects/tgo-canopy-ui/**/*model.ts',
+    '!projects/tgo-canopy-ui/main.ts',
+    '!projects/tgo-canopy-ui/polyfills.ts',
+    '!projects/tgo-canopy-ui/**/*.stories.ts',
+    '!projects/tgo-canopy-ui/public-api.ts',
+    '!projects/tgo-canopy-ui/components/deprecated-paginator/**/*.ts',
+    '!projects/tgo-canopy-ui/components/deprecated-table/**/*.ts',
+    '!projects/tgo-canopy-ui/components/bars-demo/**/*.ts',
+    '!projects/tgo-canopy-ui/components/dialog-demo/**/*.ts',
+  ],
+  //moduleNameMapper: makeModuleNameMapper(SRC_PATH, TS_CONFIG_PATH),
+};

package/ng-package.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "./dist/tgo-ui",
+  "lib": {
+    "entryFile": "./projects/tgo-canopy-ui/public-api.ts",
+    "styleIncludePaths": ["./projects/tgo-canopy-ui/theme"]
+  },
+  "assets": ["./projects/tgo-canopy-ui/theme/**/*.scss", "./projects/tgo-canopy-ui/assets", "./projects/tgo-canopy-ui/theme/**/*.otf"]
+}

package/package.json

@@ -1,7 +1,29 @@
 {
   "name": "@testgorilla/tgo-ui",
-  "version": "2.31.0",
+  "version": "2.31.1",
   "license": "proprietary-license",
+  "scripts": {
+    "start:client": "ng serve",
+    "build:client": "ng build client",
+    "build:tgo-ui": "ng build tgo-ui",
+    "watch": "ng build --watch --configuration development",
+    "lint": "eslint -c .eslintrc.js --ext .ts projects/",
+    "stylelint": "stylelint \\\"projects/**/*.scss\\\"",
+    "pre-commit": "lint-staged",
+    "prettier": "prettier --write \\\"projects/**/*.{js,ts,scss,md,html,json}\\\"",
+    "docs:json": "compodoc -p ./tsconfig.json -e json -d .",
+    "storybook": "ng run tgo-ui:storybook",
+    "build-storybook": "ng run tgo-ui:build-storybook",
+    "playwright-visual": "npx playwright test e2e/common.spec.ts",
+    "playwright-visual-update": "npx playwright test e2e/common.spec.ts --update-snapshots",
+    "test": "jest --coverage=false",
+    "test:ci": "jest --coverage=true --runInBand --detectOpenHandles",
+    "test:coverage": "jest",
+    "test:coverage:summary": "jest --coverageReporters='text-summary'",
+    "test:watch": "jest --watch --coverage=false",
+    "test:watch:coverage": "jest --watch",
+    "lint:a11y": "npx eslint --config .eslintrc-a11y.js --no-eslintrc projects/tgo-canopy-ui/components"
+  },
   "lint-staged": {
     "src/**/*.ts": [
       "eslint --fix",
@@ -38,25 +60,64 @@
     "svg-country-flags": "^1.2.10",
     "zone.js": "^0.14.5"
   },
+  "devDependencies": {
+    "@angular-devkit/architect": "^0.1703.6",
+    "@angular-devkit/build-angular": "^17.3.6",
+    "@angular-devkit/core": "^17.3.6",
+    "@angular-eslint/eslint-plugin": "~13.2.1",
+    "@angular-eslint/eslint-plugin-template": "~13.2.1",
+    "@angular-eslint/template-parser": "^18.3.0",
+    "@angular/cli": "^17.3.6",
+    "@angular/compiler-cli": "^17.3.7",
+    "@babel/core": "^7.22.10",
+    "@chromatic-com/storybook": "^1.5.0",
+    "@compodoc/compodoc": "^1.1.16",
+    "@html-eslint/eslint-plugin": "^0.26.0",
+    "@html-eslint/parser": "^0.26.0",
+    "@playwright/test": "^1.37.1",
+    "@storybook/addon-a11y": "^8.1.9",
+    "@storybook/addon-actions": "^8.1.9",
+    "@storybook/addon-docs": "^8.1.9",
+    "@storybook/addon-essentials": "^8.1.9",
+    "@storybook/addon-interactions": "^8.1.9",
+    "@storybook/addon-links": "^8.1.9",
+    "@storybook/angular": "^8.1.9",
+    "@storybook/test": "^8.1.9",
+    "@types/jest": "^29.2.6",
+    "@types/node": "~18.17.3",
+    "@types/gaussian": "1.2.2",
+    "@typescript-eslint/eslint-plugin": "~5.20.0",
+    "@typescript-eslint/parser": "~5.20.0",
+    "babel-loader": "~8.2.5",
+    "dotenv": "^16.4.5",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-plugin-import": "~2.26.0",
+    "eslint-plugin-jsdoc": "~39.2.8",
+    "eslint-plugin-prefer-arrow": "~1.2.3",
+    "eslint-plugin-prettier": "5.2.1",
+    "eslint-plugin-storybook": "~0.6.13",
+    "googleapis": "^142.0.0",
+    "jest": "^29.6.2",
+    "jest-preset-angular": "^14.2.2",
+    "lint-staged": "~12.4.0",
+    "ng-packagr": "^17.3.0",
+    "path": "^0.12.7",
+    "prettier": "3.3.3",
+    "prettier-plugin-organize-imports": "4.0.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "storybook": "^8.1.9",
+    "stylelint": "~14.8.2",
+    "stylelint-config-standard-scss": "~3.0.0",
+    "typescript": "~5.4.5"
+  },
   "overrides": {
     "crypto-js": "4.2.0",
     "webpack-dev-middleware": "^6.1.2",
     "webpack": "^5.94.0",
     "vite": "5.4.12",
-    "undici": "6.21.1"
-  },
-  "module": "fesm2022/testgorilla-tgo-ui.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/testgorilla-tgo-ui.mjs",
-      "esm": "./esm2022/testgorilla-tgo-ui.mjs",
-      "default": "./fesm2022/testgorilla-tgo-ui.mjs"
-    }
-  },
-  "sideEffects": false
-}
+    "undici": "6.21.1",
+    "esbuild": "0.25.0"
+  }
+}

package/parse-a11y-linter.js

@@ -0,0 +1,79 @@
+const fs = require('fs');
+const path = require('path');
+const { google } = require('googleapis');
+require('dotenv').config();
+const args = process.argv.slice(2);
+const threshold = parseFloat(args[0]);
+const filePath = path.join(__dirname, 'lint-a11y-output.txt');
+
+async function appendToSheet(data) {
+  const auth = new google.auth.GoogleAuth({
+    credentials: {
+      type: 'service_account',
+      project_id: process.env.QA_PROJECT_ID,
+      private_key_id: process.env.QA_PRIVATE_KEY_ID,
+      private_key: process.env.QA_PRIVATE_KEY.replace(/\\n/g, '\n'),
+      client_email: process.env.QA_CLIENT_EMAIL,
+      client_id: process.env.QA_CLIENT_ID,
+      auth_uri: 'https://accounts.google.com/o/oauth2/auth',
+      token_uri: 'https://oauth2.googleapis.com/token',
+      auth_provider_x509_cert_url: 'https://www.googleapis.com/oauth2/v1/certs',
+      client_x509_cert_url:
+        'https://www.googleapis.com/robot/v1/metadata/x509/automation-id-metrics%40automation-id-metrics-412119.iam.gserviceaccount.com',
+      universe_domain: 'googleapis.com',
+    },
+    scopes: ['https://www.googleapis.com/auth/spreadsheets'],
+  });
+
+  const sheets = google.sheets({ version: 'v4', auth });
+  const spreadsheetId =  process.env.A11Y_LINTER_SPREADSHEET_ID;
+  const range = 'METRICS!A:G';
+  await sheets.spreadsheets.values.append({
+    spreadsheetId,
+    range,
+    valueInputOption: 'USER_ENTERED',
+    resource: {
+      values: [data],
+    },
+  });
+}
+
+fs.readFile(filePath, 'utf8', (err, data) => {
+  if (err) {
+    console.error('Error reading file:', err);
+    return;
+  }
+
+  let componentViolationRation;
+  const totalComponentsRegex = /tgo-canopy-ui\/components/g;
+  const totalViolationsRegex = /(\d+) problems \(/g;
+  const totalComponentWithViolations = (data.match(totalComponentsRegex) || []).length;
+  const totalViolations = data.match(totalViolationsRegex) ? data.match(totalViolationsRegex)[0].split(' ')[0] : 0;
+  console.log(`Total components with violations: ${totalComponentWithViolations}`);
+  console.log(`Total violations: ${totalViolations}`);
+
+  if (totalViolations > 0) {
+    componentViolationRation = ((totalComponentWithViolations / totalViolations) * 100).toFixed(2);
+    console.log(`Component/Violation ratio': ${componentViolationRation}%`);
+  } else {
+    console.log('No relevant data found in the file.');
+  }
+
+  const currentDateTime = new Date().toISOString().replace('T', ' ').substring(0, 19);
+
+  const rowData = [
+    currentDateTime,
+    totalComponentWithViolations,
+    totalViolations,
+    componentViolationRation,
+    threshold,
+    process.env.CIRCLE_PROJECT_REPONAME,
+  ];
+
+  appendToSheet(rowData).catch(console.error).then(() =>{
+    if (threshold && totalViolations > threshold) {
+      console.error(`Max of ${threshold} violations expected, ${totalViolations} reported.`);
+      process.exit(1);
+    }
+  });
+});

package/projects/client/src/app/app.component.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

package/projects/client/src/app/app.component.scss

@@ -0,0 +1,8 @@
+.text-body {
+  display: flex;
+  padding: 16px;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}

package/projects/client/src/app/app.component.spec.ts

@@ -0,0 +1,27 @@
+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(() => TestBed.configureTestingModule({
+    declarations: [AppComponent]
+  }));
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'client'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('client');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('.content span')?.textContent).toContain('client app is running!');
+  });
+});