Merge pull request #3252 from codecrafters-io/feat-resizable-test-results-bar

feat(test-results-bar): enable resizable expanded container height

Author: rohitpaulk

app/components/course-page/test-results-bar/index.hbs

@@ -1,6 +1,5 @@
 <div
   class="bg-gray-900 border-t border-gray-800 dark flex flex-col items-center {{if this.isExpanded 'rounded-t-lg'}}"
-  style={{this.containerStyle}}
   data-test-test-results-bar
   ...attributes
 >
@@ -18,7 +17,11 @@
     </div>
   {{/if}}
 
-  <div class="relative w-full flex flex-col grow overflow-auto {{unless this.isExpanded 'h-0'}}" data-test-contents>
+  <div
+    class="relative w-full flex flex-col grow overflow-auto {{unless this.isResizing 'transition-[height] duration-200 ease-out'}}"
+    style={{this.expandedContainerStyle}}
+    data-test-contents
+  >
     {{#if this.isExpanded}}
       <CoursePage::TestResultsBar::TopSection
         @onCollapseButtonClick={{this.handleCollapseButtonClick}}
@@ -57,5 +60,6 @@
     @onCollapseButtonClick={{this.handleCollapseButtonClick}}
     @onExpandButtonClick={{this.handleExpandButtonClick}}
     class="px-6 w-full"
+    {{did-insert this.handleDidInsertBottomSectionElement}}
   />
 </div>

app/components/course-page/test-results-bar/index.ts

@@ -24,7 +24,9 @@ export default class TestResultsBar extends Component<Signature> {
   @service declare coursePageState: CoursePageStateService;
   @service declare authenticator: AuthenticatorService;
   @tracked activeTabSlug = 'logs'; // 'logs' | 'autofix'
-  @tracked customHeight = '75vh';
+  @tracked bottomSectionElement: HTMLDivElement | null = null;
+  @tracked expandedContainerHeight = '75vh';
+  @tracked isResizing = false;
 
   get availableTabSlugs() {
     if (this.args.activeStep.type === 'CourseStageStep') {
@@ -44,11 +46,11 @@ export default class TestResultsBar extends Component<Signature> {
     }
   }
 
-  get containerStyle() {
+  get expandedContainerStyle() {
     if (this.isExpanded) {
-      return htmlSafe(`height: ${this.customHeight}`);
+      return htmlSafe(`height: ${this.expandedContainerHeight}`);
     } else {
-      return htmlSafe('height: auto');
+      return htmlSafe('height: 0px');
     }
   }
 
@@ -65,28 +67,35 @@ export default class TestResultsBar extends Component<Signature> {
     this.coursePageState.testResultsBarIsExpanded = false;
   }
 
+  @action
+  handleDidInsertBottomSectionElement(element: HTMLDivElement) {
+    this.bottomSectionElement = element;
+  }
+
   @action
   handleExpandButtonClick() {
     this.coursePageState.testResultsBarIsExpanded = true;
   }
 
   @action
   handleMouseResize(event: MouseEvent) {
-    const newHeight = window.innerHeight - event.clientY;
-    this.customHeight = `max(250px, min(calc(100vh - 20px), ${newHeight}px))`;
+    const newHeight = window.innerHeight - event.clientY - (this.bottomSectionElement?.offsetHeight || 0);
+    this.expandedContainerHeight = `max(200px, min(calc(100vh - 50px), ${newHeight}px))`;
   }
 
   @action
   handleTouchResize(event: TouchEvent) {
     const touch = event.touches[0] as Touch;
-    const newHeight = window.innerHeight - touch.clientY;
-    this.customHeight = `max(250px, min(calc(100vh - 20px), ${newHeight}px))`;
+    const newHeight = window.innerHeight - touch.clientY - (this.bottomSectionElement?.offsetHeight || 0);
+    this.expandedContainerHeight = `max(200px, min(calc(100vh - 50px), ${newHeight}px))`;
   }
 
   @action
   startResize(event: MouseEvent | TouchEvent) {
     event.preventDefault();
 
+    this.isResizing = true;
+
     // Trigger mouse resize on left click only
     if (event instanceof MouseEvent && event.button === 0) {
       document.addEventListener('mousemove', this.handleMouseResize);
@@ -99,12 +108,14 @@ export default class TestResultsBar extends Component<Signature> {
 
   @action
   stopMouseResize() {
+    this.isResizing = false;
     document.removeEventListener('mousemove', this.handleMouseResize);
     document.removeEventListener('mouseup', this.stopMouseResize);
   }
 
   @action
   stopTouchResize() {
+    this.isResizing = false;
     document.removeEventListener('touchmove', this.handleTouchResize);
     document.removeEventListener('touchend', this.stopTouchResize);
   }

tests/acceptance/course-page/test-results-bar/resize-test.js

@@ -1,15 +1,14 @@
 import catalogPage from 'codecrafters-frontend/tests/pages/catalog-page';
 import courseOverviewPage from 'codecrafters-frontend/tests/pages/course-overview-page';
 import coursePage from 'codecrafters-frontend/tests/pages/course-page';
+import fieldComparator from 'codecrafters-frontend/utils/field-comparator';
 import testScenario from 'codecrafters-frontend/mirage/scenarios/test';
 import window from 'ember-window-mock';
 import { module, test } from 'qunit';
 import { setupAnimationTest } from 'ember-animated/test-support';
 import { setupApplicationTest } from 'codecrafters-frontend/tests/helpers';
 import { setupWindowMock } from 'ember-window-mock/test-support';
 import { signIn } from 'codecrafters-frontend/tests/support/authentication-helpers';
-import FakeActionCableConsumer from 'codecrafters-frontend/tests/support/fake-action-cable-consumer';
-import fieldComparator from 'codecrafters-frontend/utils/field-comparator';
 
 module('Acceptance | course-page | test-results-bar | resize', function (hooks) {
   setupApplicationTest(hooks);
@@ -20,9 +19,6 @@ module('Acceptance | course-page | test-results-bar | resize', function (hooks)
     testScenario(this.server);
     signIn(this.owner, this.server);
 
-    const fakeActionCableConsumer = new FakeActionCableConsumer();
-    this.owner.register('service:action-cable-consumer', fakeActionCableConsumer, { instantiate: false });
-
     let currentUser = this.server.schema.users.first();
     let python = this.server.schema.languages.findBy({ name: 'Python' });
     let redis = this.server.schema.courses.findBy({ slug: 'redis' });
@@ -42,37 +38,39 @@ module('Acceptance | course-page | test-results-bar | resize', function (hooks)
     await catalogPage.clickOnCourse('Build your own Redis');
     await courseOverviewPage.clickOnStartCourse();
     await coursePage.testResultsBar.clickOnBottomSection();
+    await new Promise((resolve) => setTimeout(resolve, 200)); // Wait for CSS animation to complete
 
-    const desiredHeight = 500;
-    let testResultsBarHeight = coursePage.testResultsBar.height;
+    let previousHeight = coursePage.testResultsBar.height;
+    const desiredHeight = previousHeight - 50;
 
+    // Don't know where the +1 comes from, could be border-related
     await coursePage.testResultsBar.resizeHandler.mouseDown({ button: 2 });
-    await coursePage.testResultsBar.resizeHandler.mouseMove({ clientY: window.innerHeight - desiredHeight });
+    await coursePage.testResultsBar.resizeHandler.mouseMove({ clientY: window.innerHeight - desiredHeight + 1 });
     await coursePage.testResultsBar.resizeHandler.mouseUp();
 
-    assert.strictEqual(testResultsBarHeight, coursePage.testResultsBar.height, 'Right mouse button should not resize test results bar');
+    assert.strictEqual(previousHeight, coursePage.testResultsBar.height, 'Right mouse button should not resize test results bar');
 
+    // Don't know where the +1 comes from, could be border-related
     await coursePage.testResultsBar.resizeHandler.mouseDown({ button: 0 });
-    await coursePage.testResultsBar.resizeHandler.mouseMove({ clientY: window.innerHeight - desiredHeight });
+    await coursePage.testResultsBar.resizeHandler.mouseMove({ clientY: window.innerHeight - desiredHeight + 1 });
     await coursePage.testResultsBar.resizeHandler.mouseUp();
 
-    testResultsBarHeight = coursePage.testResultsBar.height;
-    assert.strictEqual(testResultsBarHeight, desiredHeight, 'Left mouse button should resize test results bar');
+    assert.notStrictEqual(previousHeight, coursePage.testResultsBar.height, 'Test results bar should be resized');
+    assert.strictEqual(desiredHeight, coursePage.testResultsBar.height, 'Left mouse button should resize test results bar');
+
+    previousHeight = coursePage.testResultsBar.height;
 
     await coursePage.testResultsBar.clickOnBottomSection();
     await coursePage.testResultsBar.clickOnBottomSection();
+    await new Promise((resolve) => setTimeout(resolve, 200)); // Wait for CSS animation to complete
 
-    testResultsBarHeight = coursePage.testResultsBar.height;
-    assert.strictEqual(testResultsBarHeight, desiredHeight, 'Test results bar maintains the height after closing and expanding again');
+    assert.strictEqual(previousHeight, coursePage.testResultsBar.height, 'Test results bar maintains the height after closing and expanding again');
   });
 
   test('can resize test results bar using touch', async function (assert) {
     testScenario(this.server);
     signIn(this.owner, this.server);
 
-    const fakeActionCableConsumer = new FakeActionCableConsumer();
-    this.owner.register('service:action-cable-consumer', fakeActionCableConsumer, { instantiate: false });
-
     let currentUser = this.server.schema.users.first();
     let python = this.server.schema.languages.findBy({ name: 'Python' });
     let redis = this.server.schema.courses.findBy({ slug: 'redis' });
@@ -96,15 +94,17 @@ module('Acceptance | course-page | test-results-bar | resize', function (hooks)
 
     const desiredHeight = 500;
 
+    // Don't know where the +1 comes from, could be border-related
     await coursePage.testResultsBar.resizeHandler.touchStart();
-    await coursePage.testResultsBar.resizeHandler.touchMove({ touches: [{ clientY: window.innerHeight - desiredHeight }] });
+    await coursePage.testResultsBar.resizeHandler.touchMove({ touches: [{ clientY: window.innerHeight - desiredHeight + 1 }] });
     await coursePage.testResultsBar.resizeHandler.touchEnd();
 
     let testResultsBarHeight = coursePage.testResultsBar.height;
     assert.strictEqual(testResultsBarHeight, desiredHeight, 'Test results bar should be resized using touch');
 
     await coursePage.testResultsBar.clickOnBottomSection();
     await coursePage.testResultsBar.clickOnBottomSection();
+    await new Promise((resolve) => setTimeout(resolve, 200)); // Wait for CSS animation to complete
 
     testResultsBarHeight = coursePage.testResultsBar.height;
     assert.strictEqual(testResultsBarHeight, desiredHeight, 'Test results bar maintains the height after closing and expanding again');