Repository: h2oai/wave
File: ui/src/text.test.tsx (TypeScript)

Code before:
import { Text, XText } from './text'

const name = 'text'
const textProps: Text = { name, content: name }
const textAlignPropValues: Text['align'][] = ['start', 'end', 'center', 'justify']

describe('Text.tsx', () => {

  it('Does not render data-test attr', () => {
    const { container } = render(<XText content='' />)
    expect(container.querySelectorAll('[data-test]')).toHaveLength(0)
  })

  it('Renders data-test attr', () => {
    const { queryByTestId } = render(<XText {...textProps} />)
    expect(queryByTestId(name)).toBeInTheDocument()
  })

  it('Renders Text with the align prop', () => {
    const { queryByTestId, rerender } = render(<XText {...textProps} />)
    expect(queryByTestId(name)).toBeInTheDocument()
    expect(queryByTestId(name)).toHaveAttribute('style','text-align: start;')     
    textAlignPropValues.forEach(textAlignPropValue => {
      rerender(<XText {...textProps} align={textAlignPropValue} />)
      expect(queryByTestId(name)).toBeInTheDocument()
      expect(queryByTestId(name)).toHaveAttribute('style','text-align: '+textAlignPropValue+';')      
    })
  })  

})

Review comment (refactor):
TLDR: This unit test can be removed.

No need to unit test visual things as they are very coupled to the implementation - will break on refactor. We have visual regression tests for this scenario that can be used to verify no other components changed unexpectedly.

If you are interested, you can checkout to main, run `make build-ui` to build the UI, then `cd tools/showcase` and `make visual-regression`. If you have never run it before, it will create base snapshots that will be used for comparison in the next run. Now checkout your feature branch, build UI again and run visual regression tests again. It parses all the examples in documentation and compares against your baseline (main). It's super strict so false positives are very likely, but still good enough to quickly see if something broke or not. One more thing - if new examples are inserted (like it is now in `text.md`), the order will not match and you will get a lot of mismatches. In that case, you just check if the screenshots look "normal" since there is no way around that.

Code after:
// Copyright 2020 H2O.ai, Inc.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

import { render } from '@testing-library/react'
import React from 'react'
import { Text, XText } from './text'

const name = 'text'
const textProps: Text = { name, content: name }

describe('Text.tsx', () => {

  it('Does not render data-test attr', () => {
    const { container } = render(<XText content='' />)
    expect(container.querySelectorAll('[data-test]')).toHaveLength(0)
  })

  it('Renders data-test attr', () => {
    const { queryByTestId } = render(<XText {...textProps} />)
    expect(queryByTestId(name)).toBeInTheDocument()
  })

})