fix(top-app-bar): change scrollTop to offsetTop in getViewportScrollY (#771)

Author: 태재영

packages/top-app-bar/index.tsx

@@ -208,7 +208,7 @@ class TopAppBar<T extends HTMLElement = HTMLHeadingElement> extends React.Compon
       },
       getViewportScrollY: () => {
         return (this.state.scrollTarget && this.state.scrollTarget.current)
-          ? this.state.scrollTarget.current.offsetTop
+          ? this.state.scrollTarget.current.scrollTop
           : window.pageYOffset;
       },
       getTotalActionItems: () => {

test/unit/chips/ChipSet.test.tsx

@@ -85,7 +85,7 @@ test('#adapter.setSelected adds selectedChipId to state', () => {
   wrapper.instance().adapter.setSelected();
   assert.isTrue(wrapper.state().selectedChipIds.indexOf('1') > -1);
   td.verify(handleSelect(['1']), {times: 1});
-  td.verify(getSelectedChipIds(), {times: 1});
+  assert.equal(1, td.explain(getSelectedChipIds).callCount);
 });
 
 test('#chip.props.setSelected calls both #chip.props.handleSelect and #chipSet.props.handleSelect', () => {
@@ -407,7 +407,7 @@ test('chip is rendered computeBoundingRect method prop if is filter variant', ()
     width: 1,
   });
   chip.props.computeBoundingRect(chipElement);
-  td.verify(chipElement.getBoundingClientRect(), {times: 1});
+  assert.equal(1, td.explain(chipElement.getBoundingClientRect).callCount);
 });
 
 test('chip is rendered with computeBoundingRect method prop if is not filter variant', () => {

test/unit/text-field/index.test.tsx

@@ -314,18 +314,20 @@ test('#adapter.label.hasLabel returns true if label exists', () => {
   assert.isTrue(wrapper.state().foundation.adapter_.hasLabel());
 });
 
-test('#adapter.label.hasLabel returns true if label exists', () => {
+test('#adapter.label.getLabelWidth returns offsetWidth of labelElement', () => {
   const div = document.createElement('div');
-  document.body.append(div);
-  const options = {attachTo: div};
+  document.body.appendChild(div);
+
   const wrapper = mount<TextField<HTMLInputElement>>(
     <TextField label='my label'>
       <Input />
     </TextField>,
-    options
+    {attachTo: div}
   );
-  assert.equal(wrapper.state().foundation.adapter_.getLabelWidth(), 56);
-  div.remove();
+  const labelElement = wrapper.instance().floatingLabelElement.current!.labelElement_;
+  assert.equal(wrapper.state().foundation.adapter_.getLabelWidth(), labelElement.current!.offsetWidth);
+
+  document.body.removeChild(div);
 });
 
 test('#adapter.label.getLabelWidth returns state.initialLabelWidth', () => {

test/unit/top-app-bar/index.test.tsx

@@ -43,7 +43,9 @@ class TopAppBarWithScroll extends React.Component<ScrollProps, ScrollState> {
             <TopAppBarSection><TopAppBarTitle>Scroll</TopAppBarTitle></TopAppBarSection>
           </TopAppBarRow>
         </TopAppBar>
-        <div ref={this.state.scrollRef}>Scroll Target</div>
+        <div ref={this.state.scrollRef} style={{height: '1000px', overflow: 'auto'}}>
+          <div style={{height: '3000px'}}>Scroll Target</div>
+        </div>
       </div>
     );
   }
@@ -245,6 +247,37 @@ test(
   }
 );
 
+test('#adapter.getViewportScrollY returns same value with scrollTarget.scrollTop', () => {
+  const div = document.createElement('div');
+  document.body.appendChild(div);
+
+  const wrapper = mount<TopAppBarWithScroll>(<TopAppBarWithScroll withRef={true} />, {attachTo: div});
+  const topAppBar: TopAppBar = coerceForTesting<TopAppBar>(wrapper.find('TopAppBar').instance());
+  const scrollTarget = topAppBar.state.scrollTarget!.current!;
+  assert.equal(scrollTarget.scrollTop, topAppBar.adapter.getViewportScrollY());
+
+  // https://github.com/material-components/material-components-web-react/pull/771
+  // We commented out the code below because linux puppeteer version doesn't scroll.
+  // const scrollY = 150;
+  // scrollTarget.scrollTo(0, scrollY);
+  // assert.equal(scrollY, topAppBar.adapter.getViewportScrollY());
+
+  document.body.removeChild(div);
+});
+
+test('#adapter.getViewportScrollY test for changing scrollTarget', () => {
+  const div = document.createElement('div');
+  document.body.appendChild(div);
+
+  const wrapper = mount<TopAppBarWithScroll>(<TopAppBarWithScroll withRef={false} />, {attachTo: div});
+  const topAppBar: TopAppBar = coerceForTesting<TopAppBar>(wrapper.find('TopAppBar').instance());
+  assert.equal(window.pageYOffset, topAppBar.adapter.getViewportScrollY());
+  wrapper.setState({withRef: true});
+
+  const scrollTarget = topAppBar.state.scrollTarget!.current!;
+  assert.equal(scrollTarget.scrollTop, topAppBar.adapter.getViewportScrollY());
+  document.body.removeChild(div);
+});
 
 test('#adapter.getTotalActionItems returns one with one actionItem passed', () => {
   const wrapper = mount<TopAppBar>(
@@ -289,7 +322,7 @@ test('#adapter.getTopAppBarHeight should return clientHeight', () => {
   const div = document.createElement('div');
   // needs to be attached to real DOM to get width
   // https://github.com/airbnb/enzyme/issues/1525
-  document.body.append(div);
+  document.body.appendChild(div);
   const options = {attachTo: div};
   const wrapper = mount<TopAppBar>(
     <TopAppBar>
@@ -300,7 +333,7 @@ test('#adapter.getTopAppBarHeight should return clientHeight', () => {
   const topAppBarHeight = wrapper.instance().adapter.getTopAppBarHeight();
   const realDOMHeight = wrapper.getDOMNode().clientHeight;
   assert.equal(topAppBarHeight, realDOMHeight);
-  div.remove();
+  document.body.removeChild(div);
 });
 
 test('when changes from short to fixed the foundation changes', () => {