added test cases for auth pages and input field

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "test:unit": "vue-cli-service test:unit",
+    "test:unit": "vue-cli-service test:unit --verbose",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {

src/App.vue

@@ -173,7 +173,7 @@ export default {
     flex: 1;
     box-shadow: 0px 0px 40px 36px rgba(33, 33, 33, 0.06);
     padding: 2rem 3rem;
-    border-radius: 8px;
+    border-radius: 2px;
   }
 
   &__login {

src/components/InputField.vue

@@ -22,7 +22,7 @@ export default {
   props: {
     value: { type: [String, Number], default: null },
     placeholder: { type: String, default: "", required: true },
-    label: { type: String, default: null },
+    label: { type: String, default: null, required: true },
     type: { type: String, default: "text" },
     name: { type: String, default: "", required: true },
     required: { type: Boolean, default: false },

src/components/Login.vue

@@ -27,7 +27,11 @@
       </form>
     </div>
     <div class="form__meta">
-      <button @click="switchToRegister" class="btn btn-link login">
+      <button
+        @click="switchToRegister"
+        type="button"
+        class="btn btn-link login"
+      >
         Create account
       </button>
     </div>

tests/unit/InputField.spec.js

@@ -0,0 +1,48 @@
+import { shallowMount } from '@vue/test-utils';
+import InputField from '@/components/InputField.vue';
+
+describe('Input Field Component', () => {
+  let wrapper;
+  const handleOnInvalid = jest.spyOn(InputField.methods, 'handleOnInvalid');
+
+  beforeEach(() => {
+    wrapper = shallowMount(InputField, {
+      propsData: {
+        placeholder: '',
+        label: '',
+        name: ''
+      }
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('has a label and an input field', () => {
+    const labels = wrapper.findAll('label');
+    const inputs = wrapper.findAll('input');
+    expect(labels.length).toEqual(1);
+    expect(inputs.length).toEqual(1);
+  });
+
+  it('emits the invalid method when triggered', async () => {
+    const input = wrapper.find('input');
+    await input.trigger('invalid');
+    expect(handleOnInvalid).toHaveBeenCalled();
+  });
+
+  it('emits the input value', async () => {
+    const TEST_INPUT = 'test input';
+    const input = wrapper.find('input');
+    await input.setValue(TEST_INPUT);
+    expect(wrapper.emitted().input[0]).toEqual([TEST_INPUT]);
+  });
+
+  it('has the correct label displayed', async () => {
+    const TEST_LABEL = 'Email';
+    await wrapper.setProps({ label: TEST_LABEL });
+    const label = wrapper.find('label');
+    expect(label.text()).toEqual(TEST_LABEL);
+  });
+});

tests/unit/Login.spec.js

@@ -0,0 +1,40 @@
+import { shallowMount } from '@vue/test-utils';
+import Login from '@/components/Login.vue';
+import InputField from '@/components/InputField.vue';
+
+describe('Login View', () => {
+  let wrapper;
+  const switchToRegister = jest.spyOn(Login.methods, 'switchToRegister');
+
+  beforeEach(() => {
+    wrapper = shallowMount(Login);
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('has a form title called "Sign in"', () => {
+    const formTitle = wrapper.find('.form__title');
+    expect(formTitle.text()).toMatch('Sign in');
+  });
+
+  it('has a form with 2 input fields', () => {
+    const inputFields = wrapper.findAllComponents(InputField);
+    const forms = wrapper.findAll('form');
+    expect(inputFields.length).toEqual(2);
+    expect(forms.length).toEqual(1);
+  });
+
+  it('has a meta button that shows the register page', () => {
+    const button = wrapper.find('button.btn-link');
+    expect(button.exists()).toBe(true);
+    expect(button.text()).toBe('Create account');
+  });
+
+  it('changes page state when button is clicked', async () => {
+    const button = wrapper.find('button.btn-link');
+    await button.trigger('click');
+    expect(switchToRegister).toHaveBeenCalled();
+  });
+});

tests/unit/Register.spec.js

@@ -0,0 +1,40 @@
+import { shallowMount } from '@vue/test-utils';
+import Register from '@/components/Register.vue';
+import InputField from '@/components/InputField.vue';
+
+describe('Register View', () => {
+  let wrapper;
+  const switchToLogin = jest.spyOn(Register.methods, 'switchToLogin');
+
+  beforeEach(() => {
+    wrapper = shallowMount(Register);
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('has a form title called "Create Account"', () => {
+    const formTitle = wrapper.find('.form__title');
+    expect(formTitle.text()).toMatch('Create Account');
+  });
+
+  it('has a form with 3 input fields', () => {
+    const inputFields = wrapper.findAllComponents(InputField);
+    const forms = wrapper.findAll('form');
+    expect(forms.length).toEqual(1);
+    expect(inputFields.length).toEqual(3);
+  });
+
+  it('has a meta button that shows the login page', () => {
+    const button = wrapper.find('button.btn-link');
+    expect(button.exists()).toBe(true);
+    expect(button.text()).toBe('Already have an account?');
+  });
+
+  it('changes page state when button is clicked', async () => {
+    const button = wrapper.find('button.btn-link');
+    await button.trigger('click');
+    expect(switchToLogin).toHaveBeenCalled();
+  });
+});