I am using react-big-calendar's month view in my app. If I have more than 2 events on the same day, the first event added stays and a "+X more" button appears (where the X is of course the number of events left for that day). This works just fine in the app, but when I try to unit test it, no matter how many events I add on the same day, the "+X more" button does not appear, and I can still access all the events of that day, even though they shouldn't be visible anymore. This is a problem for me because I have implemented some more functionality on that button which I need to test, but since I can't reach it in testing I can't even simulate a click on that.
Why doesn't this exist in test mode?
After screen.debug() I was thinking that the problem might be that the button appears when there is not enough space to display all the events, and since the testing environment simpler than the running app, works differently, there is no space check and therefore no button needed. I don't know if I am right but I still need to test it somehow.
Is there a way to access it somehow in my tests?
Events are placed in date cells according to a sort order, and the amount of space available. The 'Show more +' link only shows when there isn't enough space to place the events. Size of these cells is determined by the overall container wrapper size around your calendar, as Big Calendar uses flexbox layout. It may be that you need to apply a specific height to your container for the testing to pick it up right.
Related
There are lots of events in my web application and I utilize the Fullcalendar library to display them. However, events get squeezed horizontally sometimes, even if there is be more space available.
Please see this screenshot of squeezed events in Fullcalendar:
As you can see, the 9:00am to 9:30am event is very wide, while four events starting at 8am are squeezed right next to it.
What could I do to prevent this squeezing? I tried changing the order in which the events are loaded into Fullcalendar, but this does not change a thing.
To be honest there's not really a lot you can do, unless you want to re-write fullCalendar's internal event rendering engine.
You can probably mitigate it a bit by setting
slotEventOverlap: true
in your calendar options - although this is the default anyway, so presumably you've already overriden it. But this will cause events to overlap each other horizontally (by up to half), thus saving some horizontal space.
More info: https://fullcalendar.io/docs/slotEventOverlap
In Ion.RagerSlider plugin the interval bar is clickable.
This is an issue on mobile devices when the user accidentally click the element when he's trying to scroll.
How can i disable the click event on interval bar?
I was unable to find the solution in the official documentation.
I am facing the same issue where, if tapping outside the selected range on the bar, the whole range gets shifted across to the tap location. Depending on the location and size of the bar on the screen, it is quite easy to inadvertently do this and lose the slider values.
While it is not officially supported by version 2.3.1, I found that removing the binding of touchstart and mousedown events to the range line did the trick.
https://github.com/IonDen/ion.rangeSlider/blob/2.3.1/js/ion.rangeSlider.js#L686#L687
A more generic approach could be to create a new config parameter named something like disable_line_touch with a default value of false, and only skip the above binding if its value is set to true.
I'm new to testing frameworks of javascript. I would like to automate testing of few webpages. Quickly going through documentation pages such as casperjs, qunitjs etc.. i can check whether the element with given id or class is there in a webpage.. But how to test whether the elements are rendered as expected.
For example
how to check whether the element is shown over on top of all other elements.
how to check whether the element position with respect to other element. for example, let's take a contextmenu. on rightclick the contextmenu has to be opened at the position of mouse pointer.. if there is no enough space to accomodate the entire contextmenu it has to either shift to left or right or top or bottom depending on where it can be accomodated. How to automate testing all these things if i write such contextmenu library.
The only way I can guess is manually write some javascript/jquery tests checks for the elements you want to test. Maybe something like if element .hassClass or get z-index value, etc. (with all possible cases you want to track) and store the checks in the console or any other massages
I'm building a single-page website with a few sections that each fill out the user's window; I've got that working.
What I want to do is:
When the user scrolls up or down he/she would ease-up or down (accordingly) to the section before or after. My sections each have a anchor at the top of them.
Here is an example of what I'm trying to achieve. Each article fills the page. Once you scroll you jump to the next article.
http://www.made-my-day.com/
I think you could get the job done using this plugin: https://github.com/alvarotrigo/fullPage.js.
Also, it seems to be actively updated. The last commit to the repo was made 3 days ago.
Cheers!
You should take a look at scrollorama and superscrollorama.
They are lots of cool effects that you can use for scrolling, including the one just like the site you provided.
--UPDATE--
After some talking with OP, I realized that both libraries don't do what he wants.
So, my new suggestion is reveal-js, a js presentation library.
You don't really want to do this on an onscroll. Consider that onscroll isn't really anything except an event which says "the view of the page is moving".
That doesn't mean that they're using the mousewheel to do it.
On a phone, your plan can make sense: then it would be like making a drag movement equal to a swipe movement. Great.
My preferred method for scrolling is to click the middle-mouse button, and then position the mouse just below the anchor point, so that I can read each block of text as it scrolls past the screen.
I don't even need a hand on the mouse, for long blocks.
So in my case, onscroll will fire at something like 60 events/sec, and if you auto-jump the articles, I'm going to be teleporting through your entire site's content.
Other people still drag the actual scrollbar.
Listening to the mousewheel and keys (up/down, pg-up/pg-down), rather than just any method of moving the page, is safer... ...but are you sure all articles are going to be small enough so that all content fits in all browser windows, even at stupid-small resolutions (iPhone 3)?
Because if people need to scroll to read content, then all of a sudden you're dealing with a much, much more complex solution:
You would be required to listen to regular (or customized) scroll requests of any kind, to get to the bottom of the current content... ...and then you'd have to provide some sort of visual queue to the user that they are now at the very bottom of the content, and continuing to use a trigger method (swipe/drag/keys/mwheel) would switch articles.
The first two are fine... ...make it feel spring-loaded, like smartphones do.
...what about the other two, where people might expect to hit them multiple times in a second, to get where they're going?
For years I have had a problem using javascript and jquery to control things like homemade scrollbars. I use mousedown to set a "dragging" variable to true, save the initial mouse position, and then use mousemove to track the mouse and set the div position. I condition everything on "dragging" so that once the user lets go of the mouse, or moves far enough away, then "dragging" is cleared and everything stops tracking.
The problem is, I have trouble finding out for sure when they let go of the mouse. I use mouseup and mouseout of course, but this has two problems. One is that I want the user to be able to wander outside the div being scrolled a small amount, like 10 pixels, without losing the tracking. The other problem is that sometimes I miss an event and "dragging" stays set and the mouse gets "stuck to the div" and they have problems letting go.
I need a solution. It can either be some plugin or a coding technique. I have used a number of different techniques over the years but I've never gotten a simple perfect solution.