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

【问题标题】：Memo test case update with validation带有验证的备忘录测试用例更新
【发布时间】：2020-05-12 06:34:06
【问题描述】：

我正在使用其中包含选项的多链选择。我使用 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

【问题讨论】：

寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现它所需的最短代码

标签： javascript jquery css html

【解决方案1】：

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

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

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

在你的 site.css 中添加一些 css（如果你喜欢危险地生活，或者在 selected.css 中寻找这个）：

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

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

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

【讨论】：

【解决方案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; }

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

【讨论】：