|
1 |
| -import { |
2 |
| - startInteractions, |
3 |
| - setupInteractionWhiteList, |
4 |
| -} from "@web/../tests/public/helpers"; |
5 |
| - |
| 1 | +import { startInteractions, setupInteractionWhiteList } from "@web/../tests/public/helpers"; |
6 | 2 | import { describe, expect, test } from "@odoo/hoot";
|
7 |
| -import { queryOne } from "@odoo/hoot-dom"; |
8 |
| - |
| 3 | +import { click, queryOne } from "@odoo/hoot-dom"; |
| 4 | +import { advanceTime } from "@odoo/hoot-mock"; |
9 | 5 | import { switchToEditMode } from "../../helpers";
|
10 | 6 |
|
11 | 7 | setupInteractionWhiteList("website.carousel_bootstrap_upgrade_fix");
|
12 | 8 |
|
13 | 9 | describe.current.tags("interaction_dev");
|
14 | 10 |
|
15 |
| -test("[EDIT] carousel_bootstrap_upgrade_fix prevents ride", async () => { |
16 |
| - const { core } = await startInteractions(` |
17 |
| - <section class="s_image_gallery o_slideshow pt24 pb24 s_image_gallery_controllers_outside s_image_gallery_controllers_outside_arrows_right s_image_gallery_indicators_dots s_image_gallery_arrows_default" data-snippet="s_image_gallery" data-vcss="002" data-columns="3"> |
18 |
| - <div class="o_container_small overflow-hidden"> |
19 |
| - <div id="slideshow_sample" class="carousel carousel-dark slide" data-bs-interval="5000"> |
20 |
| - <div class="carousel-inner"> |
21 |
| - <div class="carousel-item active"> |
22 |
| - <img class="img img-fluid d-block mh-100 mw-100 mx-auto rounded object-fit-cover" src="/web/image/website.library_image_08" data-name="Image" data-index="0" alt=""/> |
23 |
| - </div> |
24 |
| - <div class="carousel-item"> |
25 |
| - <img class="img img-fluid d-block mh-100 mw-100 mx-auto rounded object-fit-cover" src="/web/image/website.library_image_03" data-name="Image" data-index="1" alt=""/> |
26 |
| - </div> |
27 |
| - <div class="carousel-item"> |
28 |
| - <img class="img img-fluid d-block mh-100 mw-100 mx-auto rounded object-fit-cover" src="/web/image/website.library_image_02" data-name="Image" data-index="2" alt=""/> |
29 |
| - </div> |
| 11 | +const imageGalleryCarouselStyleSnippet = ` |
| 12 | + <section class="s_image_gallery o_slideshow pt24 pb24 s_image_gallery_controllers_outside s_image_gallery_controllers_outside_arrows_right s_image_gallery_indicators_dots s_image_gallery_arrows_default" data-snippet="s_image_gallery" data-vcss="002" data-columns="3"> |
| 13 | + <div class="o_container_small overflow-hidden"> |
| 14 | + <div id="slideshow_sample" class="carousel carousel-dark slide" data-bs-interval="5000"> |
| 15 | + <div class="carousel-inner"> |
| 16 | + <div class="carousel-item active"> |
| 17 | + <img class="img img-fluid d-block mh-100 mw-100 mx-auto rounded object-fit-cover" src="/web/image/website.library_image_08" data-name="Image" data-index="0" alt=""/> |
| 18 | + </div> |
| 19 | + <div class="carousel-item"> |
| 20 | + <img class="img img-fluid d-block mh-100 mw-100 mx-auto rounded object-fit-cover" src="/web/image/website.library_image_03" data-name="Image" data-index="1" alt=""/> |
30 | 21 | </div>
|
31 |
| - <div class="o_carousel_controllers"> |
32 |
| - <button class="carousel-control-prev o_not_editable" contenteditable="false" data-bs-target="#slideshow_sample" data-bs-slide="prev" aria-label="Previous" title="Previous"> |
33 |
| - <span class="carousel-control-prev-icon" aria-hidden="true"/> |
34 |
| - <span class="visually-hidden">Previous</span> |
35 |
| - </button> |
36 |
| - <div class="carousel-indicators"> |
37 |
| - <button type="button" data-bs-target="#slideshow_sample" data-bs-slide-to="0" style="background-image: url(/web/image/website.library_image_08)" class="active" aria-label="Carousel indicator"/> |
38 |
| - <button type="button" style="background-image: url(/web/image/website.library_image_03)" data-bs-target="#slideshow_sample" data-bs-slide-to="1" aria-label="Carousel indicator"/> |
39 |
| - <button type="button" style="background-image: url(/web/image/website.library_image_02)" data-bs-target="#slideshow_sample" data-bs-slide-to="2" aria-label="Carousel indicator"/> |
40 |
| - </div> |
41 |
| - <button class="carousel-control-next o_not_editable" contenteditable="false" data-bs-target="#slideshow_sample" data-bs-slide="next" aria-label="Next" title="Next"> |
42 |
| - <span class="carousel-control-next-icon" aria-hidden="true"/> |
43 |
| - <span class="visually-hidden">Next</span> |
44 |
| - </button> |
| 22 | + <div class="carousel-item"> |
| 23 | + <img class="img img-fluid d-block mh-100 mw-100 mx-auto rounded object-fit-cover" src="/web/image/website.library_image_02" data-name="Image" data-index="2" alt=""/> |
45 | 24 | </div>
|
46 | 25 | </div>
|
| 26 | + <div class="o_carousel_controllers"> |
| 27 | + <button class="carousel-control-prev o_not_editable" contenteditable="false" data-bs-target="#slideshow_sample" data-bs-slide="prev" aria-label="Previous" title="Previous"> |
| 28 | + <span class="carousel-control-prev-icon" aria-hidden="true"/> |
| 29 | + <span class="visually-hidden">Previous</span> |
| 30 | + </button> |
| 31 | + <div class="carousel-indicators"> |
| 32 | + <button type="button" data-bs-target="#slideshow_sample" data-bs-slide-to="0" style="background-image: url(/web/image/website.library_image_08)" class="active" aria-label="Carousel indicator"/> |
| 33 | + <button type="button" style="background-image: url(/web/image/website.library_image_03)" data-bs-target="#slideshow_sample" data-bs-slide-to="1" aria-label="Carousel indicator"/> |
| 34 | + <button type="button" style="background-image: url(/web/image/website.library_image_02)" data-bs-target="#slideshow_sample" data-bs-slide-to="2" aria-label="Carousel indicator"/> |
| 35 | + </div> |
| 36 | + <button class="carousel-control-next o_not_editable" contenteditable="false" data-bs-target="#slideshow_sample" data-bs-slide="next" aria-label="Next" title="Next"> |
| 37 | + <span class="carousel-control-next-icon" aria-hidden="true"/> |
| 38 | + <span class="visually-hidden">Next</span> |
| 39 | + </button> |
| 40 | + </div> |
47 | 41 | </div>
|
48 |
| - </section> |
49 |
| - `); |
| 42 | + </div> |
| 43 | + </section>`; |
| 44 | + |
| 45 | +test("[EDIT] carousel_bootstrap_upgrade_fix prevents ride", async () => { |
| 46 | + const { core } = await startInteractions(imageGalleryCarouselStyleSnippet); |
50 | 47 | expect(core.interactions).toHaveLength(1);
|
51 | 48 | await switchToEditMode(core);
|
52 | 49 | const carouselEl = queryOne(".carousel");
|
53 | 50 | const carouselBS = window.Carousel.getInstance(carouselEl);
|
54 | 51 | expect(carouselBS._config.ride).toBe(false);
|
55 | 52 | expect(carouselBS._config.pause).toBe(true);
|
56 | 53 | });
|
| 54 | + |
| 55 | +test("carousel_bootstrap_upgrade_fix is tagged while sliding", async () => { |
| 56 | + const { core } = await startInteractions(imageGalleryCarouselStyleSnippet); |
| 57 | + expect(core.interactions).toHaveLength(1); |
| 58 | + |
| 59 | + const carouselEl = queryOne(".carousel"); |
| 60 | + expect(carouselEl).toHaveAttribute("data-bs-interval", "5000"); |
| 61 | + expect(carouselEl).not.toHaveClass("o_carousel_sliding"); |
| 62 | + |
| 63 | + await click(carouselEl.querySelector(".carousel-control-next")); |
| 64 | + |
| 65 | + expect(carouselEl).toHaveClass("o_carousel_sliding"); |
| 66 | + await advanceTime(750); |
| 67 | + expect(carouselEl).not.toHaveClass("o_carousel_sliding"); |
| 68 | +}); |
0 commit comments