Merge lp:~allenap/launchpad/me-too-ajax-bug-361097-unit-tests into lp:launchpad

[Gavin Panella]

[Gavin Panella (allenap)]

This branch AJAXifies the "me-too" (aka "this bug affects me") part of
the bugs page.

Note that UI review was done on an earlier branch, in a separate merge
proposal:
  https://code.edge.launchpad.net/~allenap/launchpad/me-too-ajax-bug-361097/+merge/9510

File by file:

lib/canonical/launchpad/javascript/bugs/bugtask-index.js

  Added a function setup_me_too that uses a new widget,
  MeTooChoiceSource, to do its business.

  MeTooChoiceSource extends from ChoiceSource to add a few frills,
  like showing and hiding a flame icon (displayed if the user is
  affected by the bug), making the widget display inline (by default
  it displays as a block), and of course, to do an API call to set the
  affected status.

lib/canonical/launchpad/javascript/bugs/tests/test_me_too.html
lib/canonical/launchpad/javascript/bugs/tests/test_me_too.js

  Heaps of boilerplate and some tests for the customizations
  MeTooChoiceSource has over a stock ChoiceSource from lazr-js.

  In lp:~allenap/lazr-js/value-items-mismatch-tests-bug-361097 I
  landed some extra unit tests for ChoiceSource to clarify behaviour
  when config.value does not correspond to any of the items in
  config.items. MeTooChoiceSource relies on this behaviour so it
  seemed sensible to cement it in.

lib/lp/bugs/browser/bugtask.py
lib/lp/bugs/browser/tests/test_bugtask.py

  New property current_user_affected_js_status returns one of "null",
  "true" or "false", i.e. valid Javascript indicating the affected
  status of the user. The tests also cover the existing
  current_user_affected_status.

lib/lp/bugs/stories/bugs/xx-bug-affects-me-too.txt

  Quite extensive reworking of this pagetest.

lib/lp/bugs/templates/bugtasks-and-nominations-table.pt

  Rip out the old static markup and Javascript code, replace it with
  markup to support the static (no Javascript) and dynamic (Javascript
  enabled) scenarios, and call out to setup_me_too.

  There is a span with a "static" class that contains all the markup
  when Javascript is disabled. There is a span with a "dynamic" class
  that is hidden first of all. The visibility of these spans is
  swapped by MeTooChoiceSource at run time. This means that the
  framework markup can stay in the template.

lib/lp/bugs/windmill/tests/test_bugs/test_bug_me_too.py

  The beginnings of a Windmill test. This took so long and extracted
  so much virtual blood from me that I'm going to complete it in a
  later branch. Testing the overlays and stuff is extremely painful
  and fiddly.

TODO:

  Finish the Windmill test.

[Deryck Hodge (deryck)]

Hi, Gavin.

This is nice work overall. ~900 lines isn't so bad to review. :)

Some minor things need fixing, most of which I mentioned on IRC:

    ** The inline CSS in test_me_too.html can be dropped in
    favor of:

        <link rel="stylesheet" href="../../test.css" />

    ** The custom method Assert.isEqual should be
    dropped in favor of the builtin Y.Assert.areEqual.

    ** The test_save_data test should be dropped,
    since it doesn't test anything more than an object
    literal passed through a mock API function.

Otherwise, this looks good from a code point of view. It's a nice
piece of functionality, too.

I will note that when I played with this, the overlay opened in weird
locations if I had scrolled down the page some before trying to click
the "affects me too" link. For example, if the link was near the top
of the window, the overlay was partially off screen and I had to
scroll back up. This isn't a huge blocking issue, IMHO, and I assume
covered in the UI review, but maybe we want to track a bug against the
widget if one isn't already open.

I know that these UI/JS branches can seem to go on forever sometimes,
so I understand needing to see some branch landing progress. But what
you have here is nice on its own, too.

Cheers,
deryck

review: Needs Fixing

[Gavin Panella (allenap)]

On Tue, 04 Aug 2009 16:34:43 -0000
Deryck Hodge <email address hidden> wrote:

> Review: Needs Fixing
> Hi, Gavin.
>
> This is nice work overall. ~900 lines isn't so bad to review. :)

Thanks for the review Deryck.

> Some minor things need fixing, most of which I mentioned on IRC:
>
> ** The inline CSS in test_me_too.html can be dropped in
> favor of:
>
> <link rel="stylesheet" href="../../test.css" />

Neat, didn't know about that, thanks.

...
> I will note that when I played with this, the overlay opened in weird
> locations if I had scrolled down the page some before trying to click
> the "affects me too" link. For example, if the link was near the top
> of the window, the overlay was partially off screen and I had to
> scroll back up. This isn't a huge blocking issue, IMHO, and I assume
> covered in the UI review, but maybe we want to track a bug against the
> widget if one isn't already open.

I can't replicate this. Didn't intellectronica land a fix in lazr-js
related to positioning earlier today? Perhaps pulling your lazr-js
dependency will fix this. Can you try and let me know if it still
breaks?

