test(snackbar): add snapshots (#257)

* test(snackbar): add snapshots

* test(snackbar): add dismiss button snapshots

components/snackbar/__tests__/Snackbar.spec.js

@@ -0,0 +1,109 @@
+import 'mutationobserver-shim'
+import { mount } from '@vue/test-utils'
+import Snackbar from '../Snackbar.vue'
+
+describe('Snackbar', () => {
+  it('should mount', () => {
+    let wrapper = mount(Snackbar)
+    expect(wrapper.isVueInstance()).toBeTruthy()
+    expect(wrapper.vm.$data.mdcSnackbar).toBeDefined()
+  })
+
+  it('should render with no prop', () => {
+    let wrapper = mount(Snackbar)
+    expect(wrapper).toMatchSnapshot()
+    expect(wrapper.classes()).toContain('mdc-snackbar')
+    expect(wrapper.find('button').exists()).toBeFalsy()
+    expect(wrapper.vm.$data.mdcSnackbar.isOpen).toBe(false)
+  })
+
+  it('should render as open', () => {
+    let wrapper = mount(Snackbar, {
+      propsData: {
+        open: true
+      }
+    })
+    expect(wrapper).toMatchSnapshot()
+    expect(wrapper.isVisible()).toBe(true)
+  })
+
+  it('should render as leading', () => {
+    let wrapper = mount(Snackbar, {
+      propsData: {
+        leading: true
+      }
+    })
+    expect(wrapper).toMatchSnapshot()
+    expect(wrapper.classes()).toContain('mdc-snackbar--leading')
+  })
+
+  it('should render as stacked', () => {
+    let wrapper = mount(Snackbar, {
+      propsData: {
+        stacked: true
+      }
+    })
+    expect(wrapper).toMatchSnapshot()
+    expect(wrapper.classes()).toContain('mdc-snackbar--stacked')
+  })
+
+  it('should render with labelText', () => {
+    let wrapper = mount(Snackbar, {
+      propsData: {
+        labelText: 'label text'
+      }
+    })
+    expect(wrapper).toMatchSnapshot()
+    expect(wrapper.vm.$data.mdcSnackbar.labelText).toEqual('label text')
+    expect(wrapper.find('.mdc-snackbar__label').text()).toEqual('label text')
+  })
+
+  it('should render with actionButton', () => {
+    let wrapper = mount(Snackbar, {
+      propsData: {
+        actionButtonText: 'button'
+      }
+    })
+    expect(wrapper).toMatchSnapshot()
+    expect(wrapper.vm.$data.mdcSnackbar.actionButtonText).toEqual('button')
+    const action = wrapper.find('.mdc-snackbar__action')
+    expect(action.exists()).toBe(true)
+    expect(action.text()).toEqual('button')
+  })
+
+  it('should render with dismiss', () => {
+    let wrapper = mount(Snackbar, {
+      propsData: {
+        hasDismiss: true
+      }
+    })
+    expect(wrapper).toMatchSnapshot()
+    const dismiss = wrapper.find('.mdc-snackbar__dismiss')
+
+    expect(dismiss.exists()).toBe(true)
+  })
+
+  it('should render with optional actionButton', () => {
+    let wrapper = mount(Snackbar, {
+      propsData: {
+        actionButtonText: 'button'
+      }
+    })
+    expect(wrapper.find('.mdc-snackbar__action').exists()).toBeTruthy()
+
+    wrapper.setProps({ actionButtonText: '' })
+    expect(wrapper.find('.mdc-snackbar__action').exists()).toBeFalsy()
+  })
+
+  it('should render with optional dismiss', () => {
+    let wrapper = mount(Snackbar, {
+      propsData: {
+        hasDismiss: true
+      }
+    })
+    expect(wrapper.find('.mdc-snackbar__dismiss').exists()).toBeTruthy()
+
+    wrapper.setProps({ hasDismiss: false })
+    expect(wrapper.find('.mdc-snackbar__dismiss').exists()).toBeFalsy()
+  })
+})

components/snackbar/__tests__/__snapshots__/Snackbar.spec.js.snap

@@ -0,0 +1,69 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Snackbar should render as leading 1`] = `
+<div class="mdc-snackbar mdc-snackbar--leading">
+  <div class="mdc-snackbar__surface">
+    <div aria-live="polite" role="status" class="mdc-snackbar__label"></div>
+    <!---->
+  </div>
+</div>
+`;
+
+exports[`Snackbar should render as open 1`] = `
+<div class="mdc-snackbar">
+  <div class="mdc-snackbar__surface">
+    <div aria-live="polite" role="status" class="mdc-snackbar__label"></div>
+    <!---->
+  </div>
+</div>
+`;
+
+exports[`Snackbar should render as stacked 1`] = `
+<div class="mdc-snackbar mdc-snackbar--stacked">
+  <div class="mdc-snackbar__surface">
+    <div aria-live="polite" role="status" class="mdc-snackbar__label"></div>
+    <!---->
+  </div>
+</div>
+`;
+
+exports[`Snackbar should render with actionButton 1`] = `
+<div class="mdc-snackbar">
+  <div class="mdc-snackbar__surface">
+    <div aria-live="polite" role="status" class="mdc-snackbar__label"></div>
+    <div class="mdc-snackbar__actions"><button type="button" class="mdc-button mdc-snackbar__action">button</button>
+      <!---->
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Snackbar should render with dismiss 1`] = `
+<div class="mdc-snackbar">
+  <div class="mdc-snackbar__surface">
+    <div aria-live="polite" role="status" class="mdc-snackbar__label"></div>
+    <div class="mdc-snackbar__actions">
+      <!----> <button title="Dismiss" class="mdc-icon-button mdc-snackbar__dismiss material-icons">
+        close
+      </button></div>
+  </div>
+</div>
+`;
+
+exports[`Snackbar should render with labelText 1`] = `
+<div class="mdc-snackbar">
+  <div class="mdc-snackbar__surface">
+    <div aria-live="polite" role="status" class="mdc-snackbar__label">label text</div>
+    <!---->
+  </div>
+</div>
+`;
+
+exports[`Snackbar should render with no prop 1`] = `
+<div class="mdc-snackbar">
+  <div class="mdc-snackbar__surface">
+    <div aria-live="polite" role="status" class="mdc-snackbar__label"></div>
+    <!---->
+  </div>
+</div>
+`;