fixed tooltip unit test for Jest
gitea/salix/pipeline/head This commit looks good
Details
gitea/salix/pipeline/head This commit looks good
Details
This commit is contained in:
parent
e3374e5eea
commit
b7b02566d1
|
@ -2,119 +2,154 @@ import './tooltip';
|
|||
|
||||
describe('Component vnTooltip', () => {
|
||||
let $element;
|
||||
let controller;
|
||||
let tooltip;
|
||||
let tooltipCtrl;
|
||||
let $parent;
|
||||
let element;
|
||||
let window;
|
||||
|
||||
beforeEach(ngModule('vnCore'));
|
||||
|
||||
beforeEach(inject(($componentController, $compile, $templateRequest, $document) => {
|
||||
$element = angular.element(`<vn-tooltip class="text vn-tooltip"></vn-tooltip>`);
|
||||
beforeEach(inject(($rootScope, $compile, $document) => {
|
||||
let scope = $rootScope.$new();
|
||||
$element = $compile(`<vn-tooltip class="text">test</span></vn-tooltip>`)(scope);
|
||||
$document.find('body').append($element);
|
||||
controller = $componentController('vnTooltip', {$document, $compile, $templateRequest, $element});
|
||||
element = $element[0];
|
||||
window = controller.window;
|
||||
tooltip = $element[0];
|
||||
tooltipCtrl = tooltip.$ctrl;
|
||||
window = tooltipCtrl.window;
|
||||
$parent = angular.element('<div/>');
|
||||
|
||||
$parent = angular.element('<div><div/>');
|
||||
$parent.css({
|
||||
backgroundColor: 'red',
|
||||
position: 'absolute',
|
||||
width: '100px',
|
||||
height: '100px',
|
||||
top: '0',
|
||||
left: '0'
|
||||
});
|
||||
$document.find('body').append($parent);
|
||||
}));
|
||||
|
||||
afterEach(() => {
|
||||
$element.remove();
|
||||
$parent.remove();
|
||||
});
|
||||
$parent[0].getBoundingClientRect = () => {};
|
||||
|
||||
jest.spyOn(tooltip, 'getBoundingClientRect').mockReturnValue({bottom: 0, height: 40, left: 0, right: 0, top: 0, width: 40});
|
||||
}));
|
||||
|
||||
describe('show()', () => {
|
||||
it(`should check that tooltip is visible into the screen`, () => {
|
||||
expect(element.classList).not.toContain('show');
|
||||
jest.spyOn($parent[0], 'getBoundingClientRect').mockReturnValue({
|
||||
height: window.innerHeight - 120,
|
||||
width: window.innerWidth - 120,
|
||||
top: 60,
|
||||
left: 60,
|
||||
});
|
||||
|
||||
controller.show($parent[0]);
|
||||
expect(tooltip.classList).not.toContain('show');
|
||||
|
||||
let rect = element.getBoundingClientRect();
|
||||
tooltipCtrl.show($parent[0]);
|
||||
|
||||
expect(element.classList).toContain('show');
|
||||
let tooltipStyle = tooltip.style;
|
||||
|
||||
expect(0).toBeLessThanOrEqual(rect.top);
|
||||
expect(0).toBeLessThanOrEqual(rect.left);
|
||||
expect(window.innerHeight).toBeGreaterThan(rect.bottom);
|
||||
expect(window.innerWidth).toBeGreaterThan(rect.right);
|
||||
let tooltipTop = parseInt(tooltipStyle['top']);
|
||||
let tooltipLeft = parseInt(tooltipStyle['left']);
|
||||
|
||||
expect(tooltip.classList).toContain('show');
|
||||
|
||||
expect(tooltipTop).toBeLessThanOrEqual(window.innerHeight);
|
||||
expect(tooltipTop).toBeGreaterThanOrEqual(0);
|
||||
expect(tooltipLeft).toBeLessThanOrEqual(window.innerWidth);
|
||||
expect(tooltipLeft).toBeGreaterThanOrEqual(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('hide()', () => {
|
||||
it(`should check that tooltip is not visible`, () => {
|
||||
controller.show($parent[0]);
|
||||
it('should check that tooltip is not visible', () => {
|
||||
jest.spyOn($parent[0], 'getBoundingClientRect').mockReturnValue({
|
||||
height: window.innerHeight,
|
||||
width: window.innerWidth - 80,
|
||||
top: 0,
|
||||
left: 60,
|
||||
});
|
||||
tooltipCtrl.show($parent[0]);
|
||||
|
||||
expect(element.classList).toContain('show');
|
||||
controller.hide();
|
||||
expect(tooltip.classList).toContain('show');
|
||||
tooltipCtrl.hide();
|
||||
|
||||
expect(element.classList).not.toContain('show');
|
||||
expect(tooltip.classList).not.toContain('show');
|
||||
});
|
||||
});
|
||||
|
||||
// #1892 reparar unitarios front tooltip.js
|
||||
describe('relocate()', () => {
|
||||
it(`should reallocate tooltip on top-left`, () => {
|
||||
controller.show($parent[0]);
|
||||
let rect = element.getBoundingClientRect();
|
||||
|
||||
expect(controller.margin).toBeLessThan(rect.top);
|
||||
expect(controller.margin).toEqual(rect.left);
|
||||
it('should reallocate tooltip to the left', () => {
|
||||
jest.spyOn($parent[0], 'getBoundingClientRect').mockReturnValue({
|
||||
height: window.innerHeight,
|
||||
width: window.innerWidth - 80,
|
||||
top: 0,
|
||||
left: 60,
|
||||
});
|
||||
|
||||
it(`should reallocate tooltip on bottom-left`, () => {
|
||||
$parent.css({
|
||||
top: `${window.innerHeight}px`
|
||||
});
|
||||
controller.show($parent[0]);
|
||||
let rect = element.getBoundingClientRect();
|
||||
tooltipCtrl.position = 'left';
|
||||
tooltipCtrl.show($parent[0]);
|
||||
|
||||
expect(window.innerHeight).toBeGreaterThan(rect.top);
|
||||
expect(controller.margin).toEqual(rect.left);
|
||||
let tooltipStyle = tooltip.style;
|
||||
|
||||
let tooltipTop = parseInt(tooltipStyle['top']);
|
||||
let tooltipLeft = parseInt(tooltipStyle['left']);
|
||||
|
||||
expect(tooltipTop).toEqual((window.innerHeight / 2) - (tooltipCtrl.margin * 2));
|
||||
expect(tooltipLeft).toEqual(tooltipCtrl.margin);
|
||||
});
|
||||
|
||||
it(`should reallocate tooltip on bottom-right`, () => {
|
||||
$parent.css({
|
||||
top: `${window.innerHeight}px`,
|
||||
left: `${window.innerWidth}px`
|
||||
});
|
||||
controller.show($parent[0]);
|
||||
let rect = element.getBoundingClientRect();
|
||||
|
||||
expect(window.innerWidth).toBeGreaterThan(rect.left);
|
||||
expect(window.innerWidth - controller.margin).toEqual(rect.right);
|
||||
it('should reallocate tooltip on bottom', () => {
|
||||
let parentHeight = window.innerHeight - 80;
|
||||
jest.spyOn($parent[0], 'getBoundingClientRect').mockReturnValue({
|
||||
height: parentHeight,
|
||||
width: window.innerWidth,
|
||||
top: 0,
|
||||
left: 0,
|
||||
});
|
||||
|
||||
it(`should reallocate tooltip on top-right`, () => {
|
||||
$parent.css({
|
||||
left: `${window.innerWidth}px`
|
||||
});
|
||||
controller.show($parent[0]);
|
||||
let rect = element.getBoundingClientRect();
|
||||
tooltipCtrl.position = 'bottom';
|
||||
tooltipCtrl.show($parent[0]);
|
||||
|
||||
expect(controller.margin).toBeLessThan(rect.top);
|
||||
expect(window.innerWidth - controller.margin).toEqual(rect.right);
|
||||
let tooltipStyle = tooltip.style;
|
||||
|
||||
let tooltipTop = parseInt(tooltipStyle['top']);
|
||||
let tooltipLeft = parseInt(tooltipStyle['left']);
|
||||
|
||||
expect(tooltipLeft).toEqual((window.innerWidth / 2) - (tooltipCtrl.margin * 2));
|
||||
expect(tooltipTop).toEqual(parentHeight + tooltipCtrl.margin);
|
||||
});
|
||||
|
||||
it(`should reallocate tooltip on center`, () => {
|
||||
$parent.css({
|
||||
top: `${window.window.innerHeight / 2}px`,
|
||||
left: `${window.window.innerWidth / 2}px`
|
||||
it(`should reallocate tooltip on right`, () => {
|
||||
let parentWidth = window.innerWidth - 80;
|
||||
jest.spyOn($parent[0], 'getBoundingClientRect').mockReturnValue({
|
||||
height: window.innerHeight,
|
||||
width: parentWidth,
|
||||
top: 0,
|
||||
left: 0,
|
||||
});
|
||||
controller.show($parent[0]);
|
||||
let rect = element.getBoundingClientRect();
|
||||
|
||||
expect(window.innerHeight / 2).toBeLessThan(rect.top);
|
||||
expect(window.innerWidth / 2).toBeGreaterThan(rect.left);
|
||||
tooltipCtrl.position = 'right';
|
||||
tooltipCtrl.show($parent[0]);
|
||||
|
||||
let tooltipStyle = tooltip.style;
|
||||
|
||||
let tooltipTop = parseInt(tooltipStyle['top']);
|
||||
let tooltipLeft = parseInt(tooltipStyle['left']);
|
||||
|
||||
expect(tooltipLeft).toEqual(parentWidth + tooltipCtrl.margin);
|
||||
expect(tooltipTop).toEqual((window.innerHeight / 2) - (tooltipCtrl.margin * 2));
|
||||
});
|
||||
|
||||
it(`should reallocate tooltip on top`, () => {
|
||||
jest.spyOn($parent[0], 'getBoundingClientRect').mockReturnValue({
|
||||
height: window.innerHeight - 80,
|
||||
width: window.innerWidth,
|
||||
top: 60,
|
||||
left: 0,
|
||||
});
|
||||
|
||||
tooltipCtrl.position = 'top';
|
||||
tooltipCtrl.show($parent[0]);
|
||||
|
||||
let tooltipStyle = tooltip.style;
|
||||
|
||||
let tooltipTop = parseInt(tooltipStyle['top']);
|
||||
let tooltipLeft = parseInt(tooltipStyle['left']);
|
||||
|
||||
expect(tooltipLeft).toEqual((window.innerWidth / 2) - (tooltipCtrl.margin * 2));
|
||||
expect(tooltipTop).toEqual(tooltipCtrl.margin);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue