[gnome-shell/nbtk-introduction] Add some structure for interactive tests of UI components

[Owen Taylor <otaylor src gnome org>]

commit d8d7f5f711bfb587fc425923c69b2adfa9af93ed
Author: Owen W. Taylor <otaylor fishsoup net>
Date:   Fri Sep 18 15:51:15 2009 -0400

    Add some structure for interactive tests of UI components
    
    js/ui/environment.js: Split out initial UI setup (Tweener initialization,
      Nbtk monkey-patching) into a separate file we can import from tests.
    
    tests/: Directory for various types of tests
    tests/run-test.sh: Shell script that to run tests with an appropriate
      environment set up.
    
    tests/testcommon/: Common modules and data for tests
    tests/interactive/: Interactive tests
    
    tests/interactive/box-layout.js: A sample test of NbtkLayout

 .gitignore                      |    1 +
 Makefile.am                     |    2 +-
 configure.ac                    |    1 +
 js/ui/Makefile.am               |    1 +
 js/ui/environment.js            |   32 ++++++++++++++++++++++++++++
 js/ui/main.js                   |   26 +---------------------
 tests/Makefile.am               |   20 +++++++++++++++++
 tests/interactive/box-layout.js |   39 ++++++++++++++++++++++++++++++++++
 tests/run-test.sh.in            |   44 +++++++++++++++++++++++++++++++++++++++
 tests/testcommon/test.css       |   13 +++++++++++
 tests/testcommon/ui.js          |   16 ++++++++++++++
 11 files changed, 170 insertions(+), 25 deletions(-)
---
diff --git a/.gitignore b/.gitignore
index f4bcb22..ba962a7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -39,4 +39,5 @@ src/gnome-shell
 src/test-recorder
 src/test-recorder.ogg
 stamp-h1
+tests/run-test.sh
 xmldocs.make
diff --git a/Makefile.am b/Makefile.am
index baf7dcb..259c030 100644
--- a/Makefile.am
+++ b/Makefile.am
@@ -1,4 +1,4 @@
-SUBDIRS = data js src po
+SUBDIRS = data js src tests po
 
 EXTRA_DIST =		\
 	.project	\
diff --git a/configure.ac b/configure.ac
index b65b117..70882e2 100644
--- a/configure.ac
+++ b/configure.ac
@@ -129,5 +129,6 @@ AC_OUTPUT([
   js/misc/Makefile
   js/ui/Makefile
   src/Makefile
+  tests/Makefile
   po/Makefile.in
 ])
diff --git a/js/ui/Makefile.am b/js/ui/Makefile.am
index 0d92e44..0aa4fb1 100644
--- a/js/ui/Makefile.am
+++ b/js/ui/Makefile.am
@@ -9,6 +9,7 @@ dist_jsui_DATA =		\
 	dash.js			\
 	dnd.js			\
 	docDisplay.js		\
+	environment.js		\
 	genericDisplay.js	\
 	link.js			\
 	lookingGlass.js		\
diff --git a/js/ui/environment.js b/js/ui/environment.js
new file mode 100644
index 0000000..db599b1
--- /dev/null
+++ b/js/ui/environment.js
@@ -0,0 +1,32 @@
+/* -*- mode: js2; js2-basic-offset: 4; indent-tabs-mode: nil -*- */
+
+const Nbtk = imports.gi.Nbtk;
+
+const Tweener = imports.ui.tweener;
+
+// "monkey patch" in some varargs ClutterContainer methods; we need
+// to do this per-container class since there is no representation
+// of interfaces in Javascript
+function _patchContainerClass(containerClass) {
+    // This one is a straightforward mapping of the C method
+    containerClass.prototype.child_set = function(actor, props) {
+        let meta = this.get_child_meta(actor);
+        for (prop in props)
+            meta[prop] = props[prop];
+    };
+
+    // clutter_container_add() actually is a an add-many-actors
+    // method. We conveniently, but somewhat dubiously, take the
+    // this opportunity to make it do something more useful.
+    containerClass.prototype.add = function(actor, props) {
+        this.add_actor(actor);
+        if (props)
+            this.child_set(actor, props);
+    };
+}
+
+_patchContainerClass(Nbtk.BoxLayout);
+
+function init() {
+    Tweener.init();
+}
diff --git a/js/ui/main.js b/js/ui/main.js
index 1f105cb..ed85e3d 100644
--- a/js/ui/main.js
+++ b/js/ui/main.js
@@ -12,12 +12,12 @@ const Shell = imports.gi.Shell;
 const Signals = imports.signals;
 
 const Chrome = imports.ui.chrome;