I've attached a diff of the changes since the review.

[Eleanor Berger (intellectronica)]

I suspect the scrolling problems you've experienced are fixed by the branch I landed earlier. If not, let's file a bug.

[Deryck Hodge (deryck)]

Indeed an updated lazr-js fixed the positioning and/or scrolling problem for me. And the updated diff looks good, too.

Cheers,
deryck

review: Approve

=== modified file 'lib/canonical/launchpad/javascript/bugs/bugtask-index.js'
--- lib/canonical/launchpad/javascript/bugs/bugtask-index.js	2009-07-29 11:13:40 +0000
+++ lib/canonical/launchpad/javascript/bugs/bugtask-index.js	2009-08-04 14:48:47 +0000
@@ -1308,6 +1308,139 @@
     }
 };
 
+/**
+ * Set up the "me too" selection.
+ *
+ * Called once, on load, to initialize the page. Call this function if
+ * the "me too" information is displayed on a bug page and the user is
+ * logged in.
+ *
+ * @method setup_me_too
+ */
+bugs.setup_me_too = function(user_is_affected) {
+    var me_too_content = Y.get('#affectsmetoo');
+    var me_too_edit = new MeTooChoiceSource({
+        contentBox: me_too_content,
+        value: user_is_affected,
+        title: 'Does this bug affect you?',
+        items: [
+            {name: 'Yes, it affects me', value: true,
+             source_name: 'This bug affects me too',
+             disabled: false},
+            {name: "No, it doesn't affect me", value: false,
+             source_name: "This bug doesn't affect me",
+             disabled: false}
+        ],
+        elementToFlash: me_too_content,
+        backgroundColor: '#FFFFFF'
+    });
+    me_too_edit.render();
+};
+
+/**
+ * This class is a derivative of ChoiceSource that handles the
+ * specifics of editing "me too" option.
+ *
+ * @class MeTooChoiceSource
+ * @extends ChoiceSource
+ * @constructor
+ */
+function MeTooChoiceSource() {
+    MeTooChoiceSource.superclass.constructor.apply(this, arguments);
+}
+
+MeTooChoiceSource.NAME = 'metoocs';
+MeTooChoiceSource.NS = 'metoocs';
+
+MeTooChoiceSource.HTML_PARSER = {
+    flame_icon: ".dynamic img[src$=/@@/flame-icon]"
+};
+
+MeTooChoiceSource.ATTRS = {
+    /**
+     * Y.Node containing a flame icon, displayed when the user is
+     * affected by the current bug. Should be automatically calculated
+     * by HTML_PARSER.
+     *
+     * Setter function returns Y.get(parameter) so that you can pass
+     * either a Node (as expected) or a selector.
+     *
+     * @attribute value_location
+     * @type Node
+     */
+    flame_icon: {
+        value: null,
+        set: function(v) {
+            return Y.get(v);
+        }
+    }
+};
+
+// Put this in the bugs namespace so it can be accessed for testing.
+bugs._MeTooChoiceSource = MeTooChoiceSource;
+
+Y.extend(MeTooChoiceSource, Y.ChoiceSource, {
+    initializer: function() {
+        var widget = this;
+        this.error_handler = new LP.client.ErrorHandler();
+        this.error_handler.clearProgressUI = function() {
+            widget._uiClearWaiting();
+        };
+        this.error_handler.showError = function(error_msg) {
+            widget.showError(error_msg);
+        };
+    },
+
+    showError: function(err) {
+        display_error(null, err);
+    },
+
+    syncUI: function() {
+        MeTooChoiceSource.superclass.syncUI.apply(this, arguments);
+        // Show the flame icon if the user is affected by this bug.
+        if (this.get('value')) {
+            this.get('flame_icon').removeClass('unseen');
+        } else {
+            this.get('flame_icon').addClass('unseen');
+        }
+    },
+
+    render: function() {
+        MeTooChoiceSource.superclass.render.apply(this, arguments);
+        // Force the ChoiceSource to be rendered inline.
+        this.get('boundingBox').setStyle('display', 'inline');
+        // Hide the static content and show the dynamic content.
+        this.get('contentBox').query('.static').addClass('unseen');
+        this.get('contentBox').query('.dynamic').removeClass('unseen');
+    },
+
+    _saveData: function() {
+        // Set the widget to the 'waiting' state.
+        this._uiSetWaiting();
+
+        var value = this.getInput();
+        var client =  new LP.client.Launchpad();
+        var widget = this;
+
+        var config = {
+            on: {
+                success: function(entry) {
+                    widget._uiClearWaiting();
+                    MeTooChoiceSource.superclass._saveData.call(
+                        widget, value);
+                },
+                failure: this.error_handler.getFailureHandler()
+            },
+            parameters: {
+                affected: value
+            }
+        };
+
+        client.named_post(
+            LP.client.cache.bug.self_link, 'markUserAffected', config);
+    }
+});
+
 /*
  * Check if the current user can unsubscribe the person
  * being subscribed.
@@ -1402,6 +1535,6 @@
     }
 }
 }, '0.1', {requires: ['base', 'oop', 'node', 'event', 'io-base', 'substitute',
-                      'widget-position-ext', 'lazr.formoverlay', 'lazr.anim', 
+                      'widget-position-ext', 'lazr.formoverlay', 'lazr.anim',
                       'lazr.base', 'lazr.overlay', 'lazr.choiceedit',
                       'lp.picker', 'lp.client.plugins', 'lp.subscriber']});

=== added file 'lib/canonical/launchpad/javascript/bugs/tests/test_me_too.html'
--- lib/canonical/launchpad/javascript/bugs/tests/test_me_too.html	1970-01-01 00:00:00 +0000
+++ lib/canonical/launchpad/javascript/bugs/tests/test_me_too.html	2009-08-03 14:38:44 +0000
@@ -0,0 +1,59 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+  <head>
+  <title>Status Editor</title>
+
+  <!-- YUI 3.0 Setup -->
+  <script type="text/javascript" src="../../../icing/yui/3.0.0pr2/build/yui/yui.js"></script>
+  <link rel="stylesheet" href="../../../icing/yui/3.0.0pr2/build/cssreset/reset.css"/>
+  <link rel="stylesheet" href="../../../icing/yui/3.0.0pr2/build/cssfonts/fonts.css"/>
+  <link rel="stylesheet" href="../../../icing/yui/3.0.0pr2/build/cssbase/base.css"/>
+
+  <!-- Dependency -->
+  <script type="text/javascript" src="../../../icing/lazr/build/lazr.js"></script>
+  <script type="text/javascript" src="../../../icing/lazr/build/overlay/overlay.js"></script>
+  <script type="text/javascript" src="../../../icing/lazr/build/choiceedit/choiceedit.js"></script>
+  <script type="text/javascript" src="../../../javascript/client/client.js"></script>
+
+  <!-- The module under test -->
+  <script type="text/javascript" src="../bugtask-index.js"></script>
+
+  <!-- The test suite -->
+  <script type="text/javascript" src="test_me_too.js"></script>
+
+  <style type="text/css">
+  /* Taken and customized from testlogger.css */
+  #log .yui-console-content { width:44em }
+  #log .yui-console .yui-console-bd { height:30em }
+  #log .yui-console .yui-console-controls { display:none; }
+  #log .yui-console .yui-console-hd { display:none; }
+  #log .yui-console .yui-console-ft { position:absolute;top:0em; }
+
+  #log .yui-console-entry-src { display:none; }
+
+  #log .yui-console-entry-pass .yui-console-entry-cat {
+      background-color: green;
+      font-weight: bold;
+      color: white;
+  }
+  #log .yui-console-entry-fail .yui-console-entry-cat {
+      background-color: red;
+      font-weight: bold;
+      color: white;
+  }
+  #log .yui-console-entry-ignore .yui-console-entry-cat {
+      background-color: #666;
+      font-weight: bold;
+      color: white;
+  }
+  </style>
+
+  <style type="text/css">
+    /* CSS classes specific to this test */
+    .unseen { display: none; }
+  </style>
+</head>
+<body class="yui-skin-sam">
+  <div id="log"></div>
+</body>
+</html>

