Fix collapse div height if font changes

* Remove unused fontSize * Allow forbidden non-null assertion * Use policies div to calculate collapse div
inthepocket · Mar 16, 2021 · 9e8327e · 9e8327e
1 parent c03bcc2
commit 9e8327e
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 6 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -33,6 +33,7 @@ module.exports = {
       files: ['*.js', '*.ts', '*.tsx', '*.d.ts'],
       rules: {
         '@typescript-eslint/explicit-module-boundary-types': 'off',
+        '@typescript-eslint/no-non-null-assertion': 'off',
       },
     },
   ],

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 
 - Nothing yet!
 
+## [1.1.3] - 2021-03-16
+
+### Fixed
+
+- Fix height of the collapse div in case it changes
+
 ## [1.1.2] - 2021-03-10
 
 ### Fixed

diff --git a/src/components/customization/collapse.tsx b/src/components/customization/collapse.tsx
@@ -16,7 +16,7 @@ const Collapse: FunctionalComponent<Props> = ({ isOpen, children, onWindowResize
   const expand = useCallback((isResize = false) => {
     const { collapsedHeight, containerOffset } = getContainerHeights();
     const windowHeight = window.innerHeight;
-    const collapseHeight = collapsibleDiv.current.scrollHeight;
+    const collapseHeight = collapsibleDiv.current.querySelector('.ct-policies')!.scrollHeight;
 
     if (isResize) {
       collapsibleDiv.current.style.transition = 'height 0ms ease-out';

diff --git a/src/components/customization/options.tsx b/src/components/customization/options.tsx
@@ -29,7 +29,7 @@ const Options: FunctionalComponent<Props> = ({
   ));
 
   return (
-    <div>
+    <div className="ct-policies">
       {cookies}
       {cookiePolicy && (
         <div className="ct-declaration">

diff --git a/src/tests/app.test.tsx b/src/tests/app.test.tsx
@@ -119,6 +119,7 @@ describe('Cookie Though', () => {
 
   describe('if the user has a different browser font setting', () => {
     const renderApp = (fontSize: string) => {
+      container.style.fontSize = fontSize;
       return mount(
         <App
           customizeLabel="customize"

diff --git a/src/tests/components/customization/collapse.test.tsx b/src/tests/components/customization/collapse.test.tsx
@@ -34,7 +34,7 @@ describe('collapse', () => {
       const wrapper = mount(
         <div className="visible">
           <Collapse isOpen={true} onWindowResize={onWindowResize}>
-            <p></p>
+            <div className="ct-policies"></div>
           </Collapse>
           <div class="ct-acceptance"></div>
         </div>,
@@ -49,7 +49,7 @@ describe('collapse', () => {
       const wrapper = mount(
         <div className="visible">
           <Collapse isOpen={true} onWindowResize={onWindowResize}>
-            <p></p>
+            <div className="ct-policies"></div>
           </Collapse>
           <div class="ct-acceptance"></div>
         </div>,
@@ -67,7 +67,7 @@ describe('collapse', () => {
       const wrapper = mount(
         <div className="visible">
           <Collapse isOpen={true} onWindowResize={onWindowResize}>
-            <p></p>
+            <div className="ct-policies"></div>
           </Collapse>
         </div>,
       );
@@ -87,7 +87,7 @@ describe('collapse', () => {
         const wrapper = mount(
           <div className="visible">
             <Collapse isOpen={true} onWindowResize={onWindowResize}>
-              <p></p>
+              <div className="ct-policies"></div>
             </Collapse>
           </div>,
         );