+const Environment = imports.ui.environment;
 const Overview = imports.ui.overview;
 const Panel = imports.ui.panel;
 const RunDialog = imports.ui.runDialog;
 const LookingGlass = imports.ui.lookingGlass;
 const Sidebar = imports.ui.sidebar;
-const Tweener = imports.ui.tweener;
 const WindowManager = imports.ui.windowManager;
 
 const DEFAULT_BACKGROUND_COLOR = new Clutter.Color();
@@ -34,28 +34,6 @@ let recorder = null;
 let modalCount = 0;
 let modalActorFocusStack = [];
 
-// "monkey patch" in some varargs ClutterContainer methods; we need
-// to do this per-container class since there is no representation
-// of interfaces in Javascript
-function _patchContainerClass(containerClass) {
-    // This one is a straightforward mapping of the C method
-    containerClass.prototype.child_set = function(actor, props) {
-        let meta = this.get_child_meta(actor);
-        for (prop in props)
-            meta[prop] = props[prop];
-    };
-
-    // clutter_container_add() actually is a an add-many-actors
-    // method. We conveniently, but somewhat dubiously, take the
-    // this opportunity to make it do something more useful.
-    containerClass.prototype.add = function(actor, props) {
-        this.add_actor(actor);
-        if (props)
-            this.child_set(actor, props);
-    };
-}
-_patchContainerClass(Nbtk.BoxLayout);
-
 function start() {
     // Add a binding for "global" in the global JS namespace; (gjs
     // keeps the web browser convention of having that namespace be
@@ -66,7 +44,7 @@ function start() {
 
     global.grab_dbus_service();
 
-    Tweener.init();
+    Environment.init();
 
     // Ensure ShellAppMonitor is initialized; this will
     // also initialize ShellAppSystem first.  ShellAppSystem
diff --git a/tests/Makefile.am b/tests/Makefile.am
new file mode 100644
index 0000000..35ba1c7
--- /dev/null
+++ b/tests/Makefile.am
@@ -0,0 +1,20 @@
+noinst_SCRIPTS = run-test.sh
+EXTRA_DIST = run-test.sh.in
+
+TEST_JS =					\
+	testcommon/ui.js			\
+	interactive/box-layout.js
+EXTRA_DIST += $(TEST_JS)
+
+TEST_MISC =					\
+	testcommon/test.css
+EXTRA_DIST += $(TEST_MISC)
+
+# We substitute in bindir so it works as an autostart
+# file when built in a non-system prefix
+run-test.sh: run-test.sh.in
+	$(AM_V_GEN) sed \
+	    -e "s|@GJS_JS_DIR[ ]|$(GJS_JS_DIR)|" \
+	    -e "s|@GJS_JS_NATIVE_DIR[ ]|$(GJS_JS_NATIVE_DIR)|" \
+	    -e "s|@srcdir[ ]|$(srcdir)|" \
+	    $< > $@ && chmod a+x $@
diff --git a/tests/interactive/box-layout.js b/tests/interactive/box-layout.js
new file mode 100644
index 0000000..76580e8
--- /dev/null
+++ b/tests/interactive/box-layout.js
@@ -0,0 +1,39 @@
+/* -*- mode: js2; js2-basic-offset: 4; indent-tabs-mode: nil -*- */
+
+const Clutter = imports.gi.Clutter;
+const Nbtk = imports.gi.Nbtk;
+
+const UI = imports.testcommon.ui;
+
+UI.init();
+let stage = Clutter.Stage.get_default();
+
+let b = new Nbtk.BoxLayout({ vertical: true,
+			     width: stage.width,
+			     height: stage.height });
+stage.add_actor(b);
+
+let b2 = new Nbtk.BoxLayout();
+b.add(b2, { expand: true, fill: true });
+
+let r1 = new Nbtk.BoxLayout({ style_class: 'red',
+                              width: 10,
+                              height: 10 });
+b2.add(r1, { expand: true });
+
+let r2 = new Nbtk.BoxLayout({ style_class: 'green',
+                              width: 10,
+                              height: 10 });
+b2.add(r2, { expand: true,
+             x_fill: false,
+             x_align: Nbtk.Align.MIDDLE,
+             y_fill: false,
+             y_align: Nbtk.Align.MIDDLE });
+
+let r3 = new Nbtk.BoxLayout({ style_class: 'blue',
+                              width: 10,
+                              height: 10 });
+b.add(r3);
+
+stage.show();
+Clutter.main();
diff --git a/tests/run-test.sh.in b/tests/run-test.sh.in
new file mode 100644
index 0000000..ce1ce3e
--- /dev/null
+++ b/tests/run-test.sh.in
@@ -0,0 +1,44 @@
+#!/bin/sh
+
+usage() {
+    echo >&2 "Usage run-test.sh [-v|--verbose] <test_js>..."
+    exit 1
+}
+
+tests=
+verbose=false
+for arg in $@ ; do
+    case $arg in
+	-v|--verbose)
+	    verbose=true
+	    ;;
+	-*)
+	    usage
+	    ;;
+	*)
+	    tests="$tests $arg"
+	    ;;
+    esac
+done
+
+builddir=`dirname $0`
+builddir=`cd $builddir && pwd`
+srcdir=$builddir/@srcdir@
+srcdir=`cd $srcdir && pwd`
+
+GI_TYPELIB_PATH="$builddir/../src"
+GJS_DEBUG_OUTPUT=stderr
+$verbose || GJS_DEBUG_TOPICS="JS ERROR;JS LOG"
+GNOME_SHELL_TESTSDIR="$srcdir/"
+LD_PRELOAD="$builddir/../src/.libs/libgnome-shell.so"
+
+export GI_TYPELIB_PATH GJS_DEBUG_OUTPUT GJS_DEBUG_TOPICS GNOME_SHELL_JS GNOME_SHELL_TESTSDIR LD_PRELOAD
+
+gjs_args=
+for i in $srcdir $srcdir/../js @GJS_JS_DIR@ @GJS_JS_NATIVE_DIR@ ; do
+    gjs_args="$gjs_args -I $i"
+done
+
+for test in $tests ; do
+    gjs-console $gjs_args $test || exit $?
+done
diff --git a/tests/testcommon/test.css b/tests/testcommon/test.css
new file mode 100644
index 0000000..f816791
--- /dev/null
+++ b/tests/testcommon/test.css
@@ -0,0 +1,13 @@
+ import "../../data/gnome-shell.css";
+
+*.red {
+    background-color: red;
+}
+
+*.green {
+    background-color: green;
+}
+
+*.blue {
+    background-color: blue;
+}
diff --git a/tests/testcommon/ui.js b/tests/testcommon/ui.js
new file mode 100644
index 0000000..e6ea34e
--- /dev/null
+++ b/tests/testcommon/ui.js
@@ -0,0 +1,16 @@
+/* -*- mode: js2; js2-basic-offset: 4; indent-tabs-mode: nil -*- */
+
+const Clutter = imports.gi.Clutter;
+const GLib = imports.gi.GLib;
+const Nbtk = imports.gi.Nbtk;
+
+const Environment = imports.ui.environment;
+
+function init() {
+    Clutter.init(null, null);
+    Environment.init();
+
+    let style = Nbtk.Style.get_default();
+    let stylesheetPath = GLib.getenv("GNOME_SHELL_TESTSDIR") + "/testcommon/test.css";
+    style.load_from_file(stylesheetPath);
+}