enzyme#mount TypeScript Examples

describe('CardInput', () => {
    test('Renders a normal Card form', () => {
        const wrapper = mount(<CardInput i18n={i18n} />);
        expect(wrapper.find('[data-cse="encryptedCardNumber"]')).toHaveLength(1);
        expect(wrapper.find('[data-cse="encryptedExpiryDate"]')).toHaveLength(1);
        expect(wrapper.find('[data-cse="encryptedSecurityCode"]')).toHaveLength(1);
    });

    test('Renders a oneClick Card', () => {
        const storedCardData = {
            brand: 'visa',
            expiryMonth: '03',
            expiryYear: '2030',
            holderName: 'Checkout Shopper PlaceHolder',
            id: '8415611088427239',
            lastFour: '1111',
            name: 'VISA',
            storedPaymentMethodId: '8415611088427239',
            supportedShopperInteractions: ['ContAuth', 'Ecommerce'],
            type: 'scheme'
        };

        const wrapper = mount(<CardInput storedDetails={storedCardData} i18n={i18n} />);
        expect(wrapper.find('[data-cse="encryptedSecurityCode"]')).toHaveLength(1);
    });

    test('Has HolderName element', () => {
        const wrapper = mount(<CardInput hasHolderName={true} i18n={i18n} />);
        expect(wrapper.find('div.adyen-checkout__card__holderName')).toHaveLength(1);
    });
});

describe('MaskedInput', () => {
  it('matches snapshot', () => {
    const component = mount(
      <MaskedInput mask="999 999 9999" name="maskedInput" id="maskedInput" label="NHS Number" />,
    );
    expect(component).toMatchSnapshot();
    expect(component.text()).toBe('NHS Number');
    component.unmount();
  });
});

describe('Avatar', () => {
  it('should render the content with correct class and without crash', () => {
    const wrapper = mount(
      <Avatar size="small" variant="square">
        <span style={{fontSize:'10px'}}>AB</span>
      </Avatar>
    )
    expect(wrapper.find('Avatar').length).toBe(1);
    expect(wrapper.find('div').hasClass('tk-avatar tk-avatar--small tk-avatar--square')).toBe(true)
  })

  it('should render indicator with the correct position class', () => {
    const wrapper = mount(
      <Avatar variant="round" size="xlarge">
        <img src={'some url'} alt="avatar"/>
        <BasicIndicator position="top" variant="attention"/>
      </Avatar>
    )
    expect(wrapper.find('BasicIndicator').length).toBe(1);
    expect(wrapper.find('span').hasClass('tk-avatar__badge tk-avatar__badge--top tk-bg-color--attention')).toBe(true);
  })
})

describe('Isolated Server <Dashboard />', () => {

  const dashboard = mount(
    <Router>
      <NetworkContext.Provider value={{
        isValidUrl: null,
        isIsolatedServer: true,
        dataService: null,
        nodeUrl: '',
        inTransition: true,
        isLoadingUrls: true
      }}>
        <Dashboard />
      </NetworkContext.Provider>
    </Router>
  )

  it('matches snapshot', () => {
    expect(dashboard).toMatchSnapshot()
  })

})

describe('<StaticRouter /> integration tests', () => {
  const basePath = '/base';
  const route = {
    path: '/anotherpath',
    component: () => <>important</>,
    name: '',
  };

  it('should match the right route when basePath is set', async () => {
    const wrapper = mount(
      <StaticRouter
        routes={[route]}
        location={`${basePath}${route.path}`}
        basePath={basePath}
      >
        <RouteComponent />
      </StaticRouter>
    );

    expect(wrapper.text()).toBe('important');
  });

  it('should match the right route when basePath is not set', async () => {
    const wrapper = mount(
      <StaticRouter routes={[route]} location={route.path}>
        <RouteComponent />
      </StaticRouter>
    );

    expect(wrapper.text()).toBe('important');
  });
});

test('DateTimeRangeListWidget properly handle event', () => {
  const component = mount(getComponent())

  act(() => {
    component.find(BaseDateTimeRangeWidget).first().props().handleChangeDate(new Date('2021-02-02T00:00:00'), 'end', 0)
  })

  expect(submitChangeMock).toHaveBeenCalledWith({
    url: 'https://some-test-target.com',
    payload: { testPayload: [['2021-01-01T00:00:00', '2021-02-02T00:00:00']] },
  })
})

