Example app

.prettierrc

@@ -1,5 +1,5 @@
 {
-  "printWidth": 120,
+  "printWidth": 100,
   "singleQuote": true,
   "trailingComma": "es5",
   "arrowParens": "always",

.storybook/addons.js

@@ -1,4 +1,3 @@
-// @TODO https://github.com/storybooks/storybook/issues/3047
 import '@storybook/addon-storysource/register';
 import '@storybook/addon-actions/register';
 import '@storybook/addon-links/register';

.storybook/config.js

@@ -1,25 +1,21 @@
 import { configure } from '@storybook/angular';
 import { setOptions } from '@storybook/addon-options';
 
-import addCssWarning from './css-warnings';
-
-// addCssWarning();
-
-setOptions({
-  hierarchyRootSeparator: /\|/,
-});
+// automatically import all files ending in *.stories.ts
+const req = require.context('../src/stories', true, /.stories.ts$/);
+const reqLocal = require.context('../src/app', true, /.stories.ts$/);
 
 function loadStories() {
-  // put welcome screen at the top of the list so it's the first one displayed
-  require('../src/stories');
-
-  // automatically import all story ts files that end with *.stories.ts
-  const req = require.context('../src/stories', true, /\.stories\.ts$/);
-  req.keys().forEach((filename) => req(filename));
+  req.keys().forEach(loadStory(req));
+  reqLocal.keys().forEach(loadStory(reqLocal));
+}
 
-  // automatically import all story ts files that end with *.stories.ts within app ( side by side implementation )
-  const reqLocal = require.context('../src/app', true, /\.stories\.ts$/);
-  reqLocal.keys().forEach((filename) => reqLocal(filename));
+/**
+ *
+ * @param {(filename:string)=>any} callback
+ */
+function loadStory(callback) {
+  return (filename) => callback(filename);
 }
 
 configure(loadStories, module);

.storybook/webpack.config.js

@@ -0,0 +1,13 @@
+const path = require('path');
+
+module.exports = (baseConfig) => {
+  const storysourceLoader = {
+    test: [/\.stories\.tsx?$/, /index\.ts$/],
+    loaders: [require.resolve('@storybook/addon-storysource/loader')],
+    include: [path.resolve(__dirname, '../src')],
+    enforce: 'pre',
+  };
+  baseConfig.module.rules.push(storysourceLoader);
+
+  return baseConfig;
+};

.vscode/settings.json

@@ -5,7 +5,7 @@
   "prettier.singleQuote": true,
   "prettier.semi": true,
   "prettier.trailingComma": "es5",
-  "prettier.printWidth": 120,
+  "prettier.printWidth": 100,
   "prettier.bracketSpacing": true,
   "prettier.arrowParens": "always",
   "javascript.format.enable": false,

api/db.json

@@ -1 +1,106 @@
-{}
+{
+  "toppings": [
+    {
+      "id": 1,
+      "name": "anchovy"
+    },
+    {
+      "id": 2,
+      "name": "bacon"
+    },
+    {
+      "id": 3,
+      "name": "basil"
+    },
+    {
+      "id": 4,
+      "name": "chili"
+    },
+    {
+      "id": 5,
+      "name": "mozzarella"
+    },
+    {
+      "id": 6,
+      "name": "mushroom"
+    },
+    {
+      "id": 7,
+      "name": "olive"
+    },
+    {
+      "id": 8,
+      "name": "onion"
+    },
+    {
+      "id": 9,
+      "name": "pepper"
+    },
+    {
+      "id": 10,
+      "name": "pepperoni"
+    },
+    {
+      "id": 11,
+      "name": "sweetcorn"
+    },
+    {
+      "id": 12,
+      "name": "tomato"
+    }
+  ],
+  "pizzas": [
+    {
+      "name": "Blazin' Inferno",
+      "toppings": [
+        {
+          "id": 12,
+          "name": "tomato"
+        },
+        {
+          "id": 4,
+          "name": "chili"
+        },
+        {
+          "id": 10,
+          "name": "pepperoni"
+        },
+        {
+          "id": 9,
+          "name": "pepper"
+        },
+        {
+          "id": 5,
+          "name": "mozzarella"
+        },
+        {
+          "id": 3,
+          "name": "basil"
+        },
+        {
+          "id": 8,
+          "name": "onion"
+        }
+      ],
+      "id": 1
+    },
+    {
+      "name": "Plain Ol' Pepperoni",
+      "toppings": [
+        {
+          "id": 10,
+          "name": "pepperoni"
+        },
+        {
+          "id": 3,
+          "name": "basil"
+        },
+        {
+          "id": 11,
+          "name": "sweetcorn"
+        }
+      ],
+      "id": 3
+    }
+  ]
+}

example-apps/ngrx/api/db.json → api/initial-db.json

@@ -103,4 +103,4 @@
       "id": 3
     }
   ]
