Tests

Chapter 1

What on earth am I supposed to test ?

AsA user, on the MPP page, in the design selector,  I see the thumbnails of the products

  1. If the product has no thumbnail, I see a background with the product's hexa color code
  2. If the product has no hexa-color code, I see a background with the product's color family
  3. If the product has no color family, I see a white background

Tests Cases

  1. If the product has a thumbnail, I see a background with the product's thumbnail
  2. If the product has no a thumbnail but an hexa-color code, I see a background with the product's hexa-color-code
  3. If the product has no a thumbnail but an hexa-color code and a color family, I see a background with the product's hexa-color-code
  4. If the product has no a thumbnail, no hexa-color code, but a color family, I see a background with the product's color family
import { mount } from '@vue/test-utils'
import Design from './design'
import * as BackgroundColorMapping from '../../constants/colorsConstant'

BackgroundColorMapping.getBackgroundStyleFromFamilyCode = jest.fn(familyCode => familyCode === 'WH' ? 'BackgroundStyle' : null)

describe('Background Style', () => {

  const testData = [
    {
      description: 'Should have the thumbnail as background-image',
      props: { designKey: 'designKey', colorFamilyCodes: [{code: 'WH'}], thumbnailUrl: 'theTHUrl', hexadecimalColorCode: '123456' },
      expectedResult: { backgroundImage: 'url("theThumbnailUrl")', backgroundColor: '#123456' }
    },
    {
      description: 'Should get color from hexadecimal color code',
      props: { designKey: 'designKey', colorFamilyCodes: [{ code: 'WH' }], thumbnailName: null, hexadecimalColorCode: '123456' },
      expectedResult: { backgroundColor: '#123456' }
    },
    {
      description: 'Should get the color from the color family',
      props: { designKey: 'designKey', colorFamilyCodes: [{ code: 'WH' }], thumbnailName: null, hexadecimalColorCode: null },
      expectedResult: 'BackgroundStyle'
    },
    {
      description: 'Should get default white the color family is not mapped to a color',
      props: { designKey: 'designKey', colorFamilyCodes: [{ code: 'WrongCode' }], thumbnailName: null, hexadecimalColorCode: null },
      expectedResult: { backgroundColor: 'white' }
    },
    {
      description: 'Should get default white color if no data is provided',
      props: { designKey: 'designKey', colorFamilyCodes: [], thumbnailName: null, hexadecimalColorCode: null },
      expectedResult: { backgroundColor: 'white' }
    }
  ]
  testData.map(({ description, props, expectedResult }) => {
    it(description, () => {
      const wrapper = mount(Design, { propsData: props })
      expect(wrapper.vm.backgroundColorStyle).toEqual(expectedResult)
    })
  })

AsA user, on the MPP page, when I click on a design,  I see that it's selected and the URL has changed

  1. If the product has no thumbnail, I see a background with the product's hexa color code
  2. If the product has no hexa-color code, I see a background with the product's color family
  3. If the product has no color family, I see a white background

Tests Cases

  1. If the product has a thumbnail, I see a background with the product's thumbnail
  2. If the product has no a thumbnail but an hexa-color code, I see a background with the product's hexa-color-code
  3. If the product has no a thumbnail but an hexa-color code and a color family, I see a background with the product's hexa-color-code
  4. If the product has no a thumbnail, no hexa-color code, but a color family, I see a background with the product's color family
import { mount } from '@vue/test-utils'
import Design from './design'
import * as BackgroundColorMapping from '../../constants/colorsConstant'

BackgroundColorMapping.getBackgroundStyleFromFamilyCode = jest.fn(familyCode => familyCode === 'WH' ? 'BackgroundStyle' : null)

describe('Background Style', () => {

  const testData = [
    {
      description: 'Should have the thumbnail as background-image',
      props: { designKey: 'designKey', colorFamilyCodes: [{code: 'WH'}], thumbnailUrl: 'theTHUrl', hexadecimalColorCode: '123456' },
      expectedResult: { backgroundImage: 'url("theThumbnailUrl")', backgroundColor: '#123456' }
    },
    {
      description: 'Should get color from hexadecimal color code',
      props: { designKey: 'designKey', colorFamilyCodes: [{ code: 'WH' }], thumbnailName: null, hexadecimalColorCode: '123456' },
      expectedResult: { backgroundColor: '#123456' }
    },
    {
      description: 'Should get the color from the color family',
      props: { designKey: 'designKey', colorFamilyCodes: [{ code: 'WH' }], thumbnailName: null, hexadecimalColorCode: null },
      expectedResult: 'BackgroundStyle'
    },
    {
      description: 'Should get default white the color family is not mapped to a color',
      props: { designKey: 'designKey', colorFamilyCodes: [{ code: 'WrongCode' }], thumbnailName: null, hexadecimalColorCode: null },
      expectedResult: { backgroundColor: 'white' }
    },
    {
      description: 'Should get default white color if no data is provided',
      props: { designKey: 'designKey', colorFamilyCodes: [], thumbnailName: null, hexadecimalColorCode: null },
      expectedResult: { backgroundColor: 'white' }
    }
  ]
  testData.map(({ description, props, expectedResult }) => {
    it(description, () => {
      const wrapper = mount(Design, { propsData: props })
      expect(wrapper.vm.backgroundColorStyle).toEqual(expectedResult)
    })
  })
Made with Slides.com