备忘录测试案例更新与验证

Question

我使用的是多链选择，其中包含有选项，我使用了Chosen.js来样式我的选择和选项标签。我使用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

我从来没有使用过 chosen.js，但我快速查看了一下（我怀疑是）主页。

如果你检查 "进入这个 "元素（使用Chrome浏览器，F12），你会看到 .chzn-container-single 拥有 background-image 设为 -webkit-gradient.

所以改变背景 color 没有任何效果，因为它使用了一个图像（在颜色的上方显示）。

在你的site.css中添加一些css（如果你喜欢危险的生活，也可以在 chosen.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; }

这是我找到的一个变通方法。这是我能找到的最接近的方法。