Skip to content

Commit

Permalink
feat: Improve highlighter - fix tests and cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
stepan662 committed May 23, 2022
1 parent 334738a commit 6ea5d34
Show file tree
Hide file tree
Showing 15 changed files with 486 additions and 493 deletions.
13 changes: 4 additions & 9 deletions e2e/cypress/integration/next-internal/ui.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,7 @@ context('UI Dialog', () => {
'screenshots.view',
'screenshots.upload',
]);
cy.contains('On the road')
.trigger('keydown', { key: 'Alt' })
.trigger('mouseover')
.click();
openUI();
cy.contains('Quick translation');
cy.contains('Update');
cy.get('#_tolgee_platform_link')
Expand Down Expand Up @@ -75,7 +72,7 @@ context('UI Dialog', () => {
cy.contains('Hello world').should('be.visible');
});

it.only('updates translation properly when languages restricted', () => {
it('updates translation properly when languages restricted', () => {
// simulating restricted languages in api key info (english only)
cy.intercept({ path: '/v2/api-keys/current**', method: 'get' }, (req) => {
req.reply(testApiKey);
Expand Down Expand Up @@ -121,10 +118,7 @@ context('UI Dialog', () => {
'screenshots.view',
'screenshots.upload',
]);
cy.contains('On the road')
.trigger('keydown', { key: 'Alt' })
.trigger('mouseover')
.click();
openUI();
cy.get('*[aria-label="Take screenshot"]').should('be.visible').click();
cy.get('*[aria-label="Screenshot"]').should('be.visible');
});
Expand Down Expand Up @@ -209,6 +203,7 @@ context('UI Dialog', () => {
.trigger('keydown', { key: 'Alt' })
.trigger('mouseover')
.click();
cy.window().trigger('keyup', { key: 'Alt' });
cy.get('textarea').contains(translation).should('be.visible');
cy.wait(300);
};
Expand Down
2 changes: 1 addition & 1 deletion packages/core/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
"develop": "concurrently \"rollup -c rollup.config.js -w\" \"tsc --watch --preserveWatchOutput --project tsconfig.prod.json\" ",
"schema": "openapi-typescript http://localhost:8080/v3/api-docs/All%20Internal%20-%20for%20Tolgee%20Web%20application --output ./src/types/apiSchema.generated.ts",
"typedoc": "typedoc --entryPointStrategy expand --out docs src/index.ts src/Tolgee.ts src/types.ts src/services/EventEmitter.ts src/services/Subscription.ts",
"tsc": "tsc --noEmit"
"tsc": "tsc --noEmit --emitDeclarationOnly false"
},
"author": "JanCizmar",
"license": "MIT",
Expand Down
4 changes: 4 additions & 0 deletions packages/core/src/Constants/Global.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,7 @@ export const RESTRICTED_ASCENDANT_ATTRIBUTE = 'data-tolgee-restricted';
export const TOLGEE_ATTRIBUTE_NAME = '_tolgee';
export const TOLGEE_TARGET_ATTRIBUTE = '_tolgee-target';
export const TOLGEE_WRAPPED_ONLY_DATA_ATTRIBUTE = 'data-tolgee-key-only';
export const TOLGEE_HIGHLIGHTER_CLASS = '_tolgee-highlighter';

// needs to be same as in @tolgee/ui package
export const DEVTOOLS_ID = '__tolgee_dev_tools';
76 changes: 34 additions & 42 deletions packages/core/src/highlighter/HighlightFunctionsInitializer.test.ts
Original file line number Diff line number Diff line change
@@ -1,48 +1,40 @@
describe('place', () => {
it('holder', () => {
// pass
});
});
jest.dontMock('./HighlightFunctionsInitializer');
jest.dontMock('../services/DependencyService');

// jest.dontMock('./HighlightFunctionsInitializer');
// jest.dontMock('../services/DependencyService');
import { HighlightFunctionsInitializer } from './HighlightFunctionsInitializer';
import { ElementWithMeta } from '../types';
import { DependencyService } from '../services/DependencyService';

// import { HighlightFunctionsInitializer } from './HighlightFunctionsInitializer';
// import { getMockedInstance } from '@testFixtures/mocked';
// import { Properties } from '../Properties';
// import { ElementWithMeta } from '../types';
// import { DependencyService } from '../services/DependencyService';
describe('HighlightFunctionsInitializer', () => {
let highlightFunctionInitializer: HighlightFunctionsInitializer;
let mockedElement: ElementWithMeta;

// describe('HighlightFunctionsInitializer', () => {
// let highlightFunctionInitializer: HighlightFunctionsInitializer;
// let mockedElement: ElementWithMeta;
// const mockedColor = 'rgb(0, 30, 50)';

// beforeEach(async () => {
// jest.clearAllMocks();
// const dependencyService = new DependencyService();
// dependencyService.init({});
// highlightFunctionInitializer =
// dependencyService.highlightFunctionInitializer;
// mockedElement = document.createElement('div') as Element as ElementWithMeta;
// getMockedInstance(Properties).config.highlightColor = mockedColor;
// (mockedElement._tolgee as any) = {};
// highlightFunctionInitializer.initFunctions(mockedElement);
// });
beforeEach(async () => {
document.body.appendChild = jest.fn();
jest.clearAllMocks();
const dependencyService = new DependencyService();
dependencyService.init({});
highlightFunctionInitializer =
dependencyService.highlightFunctionInitializer;
mockedElement = document.createElement('div') as Element as ElementWithMeta;
(mockedElement._tolgee as any) = {};
highlightFunctionInitializer.initFunctions(mockedElement);
});

// afterEach(async () => {
// jest.clearAllMocks();
// });
afterEach(async () => {
jest.clearAllMocks();
});

// test('Will reset to correct initial color', async () => {
// mockedElement.style.backgroundColor = '#222222';
// mockedElement._tolgee.highlight();
// mockedElement._tolgee.unhighlight();
// expect(mockedElement.style.backgroundColor).toEqual('rgb(34, 34, 34)');
// });
test('Will reset to correct initial color', async () => {
mockedElement.style.backgroundColor = '#222222';
mockedElement._tolgee.highlight();
mockedElement._tolgee.unhighlight();
expect(mockedElement.style.backgroundColor).toEqual('rgb(34, 34, 34)');
});

// test('Will highlight', async () => {
// mockedElement._tolgee.highlight();
// expect(mockedElement.style.backgroundColor).toEqual(mockedColor);
// });
// });
test('Will highlight', async () => {
jest.spyOn(mockedElement, 'isConnected', 'get').mockReturnValue(true);
mockedElement._tolgee.highlight();
expect(document.body.appendChild).toBeCalled();
});
});
19 changes: 14 additions & 5 deletions packages/core/src/highlighter/HighlightFunctionsInitializer.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,18 @@
import { TOLGEE_HIGHLIGHTER_CLASS } from '../Constants/Global';
import { Properties } from '../Properties';
import { ElementWithMeta } from '../types';

const BORDER_WIDTH = 5;

const HIGHLIGHTER_BASE_STYLE: Partial<CSSStyleDeclaration> = {
pointerEvents: 'none',
position: 'fixed',
boxSizing: 'border-box',
zIndex: String(Number.MAX_SAFE_INTEGER),
contain: 'layout',
display: 'block',
};

export class HighlightFunctionsInitializer {
constructor(private properties: Properties) {}

Expand All @@ -20,12 +30,11 @@ export class HighlightFunctionsInitializer {
let highlightEl = element._tolgee.highlightEl;
if (!highlightEl) {
highlightEl = document.createElement('div');
highlightEl.style.pointerEvents = 'none';
highlightEl.classList.add(TOLGEE_HIGHLIGHTER_CLASS);
Object.entries(HIGHLIGHTER_BASE_STYLE).forEach(([key, value]) => {
highlightEl.style[key] = value;
});
highlightEl.style.border = `${BORDER_WIDTH}px solid ${this.properties.config.highlightColor}`;
highlightEl.style.position = 'fixed';
highlightEl.style.boxSizing = 'border-box';
highlightEl.style.zIndex = String(Number.MAX_SAFE_INTEGER);
highlightEl.style.contain = 'layout';

element._tolgee.highlightEl = highlightEl;
document.body.appendChild(highlightEl);
Expand Down
Loading

0 comments on commit 6ea5d34

Please sign in to comment.