How to use the css-box-model.withScroll function in css-box-model

it('should not clip the frame if requested not to', () => {
      const expandedClient: BoxModel = createBox({
        borderBox: expandBySpacing(frameClient.borderBox, ten),
        margin,
        padding,
        border,
      });
      const expandedPage: BoxModel = withScroll(expandedClient, windowScroll);
      const bigClient: BoxModel = createBox({
        borderBox: expandedClient.borderBox,
        margin,
        padding,
        border,
      });

      const droppable: DroppableDimension = getWithClient(bigClient, {
        shouldClipSubject: false,
      });

      // Not clipped
      expect(droppable.subject.active).toEqual(expandedPage.marginBox);
      invariant(droppable.frame);
      expect(droppable.frame.shouldClipSubject).toBe(false);
    });

const increased: ScrollSize = {
    scrollHeight: scrollable.scrollSize.scrollHeight + increase.y,
    scrollWidth: scrollable.scrollSize.scrollWidth + increase.x,
  };
  const client: BoxModel = adjustBox(scrollableHome.client, increase);
  const withIncreased: DroppableDimension = getDroppable({
    descriptor: scrollableHome.descriptor,
    isEnabled: scrollableHome.isEnabled,
    direction: scrollableHome.axis.direction,
    isCombineEnabled: scrollableHome.isCombineEnabled,
    isFixedOnPage: scrollableHome.isFixedOnPage,
    client,
    page: withScroll(client, preset.windowScroll),
    closest: {
      client: scrollable.frameClient,
      page: withScroll(scrollable.frameClient, preset.windowScroll),
      scrollSize: increased,
      scroll: scrollable.scroll.initial,
      shouldClipSubject: scrollable.shouldClipSubject,
    },
  });

  const published: Published = {
    ...empty,
    removals: [preset.inHome2.descriptor.id],
    modified: [withIncreased],
  };

  // $FlowFixMe - wrong type
  const original: CollectingState = addDroppable(
    // $FlowFixMe - wrong type
    state.collecting(),

// add scroll space on the main axis
  const scrollSize: ScrollSize = {
    scrollWidth: borderBox.width + horizontalGrowth,
    scrollHeight: borderBox.height + verticalGrowth,
  };

  const newClient: BoxModel = createBox({
    borderBox: newBorderBox,
    border: droppable.client.border,
    padding: droppable.client.padding,
    margin: droppable.client.margin,
  });

  // eslint-disable-next-line no-use-before-define
  const preset = getPreset();
  const newPage: BoxModel = withScroll(newClient, preset.windowScroll);

  return getDroppable({
    descriptor: droppable.descriptor,
    isEnabled: droppable.isEnabled,
    direction: axis.direction,
    client: newClient,
    page: newPage,
    isCombineEnabled: droppable.isCombineEnabled,
    isFixedOnPage: droppable.isFixedOnPage,
    closest: {
      // using old dimensions for frame
      client: droppable.client,
      page: droppable.page,
      scrollSize,
      scroll: origin,
      shouldClipSubject: true,

describe('frame clipping', () => {
    const frameClient: BoxModel = createBox({
      // bigger on every side by 10px
      borderBox: expandBySpacing(client.borderBox, ten),
      margin,
      border,
      padding,
    });
    const framePage: BoxModel = withScroll(frameClient, windowScroll);

    type Options = {|
      shouldClipSubject: boolean,
    |};

    const defaultOptions: Options = { shouldClipSubject: true };

    const getWithClient = (
      customClient: BoxModel,
      options?: Options = defaultOptions,
    ): DroppableDimension =>
      getDroppableDimension({
        descriptor,
        isEnabled: true,
        client: customClient,
        page: withScroll(customClient, windowScroll),

y: 80,
};
const origin: Position = { x: 0, y: 0 };

const client: BoxModel = createBox({
  borderBox: {
    top: 10,
    right: 110,
    bottom: 90,
    left: 20,
  },
  margin,
  padding,
  border,
});
const page: BoxModel = withScroll(client, windowScroll);
const ten: Spacing = {
  top: 10,
  right: 10,
  bottom: 10,
  left: 10,
};

describe('closest scrollable', () => {
  describe('no closest scrollable', () => {
    it('should not have a closest scrollable if there is no closest scrollable', () => {
      const dimension: DroppableDimension = getDroppableDimension({
        descriptor,
        isEnabled: true,
        isCombineEnabled: false,
        isFixedOnPage: false,
        client,

withNewSpacing.forEach((newClient: BoxModel) => {
    const scrollableHomeWithAdjustment: DroppableDimension = {
      ...scrollableHome,
      client: newClient,
      page: withScroll(newClient, preset.windowScroll),
    };

    const published: Published = {
      ...empty,
      additions: [added1],
      modified: [scrollableHomeWithAdjustment],
    };

    expect(() =>
      publish({
        state: original,
        published,
      }),
    ).toThrow(
      /Cannot change the (margin|padding|border) of a Droppable during a drag/,
    );

padding,
  border,
  windowScroll = origin,
  closest,
  isEnabled = true,
  direction = 'vertical',
  isFixedOnPage = false,
  isCombineEnabled = false,
}: GetDroppableArgs): DroppableDimension => {
  const client: BoxModel = createBox({
    borderBox,
    margin,
    padding,
    border,
  });
  const page: BoxModel = withScroll(client, windowScroll);

  const closestScrollable: ?Closest = (() => {
    if (!closest) {
      return null;
    }

    const frameClient: BoxModel = createBox({
      borderBox: closest.borderBox,
      border: closest.border,
      padding: closest.padding,
      margin: closest.margin,
    });

    const framePage: BoxModel = withScroll(frameClient, windowScroll);

    const result: Closest = {

const getWithClient = (
      customClient: BoxModel,
      options?: Options = defaultOptions,
    ): DroppableDimension =>
      getDroppableDimension({
        descriptor,
        isEnabled: true,
        client: customClient,
        page: withScroll(customClient, windowScroll),
        isCombineEnabled: false,
        isFixedOnPage: false,
        direction: 'vertical',
        closest: {
          client: frameClient,
          page: framePage,
          scrollSize: {
            scrollHeight: client.paddingBox.height,
            scrollWidth: client.paddingBox.width,
          },
          scroll: origin,
          shouldClipSubject: options.shouldClipSubject,
        },
      });

getDimension = (windowScroll?: Position = origin): DraggableDimension => {
    const targetRef: ?HTMLElement = this.props.getDraggableRef();
    const descriptor: ?DraggableDescriptor = this.publishedDescriptor;

    invariant(
      targetRef,
      'DraggableDimensionPublisher cannot calculate a dimension when not attached to the DOM',
    );
    invariant(descriptor, 'Cannot get dimension for unpublished draggable');

    const computedStyles: CSSStyleDeclaration = window.getComputedStyle(
      targetRef,
    );
    const borderBox: ClientRect = targetRef.getBoundingClientRect();
    const client: BoxModel = calculateBox(borderBox, computedStyles);
    const page: BoxModel = withScroll(client, windowScroll);

    const placeholder: Placeholder = {
      client,
      tagName: targetRef.tagName.toLowerCase(),
      display: computedStyles.display,
    };
    const displaceBy: Position = {
      x: client.marginBox.width,
      y: client.marginBox.height,
    };

    const dimension: DraggableDimension = {
      descriptor,
      placeholder,
      displaceBy,
      client,

withAdditions.forEach((item: DraggableDimension) => {
      if (additionMap[item.descriptor.id]) {
        return;
      }

      const shift: Shift = toShift[item.descriptor.id];
      if (!shift) {
        return;
      }

      const client: BoxModel = offsetBox(item.client, shift.offset);
      const page: BoxModel = withScroll(client, initialWindowScroll);
      const index: number = item.descriptor.index + shift.indexChange;

      const moved: DraggableDimension = {
        ...item,
        descriptor: {
          ...item.descriptor,
          index,
        },
        placeholder: {
          ...item.placeholder,
          client,
        },
        client,
        page,
      };