it('Effect should update state during hooks creation', async () => {
  const hook = () => {
    const [loading, setLoading] = useState(false)

    useEffect(() => {
      setLoading(true)
    }, [])

    return loading
  }
  const A = () => {
    const loading = useBetween(hook)
    return <i data-testid="loading">{loading ? 'loading' : ''}</i>
  }

  const el = render(<A />)
  expect((await el.findByTestId('loading')).textContent).toBe('loading')

  clear()
  const ol = mount(<A />)
  expect(ol.find('i').text()).toBe('loading')
})

mountWithTheme = (tree: any, theme: Theme) => {
    const WrappingThemeProvider = (props: any) => <ThemeProvider theme={theme}>{props.children}</ThemeProvider>;
    return mount(tree, { wrappingComponent: WrappingThemeProvider });
}

describe('analytics', () => {
  beforeEach(() => {
    SDKAnalyticsConstants.sdkSemver = '1.0.0';
    SDKAnalyticsConstants.techVersion = '10.2.5';
  });

  afterEach(() => {
    SDKAnalyticsConstants.sdkSemver = version;
    SDKAnalyticsConstants.techVersion = React.version;
  });
  it('creates an img with analytics', function (done) {
    const component = mount(<AdvancedImage cldImg={cloudinaryImage} />);
    setTimeout(() => {
      expect(component.html()).toEqual('<img src="https://res.cloudinary.com/demo/image/upload/sample?_a=AJAABDS0">');
      done();
    }, 0);// one tick
  });
});

describe('YForm', () => {
  test('renders', () => {
    const wrapper = render(<YFormDemo />);
    expect(wrapper).toMatchSnapshot();
  });
  test('isShow', () => {
    const wrapper = render(<YFormDemo isShow={false} />);
    expect(wrapper).toMatchSnapshot();
  });
  test('loading', () => {
    const wrapper = render(<YFormDemo loading />);
    expect(wrapper).toMatchSnapshot();
  });
  test('layout', () => {
    const wrapper = render(
      <div>
        <YFormDemo />
        <YFormDemo {...layoutMore} />
      </div>,
    );
    expect(wrapper).toMatchSnapshot();
  });
  test('layout2', () => {
    const itemsType: any = {
      demo: { component: <p>123</p>, formatStr: '请输入${label}' },
    };
    YForm.Config({ itemsType });
    const wrapper = render(<YForm name="basic">{[{ type: 'demo' }]}</YForm>);
    expect(wrapper).toMatchSnapshot();
  });
  test('onFinish', () => {
    const wrapper = mount(<YFormDemo />);
    wrapper.find('Button').simulate('submit');
    const wrapper2 = mount(<YFormDemo formatFieldsValue={undefined} />);
    wrapper2.find('Button').simulate('submit');
  });
});

test("statVar not in PV-tree", () => {
  Object.defineProperty(window, "location", {
    value: {
      hash: "#&place=geoId/05&statsVar=NotInTheTree",
    },
  });
  // Mock drawGroupLineChart() as getComputedTextLength can has issue with jest
  // and jsdom.
  drawGroupLineChart_mock();
  // mock all the async axios call
  axios_mock();
  // Do the actual render!
  const wrapper = mount(<Page />);
  // Resolve statVarInfo promise and placeName promise
  return Promise.resolve(wrapper)
    .then(() => wrapper.update())
    .then(() => wrapper.update())
    .then(() => wrapper.update())
    .then(() => wrapper.update())
    .then(() => {
      wrapper.update();
      expect(
        pretty(wrapper.find("#chart-region").getDOMNode().innerHTML)
      ).toMatchSnapshot();
      expect(
        pretty(wrapper.find("#hierarchy-section").getDOMNode().innerHTML)
      ).toMatchSnapshot();
    });
});

describe('Age graph', () => {
  const wrapper = mount(
    <ThemeProvider theme={theme}>
      <Ages ages={data.ageRows} />
    </ThemeProvider>
  );
  it('displays an age graph', () => {
    setTimeout(() => {
      expect(wrapper.find('.recharts-bar-rectangle').length).toBeGreaterThan(0);
    }, 10);
  });
});

