I am trying to test a hover event that should change the font color of a link in my chess app. I know it works as it changes from white to purple when I run it and test it manually on my local host, but Cypress can't verify the change. Here is the test I wrote:
it('changes link color on hover', function () {
cy.get('.ig-link').should('have.css', 'color', 'rgb(255, 255, 255)');
cy.get('.ig-link')
.trigger('mouseover')
.should('have.css', 'color', 'rgb(173, 6, 173)');
});
And a screenshot of the test runner:
The .realHover() command in cypress-real-events works with this test
cy.get('.ig-link')
// .trigger('mouseover')
.realHover()
.should('have.css', 'color', 'rgb(173, 6, 173)'); // passes
Install with
npm install cypress-real-events
//or
yarn add cypress-real-events
and add the register command to cypress/support/e2e.js
import "cypress-real-events/support";
Related
I am new to Firefox Addon SDK, high level API.
What I wanted to do it, if a user click the icon on the toolbar, a new tab is opened, and run the script defined in contentscriptfile.
I use the script below:
var self = require("sdk/self");
var tabs = require("sdk/tabs");
var buttons = require('sdk/ui/button/action');
var button = buttons.ActionButton({
id: "mm-link",
label: "Visit mm",
icon: {
"32": "./icon-32.png",
"64": "./icon-64.png"
},
onClick: handleClick
});
function handleClick(state) {
tabs.open("about:blank");
tabs.on('ready', function (tab) {
tab.attach({
contentScriptFile: self.data.url("home.js"),
contentScriptOptions: {"aaa" : "1111", "bob" : "222"}
});
});
}
But it doesn't work as expected, and has the following problems:
The script runs repeatedly. (I wanted it run only once on each new tab)
Even if I click the "+" icon to create a new tab, the script will
run. (I wanted it only run when clicking the icon I created on the toolbar)
I have also tried to change 'ready' to 'activiate', the repeated running problem is gone, but every time I create the tab, the script will run.
Many thanks to any help.
The issue is that you're listening to the ready event of any and all tabs, rather than the one you just opened. One option is to do something like this:
function handleClick(state) {
tabs.open({
url: "about:blank",
onOpen: function onOpen(tab) {
tab.attach({
contentScriptFile: self.data.url("home.js"),
contentScriptOptions: {"aaa" : "1111", "bob" : "222"}
});
}
});
}
And attach the script using the onOpen handler. For more info the docs are here: https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs#open%28options%29
I am trying to implement an Activity Indicator for our App. The code I am running is as follows :
var indicatorWindow = Ti.UI.createWindow({
opacity : 1,
backgroundColor : 'transparent'
});
var activityIndicator = Ti.UI.createActivityIndicator({
message: 'Loading...'
});
indicatorWindow.add(activityIndicator);
indicatorWindow.addEventListener('indicatorShow', function(e) {
indicatorWindow.open();
activityIndicator.show();
});
indicatorWindow.addEventListener('indicatorHide', function(e) {
activityIndicator.hide();
indicatorWindow.close();
});
And then I am calling the following events from another page :
IndicatorWindow.fireEvent('indicatorShow');
Some task here...
IndicatorWindow.fireEvent('indicatorHide');
The Activity windows opens up with a Black background instead of a transparent one (see screenshot below). The same code works on Android, iOS and Web though. Any thoughts?
I created a simple ionic-tabs that shows my icons at the top of the screen. I tried to wrap it in a ionic-footer-bar in order to have it placed at the bottom of the screen with no success. The tabs disappear when I do that. How should I accomplish the looks I want?
<ion-footer-bar>
<ion-tabs class="tabs-icon-only tabs-stable">
...
</ion-tabs>
</ion-footer-bar>
Since the beta 14 of Ionic (http://blog.ionic.io/the-final-beta/), there are some config variables that now default to their platform values, which means that they will try to behave according to the platform that they are built on.
In the case of tabs, for iOS the default is to display on bottom, and Android on top.
You can easily "hard set" the location for all platforms by setting the tabs.position function in the $ionicConfigProvider, inside your config function like this:
MyApp.config(['$ionicConfigProvider', function($ionicConfigProvider) {
$ionicConfigProvider.tabs.position('bottom'); // other values: top
}]);
You can check documentation here
To place the ionicFramework tabs at the bottom of the screen for android devices just open your app.js file, and under angular.module add the following lines of code:
.config(function($ionicConfigProvider) {
$ionicConfigProvider.tabs.position('bottom');
})
Hope this will help.
Update for Ionic 2 (cleaner/improved syntax):
In app.js:
#App({
...
config: {
tabbarPlacement: 'bottom',
}
})
See Configs
Placing it in your app.js does the work.
.config(function($ionicConfigProvider) {
$ionicConfigProvider.tabs.position('bottom');
})
Ionic automatically takes platform configurations into account to adjust things like what transition style to use and whether tab icons should show on the top or bottom.
For example, In the case of tabs, for iOS the default is to display on bottom, and Android on top.
Note1 : It should be noted that when a platform is not iOS or Android, then it’ll default to iOS
Note2 : if you are developing on a desktop browser, it’s going to take on iOS default configs
In side the app.js file you will need to inject the $ionicConfigProvider to the .config module and add $ionicConfigProvider.tabs.position(‘bottom’)
.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {
$ionicConfigProvider.tabs.position('bottom'); //top
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.
.
.
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/dash');
});
How to place ionic tabs at the bottom of the screen in Ionic 2
For the current version ionic 2.0.0-beta.10.
In app.ts:
ionicBootstrap(MyApp, [], {
tabbarPlacement: "bottom"
});
See Config
For the soon to be released ionic 2.0.0-beta.11
In app.ts:
ionicBootstrap(MyApp, [], {
tabsPlacement: "bottom"
});
Config
myapp.config(['$ionicConfigProvider', function($ionicConfigProvider) {
$ionicConfigProvider.tabs.position('bottom'); // other values: top
}]);
Update for Ionic 2, and Ionic 3+:
You have 2 methods to change tab bar position:
Method 1: Use tabsPlacement propertive of <ion-tabs>
<ion-tabs tabsPlacement='bottom' >
<ion-tab [root]="rootTab" tabTitle="Home"></ion-tab>
</ion-tabs>
Method 2: Change config in app.module.ts
#NgModule({
imports: [
IonicModule.forRoot(MyApp, {
tabsPlacement : 'bottom'
})
]
})
See the docs
Try This
<ion-footer><ion-tabs> <ion-tab tabTitle="Return"></ion-tab> </ion-tabs></ion-footer>
I have a button 'Search'. When I am clicking it, it is doing some search and loading data in the grid.
I want to add Mask and Unmask functionality here. I am using extJS5
{
xtype: 'button',
text: 'Search',
handler : function () {
var searchPanel = Ext.getCmp('searchPanel'),
grid = Ext.getCmp('searchResultsGrid'),
searchCrit = searchPanel.gatherCriteria();
Ext.getBody().mask("Loading Data ..");
grid.executeSearch(searchCrit);
Ext.getBody().unmask();
}
}
I have addedd Ext.getBody().mask("Loading Data .."); and Ext.getBody().unmask();. But it's not working properly.
Any idea, how to mask and unmask a panel in an event.
It depends on which proxy you use.
If you use memory proxy, then mask is not showing, because everything is executed at once, and browser not manage to make it visible. IMO the best way to make it visible is by using defer:
Ext.getBody().mask("Loading Data ..");
Ext.Function.defer(function() {
grid.executeSearch(searchCrit);
Ext.getBody().unmask();
}, 10);
That will give browser enough time to make mask visible.
If you use any other proxy, then grid loads data asynchronously, so you need to unmask it after load event is fired, no after executeSearch call:
Ext.getBody().mask("Loading Data ..");
grid.executeSearch(searchCrit);
grid.on('load', function() {
Ext.getBody().unmask();
}, grid, { single: true });
BTW grid by default has masking enabled (loadMask configuration parameter from Ext.grid.View). You might have something missconfigured. Check this example: http://jsfiddle.net/seur2aLx/9/
on this page there is a button with a jQuery effect. I want to speed up the animation and see how it will look like. So I opened up the inspector and notices there is a fade effect with 500 speed. I want to chagne this to 100 and see what it'll look like. How can I do this using the consoles script window? Thanks
You can run the following code in your console window, the script just remove the element and add it again you can change the speed in fadeTo()
$(".hover").remove();
$('.otherbutton,.homebutton,.downloadbutton,.donatebutton')
.append('<span class="hover"></span>').each(function () {
var $span = $('> span.hover', this).css('opacity', 0);
$(this).hover(function () {
$span.stop().fadeTo(200, 1);
}, function () {
$span.stop().fadeTo(500, 0);
});
});
If you open the elements tab and expand the section of code you are interested in you can double click the code to edit it.