=== added file 'lib/canonical/launchpad/javascript/bugs/tests/test_me_too.js'
--- lib/canonical/launchpad/javascript/bugs/tests/test_me_too.js	1970-01-01 00:00:00 +0000
+++ lib/canonical/launchpad/javascript/bugs/tests/test_me_too.js	2009-08-04 14:45:29 +0000
@@ -0,0 +1,267 @@
+/* Copyright (c) 2008, Canonical Ltd. All rights reserved. */
+
+YUI({
+    base: '../../../icing/yui/current/build/',
+    filter: 'raw',
+    combine: false
+    }).use('event', 'bugs.bugtask_index', 'node', 'yuitest', 'widget-stack', 'console',
+        function(Y) {
+
+// Local aliases
+var Assert = Y.Assert,
+    ArrayAssert = Y.ArrayAssert;
+
+Assert.isEqual = function(a, b, msg) {
+    Assert.isTrue(a == b, msg);
+};
+
+/*
+ * A wrapper for the Y.Event.simulate() function.  The wrapper accepts
+ * CSS selectors and Node instances instead of raw nodes.
+ */
+function simulate(widget, selector, evtype, options) {
+    var rawnode = Y.Node.getDOMNode(widget.query(selector));
+    Y.Event.simulate(rawnode, evtype, options);
+}
+
+/* Helper function to clean up a dynamically added widget instance. */
+function cleanup_widget(widget) {
+    // Nuke the boundingBox, but only if we've touched the DOM.
+    if (widget.get('rendered')) {
+        var bb = widget.get('boundingBox');
+        if (bb.get('parentNode')) {
+            bb.get('parentNode').removeChild(bb);
+        }
+    }
+    // Kill the widget itself.
+    widget.destroy();
+}
+
+var suite = new Y.Test.Suite("Bugtask Me-Too Choice Edit Tests");
+
+suite.add(new Y.Test.Case({
+
+    name: 'me_too_choice_edit_basics',
+
+    setUp: function() {
+        // Monkeypatch LP.client to avoid network traffic and to make
+        // some things work as expected.
+        LP.client.Launchpad.prototype.named_post = (
+            function(url, func, config) {
+                config.on.success();
+            }
+        );
+        LP.client.cache.bug = {
+            self_link: "http://bugs.example.com/bugs/1234"
+        };
+        // add the in-page HTML
+        var inpage = Y.Node.create([
+            '<span id="affectsmetoo">',
+            '  <span class="static">',
+            '    <img src="https://bugs.edge.launchpad.net/@@/flame-icon" alt="" />',
+            '    This bug affects me too',
+            '    <a href="+affectsmetoo">',
+            '      <img class="editicon" alt="Edit"',
+            '           src="https://bugs.edge.launchpad.net/@@/edit" />',
+            '    </a>',
+            '  </span>',
+            '  <span class="dynamic unseen">',
+            '    <img class="editicon" alt="Edit"',
+            '         src="https://bugs.edge.launchpad.net/@@/edit" />',
+            '    <a href="+affectsmetoo" class="js-action"',
+            '       ><span class="value">Does this bug affect you?</span></a>',
+            '    <img src="https://bugs.edge.launchpad.net/@@/flame-icon" alt=""/>',
+            '  </span>',
+            '</span>'].join(''));
+        Y.get("body").appendChild(inpage);
+        var me_too_content = Y.get('#affectsmetoo');
+        this.config = {
+            contentBox: me_too_content,
+            value: null,
+            title: 'This bug:',
+            items: [
+                {name: 'Affects me too', value: true,
+                 source_name: 'This bug affects me too',
+                 disabled: false},
+                {name: 'Does not affect me', value: false,
+                 source_name: "This bug doesn't affect me",
+                 disabled: false}
+            ],
+            elementToFlash: me_too_content,
+            backgroundColor: '#FFFFFF'
+        };
+        this.choice_edit = new Y.bugs._MeTooChoiceSource(this.config);
+        this.choice_edit.render();
+    },
+
+    tearDown: function() {
+        if (this.choice_edit._choice_list) {
+            cleanup_widget(this.choice_edit._choice_list);
+        }
+        var status = Y.get("document").query("#affectsmetoo");
+        if (status) {
+            status.get("parentNode").removeChild(status);
+        }
+    },
+
+    /**
+     * The choice edit should be displayed inline.
+     */
+    test_is_inline: function() {
+        var display = this.choice_edit.get('boundingBox').getStyle('display');
+        Assert.isEqual(
+            display, 'inline', "Not displayed inline, display is: " + display);
+    },
+
+    /**
+     * The .static area should be hidden by adding the "unseen" class.
+     */
+    test_hide_static: function() {
+        var static_area = this.choice_edit.get('contentBox').query('.static');
+        Assert.isTrue(
+            static_area.hasClass('unseen'), "Static area is not hidden.");
+    },
+
+    /**
+     * The .dynamic area should be shown by removing the "unseen" class.
+     */
+    test_hide_dynamic: function() {
+        var dynamic_area = this.choice_edit.get('contentBox').query('.dynamic');
+        Assert.isFalse(
+            dynamic_area.hasClass('unseen'), "Dynamic area is hidden.");
+    },
+
+    /**
+     * The flame icon should be hidden initially.
+     */
+    test_flame_hidden_initially: function() {
+        var flame_icon = this.choice_edit.get('flame_icon');
+        Assert.isTrue(flame_icon.hasClass('unseen'), "Flame is not hidden.");
+    },
+
+    /**
+     * The flame icon should be hidden when the user has made a
+     * negative choice (i.e. "Does not affect me").
+     */
+    test_flame_hidden_with_negative_choice: function() {
+        simulate(this.choice_edit.get('boundingBox'), '.value', 'mousedown');
+        simulate(this.choice_edit._choice_list.get('boundingBox'),
+                 'li a[href$=false]', 'click');
+        var flame_icon = this.choice_edit.get('flame_icon');
+        Assert.isTrue(flame_icon.hasClass('unseen'), "Flame is not hidden.");
+    },
+
+    /**
+     * The flame icon should be shown when the user has made a
+     * positive choice (i.e. "Affects me too").
+     */
+    test_flame_hidden_with_positive_choice: function() {
+        simulate(this.choice_edit.get('boundingBox'), '.value', 'mousedown');
+        simulate(this.choice_edit._choice_list.get('boundingBox'),
+                 'li a[href$=true]', 'click');
+        var flame_icon = this.choice_edit.get('flame_icon');
+        Assert.isFalse(flame_icon.hasClass('unseen'), "Flame is hidden.");
+    },
+
+    /**
+     * The UI should be in a waiting state while the save process is
+     * executing and return to a non-waiting state once it has
+     * finished.
+     */
+    test_ui_waiting_for_success: function() {
+        this.do_test_ui_waiting('success');
+    },
+
+    /**
+     * The UI should be in a waiting state while the save process is
+     * executing and return to a non-waiting state even if the process
+     * fails.
+     */
+    test_ui_waiting_for_failure: function() {
+        this.do_test_ui_waiting('failure');
+    },
+
+    /**
+     * Helper function that does the leg work for the
+     * test_ui_waiting_* methods.
+     */
+    do_test_ui_waiting: function(callback) {
+        var edit_icon = this.choice_edit.get('editicon');
+        // The spinner should not be displayed at first.
+        Assert.isNull(
+            edit_icon.get('src').match(/\/spinner$/),
+            "The edit icon is displaying a spinner at rest.");
+        // The spinner should not be displayed after opening the
+        // choice list.
+        simulate(this.choice_edit.get('boundingBox'), '.value', 'mousedown');
+        Assert.isNull(
+            edit_icon.get('src').match(/\/spinner$/),
+            "The edit icon is displaying a spinner after opening the choice list.");
+        // The spinner should be visible during the interval between a
+        // choice being made and a response coming back from Launchpad
+        // that the choice has been saved.
+        var edit_icon_src_during_save;
+        // Patch the named_post method to simulate success or failure,
+        // as determined by the callback argument. We cannot make
+        // assertions in this method because exceptions are swallowed
+        // somewhere. Instead, we save something testable to a local
+        // var.
+        LP.client.Launchpad.prototype.named_post = (
+            function(url, func, config) {
+                edit_icon_src_during_save = edit_icon.get('src');
+                config.on[callback]();
+            }
+        );
+        simulate(this.choice_edit._choice_list.get('boundingBox'),
+                 'li a[href$=true]', 'click');
+        Assert.isNotNull(
+            edit_icon_src_during_save.match(/\/spinner$/),
+            "The edit icon is not displaying a spinner during save.");
+        // The spinner should not be displayed once a choice has been
+        // saved.
+        Assert.isNull(
+            edit_icon.get('src').match(/\/spinner$/),
+            "The edit icon is displaying a spinner once the choice has been made.");
+    },
+
+    /**
+     * Test that the save call back to Launchpad makes sense.
+     */
+    test_save_data: function() {
+        var url, func, config;
+        LP.client.Launchpad.prototype.named_post = (
+            function(f_url, f_func, f_config) {
+                url = f_url, func = f_func, config = f_config;
+                config.on.success();
+            }
+        );
+        // Simulate selecting something.
+        simulate(this.choice_edit.get('boundingBox'), '.value', 'mousedown');
+        simulate(this.choice_edit._choice_list.get('boundingBox'),
+                 'li a[href$=true]', 'click');
+        // See what we've got.
+        Assert.isEqual(url, "http://bugs.example.com/bugs/1234",
+                       "LP client call to wrong URL.");
+        Assert.isEqual(func, "markUserAffected",
+                       "LP client call to wrong method.");
+        Assert.isNotNull(config.on);
+        Assert.isNotNull(config.on.success);
+        Assert.isNotNull(config.on.failure);
+        Assert.isNotNull(config.parameters);
+        Assert.isTrue(config.parameters.affected);
+    }
+
+}));
+
+Y.Test.Runner.add(suite);
+
+var yconsole = new Y.Console({
+    newestOnTop: false
+});
+yconsole.render('#log');
+
+Y.on('domready', function() {
+    Y.Test.Runner.run();
+});
+
+});

