docs: add new getting started guide (#27684)

PR Close #27684

aio/content/examples/getting-started/e2e/src/app.e2e-spec.ts

@@ -0,0 +1,118 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by, ExpectedConditions as EC, logging, ElementFinder, ElementArrayFinder } from 'protractor';
+
+describe('Getting Started', () => {
+  const pageElements = {
+    topBarHeader: element(by.css('app-root app-top-bar h1')),
+    topBarLinks: element(by.css('app-root app-top-bar a')),
+    topBarCheckoutLink: element(by.cssContainingText('app-root app-top-bar a', 'Checkout')),
+    productListHeader: element(by.css('app-root app-product-list h2')),
+    productListItems: element.all(by.css('app-root app-product-list h3')),
+    productListLinks: element.all(by.css('app-root app-product-list a')),
+    productDetailsPage: element(by.css('app-root app-product-details div')),
+    cartPage: element(by.css('app-root app-cart'))
+  };
+
+  describe('General', () => {
+    beforeAll(async() => {
+      await browser.get('/');
+    });
+
+    it('should display "My Store"', async() => {
+      const title = await pageElements.topBarHeader.getText();
+
+      expect(title).toEqual('My Store');
+    });
+
+    it('should display "Products" on the homepage', async() => {
+      const title = await pageElements.productListHeader.getText();
+
+      expect(title).toEqual('Products');
+    });
+  });
+
+  describe('Product List', () => {
+    beforeAll(async() => {
+      await browser.get('/');
+    });
+
+    it('should display 3 items', async() => {
+      const products = await pageElements.productListItems;
+
+      expect(products.length).toEqual(3);
+    });
+  });
+
+  describe('Product Details', () => {
+    beforeEach(async() => {
+      await browser.get('/');
+    });
+
+    it('should display information for a product', async() => {
+      await pageElements.productListLinks.get(0).click();
+
+      const product = pageElements.productDetailsPage;
+      const productHeader = await product.element(by.css('h3')).getText();
+      const productPrice = await product.element(by.css('h4')).getText();
+      const productDescription = await product.element(by.css('p')).getText();
+
+      expect(await product.isDisplayed()).toBeTruthy();
+      expect(productHeader).toBe('Phone XL');
+      expect(productPrice).toBe('$799.00');
+      expect(productDescription).toBe('A large phone with one of the best screens');
+    });
+
+    it('should add the product to the cart', async() => {
+      await pageElements.productListLinks.get(0).click();
+
+      const product = pageElements.productDetailsPage;
+      const buyButton = await product.element(by.css('button'));
+      const checkoutLink = pageElements.topBarCheckoutLink;
+
+      await buyButton.click();
+      await browser.wait(EC.alertIsPresent(), 1000);
+      await browser.switchTo().alert().accept();
+      await checkoutLink.click();
+
+      const cartItems = await element.all(by.css('app-root app-cart div.cart-item'));
+      expect(cartItems.length).toBe(1);
+    });
+  });
+
+  describe('Cart', () => {
+
+    beforeEach(async() => {
+      await browser.get('/');
+    });
+
+    it('should go through the checkout process', async() => {
+      await pageElements.productListLinks.get(0).click();
+
+      const checkoutLink = pageElements.topBarCheckoutLink;
+      const productDetailsPage = pageElements.productDetailsPage;
+      const buyButton = await productDetailsPage.element(by.css('button'));
+
+      const cartPage = pageElements.cartPage;
+      const inputFields = cartPage.all(by.css('form input'));
+
+      const purchaseButton = await cartPage.element(by.css('button'));
+      const nameField = inputFields.get(0);
+      const addressField = inputFields.get(1);
+
+      await buyButton.click();
+      await browser.wait(EC.alertIsPresent(), 1000);
+      await browser.switchTo().alert().accept();
+      await checkoutLink.click();
+
+      await nameField.sendKeys('Customer');
+      await addressField.sendKeys('Address');
+      await purchaseButton.click();
+
+      const logs = await browser.manage().logs().get(logging.Type.BROWSER);
+      const cartMessages = logs.filter(({ message }) => message.includes('Your order has been submitted'));
+
+      expect(cartMessages.length).toBe(1);
+    });
+  });
+});