You are on page 1of 3

import { FlashStandard, FlashToast } from "chrome/flash"

describe("<FlashStandard", () => {
const props = {
animation_speed: 100,
class_name: "test_standard_class_name",
content: "standard flash",
raw: false,
type: "notice",
user_dismiss: true,
}

describe("#renders the flash basics", function() {


const wrapper = mount(<FlashStandard {...props} />)

it("can exist", () => {


expect(wrapper.exists()).toBeTruthy()
})

it("contains a close x", function() {


expect(wrapper.find(".icon-ic_close").length).toEqual(1)
})

it("has the props class name", function() {


expect(wrapper.find(`.${props.class_name}`).length).toEqual(1)
})

it("has the right content", function() {


expect(wrapper.text()).toContain(props.content)
})

it("contains visually hidden text", function() {


expect(wrapper.find(".visually_hidden").length).toEqual(2)
})
})

describe("#renders a notice flash", function() {


const wrapper = mount(<FlashStandard {...props} />)

it("has the notice class name", function() {


expect(wrapper.find(".notice").length).toEqual(1)
})
})

describe("#renders a error flash", function() {


const wrapper = mount(<FlashStandard {...Object.assign({}, props, { type:
"error" })} />)

it("has the error class name", function() {


expect(wrapper.find(".error").length).toEqual(1)
})
})

describe("#renders a success flash", function() {


const wrapper = mount(<FlashStandard {...Object.assign({}, props, { type:
"success" })} />)

it("has the error class name", function() {


expect(wrapper.find(".success").length).toEqual(1)
})
})

describe("#renders a non-dismissible flash", function() {


const wrapper = mount(<FlashStandard {...Object.assign({}, props,
{ user_dismiss: false })} />)

it("does not contain a close x", function() {


expect(wrapper.find(".icon-ic_close").length).toEqual(0)
})
})

describe("#renders a raw flash", function() {


const className = "test_html_content"
const html = `<span class="${className}">test</span>`
const wrapper = mount(<FlashStandard {...Object.assign({}, props, { raw: true,
content: html })} />)

it("contains the HTML content", function() {


expect(wrapper.html()).toContain(html)
})
})
})

describe("<FlashToast", () => {
const props = {
animation_speed: 100,
dismiss_speed: 100,
class_name: "test_toast_class_name",
content: "toast flash",
raw: false,
type: "notice",
}

describe("#renders the flash basics", function() {


const wrapper = mount(<FlashToast {...props} />)

it("can exist", () => {


expect(wrapper.exists()).toBeTruthy()
})

it("has the props class name", function() {


expect(wrapper.find(`.${props.class_name}`).length).toEqual(1)
})

it("has the right content", function() {


expect(wrapper.text()).toContain(props.content)
})

it("contains visually hidden text", function() {


expect(wrapper.find(".visually_hidden").length).toEqual(1)
})
})

describe("#renders a notice flash", function() {


const wrapper = mount(<FlashToast {...props} />)

it("has the notice class name", function() {


expect(wrapper.find(".notice").length).toEqual(1)
})
})

describe("#renders a error flash", function() {


const wrapper = mount(<FlashToast {...Object.assign({}, props, { type:
"error" })} />)

it("has the error class name", function() {


expect(wrapper.find(".error").length).toEqual(1)
})
})

describe("#renders a success flash", function() {


const wrapper = mount(<FlashToast {...Object.assign({}, props, { type:
"success" })} />)

it("has the error class name", function() {


expect(wrapper.find(".success").length).toEqual(1)
})
})

describe("#renders a raw flash", function() {


const className = "test_html_content"
const html = `<span class="${className}">test</span>`
const wrapper = mount(<FlashToast {...Object.assign({}, props, { raw: true,
content: html })} />)

it("contains the HTML content", function() {


expect(wrapper.html()).toContain(html)
})
})
})