=== modified file 'lib/lp/bugs/browser/bugtask.py'
--- lib/lp/bugs/browser/bugtask.py	2009-07-17 18:46:25 +0000
+++ lib/lp/bugs/browser/bugtask.py	2009-07-23 10:34:08 +0000
@@ -2915,13 +2915,15 @@
         return self.context.isUserAffected(self.user)
 
     @property
-    def affects_form_value(self):
-        """The value to use in the inline me too form."""
-        affected = self.context.isUserAffected(self.user)
-        if affected is None or affected == False:
-            return 'YES'
+    def current_user_affected_js_status(self):
+        """A javascript literal indicating if the user is affected."""
+        affected = self.current_user_affected_status
+        if affected is None:
+            return 'null'
+        elif affected:
+            return 'true'
         else:
-            return 'NO'
+            return 'false'
 
 
 class BugTaskTableRowView(LaunchpadView):

=== modified file 'lib/lp/bugs/browser/tests/test_bugtask.py'
--- lib/lp/bugs/browser/tests/test_bugtask.py	2009-06-25 00:40:31 +0000
+++ lib/lp/bugs/browser/tests/test_bugtask.py	2009-07-23 10:34:08 +0000
@@ -1,23 +1,63 @@
 # Copyright 2009 Canonical Ltd.  This software is licensed under the
 # GNU Affero General Public License version 3 (see the file LICENSE).
 
