Test Header
', + body: 'Test Body
', + aside: 'Test Aside
', + footer: 'Test Footer
' + } + }) + }) + + test('must create a section', () => { + expect(wrapper.find('section').exists()).toBe(true) + }) + + test("must have a props 'isArticle' with 'false' as value", () => { + expect(wrapper.props('isArticle')).toBe(false) + }) + + test("must have a props 'id' with 'Test Id' as value", () => { + expect(wrapper.props('id')).toBe('Test Id') + expect(wrapper.find('section').attributes('id')).toBe('Test Id') + }) + + test("must have a slot header with 'Test Header' as content", () => { + expect(wrapper.find('header').exists()).toBe(true) + expect(wrapper.find('header').text()).toBe('Test Header') + }) + + test("must have a slot body with 'Test Body' as content", () => { + expect(wrapper.find('p').exists()).toBe(true) + expect(wrapper.find('p').text()).toBe('Test Body') + }) + + test("must have a slot aside with 'Test Aside' as content", () => { + expect(wrapper.find('aside').exists()).toBe(true) + expect(wrapper.find('aside').text()).toBe('Test Aside') + }) + + test("must have a slot footer with 'Test Footer' as content", () => { + expect(wrapper.find('footer').exists()).toBe(true) + expect(wrapper.find('footer').text()).toBe('Test Footer') + }) + + test("must have a props 'class' with 'Card Test' as value", () => { + expect(wrapper.find('section').attributes('class')).toBe('Test Class') + }) +}) + +/** + * ! ARTICLE + * @vi-environment jsdom + */ +describe('CardElt as an article', () => { + beforeEach(() => { + wrapper = mount(CardElt, { + props: { + isArticle: true + } + }) + }) + + test('must create a article', () => { + expect(wrapper.find('article').exists()).toBe(true) + }) + + test('must create a header', () => { + expect(wrapper.find('header').exists()).toBe(true) + }) + + test('must not create an aside', () => { + expect(wrapper.find('aside').exists()).toBe(false) + }) + + test('must not create a footer', () => { + expect(wrapper.find('footer').exists()).toBe(false) + }) + + test("must have a props 'isArticle' with 'true' as value", () => { + expect(wrapper.props('isArticle')).toBe(true) + }) +}) + +/** + * ! ARTICLE WITH SLOTS + * @vi-environment jsdom + */ +describe('CardElt as an article with slots', () => { + beforeEach(() => { + wrapper = mount(CardElt, { + props: { + isArticle: true, + class: 'Test Class', + id: 'Test Id' + }, + slots: { + header: 'Test Header
', + body: 'Test Body
', + aside: 'Test Aside
', + footer: 'Test Footer
' + } + }) + }) + + test('must create an article', () => { + expect(wrapper.find('article').exists()).toBe(true) + }) + + test("must have a props 'isArticle' with 'true' as value", () => { + expect(wrapper.props('isArticle')).toBe(true) + }) + + test("must have a props 'id' with 'Test Id' as value", () => { + expect(wrapper.props('id')).toBe('Test Id') + expect(wrapper.find('article').attributes('id')).toBe('Test Id') + }) + + test("must have a slot header with 'Test Header' as content", () => { + expect(wrapper.find('header').exists()).toBe(true) + expect(wrapper.find('header').text()).toBe('Test Header') + }) + + test("must have a slot body with 'Test Body' as content", () => { + expect(wrapper.find('p').exists()).toBe(true) + expect(wrapper.find('p').text()).toBe('Test Body') + }) + + test("must have a slot aside with 'Test Aside' as content", () => { + expect(wrapper.find('aside').exists()).toBe(true) + expect(wrapper.find('aside').text()).toBe('Test Aside') + }) + + test("must have a slot footer with 'Test Footer' as content", () => { + expect(wrapper.find('footer').exists()).toBe(true) + expect(wrapper.find('footer').text()).toBe('Test Footer') + }) + + test("must have a props 'class' with 'Card Test' as value", () => { + expect(wrapper.find('article').attributes('class')).toBe('Test Class') + }) +}) diff --git a/src/__tests__/components/FieldElt.spe.ts b/src/__tests__/components/FieldElt.spe.ts new file mode 100644 index 00000000..ac4b8620 --- /dev/null +++ b/src/__tests__/components/FieldElt.spe.ts @@ -0,0 +1,401 @@ +import { afterEach, beforeEach, describe, expect, test } from 'vitest' +import { mount, enableAutoUnmount } from '@vue/test-utils' +import FieldElt from '../../components/FieldElt.vue' + +let wrapper + +enableAutoUnmount(afterEach) + +/** + * ! DEFAULT INPUT TEXT + * @vi-environment jsdom + */ +describe('Default FieldElt', () => { + beforeEach(() => { + wrapper = mount(FieldElt) + }) + + test('must create an input type text', () => { + expect(wrapper.find("input[type='text']").exists()).toBe(true) + }) + + test("must have a props 'type' with 'String as type & 'text' as default value", () => { + expect(typeof wrapper.props('type')).toBe('string') + expect(wrapper.props('type')).toBe('text') + }) + + test("must have a props 'min' with 'Number' as type & '2' as default value", () => { + expect(typeof wrapper.props('min')).toBe('number') + expect(wrapper.props('min')).toBe(2) + }) + + test("must have a props 'max' with 'Number' as type & '50' as default value", () => { + expect(typeof wrapper.props('max')).toBe('number') + expect(wrapper.props('max')).toBe(250) + }) + + test("must have a props 'cols' with 'Number' as type & '20' as default value", () => { + expect(typeof wrapper.props('cols')).toBe('number') + expect(wrapper.props('cols')).toBe(20) + }) + + test("must have a props 'rows' with 'Number' as type & '5' as default value", () => { + expect(typeof wrapper.props('rows')).toBe('number') + expect(wrapper.props('rows')).toBe(5) + }) + + test("must have a props 'required' with 'String' as type & 'required' as default value", () => { + expect(typeof wrapper.props('required')).toBe('string') + expect(wrapper.props('required')).toBe('true') + }) +}) + +/** + * ! TEXTAREA + * @vi-environment jsdom + */ +describe('FieldElt as a textarea', () => { + beforeEach(() => { + wrapper = mount(FieldElt, { + props: { + type: 'textarea', + min: 10, + max: 100, + cols: 10, + rows: 10 + }, + slots: { + label: 'Test Label' + } + }) + }) + + test('must create a textarea', () => { + expect(wrapper.find('textarea').exists()).toBe(true) + }) + + test("must have a props 'type' with 'String' as type & 'textarea' as value", () => { + expect(typeof wrapper.props('type')).toBe('string') + expect(wrapper.props('type')).toBe('textarea') + }) + + test("must have a props 'min' with 'Number' as type & '10' as value", () => { + expect(typeof wrapper.props('min')).toBe('number') + expect(wrapper.props('min')).toBe(10) + }) + + test("must have a props 'max' with 'Number' as type & '100' as value", () => { + expect(typeof wrapper.props('max')).toBe('number') + expect(wrapper.props('max')).toBe(100) + }) + + test("must have a props 'cols' with 'Number' as type & '10' as value", () => { + expect(typeof wrapper.props('cols')).toBe('number') + expect(wrapper.props('cols')).toBe(10) + }) + + test("must have a props 'rows' with 'Number' as type & '10' as value", () => { + expect(typeof wrapper.props('rows')).toBe('number') + expect(wrapper.props('rows')).toBe(10) + }) + + test("must have a slot 'label' with 'Test Label' as value", () => { + expect(wrapper.find('label').text()).toBe('Test Label') + }) +}) + +/** + * ! NUMBER + * @vi-environment jsdom + */ +describe('FieldElt as a number', () => { + beforeEach(() => { + wrapper = mount(FieldElt, { + props: { + type: 'number', + id: 'Test Id', + name: 'Test Name', + min: 0, + max: 100, + itemprop: 'Test Itemprop' + } + }) + }) + + test('must create an input type number', () => { + expect(wrapper.find("input[type='number']").exists()).toBe(true) + }) + + test("must have a props & an attrs 'type' with 'String' as type & 'number' as value", () => { + expect(typeof wrapper.props('type')).toBe('string') + expect(wrapper.props('type')).toBe('number') + expect(wrapper.find("input[type='number']").attributes('type')).toBe('number') + }) + + test("must have a props & an attrs 'id' with 'String' as type & 'Test Id' as value", () => { + expect(typeof wrapper.props('id')).toBe('string') + expect(wrapper.props('id')).toBe('Test Id') + expect(wrapper.find("input[type='number']").attributes('id')).toBe('Test Id') + }) + + test("must have a props & an attrs 'name' with 'String' as type & 'Test Name' as value", () => { + expect(typeof wrapper.props('name')).toBe('string') + expect(wrapper.props('name')).toBe('Test Name') + expect(wrapper.find("input[type='number']").attributes('name')).toBe('Test Name') + }) + + test("must have a props & an attrs 'min' with 'Number' as type & '0' as value", () => { + expect(typeof wrapper.props('min')).toBe('number') + expect(wrapper.props('min')).toBe(0) + expect(wrapper.find("input[type='number']").attributes('min')).toBe('0') + }) + + test("must have a props & an attrs 'max' with 'Number' as type & '100' as value", () => { + expect(typeof wrapper.props('max')).toBe('number') + expect(wrapper.props('max')).toBe(100) + expect(wrapper.find("input[type='number']").attributes('max')).toBe('100') + }) + + test("must have a props & an attrs 'itemprop' with 'String' as type & 'Test Itemprop' as value", () => { + expect(typeof wrapper.props('itemprop')).toBe('string') + expect(wrapper.props('itemprop')).toBe('Test Itemprop') + expect(wrapper.find("input[type='number']").attributes('itemprop')).toBe('Test Itemprop') + }) +}) + +/** + * ! SELECT + * @vi-environment jsdom + */ +describe('FieldElt as a select', () => { + beforeEach(() => { + wrapper = mount(FieldElt, { + props: { + type: 'select', + id: 'Test Id', + name: 'Test Name', + info: 'Test Info', + itemprop: 'Test Itemprop', + value: 'Test Value', + list: ['Test'] + } + }) + }) + + test('must create a select', () => { + expect(wrapper.find('select').exists()).toBe(true) + }) + + test("must have a props 'type' with 'String' as type & 'select' as value", () => { + expect(typeof wrapper.props('type')).toBe('string') + expect(wrapper.props('type')).toBe('select') + }) + + test("must have a props 'id' with 'String' as type & 'Test Id' as value", () => { + expect(typeof wrapper.props('id')).toBe('string') + expect(wrapper.props('id')).toBe('Test Id') + }) + + test("must have a props 'name' with 'String' as type & 'Test Name' as value", () => { + expect(typeof wrapper.props('name')).toBe('string') + expect(wrapper.props('name')).toBe('Test Name') + }) + + test("must have a props 'info' with 'String' as type & 'Test Info' as value", () => { + expect(typeof wrapper.props('info')).toBe('string') + expect(wrapper.props('info')).toBe('Test Info') + }) + + test("must have a props 'itemprop' with 'String' as type & 'Test Itemprop' as value", () => { + expect(typeof wrapper.props('itemprop')).toBe('string') + expect(wrapper.props('itemprop')).toBe('Test Itemprop') + }) + + test("must have a props 'value' with 'String' as type & 'Test Value' as value", () => { + expect(typeof wrapper.props('value')).toBe('string') + expect(wrapper.props('value')).toBe('Test Value') + }) + + test("must have a props 'list' with 'Array' as type & ['Test'] as value", () => { + expect(typeof wrapper.props('list')).toBe('object') + expect(wrapper.props('list')).toEqual(['Test']) + }) +}) + +/** + * ! SELECT WITH ARRAY OF OBJECTS + * @vi-environment jsdom + */ +describe('FieldElt as a select with an array of objects as the list', () => { + beforeEach(() => { + wrapper = mount(FieldElt, { + props: { + type: 'select', + list: [ + { + value: 'Test Value', + content: 'Test Content' + } + ], + info: 'Test Info', + value: 'Test Value', + content: 'Test Content' + } + }) + }) + + test('must create a select', () => { + expect(wrapper.find('select').exists()).toBe(true) + }) + + test("must have a props 'type' with 'String' as type & 'select' as value", () => { + expect(typeof wrapper.props('type')).toBe('string') + expect(wrapper.props('type')).toBe('select') + }) + + test("must have a props 'list' with 'Array' as type & '[{ value: `Test Value`, content: `Test Content` }]' as value", () => { + expect(typeof wrapper.props('list')).toBe('object') + expect(wrapper.props('list')).toEqual([{ value: `Test Value`, content: `Test Content` }]) + }) + + test("must have a props 'info' with 'String' as type & 'Test Info' as value", () => { + expect(typeof wrapper.props('info')).toBe('string') + expect(wrapper.props('info')).toBe('Test Info') + }) + + test("must have a props & attrs 'value' with 'String' as type & 'Test Value' as value", () => { + expect(typeof wrapper.props('value')).toBe('string') + expect(wrapper.props('value')).toBe('Test Value') + expect(wrapper.find('option').attributes('value')).toBe('Test Value') + }) + + test("must have a props & textContent 'content' with 'String' as type & 'Test Content' as value", () => { + expect(typeof wrapper.props('content')).toBe('string') + expect(wrapper.props('content')).toBe('Test Content') + expect(wrapper.find('option').text()).toBe('Test Content') + }) +}) + +/** + * ! CHECKBOX + * @vi-environment jsdom + */ +describe('FieldElt as a checkbox', () => { + beforeEach(() => { + wrapper = mount(FieldElt, { + props: { + type: 'checkbox' + } + }) + }) + + test('must create an input type checkbox', () => { + expect(wrapper.find("input[type='checkbox']").exists()).toBe(true) + }) + + test("must have a props 'type' with 'String' as type & 'checkbox' as value", () => { + expect(typeof wrapper.props('type')).toBe('string') + expect(wrapper.props('type')).toBe('checkbox') + }) +}) + +/** + * ! GET FIELD TYPE + * @vi-environment jsdom + */ +describe('getFieldType()', () => { + test("must return 'number' if props 'type' is 'number'", () => { + wrapper = mount(FieldElt, { + props: { + type: 'number' + } + }) + expect(wrapper.vm.getFieldType()).toBe('number') + }) + + test("must return 'number' if props 'type' is 'date'", () => { + wrapper = mount(FieldElt, { + props: { + type: 'date' + } + }) + expect(wrapper.vm.getFieldType()).toBe('number') + }) + + test("must return 'number' if props 'type' is 'time'", () => { + wrapper = mount(FieldElt, { + props: { + type: 'time' + } + }) + expect(wrapper.vm.getFieldType()).toBe('number') + }) + + test("must return 'number' if props 'type' is 'range'", () => { + wrapper = mount(FieldElt, { + props: { + type: 'range' + } + }) + expect(wrapper.vm.getFieldType()).toBe('number') + }) + + test("must return 'special' if props 'type' is 'checkbox'", () => { + wrapper = mount(FieldElt, { + props: { + type: 'checkbox' + } + }) + expect(wrapper.vm.getFieldType()).toBe('special') + }) + + test("must return 'special' if props 'type' is 'radio'", () => { + wrapper = mount(FieldElt, { + props: { + type: 'radio' + } + }) + expect(wrapper.vm.getFieldType()).toBe('special') + }) + + test("must return 'special' if props 'type' is 'color'", () => { + wrapper = mount(FieldElt, { + props: { + type: 'color' + } + }) + expect(wrapper.vm.getFieldType()).toBe('special') + }) + + test("must return 'list' if props 'type' is 'option'", () => { + wrapper = mount(FieldElt, { + props: { + type: 'option' + } + }) + expect(wrapper.vm.getFieldType()).toBe('list') + }) + + test("must return 'list' if props 'type' is 'select'", () => { + wrapper = mount(FieldElt, { + props: { + type: 'select' + } + }) + expect(wrapper.vm.getFieldType()).toBe('list') + }) + + test("must return 'area' if props 'type' is 'textarea'", () => { + wrapper = mount(FieldElt, { + props: { + type: 'textarea' + } + }) + expect(wrapper.vm.getFieldType()).toBe('area') + }) + + test("must return 'text' if props 'type' is not provided", () => { + wrapper = mount(FieldElt) + expect(wrapper.vm.getFieldType()).toBe('text') + }) +}) diff --git a/src/__tests__/components/FootElt.spec.ts b/src/__tests__/components/FootElt.spec.ts new file mode 100644 index 00000000..3ceedf8e --- /dev/null +++ b/src/__tests__/components/FootElt.spec.ts @@ -0,0 +1,122 @@ +import { afterEach, beforeEach, describe, expect, test } from 'vitest' +import { enableAutoUnmount, mount } from '@vue/test-utils' +import FootElt from '../../components/FootElt.vue' + +let wrapper + +enableAutoUnmount(afterEach) + +/** + * ! DEFAULT FOOTER + * @vi-environment jsdom + */ +describe('Default FootElt', () => { + beforeEach(() => { + wrapper = mount(FootElt) + }) + + test('must create a footer', () => { + expect(wrapper.find('footer').exists()).toBe(true) + }) + + test("must have a props 'title1' with 'String' as type & '' as default value", () => { + expect(typeof wrapper.props('title1')).toBe('string') + expect(wrapper.props('title1')).toBe('') + }) + + test("must have a props 'title2' with 'String' as type & '' as default value", () => { + expect(typeof wrapper.props('title2')).toBe('string') + expect(wrapper.props('title2')).toBe('') + }) + + test("must have a props 'title3' with 'String' as type & '' as default value", () => { + expect(typeof wrapper.props('title3')).toBe('string') + expect(wrapper.props('title3')).toBe('') + }) + + test('must not have a list', () => { + expect(wrapper.find('ul').exists()).toBe(false) + }) + + test('must not have any list item', () => { + expect(wrapper.find('li').exists()).toBe(false) + }) + + test('must not have an aside', () => { + expect(wrapper.find('aside').exists()).toBe(false) + }) + + test('must return false if no slot exists', () => { + expect(wrapper.vm.hasSlot('foot1')).toBe(false) + expect(wrapper.vm.hasSlot('foot2')).toBe(false) + expect(wrapper.vm.hasSlot('foot3')).toBe(false) + expect(wrapper.vm.hasSlot('foot')).toBe(false) + }) + + test("must return false if the test slot doesn't exist", () => { + expect(wrapper.vm.hasSlot('test')).toBe(false) + }) +}) + +/** + * ! FOOTER WITH SLOTS + * @vi-environment jsdom + */ +describe('FootElt with slots', () => { + beforeEach(() => { + wrapper = mount(FootElt, { + props: { + title1: 'Test Title 1', + title2: 'Test Title 2', + title3: 'Test Title 3' + }, + slots: { + foot1: 'Test List 1
', + foot2: 'Test List 2
', + foot3: 'Test List 3
', + foot: 'Test Aside
' + } + }) + }) + + test('must create a footer', () => { + expect(wrapper.find('footer').exists()).toBe(true) + }) + + test("must have a props 'title1' with 'Test Title 1' as value", () => { + expect(wrapper.props('title1')).toBe('Test Title 1') + }) + + test("must have a props 'title2' with 'Test Title 2' as value", () => { + expect(wrapper.props('title2')).toBe('Test Title 2') + }) + + test("must have a props 'title3' with 'Test Title 3' as value", () => { + expect(wrapper.props('title3')).toBe('Test Title 3') + }) + + test('must have a list', () => { + expect(wrapper.find('ul').exists()).toBe(true) + }) + + test('must have 3 list items', () => { + expect(wrapper.find('li').exists()).toBe(true) + expect(wrapper.findAll('li').length).toBe(3) + }) + + test("must have an aside with 'Test Aside' as content", () => { + expect(wrapper.find('aside').exists()).toBe(true) + expect(wrapper.find('aside').text()).toBe('Test Aside') + }) + + test('must return true if all slots exist', () => { + expect(wrapper.vm.hasSlot('foot1')).toBe(true) + expect(wrapper.vm.hasSlot('foot2')).toBe(true) + expect(wrapper.vm.hasSlot('foot3')).toBe(true) + expect(wrapper.vm.hasSlot('foot')).toBe(true) + }) + + test("must return false if the test slot doesn't exist", () => { + expect(wrapper.vm.hasSlot('test')).toBe(false) + }) +}) diff --git a/src/__tests__/components/GallerySet.spec.ts b/src/__tests__/components/GallerySet.spec.ts new file mode 100644 index 00000000..0e220a97 --- /dev/null +++ b/src/__tests__/components/GallerySet.spec.ts @@ -0,0 +1,57 @@ +import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest' +import { shallowMount, enableAutoUnmount } from '@vue/test-utils' +import GallerySet from '../../components/GallerySet.vue' + +let wrapper + +vi.mock('axios') + +beforeEach(() => { + wrapper = shallowMount(GallerySet, { + props: { + val: { + TEST: 'test' + }, + galleries: [ + { + name: 'Gallery name', + author: 'Gallery author' + } + ] + } + }) +}) + +enableAutoUnmount(afterEach) + +/** + * @vi-environment jsdom + */ +describe('GallerySet', () => { + test('wrapper', () => { + expect(wrapper.exists()).toBe(true) + }) + + test('components', () => { + expect(typeof wrapper.findComponent({ name: 'BtnElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'CardElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'FieldElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'TableElt' })).toBe('object') + }) + + test('props', () => { + expect(wrapper.props('val')).toStrictEqual({ TEST: 'test' }) + expect(wrapper.props('galleries')).toStrictEqual([ + { + name: 'Gallery name', + author: 'Gallery author' + } + ]) + }) + + test('methods', () => { + expect(typeof wrapper.vm.createGallery).toBe('function') + expect(typeof wrapper.vm.updateGallery).toBe('function') + expect(typeof wrapper.vm.deleteGallery).toBe('function') + }) +}) diff --git a/src/__tests__/components/ImageSet.spec.ts b/src/__tests__/components/ImageSet.spec.ts new file mode 100644 index 00000000..df65bd28 --- /dev/null +++ b/src/__tests__/components/ImageSet.spec.ts @@ -0,0 +1,72 @@ +import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest' +import { shallowMount, enableAutoUnmount } from '@vue/test-utils' +import ImageSet from '../../components/ImageSet.vue' + +let wrapper + +vi.mock('axios') + +beforeEach(() => { + wrapper = shallowMount(ImageSet, { + props: { + val: { + TEST: 'test' + }, + galleries: [ + { + name: 'Gallery name', + author: 'Gallery author' + } + ], + images: [ + { + name: 'Image name', + description: 'Image description', + gallery: 'Gallery name' + } + ] + } + }) +}) + +enableAutoUnmount(afterEach) + +/** + * @vi-environment jsdom + */ +describe('ImageSet', () => { + test('wrapper', () => { + expect(wrapper.exists()).toBe(true) + }) + + test('components', () => { + expect(typeof wrapper.findComponent({ name: 'BtnElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'CardElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'FieldElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'MediaElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'TableElt' })).toBe('object') + }) + + test('props', () => { + expect(wrapper.props('val')).toStrictEqual({ TEST: 'test' }) + expect(wrapper.props('galleries')).toStrictEqual([ + { + name: 'Gallery name', + author: 'Gallery author' + } + ]) + expect(wrapper.props('images')).toStrictEqual([ + { + name: 'Image name', + description: 'Image description', + gallery: 'Gallery name' + } + ]) + }) + + test('methods', () => { + expect(typeof wrapper.vm.createImage).toBe('function') + expect(typeof wrapper.vm.updateImage).toBe('function') + expect(typeof wrapper.vm.deleteImage).toBe('function') + }) +}) diff --git a/src/__tests__/components/LinkSet.spec.ts b/src/__tests__/components/LinkSet.spec.ts new file mode 100644 index 00000000..9bad854a --- /dev/null +++ b/src/__tests__/components/LinkSet.spec.ts @@ -0,0 +1,104 @@ +import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest' +import { shallowMount, enableAutoUnmount } from '@vue/test-utils' +import * as services from '../../assets/services' +import LinkSet from '../../components/LinkSet.vue' + +let wrapper + +vi.mock('axios') + +beforeEach(() => { + vi.spyOn(services, 'deleteData').mockImplementation(() => {}) + vi.spyOn(services, 'putData').mockImplementation(() => {}) + vi.spyOn(services, 'checkRange').mockImplementation(() => {}) + vi.spyOn(services, 'checkRegex').mockImplementation(() => {}) + vi.spyOn(services, 'getItemName').mockImplementation(() => {}) + vi.spyOn(services, 'getItemsByCat').mockImplementation(() => {}) + vi.spyOn(services, 'setError').mockImplementation(() => {}) + + wrapper = shallowMount(LinkSet, { + props: { + val: { + CHECK_STRING: 'Check String', + REGEX_URL: /your-regex-pattern/, + CHECK_URL: 'Check URL', + ALERT_UPDATED: ' updated' + }, + links: [ + { + name: 'Link Name 1', + url: 'Link Url 1', + cat: 'Link Cat 1' + }, + { + name: 'Link Name 2', + url: 'Link Url 2', + cat: 'Link Cat 2' + } + ] + } + }) +}) + +enableAutoUnmount(afterEach) + +/** + * @vi-environment jsdom + */ +describe('LinkSet', () => { + test('wrapper', () => { + expect(wrapper.exists()).toBe(true) + }) + + test('components', () => { + expect(typeof wrapper.findComponent({ name: 'BtnElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'CardElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'FieldElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'TableElt' })).toBe('object') + }) + + test('props', () => { + expect(wrapper.props('val')).toStrictEqual({ + CHECK_STRING: 'Check String', + REGEX_URL: /your-regex-pattern/, + CHECK_URL: 'Check URL', + ALERT_UPDATED: ' updated' + }) + expect(wrapper.props('links')).toStrictEqual([ + { + name: 'Link Name 1', + url: 'Link Url 1', + cat: 'Link Cat 1' + }, + { + name: 'Link Name 2', + url: 'Link Url 2', + cat: 'Link Cat 2' + } + ]) + }) + + test('methods', () => { + expect(typeof wrapper.vm.getItemsByCategory).toBe('function') + expect(typeof wrapper.vm.createLink).toBe('function') + expect(typeof wrapper.vm.updateLink).toBe('function') + expect(typeof wrapper.vm.deleteLink).toBe('function') + }) + + test('getItemsByCategory()', () => { + wrapper.vm.getItemsByCategory([ + { + name: 'Link Name 1', + url: 'Link Url 1', + cat: 'Link Cat 1' + }, + { + name: 'Link Name 2', + url: 'Link Url 2', + cat: 'Link Cat 2' + } + ]) + expect(services.getItemsByCat).toHaveBeenCalledTimes(1) + expect(services.getItemsByCat).toHaveReturned() + }) +}) diff --git a/src/__tests__/components/ListElt.spec.ts b/src/__tests__/components/ListElt.spec.ts new file mode 100644 index 00000000..97731e9e --- /dev/null +++ b/src/__tests__/components/ListElt.spec.ts @@ -0,0 +1,208 @@ +import { afterEach, beforeEach, describe, expect, test } from 'vitest' +import { enableAutoUnmount, mount } from '@vue/test-utils' +import ListElt from '../../components/ListElt.vue' + +let wrapper + +enableAutoUnmount(afterEach) + +/** + * ! DEFAULT LIST + * @vi-environment jsdom + */ +describe('Default ListElt', () => { + beforeEach(() => { + wrapper = mount(ListElt, { + props: { + items: [ + { id: 1, name: 'Item 1' }, + { id: 2, name: 'Item 2' }, + { id: 3, name: 'Item 3' } + ] + } + }) + }) + + test('must create an ul element', () => { + expect(wrapper.find('ul').exists()).toBe(true) + }) + + test('must create a li element for each item', () => { + expect(wrapper.findAll('li').length).toBe(3) + }) + + test("must have a props 'items' with 'Object' as type", () => { + expect(typeof wrapper.props('items')).toBe('object') + }) + + test("must have a props 'items' with 'Item 1' as name of first item", () => { + expect(wrapper.props('items')[0].name).toBe('Item 1') + }) + + test("must have a props 'items' with 'Item 2' as name of second item", () => { + expect(wrapper.props('items')[1].name).toBe('Item 2') + }) + + test("must have a props 'items' with 'Item 3' as name of third item", () => { + expect(wrapper.props('items')[2].name).toBe('Item 3') + }) + + test("must have a props 'dynamic' with 'Boolean' as type & 'false' as default value", () => { + expect(typeof wrapper.props('dynamic')).toBe('boolean') + expect(wrapper.props('dynamic')).toBe(false) + }) +}) + +/** + * ! DYNAMIC LIST + * @vi-environment jsdom + */ +describe('Dynamic ListElt', () => { + const wrapper = mount(ListElt, { + props: { + items: [ + { id: 1, name: 'Item 1' }, + { id: 2, name: 'Item 2' }, + { id: 3, name: 'Item 3' } + ], + dynamic: true + } + }) + + test('must create an ul element', () => { + expect(wrapper.find('ul').exists()).toBe(true) + }) + + test('must create a li element for each item', () => { + expect(wrapper.findAll('li').length).toBe(3) + }) + + test("must have a props 'items' with 'Object' as type", () => { + expect(typeof wrapper.props('items')).toBe('object') + }) + + test("must have a props 'items' with 'Item 1' as name of first item", () => { + expect(wrapper.props('items')[0].name).toBe('Item 1') + }) + + test("must have a props 'items' with 'Item 2' as name of second item", () => { + expect(wrapper.props('items')[1].name).toBe('Item 2') + }) + + test("must have a props 'items' with 'Item 3' as name of third item", () => { + expect(wrapper.props('items')[2].name).toBe('Item 3') + }) + + test("must have a props 'dynamic' with 'Boolean' as type & 'true' as value", () => { + expect(typeof wrapper.props('dynamic')).toBe('boolean') + expect(wrapper.props('dynamic')).toBe(true) + }) +}) + +/** + * ! NESTED LIST + * @vi-environment jsdom + */ +describe('Nested ListElt', () => { + beforeEach(() => { + wrapper = mount(ListElt, { + props: { + items: [ + { + id: 1, + name: 'Item 1', + children: [ + { id: 2, name: 'Item 2' }, + { id: 3, name: 'Item 3' } + ] + } + ] + }, + slots: { + nested: 'Test Nested' + } + }) + }) + + test('must create an ul element', () => { + expect(wrapper.find('ul').exists()).toBe(true) + }) + + test('must create a li element for each item', () => { + expect(wrapper.findAll('li').length).toBe(4) + }) + + test("must have a props 'items' with 'Object' as type", () => { + expect(typeof wrapper.props('items')).toBe('object') + }) + + test("must have a props 'items' with 'Item 1' as name of first item", () => { + expect(wrapper.props('items')[0].name).toBe('Item 1') + }) + + test("must have a props 'items' with 'Item 2' as name of second item", () => { + expect(wrapper.props('items')[0].children[0].name).toBe('Item 2') + }) + + test("must have a props 'items' with 'Item 3' as name of third item", () => { + expect(wrapper.props('items')[0].children[1].name).toBe('Item 3') + }) + + test("must have a props 'dynamic' with 'Boolean' as type & 'false' as default value", () => { + expect(typeof wrapper.props('dynamic')).toBe('boolean') + expect(wrapper.props('dynamic')).toBe(false) + }) +}) + +/** + * ! DYNAMIC NESTED LIST + * @vi-environment jsdom + */ +describe('Dynamic Nested ListElt', () => { + const wrapper = mount(ListElt, { + props: { + items: [ + { + id: 1, + name: 'Item 1', + children: [ + { id: 2, name: 'Item 2' }, + { id: 3, name: 'Item 3' } + ] + } + ], + dynamic: true + }, + slots: { + nested: 'Test Nested' + } + }) + + test('must create an ul element', () => { + expect(wrapper.find('ul').exists()).toBe(true) + }) + + test('must create a li element for each item', () => { + expect(wrapper.findAll('li').length).toBe(4) + }) + test("must have a props 'items' with 'Object' as type", () => { + expect(typeof wrapper.props('items')).toBe('object') + }) + + test("must have a props 'items' with 'Item 1' as name of first item", () => { + expect(wrapper.props('items')[0].name).toBe('Item 1') + }) + + test("must have a props 'items' with 'Item 2' as name of second item", () => { + expect(wrapper.props('items')[0].children[0].name).toBe('Item 2') + }) + + test("must have a props 'items' with 'Item 3' as name of third item", () => { + expect(wrapper.props('items')[0].children[1].name).toBe('Item 3') + }) + + test("must have a props 'dynamic' with 'Boolean' as type & 'true' as value", () => { + expect(typeof wrapper.props('dynamic')).toBe('boolean') + expect(wrapper.props('dynamic')).toBe(true) + }) +}) diff --git a/src/__tests__/components/MediaElt.spec.ts b/src/__tests__/components/MediaElt.spec.ts new file mode 100644 index 00000000..e637b32c --- /dev/null +++ b/src/__tests__/components/MediaElt.spec.ts @@ -0,0 +1,187 @@ +import { afterEach, beforeEach, describe, expect, test } from 'vitest' +import { enableAutoUnmount, mount } from '@vue/test-utils' +import MediaElt from '../../components/MediaElt.vue' + +let wrapper + +enableAutoUnmount(afterEach) + +/** + * ! DEFAULT AS IMG + * @vi-environment jsdom + */ +describe('Default MediaElt as an image', () => { + beforeEach(() => { + wrapper = mount(MediaElt) + }) + + test('must create an img', () => { + expect(wrapper.find('img').exists()).toBe(true) + }) + + test("must have a props 'type' with 'img' as default value", () => { + expect(wrapper.props('type')).toBe('img') + }) + + test("must have a props 'width' with '300' as default value", () => { + expect(wrapper.props('width')).toBe(300) + }) + + test("must have a props 'loop' with 'false' as default value", () => { + expect(wrapper.props('loop')).toBe(false) + }) + + test('must not have a figcaption', () => { + expect(wrapper.find('figcaption').exists()).toBe(false) + }) +}) + +/** + * ! AUDIO + * @vi-environment jsdom + */ +describe('MediaElt as an audio with slots', () => { + beforeEach(() => { + wrapper = mount(MediaElt, { + props: { + type: 'audio', + loop: true + }, + slots: { + figcaption: 'Test Figcaption' + } + }) + }) + + test('must create an audio', () => { + expect(wrapper.find('audio').exists()).toBe(true) + }) + + test("must have a props 'type' with 'audio' as value", () => { + expect(wrapper.props('type')).toBe('audio') + }) + + test("must have a props 'loop' with 'true' as value", () => { + expect(wrapper.props('loop')).toBe(true) + }) + + test("must have a slot figcaption with 'Test Figcaption' as value", () => { + expect(wrapper.find('figcaption').exists()).toBe(true) + expect(wrapper.vm.hasSlot('figcaption')).toBe(true) + expect(wrapper.find('figcaption').text()).toBe('Test Figcaption') + }) +}) + +/** + * ! BLOCKQUOTE + * @vi-environment jsdom + */ +describe('MediaElt as a blockquote with slots', () => { + beforeEach(() => { + wrapper = mount(MediaElt, { + props: { + type: 'quote' + }, + slots: { + figcaption: 'Test Figcaption' + } + }) + }) + + test('must create a blockquote', () => { + expect(wrapper.find('blockquote').exists()).toBe(true) + }) + + test("must have a props 'type' with 'quote' as value", () => { + expect(wrapper.props('type')).toBe('quote') + }) + + test("must have a props 'loop' with 'false' as value", () => { + expect(wrapper.props('loop')).toBe(false) + }) + + test('must have a slot figcaption', () => { + expect(wrapper.find('figcaption').exists()).toBe(true) + }) +}) + +/** + * ! PICTURE + * @vi-environment jsdom + */ +describe('MediaElt as a picture with slots', () => { + beforeEach(() => { + wrapper = mount(MediaElt, { + props: { + type: 'picture' + }, + slots: { + figcaption: 'Test Figcaption' + } + }) + }) + + test('must create a picture', () => { + expect(wrapper.find('picture').exists()).toBe(true) + }) + + test("must have a props 'type' with 'picture' as value", () => { + expect(wrapper.props('type')).toBe('picture') + }) + + test("must have a props 'loop' with 'false' as value", () => { + expect(wrapper.props('loop')).toBe(false) + }) + + test("must have a slot figcaption with 'Test Figcaption' as value", () => { + expect(wrapper.find('figcaption').exists()).toBe(true) + expect(wrapper.vm.hasSlot('figcaption')).toBe(true) + expect(wrapper.find('figcaption').text()).toBe('Test Figcaption') + }) +}) + +/** + * ! VIDEO + * @vi-environment jsdom + */ +describe('MediaElt as a video with slots', () => { + beforeEach(() => { + wrapper = mount(MediaElt, { + props: { + type: 'video', + width: 500, + loop: false + }, + slots: { + figcaption: 'Test Figcaption' + } + }) + }) + + test('must create a video', () => { + expect(wrapper.find('video').exists()).toBe(true) + }) + + test("must have a props 'type' with 'video' as value", () => { + expect(wrapper.props('type')).toBe('video') + }) + + test("must have a props 'width' with '500' as value", () => { + expect(wrapper.props('width')).toBe(500) + expect(wrapper.find('video').attributes('width')).toBe('500') + }) + + test("must have a props 'loop' with 'true' as value", () => { + expect(wrapper.props('loop')).toBe(false) + }) + + test("must have a slot figcaption with 'Test Figcaption' as value", () => { + expect(wrapper.find('figcaption').exists()).toBe(true) + expect(wrapper.vm.hasSlot('figcaption')).toBe(true) + expect(wrapper.find('figcaption').text()).toBe('Test Figcaption') + }) + + test("must return false if the test slot doesn't exist", () => { + expect(wrapper.vm.hasSlot('test')).toBe(false) + }) +}) diff --git a/src/__tests__/components/NavElt.spec.ts b/src/__tests__/components/NavElt.spec.ts new file mode 100644 index 00000000..c5451594 --- /dev/null +++ b/src/__tests__/components/NavElt.spec.ts @@ -0,0 +1,187 @@ +import { afterEach, beforeEach, describe, expect, test } from 'vitest' +import { enableAutoUnmount, mount } from '@vue/test-utils' +import NavElt from '../../components/NavElt.vue' + +let wrapper + +enableAutoUnmount(afterEach) + +/** + * ! NAVBAR + * @vi-environment jsdom + */ +describe('Default NavElt', () => { + beforeEach(() => { + wrapper = mount(NavElt, { + slots: { + brand: 'Test Brand', + admin: 'Test Admin' + } + }) + }) + + test('must create a nav', () => { + expect(wrapper.find('nav').exists()).toBe(true) + }) + + test("must have a props 'class' with 'navbar' as default value", () => { + expect(wrapper.props('class')).toBe('navbar') + expect(wrapper.find('nav').attributes('class')).toBe('navbar') + }) + + test("must have a slot 'brand' with 'Test Brand' as value", () => { + expect(wrapper.find('a').text()).toBe('Test Brand') + }) + + test('must return true if the 2 slots exist', () => { + expect(wrapper.vm.hasSlot('brand')).toBe(true) + expect(wrapper.vm.hasSlot('admin')).toBe(true) + }) + + test("must return false if the test slot doesn't exist", () => { + expect(wrapper.vm.hasSlot('test')).toBe(false) + }) +}) + +/** + * ! SIDEBAR + * @vi-environment jsdom + */ +describe('NavElt as a sidebar', () => { + beforeEach(() => { + wrapper = mount(NavElt, { + props: { + class: 'sidebar' + }, + slots: { + hide: 'Test Hide', + first: 'Test First', + top: 'Test Top' + } + }) + }) + + test('must create a nav', () => { + expect(wrapper.find('nav').exists()).toBe(true) + }) + + test("must have a props 'class' with 'sidebar' as value", () => { + expect(wrapper.props('class')).toBe('sidebar') + expect(wrapper.find('nav').attributes('class')).toBe('sidebar') + }) + + test("must have a slot 'hide' with 'Test Hide' as value", () => { + expect(wrapper.find('button').text()).toBe('Test Hide') + }) + + test("must have a slot 'first' with 'Test First' as value", () => { + expect(wrapper.find('li').text()).toBe('Test First') + }) + + test("must have a slot 'top' with 'Test Top' as value", () => { + expect(wrapper.find('a').text()).toBe('Test Top') + expect(wrapper.find('a').attributes('href')).toBe('#top') + }) + + test('hasSlot("top") must return true', () => { + expect(wrapper.vm.hasSlot('top')).toBe(true) + }) + + test('must return true if the 3 slots exist', () => { + expect(wrapper.vm.hasSlot('hide')).toBe(true) + expect(wrapper.vm.hasSlot('first')).toBe(true) + expect(wrapper.vm.hasSlot('top')).toBe(true) + }) + + test("must return false if the test slot doesn't exist", () => { + expect(wrapper.vm.hasSlot('test')).toBe(false) + }) +}) + +/** + * ! GET NAV CLASS + * @vi-environment jsdom + */ +describe('getNavClass() method', () => { + beforeEach(() => { + wrapper = mount(NavElt) + }) + + test("must return 'navbar' if 'class' props is not provided", () => { + expect(wrapper.vm.getNavClass()).toBe('navbar') + }) + + test("must return 'navbar' if 'class' props is not 'sidebar'", () => { + wrapper.setProps({ class: 'test' }) + expect(wrapper.vm.getNavClass()).toBe('navbar') + }) + + test("must return 'sidebar' if 'class' props is 'sidebar'", () => { + wrapper = mount(NavElt, { + props: { + class: 'sidebar' + } + }) + expect(wrapper.vm.getNavClass()).toBe('sidebar') + }) +}) + +/** + * @vi-environment jsdom + */ +describe('NavElt', () => { + test('renders a navbar with brand and items when class prop is not set to "sidebar"', () => { + const items = [ + { name: 'Home', href: '/home', icon: 'home', type: 'fas' }, + { name: 'About', href: '/about', icon: 'info-circle', type: 'fas' } + ] + + const wrapper = mount(NavElt, { + propsData: { + items + }, + slots: { + brand: 'My Brand' + } + }) + + expect(wrapper.find('nav.navbar').exists()).toBe(true) + expect(wrapper.find('a[href="/"]').text()).toBe('My Brand') + expect(wrapper.findAll('ul li').length).toBe(2) + expect(wrapper.findAll('ul li').at(0).find('b').text()).toBe('Home') + expect(wrapper.findAll('ul li').at(1).find('b').text()).toBe('About') + }) + + test('renders a sidebar with items when class prop is set to "sidebar"', () => { + const items = ['Home', 'About'] + + const wrapper = mount(NavElt, { + propsData: { + class: 'sidebar', + items + } + }) + + expect(wrapper.find('nav.sidebar').exists()).toBe(true) + expect(wrapper.findAll('ul li').length).toBe(3) + expect(wrapper.findAll('ul li').at(0).text()).toBe('Home') + expect(wrapper.findAll('ul li').at(1).text()).toBe('About') + }) + + test('toggles the sidebar when the hide button is clicked', async () => { + const items = ['Home', 'About'] + + const wrapper = mount(NavElt, { + propsData: { + class: 'sidebar', + items + }, + slots: { + hide: 'Hide' + } + }) + + expect(wrapper.find('nav.sidebar #side.show').exists()).toBe(true) + expect(wrapper.find('nav.sidebar #side.hide').exists()).toBe(false) + }) +}) diff --git a/src/__tests__/components/OrderSet.spec.ts b/src/__tests__/components/OrderSet.spec.ts new file mode 100644 index 00000000..1a4164c0 --- /dev/null +++ b/src/__tests__/components/OrderSet.spec.ts @@ -0,0 +1,81 @@ +import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest' +import { shallowMount, enableAutoUnmount } from '@vue/test-utils' +import OrderSet from '../../components/OrderSet.vue' + +let wrapper + +vi.mock('axios') + +beforeEach(() => { + wrapper = shallowMount(OrderSet, { + props: { + val: { + TEST: 'test' + }, + orders: [ + { + products: [ + { + name: 'Product name', + price: 'Product price', + quantity: 'Product quantity' + } + ], + total: 'Order total', + payment: 'Order payment', + status: 'Order status' + } + ], + users: [ + { + name: 'User name', + email: 'User email', + image: 'User image', + password: 'User password', + role: 'User role' + } + ] + } + }) +}) + +enableAutoUnmount(afterEach) + +/** + * @vi-environment jsdom + */ +describe('OrderSet', () => { + test('wrapper', () => { + expect(wrapper.exists()).toBe(true) + }) + + test('components', () => { + expect(typeof wrapper.findComponent({ name: 'BtnElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'CardElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'FieldElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'TableElt' })).toBe('object') + }) + + test('props', () => { + expect(wrapper.props('val')).toStrictEqual({ TEST: 'test' }) + expect(wrapper.props('orders')).toStrictEqual([ + { + products: [ + { + name: 'Product name', + price: 'Product price', + quantity: 'Product quantity' + } + ], + total: 'Order total', + payment: 'Order payment', + status: 'Order status' + } + ]) + }) + + test('methods', () => { + expect(typeof wrapper.vm.updateStatus).toBe('function') + expect(typeof wrapper.vm.deleteOrder).toBe('function') + }) +}) diff --git a/src/__tests__/components/ProductSet.spec.ts b/src/__tests__/components/ProductSet.spec.ts new file mode 100644 index 00000000..09548401 --- /dev/null +++ b/src/__tests__/components/ProductSet.spec.ts @@ -0,0 +1,55 @@ +import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest' +import { shallowMount, enableAutoUnmount } from '@vue/test-utils' +import ProductSet from '../../components/ProductSet.vue' + +let wrapper + +vi.mock('axios') + +beforeEach(() => { + wrapper = shallowMount(ProductSet, { + props: { + val: { + TEST: 'test' + }, + products: [ + { + name: 'Product name', + description: 'Product description', + image: 'Product image', + alt: 'Product alt', + price: 'Product price', + options: 'Product options', + cat: 'Product cat' + } + ] + } + }) +}) + +enableAutoUnmount(afterEach) + +/** + * @vi-environment jsdom + */ +describe('ProductSet', () => { + test('wrapper', () => { + expect(wrapper.exists()).toBe(true) + }) + + test('components', () => { + expect(typeof wrapper.findComponent({ name: 'BtnElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'CardElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'FieldElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'MediaElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'TableElt' })).toBe('object') + }) + + test('props', () => { + expect(wrapper.props('val')).toStrictEqual({ TEST: 'test' }) + }) + + test('methods', () => { + expect(typeof wrapper.vm.createProduct).toBe('function') + }) +}) diff --git a/src/__tests__/components/SliderElt.spe.ts b/src/__tests__/components/SliderElt.spe.ts new file mode 100644 index 00000000..363d983b --- /dev/null +++ b/src/__tests__/components/SliderElt.spe.ts @@ -0,0 +1,382 @@ +import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest' +import { mount, enableAutoUnmount } from '@vue/test-utils' +import SliderElt from '../../components/SliderElt.vue' + +let wrapper + +beforeEach(() => { + wrapper = mount(SliderElt, { + props: { + slides: [ + { id: 1, name: 'Item 1' }, + { id: 2, name: 'Item 2' }, + { id: 3, name: 'Item 3' } + ] + }, + slots: { + slide: 'Test Slide', + info: 'Test Info', + gallery: 'Test Gallery' + } + }) + + wrapper.vm.refreshSlide = vi.fn() + wrapper.vm.setAuto = vi.fn() + wrapper.vm.setRandom = vi.fn() +}) + +enableAutoUnmount(afterEach) + +/** + * ! DOM ELEMENTS + * @vi-environment jsdom + */ +describe('DOM elements', () => { + test('must create a figure element', () => { + expect(wrapper.find('figure').exists()).toBe(true) + }) +}) + +/** + * ! PROPS + * @vi-environment jsdom + */ +describe('Props', () => { + test("must have a props 'slides' with 'Array' as type & 3 as length", () => { + expect(Array.isArray(wrapper.props('slides'))).toBe(true) + expect(wrapper.props('slides').length).toBe(3) + }) + + test("must have a props 'slides' with '1' as id of first item", () => { + expect(wrapper.props('slides')[0].id).toBe(1) + }) + + test("must have a props 'slides' with 'Item 1' as name of first item", () => { + expect(wrapper.props('slides')[0].name).toBe('Item 1') + }) + + test("must have a props 'slides' with '2' as id of second item", () => { + expect(wrapper.props('slides')[1].id).toBe(2) + }) + + test("must have a props 'slides' with 'Item 2' as name of second item", () => { + expect(wrapper.props('slides')[1].name).toBe('Item 2') + }) + + test("must have a props 'slides' with '3' as id of third item", () => { + expect(wrapper.props('slides')[2].id).toBe(3) + }) + + test("must have a props 'slides' with 'Item 3' as name of third item", () => { + expect(wrapper.props('slides')[2].name).toBe('Item 3') + }) + + test("must have a props delay with 'Number' as type & 5000 as default value", () => { + expect(typeof wrapper.props('delay')).toBe('number') + expect(wrapper.props('delay')).toBe(5000) + }) + + test("must have a props 'auto' with 'Boolean' as type & 'true' as default value", () => { + expect(typeof wrapper.props('auto')).toBe('boolean') + expect(wrapper.props('auto')).toBe(true) + }) + + test("must have a props 'random' with 'Boolean' as type & 'false' as default value", () => { + expect(typeof wrapper.props('random')).toBe('boolean') + expect(wrapper.props('random')).toBe(false) + }) +}) + +/** + * ! DATA + * @vi-environment jsdom + */ +describe('Data', () => { + test("must have a data 'index' with 'Number' as type & -1 as default value", () => { + expect(typeof wrapper.vm.index).toBe('number') + expect(wrapper.vm.index).toBe(-1) + }) + + test("must have a data 'intervalId' with 'Number' as type", () => { + expect(typeof wrapper.vm.intervalId).toBe('number') + }) + + test("must have a data 'autoElt' with null as default value", () => { + expect(wrapper.vm.autoElt).toBe(null) + }) + + test("must have a data 'randomElt' with null as default value", () => { + expect(wrapper.vm.randomElt).toBe(null) + }) +}) + +/** + * ! BEFORE CREATE HOOK + * @vi-environment jsdom + */ +describe('beforeCreate() Hook', () => { + test('must have a beforeCreate() hook', () => { + expect(wrapper.vm.$options.beforeCreate).toBeDefined() + }) +}) + +/** + * ! CREATED HOOK + * @vi-environment jsdom + */ +describe('mounted() Hook', () => { + test('must have a mounted() hook', () => { + expect(wrapper.vm.$options.mounted).toBeDefined() + }) +}) + +/** + * ! SET ICON METHOD + * @vi-environment jsdom + */ +describe('setIcon() method', () => { + test('must have a setIcon() method with 3 parameters', () => { + expect(wrapper.vm.setIcon).toBeDefined() + expect(wrapper.vm.setIcon.length).toBe(3) + }) +}) + +/** + * ! SET AUTO METHOD + * @vi-environment jsdom + */ +describe('setAuto() method', () => { + test('must have a setAuto()method with 0 parameters', () => { + expect(wrapper.vm.setAuto).toBeDefined() + expect(wrapper.vm.setAuto.length).toBe(0) + }) +}) + +/** + * ! SET RANDOM METHOD + * @vi-environment jsdom + */ +describe('setRandom() method', () => { + test('must have a setRandom() method with 0 parameters', () => { + expect(wrapper.vm.setRandom).toBeDefined() + expect(wrapper.vm.setRandom.length).toBe(0) + }) +}) + +/** + * ! SET KEYBOARD METHOD + * @vi-environment jsdom + */ +describe('setKeyboard() method', () => { + test("must call checkRandom() method when keydown 'ArrowUp' is pressed", () => { + wrapper.vm.checkRandom = vi.fn() + wrapper.vm.setKeyboard({ code: 'ArrowUp' }) + expect(wrapper.vm.checkRandom).toHaveBeenCalled() + }) + + test("must call goNext() method when keydown 'ArrowRight' is pressed", () => { + wrapper.vm.goNext = vi.fn() + wrapper.vm.setKeyboard({ code: 'ArrowRight' }) + expect(wrapper.vm.goNext).toHaveBeenCalled() + }) + + test("must call checkAuto() method when keydown 'ArrowDown' is pressed", () => { + wrapper.vm.checkAuto = vi.fn() + wrapper.vm.setKeyboard({ code: 'ArrowDown' }) + expect(wrapper.vm.checkAuto).toHaveBeenCalled() + }) + + test("must call goPrevious() method when keydown 'ArrowLeft' is pressed", () => { + wrapper.vm.goPrevious = vi.fn() + wrapper.vm.setKeyboard({ code: 'ArrowLeft' }) + expect(wrapper.vm.goPrevious).toHaveBeenCalled() + }) +}) + +/** + * ! GET RANDOM INTEGER METHOD + * @vi-environment jsdom + */ +describe('getRandomInteger() method', () => { + test('should generate a random integer when min and max are both 0', () => { + const min = 0 + const max = 0 + + const result = wrapper.vm.getRandomInteger(min, max) + + expect(result).toBe(0) + }) + + test('should generate a random integer when min and max are both positive integers', () => { + const min = 1 + const max = 10 + + const result = wrapper.vm.getRandomInteger(min, max) + + expect(result).toBeGreaterThanOrEqual(min) + expect(result).toBeLessThanOrEqual(max) + }) + + test('should generate a random integer when min is negative and max is positive', () => { + const min = -10 + const max = 10 + + const result = wrapper.vm.getRandomInteger(min, max) + + expect(result).toBeGreaterThanOrEqual(min) + expect(result).toBeLessThanOrEqual(max) + }) + + test('should generate a random integer when min and max are both negative integers', () => { + const min = -10 + const max = -1 + + const result = wrapper.vm.getRandomInteger(min, max) + + expect(result).toBeGreaterThanOrEqual(min) + expect(result).toBeLessThanOrEqual(max) + }) +}) + +/** + * ! HAS SLOT METHOD + * @vi-environment jsdom + */ +describe('hasSlot(name) method', () => { + test('must return true if the 3 slots exist', () => { + expect(wrapper.vm.hasSlot('slide')).toBe(true) + expect(wrapper.vm.hasSlot('info')).toBe(true) + expect(wrapper.vm.hasSlot('gallery')).toBe(true) + }) + + test("must return false if the test slot doesn't exist", () => { + expect(wrapper.vm.hasSlot('test')).toBe(false) + }) +}) + +/** + * ! CHECK RANDOM METHOD + * @vi-environment jsdom + */ +describe('checkRandom() method', () => { + test("must call setRandom(false, 'Random', 'fa-random', 'fa-long-arrow-alt-right') method if randomState is true", () => { + wrapper.vm.randomState = true + wrapper.vm.checkRandom() + expect(wrapper.vm.setRandom).toHaveBeenCalledWith( + false, + 'Random', + 'fa-random', + 'fa-long-arrow-alt-right' + ) + }) + + test("must call setRandom(true, 'Normal', 'fa-long-arrow-alt-right', 'fa-random') method if randomState is false", () => { + wrapper.vm.randomState = false + wrapper.vm.checkRandom() + expect(wrapper.vm.setRandom).toHaveBeenCalledWith( + true, + 'Normal', + 'fa-long-arrow-alt-right', + 'fa-random' + ) + }) + + test('must call refreshSlide() method', () => { + wrapper.vm.refreshSlide = vi.fn() + wrapper.vm.checkRandom() + expect(wrapper.vm.refreshSlide).toHaveBeenCalled() + }) +}) + +/** + * ! CHECK AUTO METHOD + * @vi-environment jsdom + */ +describe('checkAuto() method', () => { + test("must call setAuto(false, 'Auto', 'fa-play', 'fa-pause') method if autoState is true", () => { + wrapper.vm.autoState = true + wrapper.vm.checkAuto() + expect(wrapper.vm.setAuto).toHaveBeenCalledWith(false, 'Play', 'fa-play', 'fa-pause') + }) + + test("must call setAuto(true, 'Manual', 'fa-pause', 'fa-play') method if autoState is false", () => { + wrapper.vm.autoState = false + wrapper.vm.checkAuto() + expect(wrapper.vm.setAuto).toHaveBeenCalledWith(true, 'Pause', 'fa-pause', 'fa-play') + }) + + test('must call refreshSlide() method', () => { + wrapper.vm.refreshSlide = vi.fn() + wrapper.vm.checkAuto() + expect(wrapper.vm.refreshSlide).toHaveBeenCalled() + }) +}) + +/** + * ! RUN SLIDER METHOD + * @vi-environment jsdom + */ +describe('runSlider() method', () => { + test('must define intervalId with setInterval() if autoState is true', () => { + wrapper.vm.autoState = true + wrapper.vm.runSlider() + expect(wrapper.vm.intervalId).not.toBe(null) + }) + + test('must call goNext() method if autoState is false', () => { + wrapper.vm.autoState = false + wrapper.vm.goNext = vi.fn() + wrapper.vm.runSlider() + expect(wrapper.vm.goNext).toHaveBeenCalled() + }) +}) + +/** + * ! GO NEXT METHOD + * @vi-environment jsdom + */ +describe('goNext() method', () => { + test('must increment index when randomState is false', () => { + wrapper.vm.randomState = false + wrapper.vm.index = 0 + wrapper.vm.goNext() + expect(wrapper.vm.index).toBe(1) + }) + + test('must initialize index to 0 if index is equal to slides.length', () => { + wrapper.vm.index = 2 + wrapper.vm.goNext() + expect(wrapper.vm.index).toBe(0) + }) + + test('must call refreshSlide() method', () => { + wrapper.vm.refreshSlide = vi.fn() + wrapper.vm.goNext() + expect(wrapper.vm.refreshSlide).toHaveBeenCalled() + }) +}) + +/** + * ! GO PREVIOUS METHOD + * @vi-environment jsdom + */ +describe('goPrevious() method', () => { + test('must decrement index when randomState is false', () => { + wrapper.vm.randomState = false + wrapper.vm.index = 1 + wrapper.vm.goPrevious() + expect(wrapper.vm.index).toBe(0) + }) + + test('must initialize index to slides.length - 1 if index is equal to 0', () => { + wrapper.vm.index = 0 + wrapper.vm.goPrevious() + expect(wrapper.vm.index).toBe(2) + }) + + test('must call refreshSlide() method', () => { + wrapper.vm.refreshSlide = vi.fn() + wrapper.vm.goPrevious() + expect(wrapper.vm.refreshSlide).toHaveBeenCalled() + }) +}) diff --git a/src/__tests__/components/TableElt.spec.ts b/src/__tests__/components/TableElt.spec.ts new file mode 100644 index 00000000..1fc880eb --- /dev/null +++ b/src/__tests__/components/TableElt.spec.ts @@ -0,0 +1,113 @@ +import { afterEach, beforeEach, describe, expect, test } from 'vitest' +import { enableAutoUnmount, mount } from '@vue/test-utils' +import TableElt from '../../components/TableElt.vue' + +let wrapper + +enableAutoUnmount(afterEach) + +/** + * ! DEFAULT TABLE + * @vi-environment jsdom + */ +describe('Default TableElt', () => { + beforeEach(() => { + wrapper = mount(TableElt, { + props: { + items: [ + { id: 1, name: 'Item 1' }, + { id: 2, name: 'Item 2' }, + { id: 3, name: 'Item 3' } + ] + } + }) + }) + + test('must create a table element', () => { + expect(wrapper.find('table').exists()).toBe(true) + }) + + test("must have a props 'items' with 'Array' as type & 3 as length", () => { + expect(Array.isArray(wrapper.props('items'))).toBe(true) + expect(wrapper.props('items').length).toBe(3) + }) + + test("must have a props 'items' with 'Item 1' as name of first item", () => { + expect(wrapper.props('items')[0].name).toBe('Item 1') + }) + + test("must have a props 'items' with 'Item 2' as name of second item", () => { + expect(wrapper.props('items')[1].name).toBe('Item 2') + }) + + test("must have a props 'items' with 'Item 3' as name of third item", () => { + expect(wrapper.props('items')[2].name).toBe('Item 3') + }) +}) + +/** + * ! TABLE WITH SLOTS + * @vi-environment jsdom + */ +describe('TableElt with slots', () => { + beforeEach(() => { + wrapper = mount(TableElt, { + props: { + title: 'Test Title', + items: [ + { id: 1, name: 'Item 1' }, + { id: 2, name: 'Item 2' }, + { id: 3, name: 'Item 3' } + ] + }, + slots: { + title: 'Test Title', + head: 'Test Head', + body: 'Test Body', + foot: 'Test Foot' + } + }) + }) + + test('must create a table element', () => { + expect(wrapper.find('table').exists()).toBe(true) + }) + + test("must have a props 'title' with 'String' as type & 'Table Title' as value", () => { + expect(typeof wrapper.props('title')).toBe('string') + expect(wrapper.props('title')).toBe('Test Title') + }) + + test("must have a props 'items' with 'Array' as type & 3 as length", () => { + expect(Array.isArray(wrapper.props('items'))).toBe(true) + expect(wrapper.props('items').length).toBe(3) + }) + + test("must have a props 'items' with 'Item 1' as name of first item", () => { + expect(wrapper.props('items')[0].name).toBe('Item 1') + }) + + test("must have a props 'items' with 'Item 2' as name of second item", () => { + expect(wrapper.props('items')[1].name).toBe('Item 2') + }) + + test("must have a props 'items' with 'Item 3' as name of third item", () => { + expect(wrapper.props('items')[2].name).toBe('Item 3') + }) + + test("must have a slot 'title' with 'Test Title' as content", () => { + expect(wrapper.find('caption').text()).toBe('Test Title') + }) + + test("must have a slot 'head' with 'Test Head' as content", () => { + expect(wrapper.find('thead').text()).toContain('Test Head') + }) + + test("must have a slot 'body' with 'Test Body' as content", () => { + expect(wrapper.find('tbody').text()).toContain('Test Body') + }) + + test("must have a slot 'foot' with 'Test Foot' as content", () => { + expect(wrapper.find('tfoot').text()).toBe('Test Foot') + }) +}) diff --git a/src/__tests__/components/UserSet.spec.ts b/src/__tests__/components/UserSet.spec.ts new file mode 100644 index 00000000..7e816b4b --- /dev/null +++ b/src/__tests__/components/UserSet.spec.ts @@ -0,0 +1,63 @@ +import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest' +import { shallowMount, enableAutoUnmount } from '@vue/test-utils' +import UserSet from '../../components/UserSet.vue' + +let wrapper + +vi.mock('axios') + +beforeEach(() => { + wrapper = shallowMount(UserSet, { + props: { + val: { + TEST: 'test' + }, + users: [ + { + name: 'User name', + email: 'User email', + image: 'User image', + password: 'User password', + role: 'User role' + } + ] + } + }) +}) + +enableAutoUnmount(afterEach) + +/** + * @vi-environment jsdom + */ +describe('UserSet', () => { + test('wrapper', () => { + expect(wrapper.exists()).toBe(true) + }) + + test('components', () => { + expect(typeof wrapper.findComponent({ name: 'BtnElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'CardElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'FieldElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'MediaElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'TableElt' })).toBe('object') + }) + + test('props', () => { + expect(wrapper.props('val')).toStrictEqual({ TEST: 'test' }) + expect(wrapper.props('users')).toStrictEqual([ + { + name: 'User name', + email: 'User email', + image: 'User image', + password: 'User password', + role: 'User role' + } + ]) + }) + + test('methods', () => { + expect(typeof wrapper.vm.updateUser).toBe('function') + expect(typeof wrapper.vm.deleteUser).toBe('function') + }) +}) diff --git a/src/__tests__/views/ArticleView.spe.ts b/src/__tests__/views/ArticleView.spe.ts new file mode 100644 index 00000000..24a3f3b1 --- /dev/null +++ b/src/__tests__/views/ArticleView.spe.ts @@ -0,0 +1,132 @@ +import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest' +import { shallowMount, enableAutoUnmount } from '@vue/test-utils' +import { createStore } from 'vuex' +import * as services from '../../assets/services' +import ArticleView from '../../views/ArticleView.vue' + +global.fetch = vi.fn(() => + Promise.resolve({ + formData: () => Promise.resolve({}), + ok: true, + headers: { + get: (header) => { + if (header === 'Content-Type') { + return 'multipart/form-data' + } + } + } + }) +) + +const mockRoute = { + params: { + id: 1 + } +} + +const mockRouter = { + push: vi.fn() +} + +const role = 'user' +const user = { + name: 'John Doe', + role: role +} + +let wrapper +let store +let actions +let state + +/** + * @vi-environment jsdom + */ +beforeEach(() => { + vi.spyOn(services, 'setMeta').mockImplementation(() => {}) + + actions = { + listArticleComments: vi.fn(), + readArticle: vi.fn() + } + + state = { + article: {}, + comments: [] + } + + store = createStore({ + state() { + return state + }, + actions: actions + }) + + mockRouter.push(mockRoute) + + wrapper = shallowMount(ArticleView, { + props: { + val: { + TEST: 'test' + }, + user: user + }, + global: { + plugins: [store], + mocks: { + $router: mockRouter, + $route: mockRoute + } + } + }) +}) + +enableAutoUnmount(afterEach) + +/** + * @vi-environment jsdom + */ +describe('ArticleView', () => { + test('wrapper must be a vue instance', () => { + expect(wrapper.exists()).toBe(true) + }) + + test('components', () => { + expect(typeof wrapper.findComponent({ name: 'BtnElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'CardElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'MediaElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'CommentCreator' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'CommentList' })).toBe('object') + }) + + test('props', () => { + expect(wrapper.props().val).toStrictEqual({ TEST: 'test' }) + }) + + test('methods', () => { + expect(typeof wrapper.vm.checkSession).toBe('function') + expect(typeof wrapper.vm.checkLikes).toBe('function') + expect(typeof wrapper.vm.addLike).toBe('function') + expect(typeof wrapper.vm.updateArticle).toBe('function') + expect(typeof wrapper.vm.deleteArticle).toBe('function') + }) + + test('updateArticle()', () => { + wrapper.vm.articles[0] = { + id: 'Article Id 1 Updated', + name: 'Article Name 1 Updated', + text: 'Article Text 1 Updated', + image: 'Article Image 1 Updated', + alt: 'Article Alt 1 Updated', + cat: 'Article Cat 1 Updated' + } + expect(wrapper.vm.getArticles()[0]).toStrictEqual({ + id: 'Article Id 1 Updated', + name: 'Article Name 1 Updated', + text: 'Article Text 1 Updated', + image: 'Article Image 1 Updated', + alt: 'Article Alt 1 Updated', + cat: 'Article Cat 1 Updated' + }) + }) +}) diff --git a/src/__tests__/views/BasketView.spe.ts b/src/__tests__/views/BasketView.spe.ts new file mode 100644 index 00000000..a26639a2 --- /dev/null +++ b/src/__tests__/views/BasketView.spe.ts @@ -0,0 +1,118 @@ +import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest' +import { shallowMount, enableAutoUnmount } from '@vue/test-utils' +import * as services from '../../assets/services' +import BasketView from '../../views/BasketView.vue' + +global.fetch = vi.fn(() => + Promise.resolve({ + formData: () => Promise.resolve({}), + ok: true, + headers: { + get: (header) => { + if (header === 'Content-Type') { + return 'multipart/form-data' + } + } + } + }) +) + +let wrapper + +beforeEach(() => { + vi.spyOn(services, 'setMeta').mockImplementation(() => {}) + + wrapper = shallowMount(BasketView, { + props: { + val: { + TEST: 'test' + }, + user: { + name: 'test', + email: 'email@test.com' + } + }, + data() { + return { + basket: [ + { + id: 1, + name: 'test', + price: 10, + quantity: 1, + total: 10 + } + ], + order: [ + { + id: 1, + name: 'test', + price: 10, + quantity: 1, + total: 10 + } + ], + total: 10 + } + } + }) +}) + +enableAutoUnmount(afterEach) + +/** + * @vi-environment jsdom + */ +describe('BasketView', () => { + test('wrapper', () => { + expect(wrapper.exists()).toBe(true) + }) + + test('components', () => { + expect(typeof wrapper.findComponent({ name: 'BtnElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'CardElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'FieldElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'MediaElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'TableElt' })).toBe('object') + }) + + test('props', () => { + expect(wrapper.props('val')).toStrictEqual({ TEST: 'test' }) + expect(wrapper.props('user')).toStrictEqual({ name: 'test', email: 'email@test.com' }) + }) + + test('data', () => { + expect(wrapper.vm.basket).toStrictEqual([ + { + id: 1, + name: 'test', + price: 10, + quantity: 1, + total: 10 + } + ]) + expect(wrapper.vm.order).toStrictEqual([ + { + id: 1, + name: 'test', + price: 10, + quantity: 1, + total: 10 + } + ]) + expect(wrapper.vm.total).toBe(10) + }) + + test('methods', () => { + expect(typeof wrapper.vm.checkSession).toBe('function') + expect(typeof wrapper.vm.getTotal).toBe('function') + expect(typeof wrapper.vm.setBasket).toBe('function') + expect(typeof wrapper.vm.setOrder).toBe('function') + expect(typeof wrapper.vm.setPaypal).toBe('function') + expect(typeof wrapper.vm.setTotal).toBe('function') + expect(typeof wrapper.vm.createOrder).toBe('function') + expect(typeof wrapper.vm.updateProductQuantity).toBe('function') + expect(typeof wrapper.vm.deleteProduct).toBe('function') + expect(typeof wrapper.vm.deleteBasket).toBe('function') + }) +}) diff --git a/src/__tests__/views/BlogView.spe.ts b/src/__tests__/views/BlogView.spe.ts new file mode 100644 index 00000000..30d68305 --- /dev/null +++ b/src/__tests__/views/BlogView.spe.ts @@ -0,0 +1,77 @@ +import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest' +import { shallowMount, enableAutoUnmount } from '@vue/test-utils' +import { createStore } from 'vuex' +import * as services from '../../assets/services' +import BlogView from '../../views/BlogView.vue' + +let wrapper +let store +let actions +let state + +beforeEach(() => { + vi.spyOn(services, 'setMeta').mockImplementation(() => {}) + + actions = { + listArticles: vi.fn() + } + + state = { + articles: [] + } + + store = createStore({ + state() { + return state + }, + actions: actions + }) + + wrapper = shallowMount(BlogView, { + props: { + val: { + TEST: 'test' + }, + user: { + name: 'test', + email: 'email@test.com' + } + }, + global: { + plugins: [store] + } + }) +}) + +enableAutoUnmount(afterEach) + +/** + * @vi-environment jsdom + */ +describe('BlogView', () => { + test('wrapper', () => { + expect(wrapper.exists()).toBe(true) + }) + + test('components', () => { + expect(typeof wrapper.findComponent({ name: 'BtnElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'CardElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'ListElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'MediaElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'NavElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'ArticleCreator' })).toBe('object') + }) + + test('props', () => { + expect(wrapper.props('val')).toStrictEqual({ TEST: 'test' }) + expect(wrapper.props('user')).toStrictEqual({ name: 'test', email: 'email@test.com' }) + }) + + test('methods', () => { + expect(typeof wrapper.vm.listArticles).toBe('function') + expect(typeof wrapper.vm.checkSession).toBe('function') + expect(typeof wrapper.vm.getItemsByCategory).toBe('function') + expect(typeof wrapper.vm.checkLikes).toBe('function') + expect(typeof wrapper.vm.addLike).toBe('function') + }) +}) diff --git a/src/__tests__/views/ContactView.spec.ts b/src/__tests__/views/ContactView.spec.ts new file mode 100644 index 00000000..fdbe6a84 --- /dev/null +++ b/src/__tests__/views/ContactView.spec.ts @@ -0,0 +1,72 @@ +import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest' +import { shallowMount, enableAutoUnmount } from '@vue/test-utils' +import * as services from '../../assets/services' +import ContactView from '../../views/ContactView.vue' + +let wrapper + +/** + * @vi-environment jsdom + */ +beforeEach(() => { + vi.spyOn(services, 'setMeta').mockImplementation(() => {}) + + wrapper = shallowMount(ContactView, { + props: { + val: { + TEST: 'test' + }, + user: { + name: 'test', + email: 'email@test.com' + } + }, + data() { + return { + email: 'email@test.com', + subject: 'Test Subject', + text: 'Test Text' + } + } + }) +}) + +enableAutoUnmount(afterEach) + +/** + * @vi-environment jsdom + */ +describe('ContactView', () => { + test('wrapper must be a vue instance', () => { + expect(wrapper.exists()).toBe(true) + }) + + test('wrapper components', () => { + expect(typeof wrapper.findComponent({ name: 'BtnElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'CardElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'FieldElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'ListElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'VueRecaptcha' })).toBe('object') + }) + + test('wrapper props', () => { + expect(wrapper.props('val')).toStrictEqual({ TEST: 'test' }) + }) + + test('wrapper data', () => { + expect(wrapper.vm.$data).toStrictEqual({ + email: 'email@test.com', + subject: 'Test Subject', + text: 'Test Text' + }) + }) + + test('wrapper created hook', () => { + expect(services.setMeta).toHaveBeenCalled() + }) + + test('wrapper methods', () => { + expect(typeof wrapper.vm.onVerify).toBe('function') + expect(typeof wrapper.vm.send).toBe('function') + }) +}) diff --git a/src/__tests__/views/ErrorView.spec.ts b/src/__tests__/views/ErrorView.spec.ts new file mode 100644 index 00000000..096e2b16 --- /dev/null +++ b/src/__tests__/views/ErrorView.spec.ts @@ -0,0 +1,51 @@ +import { afterEach, beforeEach, describe, expect, test } from 'vitest' +import { shallowMount, enableAutoUnmount } from '@vue/test-utils' +import ErrorView from '../../views/ErrorView.vue' + +let wrapper + +beforeEach(() => { + wrapper = shallowMount(ErrorView, { + props: { + val: { + TEST: 'test' + } + }, + global: { + mocks: {}, + stubs: {} + } + }) +}) + +enableAutoUnmount(afterEach) + +describe('ErrorView', () => { + test('name', () => { + expect(ErrorView.name).toBe('ErrorView') + }) + + test('components', () => { + expect(typeof ErrorView.components).toBe('object') + }) + + test('props', () => { + expect(typeof ErrorView.props).toBe('object') + }) +}) + +describe('Mounted ErrorView', () => { + test('wrapper', () => { + expect(wrapper.exists()).toBe(true) + }) + + test('wrapper components', () => { + expect(typeof wrapper.findComponent({ name: 'BtnElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'CardElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'MediaElt' })).toBe('object') + }) + + test('wrapper props', () => { + expect(wrapper.props('val')).toStrictEqual({ TEST: 'test' }) + }) +}) diff --git a/src/__tests__/views/GalleryView.spe.ts b/src/__tests__/views/GalleryView.spe.ts new file mode 100644 index 00000000..d50fd130 --- /dev/null +++ b/src/__tests__/views/GalleryView.spe.ts @@ -0,0 +1,77 @@ +import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest' +import { shallowMount, enableAutoUnmount } from '@vue/test-utils' +import { createStore } from 'vuex' +import * as services from '../../assets/services' +import GalleryView from '../../views/GalleryView.vue' + +let wrapper +let store +let actions +let state + +/** + * @vi-environment jsdom + */ +beforeEach(() => { + vi.spyOn(services, 'setMeta').mockImplementation(() => {}) + + actions = { + listGalleries: vi.fn() + } + + state = { + galleries: [] + } + + store = createStore({ + state() { + return state + }, + actions: actions + }) + + wrapper = shallowMount(GalleryView, { + props: { + val: { + TEST: 'test' + }, + user: { + name: 'test', + email: 'email@test.com' + } + }, + global: { + plugins: [store] + } + }) +}) + +enableAutoUnmount(afterEach) + +describe('GalleryView', () => { + test('wrapper must be a vue instance', () => { + expect(wrapper.exists()).toBe(true) + }) + + test('wrapper components', () => { + expect(typeof wrapper.findComponent({ name: 'CardElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'ListElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'MediaElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'GalleryCreator' })).toBe('object') + }) + + test('wrapper props', () => { + expect(wrapper.props('val')).toStrictEqual({ TEST: 'test' }) + expect(wrapper.props('user')).toStrictEqual({ name: 'test', email: 'email@test.com' }) + }) + + test('wrapper created hook', () => { + expect(serve.setMeta).toHaveBeenCalled() + expect(actions.listGalleries).toHaveBeenCalled() + }) + + test('wrapper methods', () => { + expect(typeof wrapper.vm.listGalleries).toBe('function') + expect(typeof wrapper.vm.checkSession).toBe('function') + }) +}) diff --git a/src/__tests__/views/HomeView.spec.ts b/src/__tests__/views/HomeView.spec.ts new file mode 100644 index 00000000..2eaa3ea8 --- /dev/null +++ b/src/__tests__/views/HomeView.spec.ts @@ -0,0 +1,59 @@ +import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest' +import { shallowMount, enableAutoUnmount } from '@vue/test-utils' +import * as services from '../../assets/services' +import HomeView from '../../views/HomeView.vue' + +let wrapper + +/** + * @vi-environment jsdom + */ +beforeEach(() => { + vi.spyOn(services, 'setMeta').mockImplementation(() => {}) + + wrapper = shallowMount(HomeView, { + props: { + val: { + TEST: 'test' + }, + user: { + name: 'test', + email: 'email@test.com' + } + }, + data() { + return { + media: { title: 'Test Title', url: 'https://test.com' } + } + } + }) +}) + +enableAutoUnmount(afterEach) + +describe('HomeView', () => { + test('wrapper must be a vue instance', () => { + expect(wrapper.exists()).toBe(true) + }) + + test('wrapper components', () => { + expect(typeof wrapper.findComponent({ name: 'CardElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'ListElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'MediaElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'SliderElt' })).toBe('object') + }) + + test('wrapper props', () => { + expect(wrapper.props('val')).toStrictEqual({ TEST: 'test' }) + }) + + test('wrapper data', () => { + expect(wrapper.vm.$data).toStrictEqual({ + media: { title: 'Test Title', url: 'https://test.com' } + }) + }) + + test('wrapper created hook', () => { + expect(services.setMeta).toHaveBeenCalled() + }) +}) diff --git a/src/__tests__/views/ImageView.spe.ts b/src/__tests__/views/ImageView.spe.ts new file mode 100644 index 00000000..95c16906 --- /dev/null +++ b/src/__tests__/views/ImageView.spe.ts @@ -0,0 +1,104 @@ +import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest' +import { shallowMount, enableAutoUnmount } from '@vue/test-utils' +import { createStore } from 'vuex' +import * as services from '../../assets/services' +import ImageView from '../../views/ImageView.vue' + +global.fetch = vi.fn(() => + Promise.resolve({ + formData: () => Promise.resolve({}), + ok: true, + headers: { + get: (header) => { + if (header === 'Content-Type') { + return 'multipart/form-data' + } + } + } + }) +) + +const mockRoute = { + params: { + id: 1 + } +} + +const mockRouter = { + push: vi.fn() +} + +let wrapper +let store +let actions +let state + +beforeEach(() => { + vi.spyOn(services, 'setMeta').mockImplementation(() => {}) + + actions = { + listGalleryImages: vi.fn() + } + + state = { + images: [] + } + + store = createStore({ + state() { + return state + }, + actions: actions + }) + + mockRouter.push(mockRoute) + + wrapper = shallowMount(ImageView, { + props: { + val: { + TEST: 'test' + }, + user: { + name: 'test', + email: 'email@test.com' + } + }, + + global: { + plugins: [store], + mocks: { + $router: mockRouter, + $route: mockRoute + } + } + }) +}) + +enableAutoUnmount(afterEach) + +/** + * @vi-environment jsdom + */ +describe('ImageView', () => { + test('wrapper', () => { + expect(wrapper.exists()).toBe(true) + }) + + test('components', () => { + expect(typeof wrapper.findComponent({ name: 'CardElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'ListElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'MediaElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'SliderElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'ImageCreator' })).toBe('object') + }) + + test('props', () => { + expect(wrapper.props('val')).toStrictEqual({ TEST: 'test' }) + expect(wrapper.props('user')).toStrictEqual({ name: 'test', email: 'email@test.com' }) + }) + + test('methods', () => { + expect(typeof wrapper.vm.listGalleryImages).toBe('function') + expect(typeof wrapper.vm.checkSession).toBe('function') + }) +}) diff --git a/src/__tests__/views/LegalView.spec.ts b/src/__tests__/views/LegalView.spec.ts new file mode 100644 index 00000000..3ed5f261 --- /dev/null +++ b/src/__tests__/views/LegalView.spec.ts @@ -0,0 +1,45 @@ +import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest' +import { shallowMount, enableAutoUnmount } from '@vue/test-utils' +import * as services from '../../assets/services' +import LegalView from '../../views/LegalView.vue' + +let wrapper + +beforeEach(() => { + vi.spyOn(services, 'setMeta').mockImplementation(() => {}) + + wrapper = shallowMount(LegalView, { + props: { + val: { + TEST: 'test' + }, + user: { + name: 'test', + email: 'email@test.com' + } + } + }) +}) + +enableAutoUnmount(afterEach) + +/** + * @vi-environment jsdom + */ +describe('LegalView', () => { + test('wrapper must be a vue instance', () => { + expect(wrapper.exists()).toBe(true) + }) + + test('wrapper components', () => { + expect(typeof wrapper.findComponent({ name: 'CardElt' })).toBe('object') + }) + + test('wrapper props', () => { + expect(wrapper.props('val')).toStrictEqual({ TEST: 'test' }) + }) + + test('wrapper created hook', () => { + expect(services.setMeta).toHaveBeenCalled() + }) +}) diff --git a/src/__tests__/views/LinkView.spe.ts b/src/__tests__/views/LinkView.spe.ts new file mode 100644 index 00000000..ad5add93 --- /dev/null +++ b/src/__tests__/views/LinkView.spe.ts @@ -0,0 +1,74 @@ +import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest' +import { shallowMount, enableAutoUnmount } from '@vue/test-utils' +import { createStore } from 'vuex' +import * as services from '../../assets/services' +import LinkView from '../../views/LinkView.vue' + +let wrapper +let store +let actions +let state + +beforeEach(() => { + vi.spyOn(services, 'setMeta').mockImplementation(() => {}) + + actions = { + listLinks: vi.fn() + } + + state = { + links: [] + } + + store = createStore({ + state() { + return state + }, + actions: actions + }) + + wrapper = shallowMount(LinkView, { + props: { + val: { + TEST: 'test' + }, + user: { + name: 'test', + email: 'email@test.com' + } + }, + global: { + plugins: [store] + } + }) +}) + +enableAutoUnmount(afterEach) + +/** + * @vi-environment jsdom + */ +describe('LinkView', () => { + test('wrapper', () => { + expect(wrapper.exists()).toBe(true) + }) + + test('components', () => { + expect(typeof wrapper.findComponent({ name: 'BtnElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'CardElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'ListElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'NavElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'LinkCreator' })).toBe('object') + }) + + test('props', () => { + expect(wrapper.props('val')).toStrictEqual({ TEST: 'test' }) + expect(wrapper.props('user')).toStrictEqual({ name: 'test', email: 'email@test.com' }) + }) + + test('methods', () => { + expect(typeof wrapper.vm.listLinks).toBe('function') + expect(typeof wrapper.vm.checkSession).toBe('function') + expect(typeof wrapper.vm.getItemsByCategory).toBe('function') + }) +}) diff --git a/src/__tests__/views/LoginView.spe.ts b/src/__tests__/views/LoginView.spe.ts new file mode 100644 index 00000000..6cb29645 --- /dev/null +++ b/src/__tests__/views/LoginView.spe.ts @@ -0,0 +1,106 @@ +import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest' +import { shallowMount, enableAutoUnmount } from '@vue/test-utils' +import * as services from '../../assets/services' +import LoginView from '../../views/LoginView.vue' + +let wrapper +let setMetaSpy + +/** + * @vi-environment jsdom + */ +beforeEach(() => { + setMetaSpy = vi.spyOn(services, 'setMeta').mockImplementation(() => {}) + + Object.defineProperty(window, 'localStorage', { + value: { + userId: '123456' + } + }) + + const push = vi.fn() + const $router = { + push: push + } + + wrapper = shallowMount(LoginView, { + props: { + val: { + HEAD_LOGIN: 'test head login', + META_LOGIN: 'test meta login', + UI_URL: 'test-ui-url', + LOGO_SRC: '/test-logo-src', + SIGN_IN: 'Sign In', + SIGN_UP: 'Sign Up', + FORGOT_PASS: 'Forgot Password', + INTRO_SIGNIN: 'Sign in to your account', + INTRO_SIGNUP: 'Sign up to your account', + INTRO_FORGOTPASS: + "Enter your email address and we'll send you a link to reset your password." + } + }, + data() { + return { + type: 'SignUp' + } + }, + global: { + mocks: { + $router + } + } + }) +}) + +enableAutoUnmount(afterEach) + +describe('LoginView', () => { + test('wrapper must be a vue instance', () => { + expect(wrapper.exists()).toBe(true) + }) + + test('wrapper components', () => { + expect(typeof wrapper.findComponent({ name: 'BtnElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'CardElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'SignUp' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'SignIn' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'ForgotPass' })).toBe('object') + }) + + test('wrapper props', () => { + expect(wrapper.props().val).toStrictEqual({ + HEAD_LOGIN: 'test head login', + META_LOGIN: 'test meta login', + UI_URL: 'test-ui-url', + LOGO_SRC: '/test-logo-src', + SIGN_IN: 'Sign In', + SIGN_UP: 'Sign Up', + FORGOT_PASS: 'Forgot Password', + INTRO_SIGNIN: 'Sign in to your account', + INTRO_SIGNUP: 'Sign up to your account', + INTRO_FORGOTPASS: "Enter your email address and we'll send you a link to reset your password." + }) + }) + + test('wrapper data', () => { + expect(wrapper.vm.type).toBe('SignUp') + }) + + test('wrapper created hook', () => { + expect(services.setMeta).toHaveBeenCalled() + }) + + test('calls setMeta with the correct arguments', () => { + expect(setMetaSpy).toHaveBeenCalledWith( + wrapper.vm.val.HEAD_LOGIN, + wrapper.vm.val.META_LOGIN, + `${wrapper.vm.val.UI_URL}/login`, + `${wrapper.vm.val.UI_URL}${wrapper.vm.val.LOGO_SRC}` + ) + }) + + test('redirects to "/" if localStorage.userId exists', () => { + const routerPushSpy = vi.spyOn(wrapper.vm.$router, 'push') + expect(routerPushSpy).toHaveBeenCalledWith('/') + }) +}) diff --git a/src/__tests__/views/ProductView.spe.ts b/src/__tests__/views/ProductView.spe.ts new file mode 100644 index 00000000..10250b56 --- /dev/null +++ b/src/__tests__/views/ProductView.spe.ts @@ -0,0 +1,155 @@ +import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest' +import { shallowMount, enableAutoUnmount } from '@vue/test-utils' +import { createStore } from 'vuex' +import * as services from '../../assets/services' +import ProductView from '../../views/ProductView.vue' + +global.fetch = vi.fn(() => + Promise.resolve({ + formData: () => Promise.resolve({}), + ok: true, + headers: { + get: (header) => { + if (header === 'Content-Type') { + return 'multipart/form-data' + } + } + } + }) +) + +const mockRoute = { + params: { + id: 1 + } +} + +const mockRouter = { + push: vi.fn() +} + +let wrapper +let store +let actions +let state + +/** + * @vi-environment jsdom + */ +beforeEach(() => { + vi.spyOn(services, 'setMeta').mockImplementation(() => {}) + + actions = { + listProductReviews: vi.fn(), + readProduct: vi.fn() + } + + state = { + product: {}, + reviews: [] + } + + store = createStore({ + state() { + return state + }, + actions: actions + }) + + mockRouter.push(mockRoute) + + wrapper = shallowMount(ProductView, { + props: { + val: { + TEST: 'test' + }, + user: { + name: 'test', + email: 'email@test.com' + } + }, + data() { + return { + product: { + name: 'test', + description: 'test', + price: 10 + }, + basket: [], + order: { + id: 1, + name: 'test', + description: 'test', + price: 10, + currency: 'EUR', + image: 'test', + gallery: 'test', + reviews: [] + }, + option: '', + priceCurrency: '', + quantity: 1, + isInBasket: false + } + }, + global: { + plugins: [store], + mocks: { + $router: mockRouter, + $route: mockRoute + } + } + }) +}) + +enableAutoUnmount(afterEach) + +/** + * @vi-environment jsdom + */ +describe('ProductView', () => { + test('wrapper must be a vue instance', () => { + expect(wrapper.exists()).toBe(true) + }) + + test('wrapper components', () => { + expect(typeof wrapper.findComponent({ name: 'BtnElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'CardElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'FieldElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'MediaElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'ReviewCreator' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'ReviewList' })).toBe('object') + }) + + test('wrapper props', () => { + expect(wrapper.props().val).toStrictEqual({ TEST: 'test' }) + expect(wrapper.props().user).toStrictEqual({ name: 'test', email: 'email@test.com' }) + }) + + test('wrapper data', () => { + expect(wrapper.vm.basket).toStrictEqual([]) + expect(wrapper.vm.order).toStrictEqual({ + id: 1, + name: 'test', + description: 'test', + price: 10, + currency: 'EUR', + image: 'test', + gallery: 'test', + reviews: [] + }) + expect(wrapper.vm.option).toBe('') + expect(wrapper.vm.quantity).toBe(1) + expect(wrapper.vm.isInBasket).toBe(false) + }) + + test('wrapper methods', () => { + expect(typeof wrapper.vm.checkSession).toBe('function') + expect(typeof wrapper.vm.getScoresAverage).toBe('function') + expect(typeof wrapper.vm.addToBasket).toBe('function') + expect(typeof wrapper.vm.createOrder).toBe('function') + expect(typeof wrapper.vm.getBasket).toBe('function') + expect(typeof wrapper.vm.checkBasket).toBe('function') + expect(typeof wrapper.vm.setBasket).toBe('function') + }) +}) diff --git a/src/__tests__/views/ProfileView.spec.ts b/src/__tests__/views/ProfileView.spec.ts new file mode 100644 index 00000000..8aa6834a --- /dev/null +++ b/src/__tests__/views/ProfileView.spec.ts @@ -0,0 +1,95 @@ +import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest' +import { shallowMount, enableAutoUnmount } from '@vue/test-utils' +import { createStore } from 'vuex' +import * as services from '../../assets/services' +import ProfileView from '../../views/ProfileView.vue' + +let wrapper +let store +let actions +let state + +beforeEach(() => { + vi.spyOn(services, 'setMeta').mockImplementation(() => {}) + + global.alert = vi.fn() + const push = vi.fn() + const $router = { + push: push + } + + actions = { + readUser: vi.fn(), + listUserOrders: vi.fn() + } + + state = { + user: {}, + orders: [] + } + + store = createStore({ + state() { + return state + }, + actions: actions + }) + + wrapper = shallowMount(ProfileView, { + props: { + val: { + TEST: 'test' + } + }, + data() { + return { + image: 'test image', + pass: 'test pass' + } + }, + global: { + plugins: [store], + mocks: { + $router + } + } + }) +}) + +enableAutoUnmount(afterEach) + +/** + * @vi-environment jsdom + */ +describe('ProfileView', () => { + test('wrapper', () => { + expect(wrapper.exists()).toBe(true) + }) + + test('components', () => { + expect(typeof wrapper.findComponent({ name: 'BtnElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'CardElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'FieldElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'ListElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'MediaElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'TableElt' })).toBe('object') + }) + + test('props', () => { + expect(wrapper.props().val).toStrictEqual({ TEST: 'test' }) + }) + + test('data', () => { + expect(wrapper.vm.image).toBe('test image') + expect(wrapper.vm.pass).toBe('test pass') + }) + + test('methods', () => { + expect(typeof wrapper.vm.readUser).toBe('function') + expect(typeof wrapper.vm.listUsers).toBe('function') + expect(typeof wrapper.vm.checkSession).toBe('function') + expect(typeof wrapper.vm.logout).toBe('function') + expect(typeof wrapper.vm.updateUser).toBe('function') + expect(typeof wrapper.vm.deleteUser).toBe('function') + }) +}) diff --git a/src/__tests__/views/ShopView.spe.ts b/src/__tests__/views/ShopView.spe.ts new file mode 100644 index 00000000..75537cf6 --- /dev/null +++ b/src/__tests__/views/ShopView.spe.ts @@ -0,0 +1,95 @@ +import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest' +import { shallowMount, enableAutoUnmount } from '@vue/test-utils' +import { createStore } from 'vuex' +import * as services from '../../assets/services' +import ShopView from '../../views/ShopView.vue' + +let wrapper +let store +let actions +let state + +beforeEach(() => { + vi.spyOn(services, 'setMeta').mockImplementation(() => {}) + + actions = { + listProducts: vi.fn(), + listReviews: vi.fn() + } + + state = { + products: [], + reviews: [] + } + + store = createStore({ + state() { + return state + }, + actions: actions + }) + + wrapper = shallowMount(ShopView, { + props: { + val: { + TEST: 'test' + }, + user: { + name: 'test name', + email: 'email@test.com' + } + }, + data() { + return { + priceCurrency: 'EUR', + scores: [5, 4] + } + }, + global: { + plugins: [store] + } + }) +}) + +enableAutoUnmount(afterEach) + +/** + * @vi-environment jsdom + */ +describe('ShopView', () => { + test('wrapper', () => { + expect(wrapper.exists()).toBe(true) + }) + + test('components', () => { + expect(typeof wrapper.findComponent({ name: 'BtnElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'CardElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'ListElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'MediaElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'NavElt' })).toBe('object') + expect(typeof wrapper.findComponent({ name: 'ProductCreator' })).toBe('object') + }) + + test('props', () => { + expect(wrapper.props('val')).toStrictEqual({ TEST: 'test' }) + expect(wrapper.props('user')).toStrictEqual({ + name: 'test name', + email: 'email@test.com' + }) + }) + + // test("data", () => { + // expect(wrapper.vm.$data).toStrictEqual({ + // priceCurrency: "EUR", + // scores: [5, 4] + // }) + // }) + + test('methods', () => { + expect(typeof wrapper.vm.listProducts).toBe('function') + expect(typeof wrapper.vm.listReviews).toBe('function') + expect(typeof wrapper.vm.checkSession).toBe('function') + expect(typeof wrapper.vm.getItemsByCategory).toBe('function') + expect(typeof wrapper.vm.getScoresAverage).toBe('function') + }) +}) diff --git a/src/app/router.js b/src/app/router.js deleted file mode 100644 index 25f64ce6..00000000 --- a/src/app/router.js +++ /dev/null @@ -1,102 +0,0 @@ -import { createRouter, createWebHistory } from "vue-router" - -const routes = [ - { - path: "/", - name: "home", - component: () => import("@/views/HomeView"), - alias: ["/home"] - }, - { - path: "/contact", - name: "contact", - component: () => import("@/views/ContactView"), - alias: ["/message"] - }, - { - path: "/legal", - name: "legal", - component: () => import("@/views/LegalView"), - alias: ["/notice"] - }, - { - path: "/login", - name: "login", - component: () => import("@/views/LoginView"), - alias: ["/signin"] - }, - { - path: "/profile", - name: "profile", - component: () => import("@/views/ProfileView"), - alias: ["/account"], - meta: { requiresAuth: true } - }, - { - path: "/article/:id", - name: "article", - component: () => import("@/views/ArticleView"), - alias: ["/blog/:id"] - }, - { - path: "/basket", - name: "basket", - component: () => import("@/views/BasketView"), - alias: ["/cart"] - }, - { - path: "/blog", - name: "blog", - component: () => import("@/views/BlogView"), - alias: ["/articles"] - }, - { - path: "/galleries", - name: "gallery", - component: () => import("@/views/GalleryView"), - alias: ["/images"] - }, - { - path: "/gallery/:id", - name: "image", - component: () => import("@/views/ImageView"), - alias: ["/images/:id"] - }, - { - path: "/links", - name: "link", - component: () => import("@/views/LinkView"), - alias: ["/link"] - }, - { - path: "/portfolio", - name: "portfolio", - component: () => import("@/views/PortfolioView"), - alias: ["/projects"] - }, - { - path: "/product/:id", - name: "product", - component: () => import("@/views/ProductView"), - alias: ["/shop/:id"] - }, - { - path: "/shop", - name: "shop", - component: () => import("@/views/ShopView"), - alias: ["/products"] - }, - // Error - { - path: "/:pathMatch(.*)*", - name: "error", - component: () => import("@/views/ErrorView") - } -] - -const router = createRouter({ - history: createWebHistory(process.env.BASE_URL), - routes -}) - -export default router diff --git a/src/app/services.js b/src/app/services.js deleted file mode 100644 index 9c2897a5..00000000 --- a/src/app/services.js +++ /dev/null @@ -1,244 +0,0 @@ -import axios from "axios"; - -// ! ******************** CHECKERS ******************** - -/** - * ? CHECK RANGE - * * Checks whether a given value is within a specified range of min & max values, - * * either by comparing their string length or their numerical value - * @param {number | string} value - The value to check against the range - * @param {string} message - The message to display if the value is not within range - * @param {number} [min=2] - The minimum value of range - * @param {number} [max=200] - The maximum value of range - * @return {boolean} Returns true if the value is within the specified range, otherwise false - */ -export const checkRange = (value, message, min = 2, max = 250) => { - const NUMBER = typeof value === "number" && value >= min && value <= max; - const STRING = typeof value === "string" && value.length >= min && value.length <= max; - - const IN_RANGE = NUMBER || STRING; - if (!IN_RANGE) alert(`${message} ${min} & ${max}`); - - return IN_RANGE; -}; - -/** - * ? CHECK REGEX - * * Checks if a given value matches a regular expression - * * If it does not, it displays an alert message & returns false - * @param {any} value - The value to be tested against the regular expression - * @param {string} message - The message to be displayed in case the value does not match the regex - * @param {RegExp} regex - The regular expression to test the value against - * @returns {boolean} - Returns true if the value matches the regex, false otherwise - */ -export const checkRegex = (value, message, regex) => { - if (regex.test(value)) return true; - - alert(message); - return false; -}; - -/** - * ? CHECK ROLE - * * Checks if a given user role has the required role permission - * @param {string} userRole - The role of the user being checked - * @param {string} role - The required role permission - * @returns {boolean} Returns true if the user has the required role permission, else false - */ -export const checkRole = (userRole, role) => { - return userRole === "admin" ? true - : userRole === "editor" ? role !== "admin" - : userRole === "user" ? role === "user" - : false; -}; - -/** - * ? CHECK SLOT - * * Check if the given slot name exists. - * @param {string} name - The name of the slot to check. - * @return {boolean} Whether the slot exists or not. - */ -export const checkSlot = (slots, name) => { - return Object.prototype.hasOwnProperty.call(slots, name); -} - -// ! ******************** FETCHERS ******************** - -/** - * ? SET AXIOS - * * Sets Axios default headers with an optional token and an optional content-type - * @param {string|null} [token=null] - An optional authentication token - * @param {string} [type="multipart/form-data"] - An optional Content-Type - */ -export const setAxios = (token = null, type = "multipart/form-data") => { - axios.defaults.headers.post["Content-Type"] = type; - - if (token) axios.defaults.headers.common["Authorization"] = `Bearer ${token}`; -}; - -/** - * ? POST DATA - * * Sends a POST request to the specified URL - * * with the provided data, an optional token & an optional content-type - * @param {string} url - The URL to send the POST request to - * @param {object} data - The data to send in the request body - * @param {string|null} [token=null] - An optional authentication token - * @param {string} [type="multipart/form-data"] - An optional Content-Type - * @return {Promise