diff --git a/admin/package.json b/admin/package.json index 3406c326a..521f34bfc 100644 --- a/admin/package.json +++ b/admin/package.json @@ -33,6 +33,7 @@ "bootstrap": "4.3.1", "bootstrap-vue": "^2.21.2", "core-js": "^3.6.5", + "date-fns": "^2.29.3", "dotenv-webpack": "^7.0.3", "express": "^4.17.1", "graphql": "^15.6.1", diff --git a/admin/src/components/Fedaration/FederationVisualizeItem.spec.js b/admin/src/components/Fedaration/FederationVisualizeItem.spec.js new file mode 100644 index 000000000..6058cc6f4 --- /dev/null +++ b/admin/src/components/Fedaration/FederationVisualizeItem.spec.js @@ -0,0 +1,183 @@ +import { mount } from '@vue/test-utils' +import FederationVisualizeItem from './FederationVisualizeItem.vue' + +const localVue = global.localVue +const today = new Date() +const createdDate = new Date() +createdDate.setDate(createdDate.getDate() - 3) + +let propsData = { + item: { + id: 7590, + foreign: false, + publicKey: 'eaf6a426b24fd54f8fbae11c17700fc595080ca25159579c63d38dbc64284ba7', + url: 'http://localhost/api/2_0', + lastAnnouncedAt: createdDate, + verifiedAt: today, + lastErrorAt: null, + createdAt: createdDate, + updatedAt: null, + }, +} + +const mocks = { + $i18n: { + locale: 'en', + }, +} + +describe('FederationVisualizeItem', () => { + let wrapper + + const Wrapper = () => { + return mount(FederationVisualizeItem, { localVue, mocks, propsData }) + } + + describe('mount', () => { + beforeEach(() => { + wrapper = Wrapper() + }) + + it('renders the component', () => { + expect(wrapper.find('div.federation-visualize-item').exists()).toBe(true) + }) + + describe('rendering item properties', () => { + it('has the url', () => { + expect(wrapper.find('.row > div:nth-child(2) > div').text()).toBe( + 'http://localhost/api/2_0', + ) + }) + + it('has the public key', () => { + expect(wrapper.find('.row > div:nth-child(2) > small').text()).toContain( + 'eaf6a426b24fd54f8fbae11c17700fc595080ca25159579c63d38dbc64284ba7'.substring(0, 26), + ) + }) + + describe('verified item', () => { + it('has the check icon', () => { + expect(wrapper.find('svg.bi-check').exists()).toBe(true) + }) + + it('has the text variant "success"', () => { + expect(wrapper.find('.text-success').exists()).toBe(true) + }) + }) + + describe('not verified item', () => { + beforeEach(() => { + propsData = { + item: { + id: 7590, + foreign: false, + publicKey: 'eaf6a426b24fd54f8fbae11c17700fc595080ca25159579c63d38dbc64284ba7', + url: 'http://localhost/api/2_0', + lastAnnouncedAt: createdDate, + verifiedAt: null, + lastErrorAt: null, + createdAt: createdDate, + updatedAt: null, + }, + } + wrapper = Wrapper() + }) + + it('has the x-circle icon', () => { + expect(wrapper.find('svg.bi-x-circle').exists()).toBe(true) + }) + + it('has the text variant "danger"', () => { + expect(wrapper.find('.text-danger').exists()).toBe(true) + }) + }) + + // describe('with different locales (de, en, fr, es, nl)', () => { + describe('lastAnnouncedAt', () => { + it('computes the time string for different locales (de, en, fr, es, nl)', () => { + wrapper.vm.$i18n.locale = 'de' + wrapper = Wrapper() + expect(wrapper.vm.lastAnnouncedAt).toBe('vor 3 Tagen') + + wrapper.vm.$i18n.locale = 'fr' + wrapper = Wrapper() + expect(wrapper.vm.lastAnnouncedAt).toBe('il y a 3 jours') + + wrapper.vm.$i18n.locale = 'es' + wrapper = Wrapper() + expect(wrapper.vm.lastAnnouncedAt).toBe('hace 3 días') + + wrapper.vm.$i18n.locale = 'nl' + wrapper = Wrapper() + expect(wrapper.vm.lastAnnouncedAt).toBe('3 dagen geleden') + }) + + describe('lastAnnouncedAt == null', () => { + beforeEach(() => { + propsData = { + item: { + id: 7590, + foreign: false, + publicKey: 'eaf6a426b24fd54f8fbae11c17700fc595080ca25159579c63d38dbc64284ba7', + url: 'http://localhost/api/2_0', + lastAnnouncedAt: null, + verifiedAt: null, + lastErrorAt: null, + createdAt: createdDate, + updatedAt: null, + }, + } + wrapper = Wrapper() + }) + + it('computes empty string', async () => { + expect(wrapper.vm.lastAnnouncedAt).toBe('') + }) + }) + }) + + describe('createdAt', () => { + it('computes the time string for different locales (de, en, fr, es, nl)', () => { + wrapper.vm.$i18n.locale = 'de' + wrapper = Wrapper() + expect(wrapper.vm.createdAt).toBe('vor 3 Tagen') + + wrapper.vm.$i18n.locale = 'fr' + wrapper = Wrapper() + expect(wrapper.vm.createdAt).toBe('il y a 3 jours') + + wrapper.vm.$i18n.locale = 'es' + wrapper = Wrapper() + expect(wrapper.vm.createdAt).toBe('hace 3 días') + + wrapper.vm.$i18n.locale = 'nl' + wrapper = Wrapper() + expect(wrapper.vm.createdAt).toBe('3 dagen geleden') + }) + + describe('createdAt == null', () => { + beforeEach(() => { + propsData = { + item: { + id: 7590, + foreign: false, + publicKey: 'eaf6a426b24fd54f8fbae11c17700fc595080ca25159579c63d38dbc64284ba7', + url: 'http://localhost/api/2_0', + lastAnnouncedAt: createdDate, + verifiedAt: null, + lastErrorAt: null, + createdAt: null, + updatedAt: null, + }, + } + wrapper = Wrapper() + }) + + it('computes empty string', async () => { + expect(wrapper.vm.createdAt).toBe('') + }) + }) + }) + }) + }) +}) diff --git a/admin/src/components/Fedaration/FederationVisualizeItem.vue b/admin/src/components/Fedaration/FederationVisualizeItem.vue new file mode 100644 index 000000000..faace7da1 --- /dev/null +++ b/admin/src/components/Fedaration/FederationVisualizeItem.vue @@ -0,0 +1,63 @@ + + diff --git a/admin/src/components/NavBar.spec.js b/admin/src/components/NavBar.spec.js index 1927f258c..6a4a69959 100644 --- a/admin/src/components/NavBar.spec.js +++ b/admin/src/components/NavBar.spec.js @@ -62,8 +62,12 @@ describe('NavBar', () => { ) }) + it('has a link to /federation', () => { + expect(wrapper.findAll('.nav-item').at(3).find('a').attributes('href')).toBe('/federation') + }) + it('has a link to /statistic', () => { - expect(wrapper.findAll('.nav-item').at(3).find('a').attributes('href')).toBe('/statistic') + expect(wrapper.findAll('.nav-item').at(4).find('a').attributes('href')).toBe('/statistic') }) }) @@ -72,7 +76,7 @@ describe('NavBar', () => { beforeEach(async () => { delete window.location window.location = '' - await wrapper.findAll('.nav-item').at(4).find('a').trigger('click') + await wrapper.findAll('.nav-item').at(5).find('a').trigger('click') }) afterEach(() => { @@ -97,7 +101,7 @@ describe('NavBar', () => { window.location = { assign: windowLocationMock, } - await wrapper.findAll('.nav-item').at(5).find('a').trigger('click') + await wrapper.findAll('.nav-item').at(6).find('a').trigger('click') }) afterEach(() => { diff --git a/admin/src/components/NavBar.vue b/admin/src/components/NavBar.vue index dae4bba91..2efeda048 100644 --- a/admin/src/components/NavBar.vue +++ b/admin/src/components/NavBar.vue @@ -1,6 +1,6 @@