+__metaclass__ = type
+
+
 import unittest
 
 from zope.testing.doctest import DocTestSuite
 
-from lp.bugs.browser import bugtask
+from canonical.launchpad.ftests import login
 from canonical.launchpad.testing.systemdocs import (
     LayeredDocFileSuite, setUp, tearDown)
 from canonical.testing import LaunchpadFunctionalLayer
 
+from lp.bugs.browser import bugtask
+from lp.bugs.browser.bugtask import BugTasksAndNominationsView
+from lp.testing import TestCaseWithFactory
+
+
+class TestBugTasksAndNominationsView(TestCaseWithFactory):
+
+    layer = LaunchpadFunctionalLayer
+
+    def setUp(self):
+        super(TestBugTasksAndNominationsView, self).setUp()
+        login('[e-mail]')
+        self.bug = self.factory.makeBug()
+        self.view = BugTasksAndNominationsView(self.bug, None)
+
+    def test_current_user_affected_status(self):
+        self.failUnlessEqual(
+            None, self.view.current_user_affected_status)
+        self.view.context.markUserAffected(self.view.user, True)
+        self.failUnlessEqual(
+            True, self.view.current_user_affected_status)
+        self.view.context.markUserAffected(self.view.user, False)
+        self.failUnlessEqual(
+            False, self.view.current_user_affected_status)
+
+    def test_current_user_affected_js_status(self):
+        self.failUnlessEqual(
+            'null', self.view.current_user_affected_js_status)
+        self.view.context.markUserAffected(self.view.user, True)
+        self.failUnlessEqual(
+            'true', self.view.current_user_affected_js_status)
+        self.view.context.markUserAffected(self.view.user, False)
+        self.failUnlessEqual(
+            'false', self.view.current_user_affected_js_status)
+
 
 def test_suite():
     suite = unittest.TestSuite()
