check html structure + fix for some frameworks

krausest · krausest · commit d559aa380e47 · 2019-06-20T21:41:56.000+02:00
diff --git a/frameworks/keyed/attodom/src/view.js b/frameworks/keyed/attodom/src/view.js
@@ -28,7 +28,7 @@ module.exports = function(store) {
       ),
       h('td', {class: 'col-md-1', onClick: clickHandlerDelete},
         h('a', {class: 'remove'},
-          h('span', {class: 'glyphicon glyphicon-remove remove', 'aria-hidden': ''})
+          h('span', {class: 'glyphicon glyphicon-remove remove', 'aria-hidden': 'true'})
         )
       ),
       h('td', {class: 'col-md-6'})
diff --git a/frameworks/keyed/domvm/src/main.es6.js b/frameworks/keyed/domvm/src/main.es6.js
@@ -26,7 +26,7 @@ function AppView(vm, store) {
 			el("div", {class: "container"}, [
 				JumbotronTpl(store),
 				TableTpl(store),
-				el("span", {class: "preloadicon glyphicon glyphicon-remove", "aria-hidden": ""})
+				el("span", {class: "preloadicon glyphicon glyphicon-remove", "aria-hidden": "true"})
 			])
 		])
 	);
@@ -92,7 +92,7 @@ function RowTpl(item, store, key) {
 			]),
 			el("td", {class: "col-md-1"}, [
 				el("a", {onclick: [store.exec, "delete", item.id]}, [
-					el("span", {class: "glyphicon glyphicon-remove", "aria-hidden": ""})
+					el("span", {class: "glyphicon glyphicon-remove", "aria-hidden": "true"})
 				])
 			]),
 			el("td", {class: "col-md-6"})
diff --git a/frameworks/keyed/faster-dom/index.html b/frameworks/keyed/faster-dom/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="utf-8"/>
-    <title>FastDom-"keyed"</title>
+    <title>FasterDom-"keyed"</title>
     <link href="/css/currentStyle.css" rel="stylesheet"/>
 </head>
 <body>
diff --git a/frameworks/keyed/faster-dom/src/Main.js b/frameworks/keyed/faster-dom/src/Main.js
@@ -75,6 +75,10 @@ class TrComponent extends Component {
                             ]
                         }
                     ]
+                },
+                {
+                    tag: "td",
+                    classList: 'col-md-6'
                 }
             ]
         }
@@ -129,7 +133,7 @@ class MainContainer extends Component {
                                     children: [
                                         {
                                             tag: "h1",
-                                            textValue: 'FastDom-"keyed""'
+                                            textValue: 'FastDom-"keyed"'
                                         }
                                     ]
                                 },
diff --git a/frameworks/keyed/hullo/src/index.js b/frameworks/keyed/hullo/src/index.js
@@ -152,6 +152,9 @@ function Row(props) {
             }
           })
         ]
+      }),
+      Td({
+        span: 6
       })
     ]
   );
diff --git a/frameworks/keyed/maquette/src/main.es6.js b/frameworks/keyed/maquette/src/main.es6.js
@@ -18,7 +18,7 @@ function App() {
 				h("div.container", [
 					jumbo.render(),
 					table.render(),
-					h("span.preloadicon.glyphicon.glyphicon-remove", {"aria-hidden": ""})
+					h("span.preloadicon.glyphicon.glyphicon-remove", {"aria-hidden": "true"})
 				])
 			])
 	};
@@ -100,7 +100,7 @@ function Table() {
 						]),
 						h("td.col-md-1", [
 							h("a.remove", [
-								h("span.glyphicon.glyphicon-remove", {"aria-hidden": ""})
+								h("span.glyphicon.glyphicon-remove", {"aria-hidden": "true"})
 							])
 						]),
 						h("td.col-md-6")
diff --git a/frameworks/keyed/vidom/src/controller.jsx b/frameworks/keyed/vidom/src/controller.jsx
@@ -23,7 +23,7 @@ export class Row extends Component {
             <td className="col-md-4">
                 <a onClick={this._onClick}>{data.label}</a>
             </td>
-            <td className="col-md-1"><a onClick={this._onDelete}><span className="glyphicon glyphicon-remove"></span></a></td>
+            <td className="col-md-1"><a onClick={this._onDelete}><span className="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td>
             <td className="col-md-6"></td>
         </tr>);
     }
diff --git a/frameworks/non-keyed/domvm/src/main.es6.js b/frameworks/non-keyed/domvm/src/main.es6.js
@@ -26,7 +26,7 @@ function AppView(vm, store) {
 			el("div", {class: "container"}, [
 				JumbotronTpl(store),
 				TableTpl(store),
-				el("span", {class: "preloadicon glyphicon glyphicon-remove", "aria-hidden": ""})
+				el("span", {class: "preloadicon glyphicon glyphicon-remove", "aria-hidden": "true"})
 			])
 		])
 	);
