r13440 - Products.Archetypes/trunk/Products/Archetypes/skins/archetypes/widgets/tests
"Matt Barkau" <[email protected]>
| Newsgroups | gmane.comp.web.zope.plone.archetypes.cvs |
|---|---|
| Message-ID | <[email protected]> |
Author: rmattb
Date: Sun Jan 30 19:03:58 2011
New Revision: 13440
Added:
Products.Archetypes/trunk/Products/Archetypes/skins/archetypes/widgets/tests/
Products.Archetypes/trunk/Products/Archetypes/skins/archetypes/widgets/tests/keywordmultiselecttests.js (contents, props changed)
Products.Archetypes/trunk/Products/Archetypes/skins/archetypes/widgets/tests/keywordtests.html (contents, props changed)
Log:
Add QUnit tests for JavaScript in keyword multiple select enhancement PLIP. Refs #11017.
Added: Products.Archetypes/trunk/Products/Archetypes/skins/archetypes/widgets/tests/keywordmultiselecttests.js
==============================================================================
--- (empty file)
+++ Products.Archetypes/trunk/Products/Archetypes/skins/archetypes/widgets/tests/keywordmultiselecttests.js Sun Jan 30 19:03:58 2011
@@ -0,0 +1,67 @@
+// Keyword multiple select enhancement test - refs PLIP ticket #11017.
+// The PLIP adds an accessible, jQuery-based widget, which includes both a scrollbar and checkboxes.
+
+$(document).ready(function(){
+
+ $("#predefined_subjects").multiSelect();
+
+ // These assignments are not used in the tests,
+ // but were handy for hovering variable names in Firebug when writing the tests,
+ // and could be handy for debugging failed tests if any failures happen in the future.
+ multiple_select = $(".multiSelectOptions");
+ existing_tags = multiple_select.children();
+ first_tag = existing_tags.first();
+ first_label = $(".multiSelectOptions label:first").text();
+ first_selected = $("#selectedTags span:first").text();
+ num_tags = existing_tags.length;
+ checked_input_val = $(".multiSelectOptions input:checked").val();
+ checked_label = $(".multiSelectOptions label.checked").css("backgroundColor");
+
+ module("Keyword multiple select enhancement test - refs PLIP ticket #11017");
+ test("Div existence test", function(){
+ expect(1);
+ equals( $(".multiSelectOptions").length,
+ 1,
+ 'Expected 1 as the result, result was: ' + $(".multiSelectOptions").length );
+ });
+ test("Tag dd count test", function(){
+ expect(1);
+ equals( $(".multiSelectOptions").children().length,
+ 16,
+ 'Expected 16 as the result, result was: ' + $(".multiSelectOptions").children().length );
+ });
+ test("First label text test", function(){
+ expect(1);
+ equals( $(".multiSelectOptions label:first").text(),
+ 'An existing tag',
+ 'Expected An existing tag as the result, result was: ' + $(".multiSelectOptions label:first").text() );
+ });
+ test("Pre-checked/selected text, checked, formatted, & listed test", function(){
+ expect(3);
+ equals( $(".multiSelectOptions input:checked").val(),
+ "Major Initiatives: Nurture Community",
+ 'Expected Major Initiatives: Nurture Community as the result, result was: ' + $(".multiSelectOptions input:checked").val() );
+ equals( $(".multiSelectOptions label.checked").css("backgroundColor"),
+ "rgb(238, 238, 238)",
+ 'Expected rgb(238, 238, 238) as the result, result was: ' + $(".multiSelectOptions label.checked").css("backgroundColor") );
+ equals( $("#selectedTags span:first").text(),
+ "Major Initiatives: Nurture Community",
+ 'Expected Major Initiatives: Nurture Community as the result, result was: ' + $("#selectedTags span:first").text() );
+ });
+ //test("Checkbox checked test", function(){
+ //expect(1);
+ //// This doesn't trigger the click methods in the js, not sure why.
+ //// That seems to wreck the possibility of testing this with QUnit; it currently fails.
+ //$(".multiSelectOptions input:first").click();
+ //ok( $(".multiSelectOptions label:first").hasClass("hover"),
+ //'Expected hover class on first label.' );
+ //});
+
+ // Other tests which would be nice:
+ // Scrollbar present? - Can only test with qunit if moused down onto - inadequate.
+ // Tab key nav- jQuery didn't catch it when I was working on the code; test doesn't appear possible.
+ // Spacebar selection, formatting, and listing as currently selected tag.
+ // Hover a middle tag, moving mouse in from the side, as a corner case.
+ // Arrow key navigation.
+ // Arrow key navigation div scrolling down properly.
+});
\ No newline at end of file
Added: Products.Archetypes/trunk/Products/Archetypes/skins/archetypes/widgets/tests/keywordtests.html
==============================================================================
--- (empty file)
+++ Products.Archetypes/trunk/Products/Archetypes/skins/archetypes/widgets/tests/keywordtests.html Sun Jan 30 19:03:58 2011
@@ -0,0 +1,201 @@
+<html xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:tal="http://xml.zope.org/namespaces/tal"
+ xmlns:metal="http://xml.zope.org/namespaces/metal"
+ xmlns:i18n="http://xml.zope.org/namespaces/i18n"
+ i18n:domain="plone">
+
+<head>
+ <title>Keyword multiple select enhancement test - refs PLIP ticket #11017.</title>
+ <link rel="stylesheet" href="http://github.com/jquery/qunit/raw/master/qunit/qunit.css" type="text/css" media="screen">
+ <link rel="stylesheet" href="../../../../../../../plonetheme.sunburst/plonetheme/sunburst/skins/sunburst_styles/public.css" type="text/css" media="screen">
+ <script type="text/javascript" src="http://github.com/jquery/qunit/raw/master/qunit/qunit.js"></script>
+ <script type="text/javascript" src="../../../../../../../Products.CMFPlone/Products/CMFPlone/skins/plone_3rdParty/jquery.js"></script>
+ <!-- Project file -->
+ <script type="text/javascript" src="../js/keywordmultiselect.js"></script>
+ <!-- Tests file -->
+ <script type="text/javascript" src="keywordmultiselecttests.js"></script>
+</head>
+
+<body>
+ <h1>Keyword multiple select enhancement test - refs PLIP ticket #11017.</h1>
+
+ <p>The PLIP adds an accessible, jQuery-based widget,
+ which includes both a scrollbar and checkboxes.</p>
+
+ <p>This file is basically a copy of ../keyword.pt, with QUnit added, and
+ slight modifications to make it run in a static, standalone way,
+ looking somewhat realistic, although Plone's css messes up QUnit's a little.</p>
+
+ <p>---</p>
+
+ <h2 id="qunit-header">QUnit Test Suite</h2>
+ <h2 id="qunit-banner"></h2>
+ <div id="qunit-testrunner-toolbar"></div>
+ <h2 id="qunit-userAgent"></h2>
+ <ol id="qunit-tests"></ol>
+
+ <p>---</p>
+
+ <!-- Keyword Widgets -->
+
+ <metal:view_macro define-macro="view"
+ tal:define="kssClassesView context/@@kss_field_decorator_view;
+ getKssClasses nocall:kssClassesView/getKssClassesInlineEditable;">
+ <div metal:define-macro="keyword-field-view"
+ tal:define="kss_class python:getKssClasses(fieldName,
+ templateId='widgets/keyword', macro='keyword-field-view');"
+ tal:attributes="class kss_class;
+ id string:parent-fieldname-$fieldName">
+ <ul metal:define-slot="inside">
+ <li tal:repeat="item accessor"
+ tal:content="item"/>
+ </ul>
+ </div>
+ </metal:view_macro>
+
+ <metal:define define-macro="edit">
+ <metal:use use-macro="field_macro | context/widgets/field/macros/edit">
+ <tal:define metal:fill-slot="widget_body" define="contentKeywords accessor;
+ allowedKeywords python: context.collectKeywords(fieldName, field.accessor, widget.vocab_source);
+ site_props context/portal_properties/site_properties|nothing;
+ format widget/format | string:select;
+ allowRolesToAddKeywords site_props/allowRolesToAddKeywords|nothing;">
+
+ <div tal:condition="allowedKeywords" id="existingTagsSection">
+ <tal:comment tal:replace="nothing">
+ dl semantically associates selector name with values
+ </tal:comment>
+ <dl id="existingTags">
+ <label for="subject">
+ <dt id="existingTagsTitle">
+ <span i18n:translate="label_existing_tags">
+ Select from existing tags.
+ </span>
+ </dt>
+ <span id="existingTagsHelp" class="formHelp" i18n:translate="label_existingTagsHelp">
+ Use Control/Command/Shift keys to select multiple tags.
+ <tal:comment tal:replace="nothing">
+ Type-to-skip functionality with javascipt enabled
+ currently is described as
+ "Hover and type the first letter to skip through tags."
+ However, on touch-driven devices, vertical hover typically
+ scrolls the page, so horizontal hover is necessary to enable this.
+ Alternatively, clicking any of the tags also enables type-to-skip.
+ So the text could technically be extended to handle this special case
+ as "Hover or click and type the first letter to skip through tags.",
+ but I think this would be confusing to the majority of users.
+ </tal:comment>
+ </span>
+ </label>
+ <div class="visualClear"><!-- --></div>
+ <select id="predefined_subjects"
+ name="predefined_subjects:list"
+ size="14"
+ multiple="multiple"
+ tal:condition="python:format!='checkbox'"
+ tal:attributes="id string:${fieldName};
+ name string:${fieldName}_existing_keywords:list;">
+ <option value="#" tal:repeat="keyword allowedKeywords"
+ tal:content="keyword" tal:attributes="value keyword;
+ selected python:test(context.unicodeTestIn(keyword, value), 'selected', None)">An existing tag</option>
+ <option>Major Initiatives: Research</option>
+ <option>Major Initiatives: Teaching & Learning</option>
+ <option>Major Initiatives: Administrative-Time & Asset mgmt</option>
+ <option>Major Initiatives: K-12 Adoption</option>
+ <option selected>Major Initiatives: Nurture Community</option>
+ <option>Major Initiatives: Marketing</option>
+ <option>test tag 1</option>
+ <option>test tag 2</option>
+ <option>test tag 3</option>
+ <option>test tag 4</option>
+ <option>test tag 5</option>
+ <option>test tag 6</option>
+ <option>test tag 7</option>
+ <option>test tag 8</option>
+ <option>test tag 9</option>
+ </select>
+ <tal:comment tal:replace="nothing">
+ These spans are hidden by css, and used by the JavaScript called below.
+ </tal:comment>
+ <span id="noTagsSelected" i18n:translate="label_noTagsSelected">No tags currently selected.</span>
+ <span id="oneOrMoreTagsSelected" i18n:translate="label_oneOrMoreTagsSelected">% tags currently selected.</span>
+ <tal:comment tal:replace="nothing">
+ Call js to modify this widget with both a scrollbar and checkboxes.
+ There may be a better place to put this js call;
+ examples exist in others' widget.py and js files,
+ but having it here covers cases where some but not all select elements
+ call js to be modified.
+ Todo: The #subject should eventually refer to the template variable.
+ </tal:comment>
+ <script type="text/javascript">
+ </script>
+ <input type="hidden"
+ value=""
+ tal:condition="not:field/required | nothing"
+ tal:attributes="name string:${fieldName}_existing_keywords:default:list" />
+ <tal:loop tal:repeat="keyword allowedKeywords"
+ tal:condition="python:format=='checkbox'">
+ <div class="ArchetypesKeywordValue" id=""
+ tal:attributes="id string:archetypes-value-${fieldName}_${repeat/keyword/number}">
+ <input class="blurrable"
+ tal:attributes="
+ type string:checkbox;
+ name string:${fieldName}_existing_keywords:list;
+ id string:${fieldName}_${repeat/keyword/number};
+ checked python:test(context.unicodeTestIn(keyword, value), 'checked', None);
+ value keyword" />
+ <label
+ tal:content="keyword"
+ tal:attributes="for string:${fieldName}_${repeat/keyword/number}">
+ An existing tag
+ </label>
+ </div>
+ </tal:loop>
+ </dl>
+ <dl id="selectedTagsSection">
+ <dt id="selectedTagsHeading" class="formHelp"></dt>
+ <dd id="selectedTags"></dd>
+ </dl>
+ <div class="visualClear"><!-- --></div>
+ </div>
+
+ <tal:condition condition="python:not widget.roleBasedAdd or (allowRolesToAddKeywords and [role for role in user.getRolesInContext(context) if role in allowRolesToAddKeywords])">
+ <dl id="newTagsSection">
+ <label for="subject_keywords">
+ <dt id="newTagsTitle">
+ <span i18n:translate="label_new_tags">
+ Create and apply new tags.
+ </span>
+ </dt>
+ <span id="newTagsHelp" i18n:translate="label_newTagsHelp" class="formHelp">
+ Enter one tag per line, multiple words allowed.
+ </span>
+ </label>
+ <br />
+ <dd id="newTags">
+ <textarea
+ id="entered_subjects"
+ name="subject:lines"
+ rows="4"
+ tal:attributes="id string:${fieldName}_keywords;
+ name string:${fieldName}_keywords:lines;"
+ tal:define="subject python:[item for item in value if not context.unicodeTestIn(item,allowedKeywords)]"
+ tal:content="python:'\n'.join(subject)">A new tag
+ </textarea>
+ </dd>
+ </dl>
+ </tal:condition>
+
+ </tal:define>
+ </metal:use>
+ </metal:define>
+
+ <div metal:define-macro="search">
+ <div metal:use-macro="context/widgets/keyword/macros/edit">
+ </div>
+ </div>
+
+ </body>
+
+</html>
+
------------------------------------------------------------------------------
Special Offer-- Download ArcSight Logger for FREE (a $49 USD value)!
Finally, a world-class log management solution at an even better price-free!
Download using promo code Free_Logger_4_Dev2Dev. Offer expires
February 28th, so secure your free ArcSight Logger TODAY!
http://p.sf.net/sfu/arcsight-sfd2d