+    suite.addTest(unittest.makeSuite(TestBugTasksAndNominationsView))
     suite.addTest(DocTestSuite(bugtask))
     suite.addTest(LayeredDocFileSuite(
         'bugtask-target-link-titles.txt', setUp=setUp, tearDown=tearDown,
         layer=LaunchpadFunctionalLayer))
     return suite
 
+
 if __name__ == '__main__':
     unittest.TextTestRunner().run(test_suite())

=== modified file 'lib/lp/bugs/stories/bugs/xx-bug-affects-me-too.txt'
--- lib/lp/bugs/stories/bugs/xx-bug-affects-me-too.txt	2009-06-12 16:36:02 +0000
+++ lib/lp/bugs/stories/bugs/xx-bug-affects-me-too.txt	2009-07-31 13:49:53 +0000
@@ -1,7 +1,7 @@
 = Marking a bug as affecting the user =
 
-Users can mark bugs as affecting them. Let's create a sample bug to try
-this on.
+Users can mark bugs as affecting them. Let's create a sample bug to
+try this out.
 
    >>> login(ANONYMOUS)
    >>> from canonical.launchpad.webapp import canonical_url
@@ -9,15 +9,27 @@
    >>> test_bug_url = canonical_url(test_bug)
    >>> logout()
 
-The user goes to the bug's index page, and clicks the edit action link
-near 'This bug affects me too'.
+The user goes to the bug's index page, and finds a statement that the
+bug is not marked as affecting them.
 
    >>> user_browser.open(test_bug_url)
    >>> print extract_text(find_tag_by_id(
-   ...     user_browser.contents, 'affectsmetooform'))
-   This bug doesn't affect me...
-
-   >>> user_browser.getLink('change').click()
+   ...     user_browser.contents, 'affectsmetoo').find(
+   ...         None, 'static'))
+   This bug doesn't affect me
+
+Next to the statement is a link containing an edit icon.
+
+   >>> edit_link = find_tag_by_id(
+   ...     user_browser.contents, 'affectsmetoo').a
+   >>> print edit_link['href']
+   +affectsmetoo
+   >>> print edit_link.img['src']
+   /@@/edit
+
+The user is affected by this bug, so clicks the link.
+
+   >>> user_browser.getLink(url='+affectsmetoo').click()
    >>> print user_browser.url
    http://bugs.launchpad.dev/.../+bug/.../+affectsmetoo
    >>> user_browser.getControl(name='field.affects').value
@@ -28,22 +40,26 @@
    >>> user_browser.getControl('Change').click()
 
 The bug page loads again, and now the text is changed, to make it
-clear to the user that they can change the selection.
+clear to the user that they have marked this bug as affecting them.
 
-   >>> print extract_text(find_tags_by_class(
-   ...     user_browser.contents, 'menu-link-affectsmetoo')[0])
-   change
+   >>> print extract_text(find_tag_by_id(
+   ...     user_browser.contents, 'affectsmetoo').find(
+   ...         None, 'static'))
+   This bug affects me too
 
 Next to it, we also see the 'hot bug' icon, to indicate that the user
 has marked the bug as affecting them.
 
    >>> print find_tag_by_id(
-   ...     user_browser.contents, 'affectsmetooform').img['src']
+   ...     user_browser.contents, 'affectsmetoo').img['src']
    /@@/flame-icon
 
