带有验证的备忘录测试用例更新

Question

我正在使用多链选择，其中包含选项。 我使用 Chosen.js 来设计我的选择和选项标签。

选项标签的悬停有效。 即，当悬停在选项标签时，我能够设置不同的背景颜色。 但我无法悬停选择标签本身。

有谁知道如何设计这个选择元素的样式。

import FormFieldLabel from 'wf-dbd-react-ui/es/FormFieldLabel'
import FormFieldErrors from 'wf-dbd-react-ui/es/FormFieldErrors'
import MockStoreProvider from 'wf-dbd-react-ui/es/MockStoreProvider'
import { getString } from 'wf-dbd-react-ui/es/lib'

import Memo from '../Memo'
import FormInput from '../../../with-dirty-check/FormInput'

jest.mock('wf-dbd-react-ui/es/lib', () => ({
  getString: jest.fn().mockImplementation(() => 'Optional'),
  globals: jest.fn().mockImplementation(() => ({
    billpayBusinessUser: true
  }))
}))

describe('Memo Component', () => {
  let wrapper
  const coreState = {
    strings: {
      'optional': 'Optional'
    }
  }

  describe('when rendering', () => {

    beforeEach(() => {
      wrapper = mount(
        <MockStoreProvider digitalCoreState={coreState}>
          <Memo.WrappedComponent fieldId={'ImRequired'} getString={getString} defaultMemo="memo" />
        </MockStoreProvider>
      )
    })

    it('renders FormInput component', () => {
      expect(wrapper.find(FormInput)).toHaveLength(1)
      expect(wrapper.find(FormInput).prop('initialValue')).toBe('memo')
      expect(wrapper.find(FormInput).prop('placeholder')).toBe('Optional')
    })

    it('renders FormFieldLabel component', () => {
      expect(wrapper.find(FormFieldLabel)).toHaveLength(1)
    })

    it('renders FormFieldErrors component', () => {
      expect(wrapper.find(FormFieldErrors)).toHaveLength(1)
    })
  })
})

import FormInput from 'wf-dbd-react-ui/es/FormInput'

import withDirtyCheck from './withDirtyCheck'

export default withDirtyCheck(FormInput)

/*
Copyright (c) 2019 Wells Fargo. 455 Market St., San Francisco, CA 94105 All rights reserved.

This software is the confidential and proprietary information of Wells Fargo
bank. ('Confidential Information'). You shall not disclose such Confidential
Information and shall use it only in accordance with the terms of the license
agreement you entered into with WellsFargo.

Author: Ratul Bagchi

Description:
*/
import React from 'react'

const withDirtyCheck = Component => {
  class Wrapped extends React.Component {
    onChange = payload => {
      console.log('Dirty check')
      this.props.onChangeCallback && this.props.onChangeCallback(payload)
      return [payload.updates]
    }
    render() {
      return <Component {...this.props} onChangeCallback={this.onChange} />
    }
  }

  return Wrapped
}

export default withDirtyCheck

Answer 1

我从未使用过 selected.js，但快速浏览了（我怀疑是）主页。

如果您检查 'into this' 元素（使用 Chrome，F12），您会看到.chzn-container-single的background-image设置为-webkit-gradient 。

因此更改背景color没有效果，因为它使用图像（显示在颜色的顶部）。

将一些 css 添加到您的 site.css（或者如果您喜欢危险的生活，请在 selected.css 中查找）：

.chzn-container-single
{
    background-image: -moz-linear-gradient(center bottom , #F00 0%, #0FF 50%)
}

根据需要更改颜色并根据需要更改 chzn-container-single

如果这不起作用，可能是因为优先级，因此尝试将其作为style直接添加到浏览器中的元素以确认。

Answer 2

我找到了答案。 如果要设置选择选项背景的样式，则必须编辑此样式。

.chosen-single div b:hover {background: url('chosen-sprite1.png') no-repeat 0px 2px;}
.chosen-single span:hover {background-color:#538ECA;}
.chosen-single:hover {background-color:#538ECA; }

这是我找到的解决方法。 这是我能到达的最近的地方。