bmdalex

Healthy Foods Inventory Challenge

Description

We are the owners of a vegan-friendly store and would like you to create a visual representation of our inventory.

There are two main task described in the sections below.

Feature 1: Display products in a rich text table

bmdalex

import { createLocalVue, shallowMount } from '@vue/test-utils'
import { createBuilder, testData } from './RegistrationFormComponent.builder.js'
import RegistrationForm from './RegistrationForm.vue'
import { byTestId } from '@/utils/testUtils.js'

const localVue = createLocalVue()
const validEmail = 'somename@example.com'
const invalidEmail = 'invalid email'
const registerUserResponse = { status: 200 }

bmdalex

describe('when the user submits a valid form', () => {
  beforeEach(() => { ... })

  it('should enable the submit button', { ... })
  it('should register the user by calling external API', () => { ... })
  it('should emit the "register-update" event', { ... })
})

bmdalex

describe('handleFormSubmit', () => {
  beforeEach(() => { … })

  it('button disabled attribute is false', { ... })
  it('is calling $auth.registerUser', () => { ... })
  it('is calling $emit("register-update", ...)', { ... })
})

bmdalex

describe('when the user submits a valid form', () => {
  beforeEach(() => {
   /*
    * preconditions
    */
   })

  it('should enable the submit button', () => {
    expect(getFormSubmitButton(wrapper).attributes('disabled')).toBe(undefined)
  })

bmdalex

test('when the user submits a valid form should register the user', () => {
  /*
   * preconditions
   */
  expect(getFormSubmitButton(wrapper).attributes('disabled')).toBe(undefined)
  expect($auth.registerUser).toHaveBeenCalledWith({ email: validEmail })
  expect(wrapper.emitted()['register-update'][0]).toBe(registerUserResponse)
})

bmdalex

describe('when the user submits a valid form', () => {
  beforeEach(() => { ... })
  it('should enable the submit button', () => { ... })
  it('should register the user by calling external API', () => { ... })
})

describe('when the user submits an invalid form', () => {
  beforeEach(() => { ... })
  it('should disable the submit button', () => { ... })

bmdalex

it('mounts properly', () => { ... })

it('when the user submits a form should register the user by calling external API',
   () => { ... })

it('renders properly', () => { ... })

it('when the form is loaded should make the submit button disabled', () => { ... })

it('should log the appropriate error', () => { ... })

bmdalex

it('should display the required fields form errors', () => {
  expect(wrapper.vm.errorMsg).toBe('Invalid Email.')
})

bmdalex

it('when the user submits it should call external API', () => {
  expect($auth.registerUser).toHaveBeenCalledWith({
    email: validEmail
  })
})