@@ -91,7 +91,7 @@ function RowTpl(item, store) {
 			]),
 			el("td", {class: "col-md-1"}, [
 				el("a", {onclick: [store.exec, "delete", item.id]}, [
-					el("span", {class: "glyphicon glyphicon-remove", "aria-hidden": ""})
+					el("span", {class: "glyphicon glyphicon-remove", "aria-hidden": "true"})
 				])
 			]),
 			el("td", {class: "col-md-6"})
diff --git a/frameworks/non-keyed/hullo/src/index.js b/frameworks/non-keyed/hullo/src/index.js
@@ -152,6 +152,9 @@ function Row(props) {
             }
           })
         ]
+      }),
+      Td({
+        span: 6
       })
     ]
   );
diff --git a/frameworks/non-keyed/literaljs/index.js b/frameworks/non-keyed/literaljs/index.js
@@ -147,6 +147,7 @@ const App = component({
 										/>
 									</a>
 								</td>
+                                <td class="col-md-6"></td>
 							</tr>
 						))}
 					</tbody>
diff --git a/frameworks/non-keyed/stem/src/Row.jsx b/frameworks/non-keyed/stem/src/Row.jsx
@@ -24,7 +24,7 @@ class Row extends UI.Primitive("tr") {
 			<td className="col-md-4">
 				<a onClick={() => this.getRowObject().setSelected()}>{state.label}</a>
 			</td>,
-			<td className="col-md-1"><a onClick={() => this.getRowObject().delete()}><span className="glyphicon glyphicon-remove aria-hidden=true"></span></a></td>,
+			<td className="col-md-1"><a onClick={() => this.getRowObject().delete()}><span className="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td>,
 			<td className="col-md-6"></td>];
 	}
 