getMountComponent = (props = {}, breadcrumbItemCount = 3, breadcrumbItemProps = {}) =>
  mount(
    <Breadcrumb {...props}>
      {times(breadcrumbItemCount, (x) => (
        <BreadcrumbItem key={x} {...breadcrumbItemProps}>
          {x}
        </BreadcrumbItem>
      ))}
    </Breadcrumb>
  )

describe("AdvanceListContainer", () => {
  it("should work", () => {
    const wrapper = mount(
      <AdvanceListContainer
        data={[]}
        suffixBrick={suffixBrick}
        titleBrick={titleBrick}
        itemClick={jest.fn()}
        selectable={true}
      />
    );
    wrapper.setProps({ data });
    const item = wrapper.find(`.${style.itemContainer}`).first();
    item.simulate("click");
    expect(wrapper.props().itemClick).toHaveBeenCalled();
    expect(wrapper.find(`.${style.itemContainer}`).length).toBe(3);
  });
});

describe('BacsInput', () => {
    const getWrapper = (props?) => mount(<BacsInput {...defaultProps} {...props} />);

    test('Should display expected fields for opening (enter-data) state', () => {
        const wrapper = getWrapper({});

        // Main holder
        expect(wrapper.find('.adyen-checkout__bacs')).toHaveLength(1);

        // Name (active)
        expect(wrapper.find('div.adyen-checkout__bacs--holder-name')).toHaveLength(1);
        expect(wrapper.find('div.adyen-checkout__bacs--holder-name.adyen-checkout__field--inactive')).toHaveLength(0);

        // Holder for account & location + account & location fields
        expect(wrapper.find('.adyen-checkout__bacs .adyen-checkout__bacs__num-id')).toHaveLength(1);
        expect(wrapper.find('div.adyen-checkout__bacs--bank-account-number')).toHaveLength(1);
        expect(wrapper.find('div.adyen-checkout__bacs--bank-location-id')).toHaveLength(1);

        // Email
        expect(wrapper.find('div.adyen-checkout__bacs--shopper-email')).toHaveLength(1);

        // Consent checkboxes
        expect(wrapper.find('ConsentCheckbox')).toHaveLength(2);
    });

    test('Should display expected fields for second (confirm-data) state', () => {
        const wrapper = getWrapper({});

        wrapper.instance().setStatus('confirm-data');
        wrapper.update();

        // Main holder (with additional 'confim' class)
        expect(wrapper.find('.adyen-checkout__bacs.adyen-checkout__bacs--confirm')).toHaveLength(1);

        // Edit button
        expect(wrapper.find('.adyen-checkout__bacs .adyen-checkout__bacs--edit')).toHaveLength(1);

        // Name (inactive)
        expect(wrapper.find('div.adyen-checkout__bacs--holder-name.adyen-checkout__field--inactive')).toHaveLength(1);

        // Holder for account & location + inactive account & location fields
        expect(wrapper.find('.adyen-checkout__bacs .adyen-checkout__bacs__num-id')).toHaveLength(1);
        expect(wrapper.find('div.adyen-checkout__bacs--bank-account-number.adyen-checkout__field--inactive')).toHaveLength(1);
        expect(wrapper.find('div.adyen-checkout__bacs--bank-location-id.adyen-checkout__field--inactive')).toHaveLength(1);

        // Email (inactive)
        expect(wrapper.find('div.adyen-checkout__bacs--shopper-email.adyen-checkout__field--inactive')).toHaveLength(1);

        // No consent checkboxes
        expect(wrapper.find('ConsentCheckbox')).toHaveLength(0);
    });
});

