Comments (6)
Oh, that looks bad indeed - yes, they pass on my machine (Ubuntu).
I suspect it could be due to different default system fonts, as I don't tell in the tests which one to use.
Could you share your
- OS
- node version
- npm version
to test my assumption?
And, thank you for the contribution!
from react-truncate.
@eric-adstage they pass on my ubuntu as well-after I installed couple of OS dependencies:sudo apt-get install libcairo2-dev libjpeg8-dev libpango1.0-dev libgif-dev build-essential g++
capaj@capaj-i7-4771:~/git_projects/react-truncate$ nt
> [email protected] test /home/capaj/git_projects/react-truncate
> mocha --compilers js:babel-core/register --require babel-polyfill
<Truncate />
✓ should be a React component
✓ should render a span
in a server environment
✓ should render initial static markup
in a client environment
✓ should render without an error when the last line is exactly as wide as the container (138ms)
✓ should recalculate when resizing the window
✓ should clean up all event listeners on window when unmounting
with a box of 85px mocked out
✓ should truncate text (78ms)
✓ should preserve newlines (74ms)
✓ should not add empty lines when text doesn't fill all lines (73ms)
✓ should not truncate at all if specified in lines prop (72ms)
✓ should end truncating when a single word is bigger than its line (72ms)
✓ should be able to use a react component as ellipsis (75ms)
✓ should update content when new children are passed in (74ms)
onTruncate
✓ should invoke asynchronously (98ms)
with Truncate.prototype.onTruncate mocked out
✓ should call with true when text was truncated (74ms)
should call with false when text was not truncated because
✓ was disabled with lines prop (72ms)
✓ has shorter text than lines allow (78ms)
innerText
browser implements \n for <br/>
✓ should have newlines only at <br/>
browser implements "" for <br/>
✓ should have newlines only at <br/>
ellipsisWidth
✓ should equal node.offsetWidth
20 passing (1s)
from react-truncate.
@eric-adstage, could you check out branch fix/tests-font
locally to see if it passes on your machine?
Commit d7dcdae I landed on it might fix it.
from react-truncate.
Hey @pablosichert,
OS: OSX, 10.12.3 (16D32)
node: 5.6.0
npm: 3.6.0
I suspect you're onto something with the font issue, but unfortunately the build still fails with your latest branch, albeit 2 fewer spec failures. These, failing in my initial testing, now pass:
✓ should render without an error when the last line is exactly as wide as the container (2029ms)
✓ should be able to use a react component as ellipsis
I thought that perhaps the <div>
in the "mocked out 85px box" tests needed its font specified as well, but in my initial tests, nothing changed when I specified the same 12px Times New Roman font as the canvas element uses.
from react-truncate.
Just as a teaser, here's a div with both padding and letter-spacing:
from react-truncate.
Looks good!
I'll try to get an actual OSX machine to better reason about what's going on with the test suite.
from react-truncate.
Related Issues (20)
- <br> tags being added to truncated lines HOT 8
- 3rd party device recognition is blocking usage
- Maintenance status? HOT 2
- ellipsis still display when text isn't too long HOT 1
- ComponentWillUnmount ellipsis removal fails in test suites and other situations HOT 5
- Cannot set property 'font' of undefined HOT 3
- In jest tests - the ellipsis always show, regardless of whether it truncates. HOT 1
- Ellipsis not shown when text is only one word
- Truncate get error on 'width' prop when my app still work in another tab like keep-alive component
- Wrong lines calculation when width specified and having responsive container HOT 3
- React v17 support HOT 2
- Last line length changes when parent component set to display none
- Jest: Can not test onTruncate method HOT 3
- Update to React 17 HOT 5
- deleted
- wrong width of span on load HOT 2
- New release HOT 1
- React 18 support HOT 1
- Can't add as dependency in React 18 HOT 10
- Wrong line breaks
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-truncate.