-   >>> user_browser.getLink('change').click()
-
-The user is changing his selection to 'No' and submits the form.
+On second thoughts, the user realises that this bug does not affect
+them, so they click on the edit link once more.
+
+   >>> user_browser.getLink(url='+affectsmetoo').click()
+
+The user changes his selection to 'No' and submits the form.
 
    >>> user_browser.getControl(name='field.affects').value = ['NO']
    >>> user_browser.getControl('Change').click()
@@ -51,18 +67,43 @@
 Back at the bug page, the text changes once again.
 
    >>> print extract_text(find_tag_by_id(
-   ...     user_browser.contents, 'affectsmetooform'))
-   This bug doesn't affect me...
-
-== One-click interaction ==
-
-If the user's browser provides javascript, they don't need to go to
-another page to change their selection. Instead, an in-page form is
-submitted when they click the action link.
-
-   >>> me_too_form = user_browser.getForm(id='affectsmetooform')
-   >>> user_browser.getControl(name='field.affects').value
-   'YES'
-   >>> me_too_form.submit()
-   >>> user_browser.getControl(name='field.affects').value
-   'NO'
+   ...     user_browser.contents, 'affectsmetoo').find(
+   ...         None, 'static'))
+   This bug doesn't affect me
+
+
+== Static and dynamic support ==
+
+A bug page contains markup to support both static (no Javascript) and
+dynamic (Javascript enabled) scenarios.
+
+   >>> def class_filter(css_class):
+   ...     def test(node):
+   ...         return css_class in node.get('class', '').split()
+   ...     return test
+
+   >>> static_content = find_tag_by_id(
+   ...     user_browser.contents, 'affectsmetoo').find(
+   ...         class_filter('static'))
+
+   >>> static_content is not None
+   True
+
+   >>> dynamic_content = find_tag_by_id(
+   ...     user_browser.contents, 'affectsmetoo').find(
+   ...         class_filter('dynamic'))
+
+   >>> dynamic_content is not None
+   True
+
+The dynamic content is hidden by the presence of the "unseen" CSS
+class.
+
+   >>> print static_content.get('class')
+   static
+
+   >>> print dynamic_content.get('class')
+   dynamic unseen
+
+It is the responsibilty of Javascript running in the page to unhide
+the dynamic content and hide the static content.

=== modified file 'lib/lp/bugs/templates/bugtasks-and-nominations-table.pt'
--- lib/lp/bugs/templates/bugtasks-and-nominations-table.pt	2009-07-17 17:59:07 +0000
+++ lib/lp/bugs/templates/bugtasks-and-nominations-table.pt	2009-08-04 14:51:23 +0000
@@ -38,11 +38,9 @@
 
 </table>
 
-<div
-  class="actions"
-  tal:define="current_bugtask view/current_bugtask"
-
-        tal:condition="view/displayAlsoAffectsLinks">
+<div class="actions"
+     tal:define="current_bugtask view/current_bugtask"
+     tal:condition="view/displayAlsoAffectsLinks">
     <tal:also-affects-links define="context_menu context/menu:context">
       <tal:addupstream
         define="link context_menu/addupstream"
@@ -56,56 +54,50 @@
         define="link context_menu/nominate"
         condition="link/enabled"
         replace="structure link/render" />
