* added updated.bs.dropdown event to Dropdown @jcorporation

* added updated.bs.tooltip to Tooltip * added updated.bs.popover to Popover * updated tests * version bump
thednp · Jan 26, 2023 · 81f997a · 81f997a
1 parent d676f4e
commit 81f997a
Show file tree

Hide file tree

Showing 39 changed files with 1,120 additions and 861 deletions.
diff --git a/.npmignore b/.npmignore
@@ -2,12 +2,15 @@
 .github
 .gitignore
 .vscode
+.eslintrc.cjs
+.lgtm.yml
+.prettierrc.json
+dts.config.ts
+tsconfig.json
+vite.config.ts
 assets
 node_modules
 experiments
 docs
 coverage
-cypress/videos
-cypress/screenshots
-cypress/coverage
-cypress/instrumented
+cypress
diff --git a/cypress/e2e/collapse.cy.ts b/cypress/e2e/collapse.cy.ts
@@ -32,24 +32,26 @@ describe('Collapse Class Tests', () => {
         } else {
           expect(instance.triggers, 'triggers').to.have.length(1);
           expect(instance.options, 'options').to.deep.equal({parent: '.accordion'});
-          //@ts-ignore
-          expect(instance.parent.nodeType, 'parent').to.equal(1);
+          expect(instance.parent?.nodeType, 'parent').to.equal(1);
         }
         expect(instance.defaults, 'defaults').to.deep.equal({parent: null});
         expect(instance.version, 'version').to.be.string;
         cy.wrap(instance).as('instance' + i);
       })
-      .get('@instance0').invoke('toggle')
+    cy.get('@instance0').invoke('toggle')
       .get('@instance0').invoke('toggle') // must be SPAM protected
     cy.get('#collapseExample').should('be.visible').and('have.class', 'show')
+    cy.get('@instance0').invoke('toggle')
+    cy.get('@instance0').invoke('toggle') // must be SPAM protected
+    cy.get('#collapseExample').should('be.hidden').and('not.have.class', 'show')
     cy.get('@instance1').invoke('toggle')
-      .get('@instance2').invoke('toggle') // must be SPAM protected
+    cy.get('@instance2').invoke('toggle') // must be SPAM protected
     cy.get('#collapseOne').should('be.visible').should('have.class', 'show')
     cy.get('@instance3').invoke('toggle')
-      .get('#collapseOne').should('not.have.class', 'show')
-      .get('#collapseThree').should('have.class', 'show')
+    cy.get('#collapseOne').should('not.have.class', 'show')
+    cy.get('#collapseThree').should('have.class', 'show')
     cy.get('@instance3').invoke('hide')
-      .get('@instance3').invoke('hide') // must be SPAM protected
+    cy.get('@instance3').invoke('hide') // must be SPAM protected
     cy.get('#collapseThree').should('not.have.class', 'show')
   });
 

diff --git a/cypress/e2e/offcanvas.cy.ts b/cypress/e2e/offcanvas.cy.ts
@@ -56,7 +56,7 @@ describe('Offcanvas Class Tests', () => {
     cy.get('[data-cy="offcanvas"]').eq(1).should('not.have.class', 'show').and('be.hidden')
   });
 