diff --git a/frameworks/non-keyed/tsers/src/main.jsx b/frameworks/non-keyed/tsers/src/main.jsx
@@ -23,7 +23,7 @@ function cache(key, render) {
 function main(signals) {
 	const {DOM, model$, mux} = signals;
 	const {h} = DOM;
-	
+
 	const vdom$ = DOM.prepare(model$.map(state =>
 	/* {
 		let rows = state.items.map(item =>
@@ -90,15 +90,15 @@ function main(signals) {
 							h(
 								'a',
 								{ className: 'remove' },
-								h('span', { className: 'glyphicon glyphicon-remove remove' })
+								h('span', { className: 'glyphicon glyphicon-remove remove'})
 							)
 						),
 						h('td', { className: 'col-md-6' })
 					]
 				)
 			)
 		);
-		
+
 		return h(
 			'div',
 			{ className: 'container' },
@@ -210,65 +210,65 @@ function main(signals) {
 		);
 	}
 	));
-	
+
 	const addMod$ = DOM.events(vdom$, '#add', 'click').map(() => () => {
 		store.add();
 		return {items: store.data, selected: store.selected};
 	});
-	
+
 	const runMod$ = DOM.events(vdom$, '#run', 'click').map(() => () => {
 		store.run();
 		return {items: store.data, selected: store.selected};
 	});
-	
+
 	const updateMod$ = DOM.events(vdom$, '#update', 'click').map(() => () => {
 		store.update();
 		return {items: store.data, selected: store.selected};
 	});
-	
+
 	const runLotsMod$ = DOM.events(vdom$, '#runlots', 'click').map(() => () => {
 		store.runLots();
 		return {items: store.data, selected: store.selected};
 	});
-	
+
 	const clearMod$ = DOM.events(vdom$, '#clear', 'click').map(() => () => {
 		store.clear();
 		return {items: store.data, selected: store.selected};
 	});
-	
+
 	const swapRowsMod$ = DOM.events(vdom$, '#swaprows', 'click').map(() => () => {
 		store.swapRows();
 		return {items: store.data, selected: store.selected};
 	});
-	
+
 	const selectMod$ = DOM.events(vdom$, '.select', 'click').map((e) => () => {
 		let el = e.target;
 		while(el && !el.id) {
 			el = el.parentNode;
 		}
-		
+
 		store.select(parseInt(el.id));
-		
+
 		return {items: store.data, selected: store.selected};
 	});
-	
+
 	const removeMod$ = DOM.events(vdom$, '.remove', 'click').map((e) => () => {
 		let el = e.target;
 		while(el && !el.id) {
 			el = el.parentNode;
 		}
-		
+
 		store.delete(parseInt(el.id));
-		
+
 		return {items: store.data, selected: store.selected};
 	});
-	
+
 	return mux({
 		DOM: vdom$,
 		model$: model$.mod(Observable.merge(addMod$, runMod$, updateMod$, runLotsMod$, clearMod$, swapRowsMod$, selectMod$, removeMod$))
 	});
 };
- 
+
 TSERS(main, {
 	DOM: ReactDOM('#main'),
 	model$: Model({items: store.data, selected: store.selected})
diff --git a/webdriver-ts/src/isKeyed.ts b/webdriver-ts/src/isKeyed.ts
@@ -1,6 +1,8 @@
 import * as yargs from 'yargs';
-import {buildDriver, setUseShadowRoot, testTextContains, testTextNotContained, testClassContains, testElementLocatedByXpath, testElementNotLocatedByXPath, testElementLocatedById, clickElementById, clickElementByXPath, getTextByXPath} from './webdriverAccess'
+import {buildDriver, setUseShadowRoot, testTextContains, testTextNotContained, testClassContains, testElementLocatedByXpath, testElementNotLocatedByXPath, testElementLocatedById, clickElementById, clickElementByXPath, getTextByXPath, shadowRoot, findByXPath} from './webdriverAccess'
 import {config, FrameworkData, initializeFrameworks, BenchmarkOptions} from './common'
+import { WebDriver, By, WebElement } from 'selenium-webdriver';
+import * as R from 'ramda';
 
 // necessary to launch without specifiying a path
 var chromedriver:any = require('chromedriver');
@@ -85,6 +87,81 @@ function isKeyedSwapRow(result: any): boolean {
     return (result.tradded>0 && result.trremoved>0);
 }
 
+async function assertChildNodes(elem: WebElement, expectedNodes: string[], message: string) {
+    let elements = await elem.findElements(By.css("*"));
+    let allNodes = await Promise.all(elements.map(e => e.getTagName()));
+    if (!R.equals(allNodes,expectedNodes)) {
+        console.log("ERROR in html structure for "+message);
+        console.log("  expected:", expectedNodes);
+        console.log("  actual  :", allNodes);
+        return false;
+    }
+    return true;
+}
+
+async function assertClassesContained(elem: WebElement, expectedClassNames: string[], message: string) {
+    let actualClassNames = (await elem.getAttribute("class")).split(" ");
+    if (!expectedClassNames.every(expected => actualClassNames.includes(expected))) {
+        console.log("css class not correct. Expected for "+ message+ " to be "+expectedClassNames+" but was "+actualClassNames);
+        return false;
+    }
+    return true;
+}
+
+export async function checkTRcorrect(driver: WebDriver, timeout = config.TIMEOUT): Promise<boolean> {
+    let elem = await shadowRoot(driver);
+    let tr = await findByXPath(elem, '//tbody/tr[1000]');
+    if (!await assertChildNodes(tr, [ 'td', 'td', 'a', 'td', 'a', 'span', 'td' ], "tr")) {
+        return false;
+    }
+
+    // first td
+    let td1 = await findByXPath(elem, '//tbody/tr[1000]/td[1]');
+    if (!await assertClassesContained(td1, ["col-md-1"], "first td")) {
+        return false;
+    }
+
+
+    // second td
+    let td2 = await findByXPath(elem, '//tbody/tr[1000]/td[2]');
+    if (!await assertClassesContained(td2, ["col-md-4"], "second td")) {
+        return false;
+    }
+
+    // third td
+    let td3 = await findByXPath(elem, '//tbody/tr[1000]/td[3]');
+    if (!await assertClassesContained(td3, ["col-md-1"], "third td")) {
+        return false;
+    }
+
+    // span in third td
+    let span = await findByXPath(elem, '//tbody/tr[1000]/td[3]/a/span');
+    if (!await assertClassesContained(span, ["glyphicon","glyphicon-remove"], "span in a in third td")) {
+        return false;
+    }
+    let spanAria = (await span.getAttribute("aria-hidden"));
+    if ("true"!=spanAria) {
+        console.log("Expected to find 'aria-hidden'=true on span in fourth td, but found ", spanAria);
+        return false;
+    }
+
+
+    // fourth td
+    let td4 = await findByXPath(elem, '//tbody/tr[1000]/td[4]');
+    if (!await assertClassesContained(td4, ["col-md-6"], "fourth td")) {
+        return false;
+    }
+
+
+    return true;
+}
+
+export async function getInnerHTML(driver: WebDriver, xpath: string, timeout = config.TIMEOUT): Promise<string> {
+    let elem = await shadowRoot(driver);
+    elem = await findByXPath(elem, xpath);
+    return elem.getAttribute("innerHTML");
+}
+
 async function runBench(frameworks: FrameworkData[], frameworkNames: string[]) {
     let runFrameworks = frameworks.filter(f => frameworkNames.some(name => f.fullNameWithKeyedAndVersion.indexOf(name)>-1));
     console.log("Frameworks that will be checked", runFrameworks.map(f => f.fullNameWithKeyedAndVersion).join(' '));
@@ -103,6 +180,14 @@ async function runBench(frameworks: FrameworkData[], frameworkNames: string[]) {
             await testElementLocatedById(driver, "add");
             await clickElementById(driver,'run');
             await testTextContains(driver,'//tbody/tr[1000]/td[1]','1000');
+
+            // check html for tr
+            let htmlCorrect = await checkTRcorrect(driver);
+            if (!htmlCorrect) {
+                console.log("ERROR: Framework "+framework.fullNameWithKeyedAndVersion+" html is not correct");
+                allCorrect = false;
+            }
+
             await driver.executeScript(init);
             await driver.executeScript(`window.nonKeyedDetector_setUseShadowDom(${framework.useShadowRoot});`);
             await driver.executeScript('window.nonKeyedDetector_instrument()');
diff --git a/webdriver-ts/src/webdriverAccess.ts b/webdriver-ts/src/webdriverAccess.ts
@@ -36,7 +36,7 @@ function convertPath(path: string): Array<PathPart> {
 }
 
 // Fake findByXPath for simple XPath expressions to allow usage with shadow dom
-async function findByXPath(node: WebElement, path: string): Promise<WebElement> {
+export async function findByXPath(node: WebElement, path: string): Promise<WebElement> {
      let paths = convertPath(path);
      let n = node;
      try {
@@ -190,7 +190,7 @@ export async function getTextByXPath(driver: WebDriver, xpath: string): Promise<
     });
 }
 
-async function shadowRoot(driver: WebDriver) : Promise<WebElement> {
+export async function shadowRoot(driver: WebDriver) : Promise<WebElement> {
     return useShadowRoot ? await driver.executeScript('return document.querySelector("main-element").shadowRoot') as WebElement
         : await driver.findElement(By.tagName("body"));
 }

Original file line number	Diff line number	Diff line change
`@@ -28,7 +28,7 @@ module.exports = function(store) {`
`28`	`28`	`),`
`29`	`29`	`h('td', {class: 'col-md-1', onClick: clickHandlerDelete},`
`30`	`30`	`h('a', {class: 'remove'},`
`31`		`- h('span', {class: 'glyphicon glyphicon-remove remove', 'aria-hidden': ''})`
	`31`	`+ h('span', {class: 'glyphicon glyphicon-remove remove', 'aria-hidden': 'true'})`
`32`	`32`	`)`
`33`	`33`	`),`
`34`	`34`	`h('td', {class: 'col-md-6'})`
Original file line number	Diff line number	Diff line change
`@@ -75,6 +75,10 @@ class TrComponent extends Component {`
`75`	`75`	`]`
`76`	`76`	`}`
`77`	`77`	`]`
	`78`	`+ },`
	`79`	`+ {`
	`80`	`+ tag: "td",`
	`81`	`+ classList: 'col-md-6'`
`78`	`82`	`}`
`79`	`83`	`]`
`80`	`84`	`}`
`@@ -129,7 +133,7 @@ class MainContainer extends Component {`
`129`	`133`	`children: [`
`130`	`134`	`{`
`131`	`135`	`tag: "h1",`
`132`		`- textValue: 'FastDom-"keyed""'`
	`136`	`+ textValue: 'FastDom-"keyed"'`
`133`	`137`	`}`
`134`	`138`	`]`
`135`	`139`	`},`
Original file line number	Diff line number	Diff line change
`@@ -152,6 +152,9 @@ function Row(props) {`
`152`	`152`	`}`
`153`	`153`	`})`
`154`	`154`	`]`
	`155`	`+ }),`
	`156`	`+ Td({`
	`157`	`+ span: 6`
`155`	`158`	`})`
`156`	`159`	`]`
`157`	`160`	`);`
Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@ export class Row extends Component {`
`23`	`23`	`<td className="col-md-4">`
`24`	`24`	`<a onClick={this._onClick}>{data.label}</a>`
`25`	`25`	`</td>`
`26`		`- <td className="col-md-1"><a onClick={this._onDelete}><span className="glyphicon glyphicon-remove"></span></a></td>`
	`26`	`+ <td className="col-md-1"><a onClick={this._onDelete}><span className="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td>`
`27`	`27`	`<td className="col-md-6"></td>`
`28`	`28`	`</tr>);`
`29`	`29`	`}`