-      <form
-        id="affectsmetooform"
-        name="affectsmetooform"
-        method="post"
-        enctype="multipart/form-data"
-        accept-charset="UTF-8"
-        tal:define="link context_menu/affectsmetoo"
-        tal:condition="link/enabled"
-        tal:attributes="action link/url"
-        style="display: inline">
-        <input
-          name="field.affects"
-          type="hidden"
-          tal:attributes="value view/affects_form_value" />
-        <input
-          type="hidden"
-          name="field.actions.change"
-          value="" />
-        <tal:affected condition="view/current_user_affected_status">
-          <img width="14" height="14" src="/@@/flame-icon" alt="" />
-          This bug affects me too
-        </tal:affected>
-        <tal:affected condition="not: view/current_user_affected_status">
-          This bug doesn't affect me
-        </tal:affected>
-        (<tal:affectsmetoo
-        define="link context_menu/affectsmetoo"
-        condition="link/enabled"
-        replace="structure link/render" />)
-        <tal:nothing condition="nothing">
-          The following is a trick to allow users to mark
-          themselves as affected by a bug with only one click.
-          If Javascript is available, we submit the form and
-          immediately go back to the same page, saving them the
-          need to go to a new page.
-        </tal:nothing>
-        <script type="text/javascript">
-            function sendMeTooForm(e) {
-                $('affectsmetooform').submit();
-                e.preventDefault();
-            }
-            function connectMeTooLink() {
-                var me_too_link = getFirstElementByTagAndClassName(
-                'a', 'menu-link-affectsmetoo');
-                connect(me_too_link, 'onclick', sendMeTooForm);
-            }
-            registerLaunchpadFunction(connectMeTooLink);
+      <span id="affectsmetoo" style="display: inline"
+            tal:condition="link/enabled"
+            tal:define="link context_menu/affectsmetoo;
+                        affected view/current_user_affected_status">
+
+        <tal:comment condition="nothing">
+          This .static section is shown in browsers with javascript
+          enabled, and before setup_me_too is run.
+        </tal:comment>
+        <span class="static">
+          <tal:affected condition="affected">
+            <img width="14" height="14" src="/@@/flame-icon" alt="" />
+            This bug affects me too
+          </tal:affected>
+          <tal:not-affected condition="not:affected">
+            This bug doesn't affect me
+          </tal:not-affected>
+          <a href="+affectsmetoo">
+            <img class="editicon" src="/@@/edit" alt="Edit" />
+          </a>
+        </span>
+
+        <tal:comment condition="nothing">
+          This .dynamic section is used by setup_me_too to display
+          controls and information in the correct places.
+        </tal:comment>
+        <span class="dynamic unseen">
+          <img src="/@@/flame-icon" alt=""/>
+          <a href="+affectsmetoo" class="js-action"
+             ><span class="value">Does this bug affect you?</span></a>
+          <img class="editicon" src="/@@/edit" alt="Edit" />
+        </span>
+
+        <script type="text/javascript" tal:content="string:
+          YUI().use('event', 'bugs.bugtask_index', function(Y) {
+              Y.on('load', function(e) {
+                  Y.bugs.setup_me_too(${view/current_user_affected_js_status});
+              }, window);
+          });
+          ">
         </script>
-      </form>
+
+      </span>
     </tal:also-affects-links>
-
 </div>
+
 </tal:root>

=== added file 'lib/lp/bugs/windmill/tests/test_bugs/test_bug_me_too.py'
--- lib/lp/bugs/windmill/tests/test_bugs/test_bug_me_too.py	1970-01-01 00:00:00 +0000
+++ lib/lp/bugs/windmill/tests/test_bugs/test_bug_me_too.py	2009-07-31 15:27:05 +0000
@@ -0,0 +1,65 @@
+# Copyright 2009 Canonical Ltd.  This software is licensed under the
+# GNU Affero General Public License version 3 (see the file LICENSE).
+
+from canonical.launchpad.windmill.testing import lpuser
+
+from windmill.authoring import WindmillTestClient
+
+
+def test_me_too():
+    """Test the "this bug affects me too" options on bug pages.
+
+    This test ensures that, with Javascript enabled, the "me too"
+    status can be edited in-page.
+    """
+    client = WindmillTestClient('Bug "me too" test')
+    lpuser.SAMPLE_PERSON.ensure_login(client)
+
+    # Open bug 11 and wait for it to finish loading.
+    client.open(url=u'http://bugs.launchpad.dev:8085/jokosher/+bug/11/+index')
+    client.waits.forPageLoad(timeout=u'20000')
+
+    # Wait for setup_me_too to sort out the "me too" elements.
+    client.waits.forElement(
+        xpath=(u"//span[@id='affectsmetoo' and "
+               u"@class='yui-metoocs-content']"))
+
+    # Currently this bug does not affect the logged-in user.
+    client.asserts.assertText(
+        xpath=u"//span[@id='affectsmetoo']/span[@class='value']",
+        validator=u"This bug doesn't affect me")
+
+    # There is an edit icon next to the text which can be clicked to
+    # edit the "me too" status. However, we won't click it with
+    # Windmill because the widget actually responds to mouse-down, and
+    # Windmill seems to do something funny instead.
+    client.mouseDown(
+        xpath=u"//span[@id='affectsmetoo']//img[@class='editicon']")
+    client.mouseUp(
+        xpath=u"//span[@id='affectsmetoo']//img[@class='editicon']")
+
+    # Wait for the modal dialog to appear.
+    client.waits.forElement(id=u'yui-pretty-overlay-modal')
+
+    # There's a close button if we change our mind.
+    client.click(
+        xpath=(u"//div[@id='yui-pretty-overlay-modal']//"
+               u"a[@class='close-button']"))
+
+    # Wait for the modal dialog to disappear. Unfortunately the test
+    # below doesn't work, nor does testing clientWidth, or anything I
+    # could think of, so it's commented out for now because chasing
+    # this is not a good use of time.
+
+    # client.asserts.assertElemJS(
+    #     id=u'yui-pretty-overlay-modal',
+    #     js=(u'getComputedStyle(element, '
+    #         u'"visibility").visibility == "hidden"'))
+
+    # However, we want to mark this bug as affecting the logged-in
+    # user. We can also click on the content box of the "me too"
+    # widget; we are not forced to use the edit icon.
+    client.click(xpath=u"//span[@id='affectsmetoo']")
+    client.waits.forElement(id=u'yui-pretty-overlay-modal')
+
+    # XXX: Gavin Panella bug=361097 2009-07-31: Finish this.