Skip to content

julieanneCodes/vacation-request-refactor #118

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
julieanneCodes wants to merge 2 commits into
base: works
Choose a base branch
from
Open

julieanneCodes/vacation-request-refactor #118

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6bcd979
refactor: tests and code up to date for server
julieanneCodes Nov 18, 2020
1e4aa79
fix(order): removed call to the server
julieanneCodes Nov 19, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions ...necodes/VacationRequests/holidays-form.js → ...ponents/VacationRequests/holidays-form.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { LitElement, html } from 'lit-element';
import { nothing } from 'lit-html';
import { mediaQueries, formStyles } from '../utils/custom-styles';
import { dateFormatter } from '../utils/functions';
import { mediaQueries, formStyles } from '../../utils/custom-styles';
import { dateFormatter } from '../../utils/functions';

class HolidaysForm extends LitElement {
static get styles() {
Expand Down Expand Up @@ -40,14 +40,12 @@ class HolidaysForm extends LitElement {
sendData(startDate, endDate) {
const currentDate = new Date();
const obj = {
id: this.id,
applicationD: currentDate,
startDate: new Date(startDate.value),
endDate: new Date(endDate.value),
status: 'Pendiente de aprobación',
statusDate: currentDate,
};
this.id += 1;
const event = new CustomEvent('send-dates', {
detail: obj,
});
Expand Down
29 changes: 15 additions & 14 deletions ...ecodes/VacationRequests/requests-table.js → ...onents/VacationRequests/requests-table.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { LitElement, html } from 'lit-element';
import { requestTableS, mediaQueries } from '../utils/custom-styles';
import { requestTableS, mediaQueries } from '../../utils/custom-styles';
import { nothing } from 'lit-html';
import { material } from '../../../utils/fonts';
import { dateFormatter, orderItems } from '../utils/functions';
import { material } from '../../../../utils/fonts';
import { dateFormatter, orderItems } from '../../utils/functions';

class RequestsTable extends LitElement {
static get styles() {
Expand All @@ -12,8 +12,8 @@ class RequestsTable extends LitElement {
static get properties() {
return {
requestsList: { type: Array },
tableTitles: { type: Array, attribute: false },
sortedArray: { type: Array },
tableTitles: { type: Array, attribute: false },
orderType: { type: Array, attribute: false },
fromT: { type: Number },
toT: { type: Number },
Expand All @@ -32,28 +32,29 @@ class RequestsTable extends LitElement {
'Fecha de Estado',
'Eliminar',
];
this.orderType = ['currentDate', 'startDate', 'endDate'];
this.orderType = ['applicationD', 'startDate', 'endDate'];
this.toT = 0;
this.fromT = 0;
}

order(e) {
this.sortedArray = orderItems(this.requestsList, e.target.id);
this.requestsList = [...this.sortedArray];
if (e.target.value === 'asc') {
this.sortedArray = orderItems(this.requestsList, e.target.id);
e.target.value = 'desc';
e.currentTarget.classList.add('rotated');
} else {
this.requestsList = [...this.requestsList.reverse()];
if (JSON.stringify(this.requestsList) === JSON.stringify(this.sortedArray)) {
this.sortedArray.reverse();
}
e.target.value = 'asc';
e.currentTarget.classList.remove('rotated');
}
return this.requestsList;
this.requestsList = [...this.sortedArray];
}

deleteDate(id) {
const event = new CustomEvent('delete-date', {
detail: id,
detail: { id },
});
this.dispatchEvent(event);
}
Expand All @@ -76,7 +77,7 @@ class RequestsTable extends LitElement {
)}
${this.requestsList.slice(this.fromT, this.toT).map(
(item) => html`
<div id="${item.id}" class="dataRows">
<div class="dataRows">
<details class="detailsWrap">
<summary class="summaryWrap">
<span>Inicio: </span>
Expand Down Expand Up @@ -107,8 +108,8 @@ class RequestsTable extends LitElement {
<td>${dateFormatter(item.statusDate).tableDate}</td>
</tr>
</table>
<div class="buttonWrap">
<button class="deleteB" @click="${() => this.deleteDate(item.id)}">
<div class="buttonWrap" id="${item._id}">
<button class="deleteB" @click="${() => this.deleteDate(item._id)}">
<span class="material-icons">delete_outline</span>
</button>
</div>
Expand Down Expand Up @@ -143,7 +144,7 @@ class RequestsTable extends LitElement {
<td>${item.status}</td>
<td>${dateFormatter(item.statusDate).tableDate}</td>
<td>
<button id="${i}" class="deleteB" @click="${() => this.deleteDate(item.id)}">
<button id="${i}" class="deleteB" @click="${() => this.deleteDate(item._id)}">
<span class="material-icons">delete_outline</span>
</button>
</td>
Expand Down
4 changes: 2 additions & 2 deletions src/works/julieannecodes/julieannecodes-page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@ import { commonStyles } from '../../utils/custom-styles';
import '../../components/common-header';
import '../../components/work-header';
import './vacationHistoryEmp/vacation-history';
import './VacationRequests/vacation-table';
import './views/request-view';

const components = {
vacationTable: () => html`<vacation-table></vacation-table>`,
vacationRequest: () => html`<request-view></request-view>`,
vacationHistory: () => html`<vacation-history></vacation-history>`,
};
class JulieannecodesPage extends LitElement {
Expand Down
2 changes: 1 addition & 1 deletion src/works/julieannecodes/tests/form.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { expect, fixture, html } from '@open-wc/testing';
import sinon from 'sinon/pkg/sinon-esm.js';
import '../VacationRequests/holidays-form.js';
import '../components/VacationRequests/holidays-form.js';

describe('Form functions', () => {
let element, startDate, endDate, submit;
Expand Down
13 changes: 1 addition & 12 deletions src/works/julieannecodes/tests/my-functions.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { expect } from '@open-wc/testing';
import { dateFormatter, orderItems, vacationDays } from '../utils/functions';
import { employeeList } from '../utils/employees';
import { dateFormatter, vacationDays } from '../utils/functions';
import { vacationDates } from '../utils/vacation-dates';

describe('Formatted dates', async () => {
Expand All @@ -22,16 +21,6 @@ describe('Formatted dates', async () => {
});
});

describe('Order items function', async () => {
const array = [...employeeList];
const order = 'startDate';
const idSortedBy = [1, 2, 7, 6, 3, 5, 4, 0, 9, 8];

it('Returns array correctly sorted asc', async () => {
expect(orderItems(array, order).id).to.eql(idSortedBy.id);
});
});

describe('VacationDays function', async () => {
it('Returns vacation days without weekend days', async () => {
expect(vacationDays(vacationDates[2])).equal(5);
Expand Down
53 changes: 42 additions & 11 deletions src/works/julieannecodes/tests/request-table.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { expect, fixture, html } from '@open-wc/testing';
import sinon from 'sinon/pkg/sinon-esm.js';
import '../VacationRequests/requests-table.js';
import '../components/VacationRequests/requests-table.js';

const tableTitles = [
'Fecha de solicitud',
Expand All @@ -10,7 +10,7 @@ const tableTitles = [
'Fecha de Estado',
'Eliminar',
];
const orderType = ['currentDate', 'startDate', 'endDate'];
const orderType = ['applicationD', 'startDate', 'endDate'];

const data = [
{
Expand All @@ -37,6 +37,14 @@ const data = [
status: 'Pendiente de aprobación',
statusDate: new Date('2020/08/17'),
},
{
id: 3,
currentDate: new Date('2020/08/15'),
startDate: new Date('2020/09/11'),
endDate: new Date('2020/09/27'),
status: 'Pendiente de aprobación',
statusDate: new Date('2020/08/17'),
},
];

const sortedData = [
Expand All @@ -56,6 +64,14 @@ const sortedData = [
status: 'Pendiente de aprobación',
statusDate: new Date('2020/08/17'),
},
{
id: 3,
currentDate: new Date('2020/08/15'),
startDate: new Date('2020/09/11'),
endDate: new Date('2020/09/27'),
status: 'Pendiente de aprobación',
statusDate: new Date('2020/08/17'),
},
{
id: 1,
currentDate: new Date('2020/08/15'),
Expand All @@ -66,7 +82,13 @@ const sortedData = [
},
];

const component = html`<requests-table .tableTitles="${tableTitles}" .requestsList="${data}" .fromT="${0}" .toT="${2}">
const component = html`<requests-table
.tableTitles="${tableTitles}"
.requestsList="${data}"
.sortedArray="${[]}"
.fromT="${0}"
.toT="${4}"
>
</requests-table>`;
describe('Default properties and empty table', () => {
let element;
Expand All @@ -78,8 +100,9 @@ describe('Default properties and empty table', () => {
});

it('Default properties', async () => {
expect(element.sortedArray.length).equal(0);
expect(element.tableTitles).to.eql(tableTitles);
expect(element.sortedArray.length).equal(0);
expect(element.requestsList.length).equal(0);
expect(element.orderType).to.eql(orderType);
expect(element.toT).equal(0);
expect(element.fromT).equal(0);
Expand All @@ -101,16 +124,14 @@ describe('Table with data', async () => {

it('Table is rendered correctly', async () => {
expect(el.shadowRoot).not.to.be.null;
expect(el.requestsList.length).equal(3);
expect(el.requestsList.length).equal(4);
});
});

describe('Order func', () => {
let element, orderButton;
before(async () => {
element = await fixture(
html`<requests-table .tableTitles="${tableTitles}" .requestsList="${data}"></requests-table>`,
);
element = await fixture(component);
await element.updateComplete;

orderButton = element.shadowRoot.querySelectorAll('.icon');
Expand All @@ -120,16 +141,26 @@ describe('Order func', () => {
orderButton[2].click();
await element.updateComplete;

expect(element.requestsList).to.eql(sortedData);
expect(orderButton[2].value).equal('desc');
expect(element.sortedArray).to.eql(sortedData);
expect(element.requestsList).to.eql(sortedData);
await element.updateComplete;
});

it('Descending order by endDate', async () => {
const arrReversed = [...data.reverse()];
const arrReversed = element.sortedArray.reverse();
element.requestsList = element.sortedArray;
orderButton[2].click();
await element.updateComplete;

expect(orderButton[2].value).equal('asc');
expect(element.requestsList).to.eql(arrReversed);

await element.updateComplete;

@julieanneCodes julieanneCodes Nov 20, 2020

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

líneas 168-162, en el coverage me ponía que no se tomaba un camino else, por lo que he tenido que hacer esto para evaluar qué pasa cuando no se cumple la condición del if en el método de ordenar

orderButton[2].click();
element.requestsList = [];
await element.updateComplete;
orderButton[2].click();

expect(orderButton[2].value).equal('asc');
});
});
Expand Down
Loading