add test for new get-zindex task

DEVELOPING.md

@@ -65,6 +65,7 @@ If you have any questions, feel free to ask on the issue or join us on [Slack](h
 | `gulp test --firefox`         | Runs tests in Firefox.                                                |
 | `gulp test --files=<test-files-path-glob>`         | Runs specific test files.                                                |
 | `gulp serve`                  | Serves content in repo root dir over http://localhost:8000/. Examples live in http://localhost:8000/examples.build/          |
+| `ava build-system/tasks/**/test.js` | Run node tests for tasks/offline code.  Make sure to install `ava` globally through `npm i -g ava`. |
 
 
 #### Saucelabs

build-system/tasks/get-zindex.js → build-system/tasks/get-zindex/index.js

@@ -45,24 +45,21 @@ function zIndexCollector(acc, css) {
       selectorNames = selectorNames.split(',');
       if (decl.prop == 'z-index') {
         selectorNames.forEach(selector => {
-          if (!acc[selector]) {
-            acc[selector] = [];
-          }
-          acc[selector].push(decl.value);
+          // If multiple redeclaration of a selector and z index
+          // are done in a single file, this will get overridden.
+          acc[selector] = decl.value;
         });
       }
     });
   });
 }
 
 /**
- * @param {!Object<string, !Object<string, !Array<number>} filesData
- *    accumulation of files and the rules and z index values.
  * @param {!Vinyl} file vinyl fs object
  * @param {string} enc encoding value
  * @param {function(err: ?Object, data: !Vinyl|string)} cb chunk data through
  */