-  it.only('Can be openeded / dismissed via click - backdrop', () => {
+  it('Can be openeded / dismissed via click - backdrop', () => {
     cy.get('[data-cy="offcanvas"]').eq(0).then(($element) => {
         cy.wrap(new Offcanvas($element[0])).as('click_test');
       })
@@ -77,14 +77,14 @@ describe('Offcanvas Class Tests', () => {
     cy.get('[data-cy="offcanvas"]').eq(1).then(($element) => {
         cy.wrap(new Offcanvas($element[0])).as('click_test');
       })
-      .get('@click_test').its('triggers').eq(0).click()
-      .get('@click_test').its('element').should('have.class', 'show').and('be.visible')
-      .get('@click_test').its('triggers').eq(0).click()
-      .get('@click_test').its('element').should('not.have.class', 'show').and('be.hidden')
-      .get('@click_test').its('triggers').eq(0).click()
-      .get('@click_test').its('element').should('have.class', 'show').and('be.visible')
-      .get('@click_test').its('element').find('[data-bs-dismiss="offcanvas"]').eq(0).trigger('click', 'center')
-      .get('@click_test').its('element').should('not.have.class', 'show').and('be.hidden')
+    cy.get('[data-bs-target="#offcanvasNoBackdrop"]').click()
+    cy.get('[data-cy="offcanvas"]').eq(1).should('have.class', 'show').and('be.visible')
+    cy.get('[data-bs-target="#offcanvasNoBackdrop"]').click()
+    cy.get('[data-cy="offcanvas"]').eq(1).should('not.have.class', 'show').and('be.hidden')
+    cy.get('[data-bs-target="#offcanvasNoBackdrop"]').click()
+    cy.get('[data-cy="offcanvas"]').eq(1).should('have.class', 'show').and('be.visible')
+    cy.get('[data-cy="offcanvas"]').eq(1).find('[data-bs-dismiss="offcanvas"]').click()
+    cy.get('[data-cy="offcanvas"]').eq(1).should('not.have.class', 'show').and('be.hidden')
   });
 
   it('Can be dismissed via Escape', function() {
@@ -103,16 +103,13 @@ describe('Offcanvas Class Tests', () => {
   it('Can do dispose()', () => {
     cy.get('[data-cy="offcanvas"]').eq(0).then(($element) => {
         cy.wrap(new Offcanvas($element[0])).as('disposable');
+        cy.get('@disposable').invoke('show')
+        cy.get('@disposable').its('element').should('have.class', 'show').and('be.visible')
+        cy.get('@disposable').invoke('dispose')
+        // cy.get('[data-cy="offcanvas"]').first().should('not.have.class', 'show').and('be.hidden')
+        cy.get('@disposable').its('element').should('be.undefined')
+        cy.get('@disposable').its('options').should('be.undefined')
       })
-      .get('@disposable', { timeout: 200 }).invoke('show')
-      .get('@disposable').its('element').should('have.class', 'show').and('be.visible')
-      .wait(200)
-      .get('@disposable').invoke('dispose')
-      .wait(200)
-      .get('[data-cy="offcanvas"]').eq(0).should('not.have.class', 'show').and('be.hidden')
-      .get('@disposable').its('element').should('be.null')
-      .get('@disposable').its('options').should('be.null')
-      .wait(200)
   });
 
   it('Can work with CustomEvent hide', function() {
@@ -125,11 +122,12 @@ describe('Offcanvas Class Tests', () => {
         }
       })
       cy.wrap(instance).as('hide_event');
+      cy.get('@hide_event').invoke('toggle')
+      cy.get('@hide_event').its('element').should('have.class', 'show')
+      cy.wait(200)
+      cy.get('@hide_event').invoke('toggle')
+      cy.get('@hide_event').its('element').should('have.class', 'show')
     })
-    .get('@hide_event').invoke('toggle')
-    .get('@hide_event').its('element').should('have.class', 'show').and('be.visible')
-    .get('@hide_event').invoke('hide')
-    .get('@hide_event').its('element').should('have.class', 'show').and('be.visible')
   });
 
   it('Can work with CustomEvent show', function() {
@@ -142,8 +140,8 @@ describe('Offcanvas Class Tests', () => {
           }
         })
         cy.wrap(instance).as('show_event');
+        cy.get('@show_event').invoke('toggle')
+        cy.get('@show_event').its('element').should('not.have.class', 'show').and('be.hidden')
       })
-      .get('@show_event').invoke('toggle')
-      .get('@show_event').its('element').should('not.have.class', 'show').and('be.hidden')
   });
 });
diff --git a/cypress/e2e/popover.cy.ts b/cypress/e2e/popover.cy.ts
@@ -18,6 +18,170 @@ describe('Popover Class Tests', () => {
     }
   });
 
