Totally understand this being a low priority thing given I am off in i'm off in uncharted waters testing Angular with Jest. While i'm obviously not going to be testing my layout using a jsdom driven test runner, there really isn't a reason why fxLayout & Jest can't play nice together.
As that relates to flex-layout, there are two small issues that have arisen after changing the test runner.
The first issue is related to window.matchMedia and not a problem within flex-layout which was solved with a global jest mock ( may be of value to someone in the future testing w/ Jest ).
Object.defineProperty(window, 'matchMedia', { value: jest.fn(() => { return { matches: true }; }) });
The second issue could be handled within flex-layout.
Problem
protected _getDisplayStyle(source?: HTMLElement): string {
let element: HTMLElement = source || this._elementRef.nativeElement;
let value = (element.style as any)['display'] || getComputedStyle(element)['display'];
return value.trim();
}
Given the above in flexbox/api/base.ts an element that doesn't have a display style is going to be undefined. When you attempt to .trim() undefined you will end up with ...
TypeError: Cannot read property 'trim' of undefined
Proposed Solution
Default the return value for anything falsy. iirc the default value for the css display property is inline so perhaps default the return value to that?
protected _getDisplayStyle(source?: HTMLElement): string {
let element: HTMLElement = source || this._elementRef.nativeElement;
let value = (element.style as any)['display'] || getComputedStyle(element)['display'];
return value ? value.trim() : 'inline';
}
If you agree conceptually, i'll get you a small repro. if you want and a PR to resolve the issue.
Totally understand this being a low priority thing given I am off in i'm off in uncharted waters testing Angular with Jest. While i'm obviously not going to be testing my layout using a jsdom driven test runner, there really isn't a reason why fxLayout & Jest can't play nice together.
As that relates to flex-layout, there are two small issues that have arisen after changing the test runner.
The first issue is related to
window.matchMediaand not a problem withinflex-layoutwhich was solved with a global jest mock ( may be of value to someone in the future testing w/ Jest ).The second issue could be handled within flex-layout.
Problem
Given the above in
flexbox/api/base.tsan element that doesn't have a display style is going to beundefined. When you attempt to.trim() undefinedyou will end up with ...TypeError: Cannot read property 'trim' of undefinedProposed Solution
Default the return value for anything falsy. iirc the default value for the css display property is
inlineso perhaps default the return value to that?If you agree conceptually, i'll get you a small repro. if you want and a PR to resolve the issue.