docs: rewrite binding-syntax section in template-syntax.md (#25561)

PR Close #25561

aio/content/examples/binding-syntax/e2e/src/app.e2e-spec.ts

@@ -0,0 +1,76 @@
+import { browser, element, by } from 'protractor';
+import { logging } from 'selenium-webdriver';
+
+describe('Binding syntax e2e tests', () => {
+
+  beforeEach(function () {
+    browser.get('');
+  });
+
+
+    // helper function used to test what's logged to the console
+    async function logChecker(button, contents) {
+      const logs = await browser.manage().logs().get(logging.Type.BROWSER);
+      const message = logs.filter(({ message }) => message.indexOf(contents) !== -1 ? true : false);
+      expect(message.length).toBeGreaterThan(0);
+    }
+
+
+  it('should display Binding syntax', function () {
+    expect(element(by.css('h1')).getText()).toEqual('Binding syntax');
+  });
+
+  it('should display Save button', function () {
+    expect(element.all(by.css('button')).get(0).getText()).toBe('Save');
+  });
+
+  it('should display HTML attributes and DOM properties', function () {
+    expect(element.all(by.css('h2')).get(1).getText()).toBe('HTML attributes and DOM properties');
+  });
+
+  it('should display 1. Use the inspector...', function () {
+    expect(element.all(by.css('p')).get(0).getText()).toContain('1. Use the inspector');
+  });
+
+  it('should display Disabled property vs. attribute', function () {
+    expect(element.all(by.css('h3')).get(0).getText()).toBe('Disabled property vs. attribute');
+  });
+
+
+  it('should log a message including Sarah', async () => {
+    let attributeButton = element.all(by.css('button')).get(1);
+    await attributeButton.click();
+    const contents = 'Sarah';
+    logChecker(attributeButton, contents);
+  });
+
+  it('should log a message including Sarah for DOM property', async () => {
+    let DOMPropertyButton = element.all(by.css('button')).get(2);
+    await DOMPropertyButton.click();
+    const contents = 'Sarah';
+    logChecker(DOMPropertyButton, contents);
+  });
+
+  it('should log a message including Sally for DOM property', async () => {
+    let DOMPropertyButton = element.all(by.css('button')).get(2);
+    let input = element(by.css('input'));
+    input.sendKeys('Sally');
+    await DOMPropertyButton.click();
+    const contents = 'Sally';
+    logChecker(DOMPropertyButton, contents);
+  });
+
+  it('should log a message that Test Button works', async () => {
+    let testButton = element.all(by.css('button')).get(3);
+    await testButton.click();
+    const contents = 'Test';
+    logChecker(testButton, contents);
+  });
+
+  it('should toggle Test Button disabled', async () => {
+    let toggleButton = element.all(by.css('button')).get(4);
+    await toggleButton.click();
+    const contents = 'true';
+    logChecker(toggleButton, contents);
+  });
+});