describe('Behavior for comment input field', () => {
  it('should display send button for new thread editor', () => {
    const component = mount(
      <NewCommentThread
        serverRoot="root"
        currFilePath="path"
        commentType="review"
      />
    );
    const submit = component.find('.sendThread');
    expect(submit).not.toHaveLength(0);
  });

  it('should display send button for reply editor', () => {
    const component = mount(
      <NewReplyComment hash="hash" currFilePath="path" commentType="detached" />
    );
    const submit = component.find('.sendReply');
    expect(submit).not.toHaveLength(0);
  });

  it('should store the value of the comment (reply)', () => {
    const component = mount(
      <NewReplyComment hash="hash" currFilePath="path" commentType="detached" />
    );
    const input = component.find('.replyCommentTextField').first();
    expect(input.props().value).toEqual('');
    input.props().value = 'new comment';
    expect(input.props().value).toEqual('new comment');
    const submit = component.find('.commentSubmit');
    expect(typeof submit.props().onSubmit === 'function').toBe(true);
  });

  it('should store the value of the comment (new thread)', () => {
    const component = mount(
      <NewCommentThread
        serverRoot="root"
        currFilePath="path"
        commentType="review"
      />
    );
    const input = component.find('.newThreadTextField').first();
    input.props().value = 'new comment';
    expect(input.props().value).toEqual('new comment');
    const submit = component.find('.commentSubmit');
    expect(typeof submit.props().onSubmit === 'function').toBe(true);
  });
});

/**
 * UUI Component onXXX calback function customize props
 *
 * 测试 onXXX 回掉函数类型的 customize 参数是否按正常顺序被调用。
 */
it('UUIComponent [customize onXXX callback function]', () => {
  const mockOnClick1 = jest.fn((name: string) => {});
  const mockOnClick2 = jest.fn((name: string) => {});
  const mockOnClick3 = jest.fn((name: string) => {});

  const UUITestComponent = UUIFunctionComponent({
    name: 'UUITestComponent',
    nodes: {
      Root: 'div',
      Trigger1: 'div',
      Trigger2: 'div',
      Trigger3: 'div',
    }
  }, (props: {}, { nodes }) => {
    const { Root, Trigger1, Trigger2, Trigger3 } = nodes
    return (
      <Root>
        <Trigger1 id="UUITestComponentTrigger1" onClick={() => { mockOnClick1('FirstCall Inner') }} />
        <Trigger2 id="UUITestComponentTrigger2" onClick={() => { mockOnClick2('FirstCall Inner') }} />
        <Trigger3 id="UUITestComponentTrigger3" />
      </Root>
    )
  })

  const wrapper = mount((
    <UUITestComponent
      customize={{
        Trigger1: {
          onClick: () => { mockOnClick1('SecondCall Customize') },
        },
        Trigger3: {
          onClick: () => { mockOnClick3('SecondCall Customize') },
        },
      }}
    />
  ));

  wrapper.find('#UUITestComponentTrigger1').at(0).simulate('click')
  wrapper.find('#UUITestComponentTrigger2').at(0).simulate('click')
  wrapper.find('#UUITestComponentTrigger3').at(0).simulate('click')

  expect(mockOnClick1.mock.calls.length).toBe(2);
  expect(mockOnClick1.mock.calls[0][0]).toBe('FirstCall Inner');
  expect(mockOnClick1.mock.calls[1][0]).toBe('SecondCall Customize');

  expect(mockOnClick2.mock.calls.length).toBe(1);
  expect(mockOnClick2.mock.calls[0][0]).toBe('FirstCall Inner');

  expect(mockOnClick3.mock.calls.length).toBe(1);
  expect(mockOnClick3.mock.calls[0][0]).toBe('SecondCall Customize');
})

describe('TabSet', () => {
  it('matches snapshot', () => {
    const component = shallow(<TabSet />);
    expect(component).toMatchSnapshot();
    component.unmount();
  });

  describe('Tab', () => {
    it('matches snapshot', () => {
      const component = shallow(<TabSet.Tab />);
      expect(component).toMatchSnapshot();
      component.unmount();
    });

    it('applies correct classes', () => {
      const component = mount(
        <TabSet>
          <TabSet.Tab id="normal">Text</TabSet.Tab>
          <TabSet.Tab id="disabled" disabled>
            Disabled
          </TabSet.Tab>
          <TabSet.Tab id="active" active>
            Active
          </TabSet.Tab>
          <TabSet.Tab id="empty" empty>
            Empty
          </TabSet.Tab>
        </TabSet>,
      );

      const renderedComponent = component.render();
      expect(renderedComponent.find('#normal').prop('class')).toBe('nhsuk-tab-set__tab');
      expect(renderedComponent.find('#disabled').prop('class')).toBe(
        'nhsuk-tab-set__tab nhsuk-tab-set__tab--disabled',
      );
      expect(renderedComponent.find('#active').prop('class')).toBe(
        'nhsuk-tab-set__tab nhsuk-tab-set__tab--active',
      );
      expect(renderedComponent.find('#empty').prop('class')).toBe(
        'nhsuk-tab-set__tab nhsuk-tab-set__tab--empty',
      );

      component.unmount();
    });
  });
});