-}
+}

e2e/app.e2e-spec.ts

@@ -4,7 +4,7 @@ import { AppPage } from './app.po';
 
 const page = new AppPage();
 
-fixture('ro-sa App').beforeEach(async (t) => {
+fixture.skip('Pizza App').beforeEach(async (t) => {
   // await waitForAngular();
 });
 

e2e/create-pizza.e2e-spec.ts

@@ -0,0 +1,53 @@
+import { PizzaItemPage } from './pages/pizza-item.po';
+import { PizzaProductsPage } from './pages/pizza-products.po';
+
+const pizzaItem = new PizzaItemPage();
+const products = new PizzaProductsPage();
+
+const newPizzaName = 'Vikings chili pizza';
+
+fixture
+  .only('Create Pizza')
+  .beforeEach(async (t) => {
+    await pizzaItem.navigateTo();
+  })
+  .afterEach(async (t) => {
+    const pizza = await products.getProducts(newPizzaName);
+    await t.click(pizza);
+
+    await t.setNativeDialogHandler((type, text, url) => {
+      switch (type) {
+        case 'confirm':
+          switch (text) {
+            case 'Are you sure?':
+              return true;
+            default:
+              throw new Error('Unexpected confirm dialog!');
+          }
+        case 'prompt':
+          return 'Hi there';
+        case 'alert':
+          throw new Error('An alert was invoked!');
+      }
+    });
+
+    await t.click(pizzaItem.form.actionButtons.delete);
+  });
+
+test('should add Marvel chili Pizza to the menu!', async (t) => {
+  await pizzaItem.navigateToNewProduct();
+
+  await t.typeText(pizzaItem.form.pizzaNameInput, newPizzaName);
+
+  await pizzaItem.form.toppings.selectToping('chili');
+  await pizzaItem.form.toppings.selectToping('olive');
+  await pizzaItem.form.toppings.selectToping('tomato');
+  await pizzaItem.form.toppings.selectToping('bacon');
+
+  await t.click(pizzaItem.form.actionButtons.create);
+
+  await pizzaItem.navigateToProducts();
+  const pizzas = await products.getProducts();
+
+  await t.expect(pizzas.count).eql(3);
+});

e2e/pages/base.po.ts

@@ -0,0 +1,19 @@
+import { Selector, t } from 'testcafe';
+
+import { browser } from '../utils';
+
+export class BasePage {
+  private mainMenu = Selector('.app__nav').find('a');
+  private newPizzaButton = Selector('a').withAttribute('href', '/products/new');
+
+  navigateTo(path: string = '/') {
+    return browser.goTo(path);
+  }
+
+  navigateToProducts() {
+    return t.click(this.mainMenu.withAttribute('href', '/products'));
+  }
+  navigateToNewProduct() {
+    return t.click(this.newPizzaButton);
+  }
+}

e2e/pages/pizza-item.po.ts

@@ -0,0 +1,10 @@
+import { Selector } from 'testcafe';
+
+import { BasePage } from './base.po';
+import { PizzaFormWidget } from '../widgets/pizza-form.widget';
+import { PizzaDetailWidget } from '../widgets/pizza-display.widget';
+
+export class PizzaItemPage extends BasePage {
+  form = new PizzaFormWidget();
+  view = new PizzaDetailWidget();
+}

e2e/pages/pizza-products.po.ts

@@ -0,0 +1,29 @@
+import { Selector } from 'testcafe';
+
+import { browser } from '../utils';
+
+import { PizzaListItem } from '../widgets/pizza-list-item.widget';
+
+export class PizzaProductsPage {
+  static selector = 'app-products';
+  private root = Selector(PizzaProductsPage.selector);
+  productsListRoot = this.root.find('.products__list');
+  private products = new PizzaListItem();
+  createNewPizzaButton = Selector('.products__new > a');
+
+  async getProducts(name?: string) {
+    if (name) {
+      const pizzaName = this.products.pizzaName.withText(name);
+
+      if (pizzaName) {
+        return pizzaName.parent(PizzaListItem.selector);
+      }
+      return (null as any) as Selector;
+    }
+    return this.products.root;
+  }
+
+  navigateTo() {
+    return browser.goTo('/');
+  }
+}

e2e/pizza-list.e2e-spec.ts

@@ -0,0 +1,35 @@
+import { ClientFunction } from 'testcafe';
+
+import { PizzaProductsPage } from './pages/pizza-products.po';
+
+const getWindowLocation = ClientFunction(() => window.location);
+
+const productsPage = new PizzaProductsPage();
+
+fixture('Products showcase').beforeEach(async (t) => {
+  await productsPage.navigateTo();
+});
+
+test('should contain 2 pizzas', async (t) => {
+  const products = await productsPage.getProducts();
+  await t.expect(products.count).eql(2);
+});
+
+test(`should have "Blazin' Inferno" pizza on stock`, async (t) => {
+  const pizza = await productsPage.getProducts(`Blazin' Inferno`);
+  await t.expect(pizza.exists).ok();
+});
+
+test(`should not have "Black panther" pizza`, async (t) => {
+  const pizza = await productsPage.getProducts(`Black panther`);
+  await t.expect(pizza.exists).notOk();
+});
+
+test(`should navigate to Blazin Inferno detail`, async (t) => {
+  const pizza = await productsPage.getProducts(`Blazin' Inferno`);
+  await t.click(pizza);
+
+  const location: Location = await getWindowLocation();
+
+  await t.expect(location.pathname).contains('/products/1');
+});

e2e/widgets/pizza-display.widget.ts

@@ -0,0 +1,7 @@
+import { Selector } from 'testcafe';
+export class PizzaDetailWidget {
+  static selector = 'pizza-display';
+  root = Selector(PizzaDetailWidget.selector);
+  pizzaImg = this.root.find('img[src="/assets/img/pizza.svg"]');
+  toppingsImg = this.root.find('img.pizza-display__topping');
+}

e2e/widgets/pizza-form.widget.ts

@@ -0,0 +1,19 @@
+import { Selector } from 'testcafe';
+import { PizzaTopingsWidget } from './pizza-toppings.widget';
+export class PizzaFormWidget {
+  static selector = 'pizza-form';
+  private root = Selector(PizzaFormWidget.selector);
+  private topingsRoot = this.root.find('.pizza-form__list');
+  private actionsRoot = this.root.find('.pizza-form__actions');
+
+  pizzaNameInput = this.root.find(`input[formControlName="name"]`);
+  pizzaNameInputError = this.root.find('.pizza-form__error');
+
+  actionButtons = {
+    create: this.actionsRoot.find('button').withText('Create Pizza'),
+    save: this.actionsRoot.find('button').withText('Save changes'),
+    delete: this.actionsRoot.find('button').withText('Delete Pizza'),
+  };
+
+  toppings = new PizzaTopingsWidget();
+}

e2e/widgets/pizza-list-item.widget.ts

@@ -0,0 +1,11 @@
+import { Selector } from 'testcafe';
+
+import { PizzaDetailWidget } from './pizza-display.widget';
+
+export class PizzaListItem {
+  static selector = 'pizza-item';
+  root = Selector(PizzaListItem.selector);
+  detail = new PizzaDetailWidget();
+  pizzaName = this.root.find('h4');
+  viewPizzaButton = this.root.find('button').withText('View Pizza');
+}