-function onFileThrough(filesData, file, enc, cb) {
+function onFileThrough(file, enc, cb) {
   if (file.isNull()) {
     cb(null, file);
     return;
@@ -73,48 +70,69 @@ function onFileThrough(filesData, file, enc, cb) {
     return;
   }
 
-  var selectors = filesData[file.relative] = Object.create(null);
+  var selectors = Object.create(null);
 
   postcss([zIndexCollector.bind(null, selectors)])
       .process(file.contents.toString(), {
         from: file.relative
       }).then(res => {
-        cb(null, file);
+        cb(null, { name: file.relative, selectors: selectors });
       });
 }
 
 /**
  * @param {!Object<string, !Object<string, !Array<number>} filesData
  *    accumulation of files and the rules and z index values.
  * @param {function()} cb callback to end the stream
+ * @return {!Array<!Array<string>>}
  */
-function onFileThroughEnd(filesData, cb) {
+function createTable(filesData, cb) {
   var rows = [];
-  rows.unshift.apply(rows, tableHeaders);
   Object.keys(filesData).sort().forEach((fileName, fileIdx) => {
     var selectors = filesData[fileName];
     Object.keys(selectors).sort().forEach((selectorName, selectorIdx) => {
-      var zIndexes = selectors[selectorName];
-      var row = [selectorName, zIndexes.join(', '), fileName];
+      var zIndex = selectors[selectorName];
+      var row = [selectorName, zIndex, fileName];
       rows.push(row);
     });
   });
-  var tbl = table(rows, tableOptions);
-  fs.writeFileSync('css/Z_INDEX.md', tbl);
-  cb();
+  rows.sort((a, b) => {
+    var aZIndex = parseInt(a[1], 10);
+    var bZIndex = parseInt(b[1], 10);
+    return aZIndex - bZIndex;
+  });
+  return rows;
 }
 
 
 /**
  * @return {!Stream}
  */
-function getZindex() {
-  var filesData = Object.create(null);
-  return gulp.src('{css,src,extensions}/**/*.css').pipe(through.obj(
-      onFileThrough.bind(null, filesData),
-      onFileThroughEnd.bind(null, filesData)));
+function getZindex(glob) {
+  return gulp.src(glob).pipe(through.obj(onFileThrough));
 }
 
+/**
+ * @param {function()} cb
+ */
+function getZindexForAmp(cb) {
+  var filesData = Object.create(null);
+  // Don't return the stream here since we do a `writeFileSync`
+  getZindex('{css,src,extensions}/**/*.css')
+      .on('data', (chunk) => {
+        filesData[chunk.name] = chunk.selectors;
+      })
+      .on('end', () => {
+        var rows = createTable(filesData);
+        rows.unshift.apply(rows, tableHeaders);
+        var tbl = table(rows, tableOptions);
+        fs.writeFileSync('css/Z_INDEX.md', tbl);
+        cb();
+      });
+}
 
 gulp.task('get-zindex', 'Runs through all css files of project to gather ' +
-    'z-index values', getZindex);
+    'z-index values', getZindexForAmp);
+
+exports.getZindex = getZindex;
+exports.createTable = createTable;

build-system/tasks/get-zindex/test-2.css

@@ -0,0 +1,30 @@
+/**
+ * Copyright 2016 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Horizontal scrolling interferes with embedded scenarios and predominantly
+ * the result of the non-responsive design.
+ *
+ * Notice that it's critical that `overflow-x: hidden` is only set on `html`
+ * and not `body`. Otherwise, adding `overflow-x: hidden` forces `overflow-y`
+ * to be computed to `auto` on both the `body` and `html` elements so they both
+ * potentially get a scrolling box. See #3108 for more details.
+ */
+
+
+.selector-4 {
+  z-index: 80;
+}

build-system/tasks/get-zindex/test.css

@@ -0,0 +1,40 @@
+
+/**
+ * Copyright 2016 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Horizontal scrolling interferes with embedded scenarios and predominantly
+ * the result of the non-responsive design.
+ *
+ * Notice that it's critical that `overflow-x: hidden` is only set on `html`
+ * and not `body`. Otherwise, adding `overflow-x: hidden` forces `overflow-y`
+ * to be computed to `auto` on both the `body` and `html` elements so they both
+ * potentially get a scrolling box. See #3108 for more details.
+ */
+
+
+.selector-1 {
+  z-index: 1;
+}
+
+.selector-2,
+.selector-3 {
+  z-index: 0;
+}
+
+.selector-3 {
+  z-index: 99;
+}

build-system/tasks/get-zindex/test.js

@@ -0,0 +1,56 @@
+/**
+ * Copyright 2016 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+var fs = require('fs');
+var test = require('ava');
+// Module under test
+var m = require('./');
+
+var result = {
+  'test.css': {
+    '.selector-1': '1',
+    '.selector-2': '0',
+    '.selector-3': '99',
+  },
+  'test-2.css': {
+    '.selector-4': '80',
+  },
+};
+
+test.cb('collects selectors', t => {
+  var data = Object.create(null);
+  m.getZindex('./*.css')
+    .on('data', chunk => {
+      data[chunk.name] = chunk.selectors;
+    })
+    .on('end', () => {
+      t.deepEqual(data, result);
+      t.end();
+    });
+});
+
+test('sync - create array of arrays with z index order', t => {
+  t.plan(1);
+  var table = m.createTable(result);
+  var expected = [
+    ['.selector-2', '0', 'test.css'],
+    ['.selector-1', '1', 'test.css'],
+    ['.selector-4', '80', 'test-2.css'],
+    ['.selector-3', '99', 'test.css'],
+  ];
+  t.deepEqual(table, expected);
+});

build-system/tasks/index.js

@@ -26,5 +26,5 @@ require('./make-golden');
 require('./presubmit-checks');
 require('./serve');
 require('./size');
-require('./test');
+require('./runtime-test');
 require('./validator');

build-system/tasks/size.js

@@ -25,6 +25,8 @@ var through = require('through2');
 var util = require('gulp-util');
 
 
+var tempFolderName = '__size-temp';
+
 var MIN_FILE_SIZE_POS = 0;
 var GZIP_POS = 1;
 var BROTLI_POS = 2;
@@ -202,12 +204,14 @@ function sizer() {
  * output from the process.
  */
 function sizeTask() {
-  return gulp.src([
+  gulp.src([
       'dist/**/*.js',
       '!dist/**/*-latest.js',
       'dist.3p/{current,current-min}/**/*.js',
     ])
-    .pipe(sizer());
+    .pipe(sizer())
+    .pipe(gulp.dest(tempFolderName))
+    .on('end', del.bind(null, [tempFolderName]));
 }
 
 gulp.task('size', 'Runs a report on artifact size', sizeTask);

css/Z_INDEX.md

@@ -1,18 +1,18 @@
 selector                                    |   z-index   |   file
 ---                                         |   ---       |   ---
-.-amp-element > [overflow]                  |   2         |   css/amp.css
-.-amp-layout-size-defined > [fallback]      |   1         |   css/amp.css
-.-amp-layout-size-defined > [placeholder]   |   1         |   css/amp.css
-.-amp-loading-container                     |   1         |   css/amp.css
-.amp-carousel-button                        |   10        |   extensions/amp-carousel/0.1/amp-carousel.css
-.-amp-image-lightbox-caption                |   2         |   extensions/amp-image-lightbox/0.1/amp-image-lightbox.css
 .-amp-image-lightbox-container              |   0         |   extensions/amp-image-lightbox/0.1/amp-image-lightbox.css
-.-amp-image-lightbox-trans                  |   1001      |   extensions/amp-image-lightbox/0.1/amp-image-lightbox.css
 .-amp-image-lightbox-viewer                 |   1         |   extensions/amp-image-lightbox/0.1/amp-image-lightbox.css
+.-amp-layout-size-defined > [placeholder]   |   1         |   css/amp.css
+.-amp-loading-container                     |   1         |   css/amp.css
 .-amp-image-lightbox-viewer-image           |   1         |   extensions/amp-image-lightbox/0.1/amp-image-lightbox.css
+.-amp-layout-size-defined > [fallback]      |   1         |   css/amp.css
+.-amp-element > [overflow]                  |   2         |   css/amp.css
+amp-sticky-ad                               |   2         |   extensions/amp-sticky-ad/0.1/amp-sticky-ad.css
+.-amp-image-lightbox-caption                |   2         |   extensions/amp-image-lightbox/0.1/amp-image-lightbox.css
+.amp-carousel-button                        |   10        |   extensions/amp-carousel/0.1/amp-carousel.css
 amp-image-lightbox                          |   1000      |   extensions/amp-image-lightbox/0.1/amp-image-lightbox.css
 amp-live-list > [update]                    |   1000      |   extensions/amp-live-list/0.1/amp-live-list.css
+amp-user-notification                       |   1000      |   extensions/amp-user-notification/0.1/amp-user-notification.css
+.-amp-image-lightbox-trans                  |   1001      |   extensions/amp-image-lightbox/0.1/amp-image-lightbox.css
 .-amp-sidebar-mask                          |   9998      |   extensions/amp-sidebar/0.1/amp-sidebar.css
-amp-sidebar                                 |   9999      |   extensions/amp-sidebar/0.1/amp-sidebar.css
-amp-sticky-ad                               |   2         |   extensions/amp-sticky-ad/0.1/amp-sticky-ad.css
-amp-user-notification                       |   1000      |   extensions/amp-user-notification/0.1/amp-user-notification.css
+amp-sidebar                                 |   9999      |   extensions/amp-sidebar/0.1/amp-sidebar.css

package.json

@@ -26,6 +26,7 @@
   },
   "devDependencies": {
     "autoprefixer": "6.1.1",
+    "ava": "0.15.2",
     "babel-core": "5.8.35",
     "babel-eslint": "4.1.8",
     "babelify": "6.4.0",