describe('Router', () => {
  const moduleNamespace = 'module1'

  function startApp(...args: any[]) {
    const app = createApp()

    const Container = (props: any) => {
      const { children } = props
      return <div id="root">{children}</div>
    }
    const router = (
      <HashRouter>
        <Route path="/" component={Container} />
      </HashRouter>
    )
    app.addRouter(router)
    const module = createPageModule(moduleNamespace, {
      initialState: {}
    })
    app.addPage(module)

    const routerNode = app.start(...args)
    return {
      app,
      wrapper:
        _.isString(args[0]) || _.isElement(args[0]) ? mount(routerNode) : null
    }
  }

  test('add router', () => {
    const { wrapper } = startApp('#container')
    expect(wrapper.find('#root').length).toBe(1)
  })

  test('app.start with dom element', () => {
    const { wrapper } = startApp(document.querySelector('#container'), _.noop)
    expect(wrapper.find('#root').length).toBe(1)
  })

  test('app.start with callback', () => {
    const mockCallback = jest.fn(_.noop)
    startApp(mockCallback)
    expect(mockCallback.mock.calls.length).toBe(1)
  })

  test('app.start with false', () => {
    const { app } = startApp(false)
    expect(app._modules[moduleNamespace]).toBeDefined()
  })
})

describe('Checkbox Component', () => {
  describe('Checkbox component test suite => ', () => {
    afterEach(() => {
      jest.restoreAllMocks();
    });

    it('render with default props and initial value', () => {
      const wrapper = shallow(
        <Checkbox name="default-checkbox-name" value="default-checkbox-value" />
      );
      expect(wrapper.length).toEqual(1);
      expect(wrapper.find(SelectionInput).length).toBe(1);
      expect(wrapper.find(SelectionInput).prop('type')).toEqual(
        SelectionTypes.CHECKBOX
      );
      expect(wrapper.find(SelectionInput).prop('name')).toEqual(
        'default-checkbox-name'
      );
      expect(wrapper.find(SelectionInput).prop('value')).toEqual(
        'default-checkbox-value'
      );
    });

    it('with "checked" status', () => {
      const onChangeCallback = jest.fn();
      const wrapper = mount(
        <Checkbox
          name="checked-state-checkbox-name"
          value="checked-state-checkbox-value"
          status={SelectionStatus.CHECKED}
          onChange={onChangeCallback}
        />
      );
      expect(wrapper.length).toEqual(1);
      expect(wrapper.find(SelectionInput).length).toBe(1);
      expect(wrapper.find(SelectionInput).prop('type')).toEqual(
        SelectionTypes.CHECKBOX
      );
      expect(wrapper.find(SelectionInput).prop('status')).toBe(
        SelectionStatus.CHECKED
      );
      wrapper.unmount();
    });

    it('with "mixed" status', () => {
      const onChangeCallback = jest.fn();
      const wrapper = shallow(
        <Checkbox
          name="mixed-checkbox-name"
          value="mixed-checkbox-value"
          status={SelectionStatus.MIXED}
          onChange={onChangeCallback}
        />
      );
      expect(wrapper.length).toEqual(1);
      expect(wrapper.find(SelectionInput).length).toBe(1);
      expect(wrapper.find(SelectionInput).prop('type')).toEqual(
        SelectionTypes.CHECKBOX
      );
      expect(wrapper.find(SelectionInput).prop('status')).toBe(
        SelectionStatus.MIXED
      );
    });

    it('with click handler', () => {
      const clickCallback = jest.fn();
      const wrapper = shallow(
        <Checkbox
          name="click-checkbox-name"
          value="click-checkbox-value"
          onClick={clickCallback}
        />
      );
      expect(wrapper.length).toEqual(1);
      wrapper.find(SelectionInput).props().onClick(null);
      expect(clickCallback).toBeCalled();
    });
  });
});