Angular update

.github/workflows/test.yml

@@ -12,18 +12,43 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [18.x]
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+      - name: Set up Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
+
+      - name: Install required dependencies for Puppeteer
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y \
+            libnss3 \
+            libatk1.0-0 \
+            libatk-bridge2.0-0 \
+            libxcomposite1 \
+            libxdamage1 \
+            libxrandr2 \
+            libgbm1 \
+            libasound2 \
+            libpangocairo-1.0-0 \
+            libatspi2.0-0 \
+            libcups2 \
+            libxss1 \
+            libxshmfence1 \
+            libglu1-mesa \
+            libpci3 \
+            libdrm2 \
+            libgtk-3-0 \
+            chromium-browser || sudo apt-get install -y chromium
+
+      - name: Install dependencies
+        run: npm ci
 
-      - run: npm ci
-
-      - run: npx eyes-storybook
+      - name: Run Eyes Storybook
+        run: npm run test-storybook
         env: 
           APPLITOOLS_API_KEY: ${{ secrets.APPLITOOLS_API_KEY }}

.gitignore

@@ -37,3 +37,5 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+
+*storybook.log

.storybook/main.ts

@@ -0,0 +1,24 @@
+import { dirname, join } from "path";
+import type { StorybookConfig } from '@storybook/angular';
+
+const config: StorybookConfig = {
+  "stories": [
+    "../src/**/*.mdx",
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  "addons": [
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-onboarding"),
+    getAbsolutePath("@storybook/addon-interactions"),
+    "@storybook/addon-mdx-gfm"
+  ],
+  "framework": {
+    "name": "@storybook/angular",
+    "options": {}
+  }
+};
+export default config;
+
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, "package.json")));
+}

.storybook/preview.ts

@@ -0,0 +1,17 @@
+import type { Preview } from '@storybook/angular'
+import { setCompodocJson } from "@storybook/addon-docs/angular";
+import docJson from "../documentation.json";
+setCompodocJson(docJson);
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+       color: /(background|color)$/i,
+       date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

.storybook/tsconfig.doc.json

@@ -0,0 +1,10 @@
+// This tsconfig is used by Compodoc to generate the documentation for the project.
+// If Compodoc is not used, this file can be deleted.
+{
+  "extends": "./tsconfig.json",
+  // Exclude all files that are not needed for documentation generation.
+  "exclude": ["../src/test.ts", "../src/**/*.spec.ts", "../src/**/*.stories.ts"],
+  // Please make sure to include all files from which Compodoc should generate documentation.
+  "include": ["../src/**/*"],
+  "files": ["./typings.d.ts"]
+}

.storybook/tsconfig.json

@@ -1,12 +1,11 @@
 {
-  "extends": "../tsconfig.json",
-  "exclude": [
-    "../src/test.ts",
-    "../src/**/*.spec.ts",
-    "../projects/**/*.spec.ts"
-  ],
-  "include": [
-    "../src/**/*",
-    "../projects/**/*"
-  ]
+  "extends": "../tsconfig.app.json",
+  "compilerOptions": {
+    "types": ["node"],
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true
+  },
+  "exclude": ["../src/test.ts", "../src/**/*.spec.ts"],
+  "include": ["../src/**/*.stories.*", "./preview.ts"],
+  "files": ["./typings.d.ts"]
 }

.storybook/typings.d.ts

@@ -0,0 +1,4 @@
+declare module '*.md' {
+  const content: string;
+  export default content;
+}

README.md

@@ -1,26 +1,37 @@
-# Applitools Storybook Angular Tutorial
+# Applitools Tutorial - Storybook Angular
 
-Please see [https://applitools.com/tutorials/storybook-angular.html](https://applitools.com/tutorials/storybook-angular.html)
+Get started with Applitools Eyes visual testing with this example of using [Storybook](https://storybook.js.org/) and our [Eyes Storybook SDK](https://applitools.com/tutorials/sdks/storybook).
 
-## Creating a new Angular project, adding Storybook and adding Applitools SDK from scratch
+Learn more about how to install and start this project with our [Storybook React tutorial](https://applitools.com/tutorials/sdks/storybook)!
 
-### Create angular cli and create a sample project
+_If you're looking for the CSF format for creating Storybook stories, check out the [Storybook CSF React tutorial](https://github.com/applitools/tutorial-storybook-csf-react)._
 
-- `sudo npm install -g @angular/cli`
-- `ng new tutorial-storybook-angular`
-- `cd tutorial-storybook-angular/`
+# Installation & Run
+1. Install the dependencies
+    ```sh
+    npm install
+    ```
 
+To authenticate via the Applitools server and run tests, you need to set your API key provided from Applitools Eyes. For details on how to retrieve your API key, see [the Applitools documentation](https://applitools.com/tutorials/getting-started/retrieve-api-key).
 
-### Add Storybook executable
-Installs storybook executable. We can use this to automatically add Storybook deps and configs to existing projects
+2. Choose one of the following options to set your API Key.
+    * Set your Applitools API Key as an environment variable. 
+        * macOS/Linux: `export APPLITOOLS_API_KEY=<Your API Key>`
+        * Windows: `set APPLITOOLS_API_KEY=<Your API Key>`
+
+    * Set your Applitools API Key inside the **applitools.config.js** file via the `apiKey` setting.
+        * Note: If you are not using the Eyes public cloud, you will need to update the `serverUrl` to your Eyes server URL in the **applitools.config.js** configuration file or set via an `APPLITOOLS_SERVER_URL` environment variable. See our [documentation](https://applitools.com/tutorials/sdks/storybook/config) for more information on these settings.
 
- - `sudo npm i -g @storybook/cli` //The alpha versions are compatible with the latest Webpack 4 . Get either 4.0 alpha or later.
- - `cd tutorial-storybook-angular`
- - `storybook init` //this adds all the stuff we Storybook needs to the project
- - `storybook start` //start storybook server
+3. Run the example test
+    ```sh
+    npm run test-storybook
+    ```
 
+4. After the example tests complete. Visit your Applitools Eyes dashboard to view the results.
 
+## More Information
 
-### Adding Applitools eyes
-- `npm install @applitools/eyes.storybook@beta --save-dev` //Note `@beta` has some fixes as of this point. You don't need this after October 2018.
-- `npx eyes-storybook`
+Learn more about [Applitools Eyes](https://www.applitools.com) and the [Applitool Ultrafast Grid](https://applitools.com/platform/ultrafast-grid).
+
+More about the Eyes Storybook SDK:
+* https://www.npmjs.com/package/@applitools/eyes-storybook