JQuery-Mobile
view release on metacpan or search on metacpan
#!perl -T
use strict;
use warnings;
use Test::More;
plan tests => 64;
use_ok('JQuery::Mobile');
can_ok('JQuery::Mobile', qw(new head header footer table panel popup page pages form listview collapsible collapsible_set navbar button controlgroup input rangeslider select checkbox radio textarea));
my $jquery_mobile = JQuery::Mobile->new(
config => {
'app-title' => 'Hello Mobile World',
'app-js' => ['https://raw.github.com/dannyglue/jQuery-Mobilevalidate/master/jquery.mobilevalidate.min.js'],
'app-inline-js' => '$(document).bind("pageinit", function(){
$("form").mobilevalidate({novalidate: true});
});',
'label' => sub {
my $args = shift;
return '<strong>' . $args->{label} . '*</strong>' if $args->{required};
return $args->{label};
},
}
);
like ($jquery_mobile->{config}->{'app-title'}, qr/Hello Mobile World/, 'App JS');
my $header = $jquery_mobile->header(
content => $jquery_mobile->button(href => '#', value => 'Home', icon => 'home', iconpos => 'notext') . '<h1>Main Title</h1>',
);
like ($header, qr/<div data-role="header">/, 'Header Start');
like ($header, qr/<a data-icon="home" data-iconpos="notext" data-role="button" href="#">Home<\/a>/, 'Header Content and button');
my $custom_header = $jquery_mobile->header(
'content' => '<h1>Header Content</h1>',
'id' => 'home-main-header',
'class' => 'site-header',
'data-id' => 'main-header', # use the 'data-*' prefix since 'id' is both a HTML and data atrribute
'fullscreen' => 'true',
'position' => 'fixed',
'theme' => 'e'
);
like ($custom_header, qr/<div data-role="header" data-fullscreen="true" id="home-main-header" class="site-header" data-id="main-header" data-fullscreen="true" data-position="fixed" data-theme="e">/, 'Customised Header Start');
like ($custom_header, qr/<h1>Header Content<\/h1>/, 'Customised Header Content');
like ($custom_header, qr/<\/div>/, 'Customised Header End');
my $footer = $jquery_mobile->footer(
position => 'fixed',
content => 'Footer content'
);
like ($footer, qr/<div data-role="footer" data-position="fixed">/, 'Footer Start');
like ($footer, qr/<\/div>/, 'Footer End');
my $popup = $jquery_mobile->popup(id => 'popup', content => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit');
like ($popup, qr/<div id="popup" data-role="popup">/, 'Popup Start');
like ($popup, qr/<\/div>/, 'Popup End');
my $panel = $jquery_mobile->panel(content => 'Panel Content');
like ($panel, qr/<div data-role="panel">/, 'Panel');
my $page = $jquery_mobile->page(
header => {
content => $jquery_mobile->button(href => '#', value => 'Home', icon => 'home', iconpos => 'notext') . '<h1>Main Title</h1>',
},
footer => {
position => 'fixed',
content => '<h3>Footer content</h3>'
},
content => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit'
);
like ($page, qr/<html>/, 'Page HTML');
like ($page, qr/<head>/, 'Page Head');
like ($page, qr/<div data-role="page">/, 'Page Start');
like ($page, qr/<div data-role="header">/, 'Page Header');
like ($page, qr/<div data-role="content">/, 'Page Content');
like ($page, qr/<div data-role="footer" data-position="fixed">/, 'Page Footer');
my $pages = $jquery_mobile->pages(
pages => [
{id => 'page-1', header => {content => '<h1>Page One Heading</h1>'}, content => 'Cillum dolore eu fugiat nulla pariatur. ' . $jquery_mobile->button(icon => 'arrow-r', value => 'Page 2', href => '#page-2')},
{id => 'page-2', header => {content => '<h1>Page Two Heading</h1>'}, content => 'Excepteur sint occaecat cupidatat non'},
]
);
like ($pages, qr/<html>/, 'Page HTML');
like ($pages, qr/<head>/, 'Page Head');
like ($pages, qr/<div id="page-1" data-role="page">/, 'Page 1');
like ($pages, qr/<a data-icon="arrow-r" data-role="button" href="#page-2">Page 2<\/a>/, 'Page 1 Button');
like ($pages, qr/<div id="page-2" data-role="page">/, 'Page 2');
my $table = $jquery_mobile->table(
class => 'ui-responsive',
th => {
'First Name' => {priority => '1'},
'Last Name' => {priority => '2'},
'Email' => {priority => '3'},
'Gender' => {priority => '4'},
},
headers => ['First Name', 'Last Name', 'Email', 'Gender'],
rows => [
['John', 'Smith', 'john@work.com', 'Male'],
['Ann', 'Smith', 'ann@work.com', 'Female'],
],
);
like ($table, qr/<table data-role="table" class="ui-responsive">/, 'Table Start');
like ($table, qr/<th data-priority="1">First Name<\/th>/, 'Table Head 1');
like ($table, qr/<td>John<\/td>/, 'Table Data 1');
my $form = $jquery_mobile->form(
title => 'The Form',
description => 'A description of the form',
action => '/',
method => 'get', # defaulted to 'post'
fields => [
{name => 'first_name', required => 'required'},
( run in 1.065 second using v1.01-cache-2.11-cpan-364913b4093 )