+  it('Can handle horizontal position when both exceed top and bottom', () => {
+    cy.viewport(600, 200)
+    cy.get('[data-cy="popover"]').eq(0).then(($element) => {
+      const { body } = $element[0].ownerDocument;
+      body.innerHTML = '<main class="container" style="padding: 10rem 27rem"></main>';
+      body.children[0].append($element[0].cloneNode(true))
+    })
+    cy.wait(200)
+    cy.get('[data-cy="popover"]').eq(0).then(($element) => {
+      cy.wrap(new Popover($element[0], {
+        dismissible: false,
+        placement: 'left',
+        title: 'Popover Left',
+        content: 'This Popover can handle horizontal position when both exceed top and bottom. Here we add more content for testing. Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.'
+      })).as('horizontal');
+    })
+    // cy.window().trigger('resize', { force: true })
+    // cy.wait(200)
+    cy.wait(200)
+    cy.get('@horizontal').invoke('toggle')
+    // cy.get('@horizontal').then(el => console.log(el))
+    cy.get('@horizontal').its('tooltip').should('have.class', 'show')
+    cy.scrollTo('100%', '0%', {duration: 0})
+    cy.wait(200)
+    cy.get('@horizontal').its('tooltip').should('have.class', 'bs-popover-end')
+    cy.scrollTo('topLeft', {duration: 0})
+    cy.wait(200)
+    cy.get('@horizontal').its('tooltip').should('have.class', 'bs-popover-start')
+    cy.wait(200)
+    cy.scrollTo('bottomLeft', {duration: 0})
+    cy.get('@horizontal').its('tooltip').should('have.class', 'bs-popover-start')
+    cy.wait(500)
+  })
+
+  it('Can handle vertical right', () => {
+    cy.viewport(400, 400)
+    cy.window().trigger('resize', { force: true })
+    cy.wait(200)
+    cy.get('[data-cy="popover"]').eq(0).then(($element) => {
+      const { body } = $element[0].ownerDocument;
+      body.innerHTML = '<main style="padding: 15rem 25rem 15rem 1rem"></main>';
+      body.children[0].append($element[0].cloneNode(true))
+    })
+    cy.scrollTo('topRight', {duration: 0})
+    cy.wait(200)
+    cy.get('[data-cy="popover"]').eq(0).then(($element) => {
+      cy.wrap(new Popover($element[0], {
+        dismissible: false,
+        placement: 'top',
+        title: 'Popover Right',
+        content: 'This Popover can handle vertical position when both exceed top and bottom. Here we add more content for testing. Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.'
+      })).as('verticalRight');
+      cy.wait(200)
+      cy.get('@verticalRight').invoke('toggle')
+      // cy.get('@verticalRight').then(el => console.log(el))
+      cy.get('@verticalRight').its('tooltip').should('have.class', 'show')
+      cy.scrollTo('topLeft', {duration: 0}).then(() => {
+        cy.wait(200)
+        cy.get('@verticalRight').its('tooltip').should('have.class', 'show')
+        // cy.get('@verticalRight').invoke('dispose')
+      })
+      cy.wait(500)
+    })
+  })
+
+  it('Can handle vertical left', () => {
+    cy.viewport(400, 400)
+    cy.window().trigger('resize', { force: true })
+    cy.wait(200)
+    cy.get('[data-cy="popover"]').eq(0).then(($element) => {
+      const { body } = $element[0].ownerDocument;
+      body.innerHTML = '<main style="padding: 15rem 5rem 15rem 25rem"></main>';
+      body.children[0].append($element[0].cloneNode(true))
+    })
+    cy.wait(200)
+    cy.get('[data-cy="popover"]').eq(0).then(($element) => {
+      cy.wrap(new Popover($element[0], {
+        dismissible: false,
+        placement: 'top',
+        title: 'Popover Top',
+        content: 'This Popover can handle vertical position when both exceed top and bottom. Here we add more content for testing. Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.'
+      })).as('verticalLeft');
+      cy.wait(200)
+      cy.get('@verticalLeft').invoke('toggle')
+      // cy.get('@verticalLeft').then(el => console.log(el))
+      cy.get('@verticalLeft').its('tooltip').should('have.class', 'show')
+      cy.scrollTo('topRight', {duration: 0}).then(() => {
+        // cy.wait(200)
+        cy.get('@verticalLeft').its('tooltip').should('have.class', 'show')
+        // cy.get('@verticalLeft').invoke('dispose')
+      })
+      cy.wait(500)
+    })
+  })
+
+  it.skip('Can switch bottom to top', () => {
+    cy.viewport(400, 600)
+    cy.window().trigger('resize', { force: true })
+    cy.wait(200)
+    cy.get('[data-cy="popover"]').eq(0).then(($element) => {
+      const { body } = $element[0].ownerDocument;
+      body.innerHTML = '<main style="padding: 20rem 15rem"></main>';
+      body.children[0].append($element[0].cloneNode(true))
+      $element[0].remove()
+    })
+    cy.scrollTo('bottom', {duration: 0})
+    cy.wait(200)
+    cy.get('[data-cy="popover"]').eq(0).then(($element) => {
+      cy.wrap(new Popover($element[0], {
+        dismissible: false,
+        placement: 'bottom',
+        title: 'Popover Bottom',
+        content: 'This Popover can handle bottom position when both exceed top and bottom. Here we add more content for testing. Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.'
+      })).as('bottom');
+      cy.wait(200)
+      cy.get('@bottom').invoke('toggle')
+      // .then(() => {
+        // cy.wait(200)
+        // cy.get('@bottom').then(el => console.log(el))
+        cy.get('@bottom').its('tooltip').should('have.class', 'bs-popover-bottom')
+        cy.scrollTo('top', {duration: 0})
+        .then(() => {
+          cy.wait(200)
+          cy.get('@bottom').its('tooltip').should('have.class', 'bs-popover-top')
+          // cy.get('@bottom').invoke('dispose')
+        })
+
+      // })
+    })
+    cy.wait(500)
+  })
+
+  it.skip('Can switch top to bottom', () => {
+    cy.viewport(400, 600)
+    cy.window().trigger('resize', { force: true })
+    cy.get('[data-cy="popover"]').eq(0).then(($element) => {
+      const { body } = $element[0].ownerDocument;
+      body.innerHTML = '<main style="padding: 20rem 15rem"></main>';
+      body.children[0].append($element[0].cloneNode(true));
+      $element[0].remove()
+    })
+    cy.wait(200)
+    cy.get('[data-cy="popover"]').eq(0).then(($element) => {
+      cy.wrap(new Popover($element[0], {
+        dismissible: false,
+        placement: 'top',
+        title: 'Top Popover',
+        content: 'This Popover can handle top position when exceed top. Here we add more content for testing. Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.'
+      })).as('top');
+      cy.wait(200)
+      cy.get('@top').invoke('toggle')
+      // cy.get('@vertical').then(el => console.log(el))
+      // cy.wait(200)
+      cy.get('@top').its('tooltip').should('have.class', 'bs-popover-top')
+      cy.scrollTo('bottom', {duration: 0})
+      .then(() => {
+        // cy.wait(200)
+        cy.get('@top').its('tooltip').should('have.class', 'bs-popover-bottom')
+        cy.get('@top').invoke('dispose')
+      })
+    })
+    cy.wait(500)
+  })
+
   it('Can do toggle() and dismissible', () => {
     cy.get('[data-cy="popover"]').eq(0).then(($element) => {
           const element = $element[0];

diff --git a/cypress/e2e/scrollspy.cy.ts b/cypress/e2e/scrollspy.cy.ts
@@ -71,7 +71,7 @@ describe('ScrollSpy Class Tests', () => {
         Object.assign(nav.style, {top: '0px'});
         nav.classList.add('position-sticky')
       })
-    cy.viewport(780,1000)
+    // cy.viewport(780,1000)
     cy.get(ScrollSpy.selector).then(($element) => {
         cy.wrap(new ScrollSpy($element[0])).as('pageInstance');
       })
@@ -84,7 +84,15 @@ describe('ScrollSpy Class Tests', () => {
     cy.get('@pageInstance').its('items').then(itms => {
       cy.wrap(itms).eq(0).should('not.have.class', 'active')
     })
-    // cy.wait(500)
+    cy.wait(200)
+    cy.viewport(400, 600)
+    cy.window().trigger('resize', { force: true })
+    cy.wait(200)
+    cy.get('@pageInstance').its('scrollTarget').scrollTo('bottom')
+    cy.wait(200)
+    cy.get('@pageInstance').its('items').then(itms => {
+      cy.wrap(itms).eq(4).should('have.class', 'active')
+    })
     cy.viewport(680,1000)
   });
 

diff --git a/cypress/e2e/toast.cy.ts b/cypress/e2e/toast.cy.ts
@@ -32,14 +32,17 @@ describe('Toast Class Tests', () => {
   it('Can do show() and autoclose', () => {
     cy.get('.toast').then(($element) => {
         $element[0].classList.remove('fade'); // code coverage
-        const instance = new Toast($element[0], { delay: 500 });
+        const instance = new Toast($element[0], { delay: 200 });
         cy.wrap(instance).as('instance');
+        cy.get('@instance').invoke('show')
+        cy.get('@instance').its('element').should('have.class', 'show').and('be.visible')
+        cy.get('@instance').its('isShown').should('be.true')
+        cy.wait(250)
+        cy.get('@instance').then(() => {
+          cy.get('@instance').its('isShown').should('be.false')
+          cy.get('@instance').its('element').should('not.have.class', 'show')
+        })
       })
-      .get('@instance').invoke('show')
-      .get('@instance').its('element').should('have.class', 'show').and('be.visible')
-      .get('@instance').its('isShown').should('be.true')
-      .wait(550)
-      .get('@instance').its('element').should('not.have.class', 'show')
   });
 
   it('Can do click()', () => {
@@ -62,20 +65,19 @@ describe('Toast Class Tests', () => {
     cy.get('.toast').then(($element) => {
         const instance = new Toast($element[0], { animation: false, delay: 200 });
         cy.wrap(instance).as('instance');
-        // cy.log(instance.options)
       })
-      .get('@instance').invoke('show')
-      .get('@instance').its('element').should('have.class', 'show').and('be.visible')
-      .get('@instance').its('isShown').should('be.true')
-      // .wait(100)
-      .get('@instance').its('element').then(el => cy.wrap(el).trigger('mouseenter'))
-      // .wait(217)
-      .get('@instance').its('element').should('have.class', 'show').and('be.visible')
-      // .wait(100)
-      .get('@instance').its('element').then(el => cy.wrap(el).trigger('mouseenter'))
-      // .wait(217)
-      .get('@instance').its('element').should('not.have.class', 'show').and('be.hidden')
-      .get('@instance').its('isShown').should('be.false')
+    cy.get('@instance').invoke('show')
+    cy.get('@instance').its('element').should('have.class', 'show').and('be.visible')
+    cy.get('@instance').its('isShown').should('be.true')
+    cy.wait(100)
+    cy.get('@instance').its('element').first().trigger('mouseenter', {force: true})
+    cy.wait(190)
+    cy.get('@instance').its('element').should('have.class', 'show').and('be.visible')
+    cy.wait(100)
+    cy.get('@instance').its('element').first().trigger('mouseenter', {force: true}).trigger('mouseleave', {force: true})
+    cy.wait(201)
+    cy.get('@instance').its('element').should('not.have.class', 'show')
+    cy.get('@instance').its('isShown').should('be.false')
   });
 
   it('Can do dispose()', () => {