cambios de css web apis y html

.gitignore

@@ -5,3 +5,4 @@ node_modules/
 /test-results/
 /playwright-report/
 /playwright/.cache/
+.vscode/

package.json

@@ -7,7 +7,7 @@
     "htmlhint": "htmlhint src/*.html test/*.html",
     "eslint": "eslint --ext .js src/ test/",
     "pretest": "npm run eslint && npm run htmlhint",
-    "test": "jest --verbose --coverage test/data.spec.js",
+    "test": "jest --verbose --coverage test/*.js",
     "test:e2e": "playwright test",
     "test:oas": "jest --verbose tests-read-only/oa/",
     "pretest:oas-html": "npm run pretest",
@@ -47,4 +47,4 @@
   "jest": {
     "testEnvironment": "jsdom"
   }
-}
+}

src/index.html

@@ -12,16 +12,16 @@ <h1>Game of Thrones</h1>
     <main>
       <h2>Winter is coming...</h2>
       <form action="">
-        <label for="select-filter">Filter house</label>
-        <select name="family" id="select-filter"></select>
-        <label for="select-sort">Sort</label>
-        <select name="first-name" id="select-sort">
+        <label for="filter">Filter house</label>
+        <select name="family" id="filter" data-testid="select-filter"></select>
+        <label for="sort">Sort</label>
+        <select name="firstName" id="sort" data-testid="select-sort">
           <option value=""></option>
           <option value="asc">A - Z</option>
           <option value="desc">Z - A</option>
         </select>
         <button id="button-fact">Fun Fact</button>
-        <button id="button-reset">Reset</button>
+        <button id="button-reset" data-testid="button-clear">Reset</button>
       </form>
       <section id="root"></section>
     </main>

src/main.js

@@ -7,9 +7,9 @@ const dataGOT = data.got
 console.log(dataGOT);
 
 const root = document.getElementById('root')
-const selectFilter = document.querySelector('#select-filter')
-const selectSort = document.querySelector('#select-sort')
-const buttonFact = document.getElementById('button-fact')
+const selectFilter = document.querySelector('#filter')
+const selectSort = document.querySelector('#sort')
+const buttonFact = document.querySelector('#button-fact')
 const buttonReset = document.getElementById('button-reset')
 
 // eslint-disable-next-line no-undef

src/style.css

@@ -17,6 +17,6 @@ form {
     list-style: none;
 }
 
-li {
+li, .test {
     border: 1px solid black;
-}
+}

src/viewFunctions.js

@@ -3,17 +3,17 @@ export const renderItems = (data) => {
   let template = '';
   data.forEach(element => {
     template += `
-    <li>
-      <dl itemscope itemtype="got">
+    <li class="test" itemscope itemtype="got">
+      <dl>
       <img src="${element.imageUrl}">
-      <dt>Name:</dt><dd itemprop="fullName">${element.fullName}</dd>
+      <dt>Name:</dt><span itemprop="firstName" style="display=none">${element.firstName}</span><dd itemprop="fullName">${element.fullName}</dd>
       <dt>House:</dt><dd itemprop="family">${element.family}</dd>
       <dt>Title:</dt><dd itemprop="title">${element.title}</dd>
       </dl>
     </li>
     `
   });
-  cardContainer.innerHTML = template
+  cardContainer.innerHTML = template;
   return cardContainer
 };
 

test/data.js

@@ -0,0 +1,51 @@
+export const data = [
+  {
+    "id": 0,
+    "firstName": "Daenerys",
+    "lastName": "Targaryen",
+    "fullName": "Daenerys Targaryen",
+    "title": "Mother of Dragons",
+    "family": "House Targaryen",
+    "imageUrl": "https://thronesapi.com/assets/images/daenerys.jpg",
+    "born": "284 DC"
+  },
+  {
+    "id": 1,
+    "firstName": "Samwell",
+    "lastName": "Tarly",
+    "fullName": "Samwell Tarly",
+    "title": "Maester",
+    "family": "House Tarly",
+    "imageUrl": "https://thronesapi.com/assets/images/sam.jpg",
+    "born": "283 DC"
+  },
+  {
+    "id": 2,
+    "firstName": "Jon",
+    "lastName": "Snow",
+    "fullName": "Jon Snow",
+    "title": "King of the North",
+    "family": "House Stark",
+    "imageUrl": "https://thronesapi.com/assets/images/jon-snow.jpg",
+    "born": "283 DC"
+  },
+  {
+    "id": 3,
+    "firstName": "Arya",
+    "lastName": "Stark",
+    "fullName": "Arya Stark",
+    "title": "No One",
+    "family": "House Stark",
+    "imageUrl": "https://thronesapi.com/assets/images/arya-stark.jpg",
+    "born": "289 AL"
+  },
+  {
+    "id": 4,
+    "firstName": "Sansa",
+    "lastName": "Stark",
+    "fullName": "Sansa Stark",
+    "title": "Lady of Winterfell",
+    "family": "House Stark",
+    "imageUrl": "https://thronesapi.com/assets/images/sansa-stark.jpeg",
+    "born": "286 AL"
+  }];

tests-read-only/.eslintrc

@@ -0,0 +1,6 @@
+{
+  "env": {
+    "jest": true,
+    "es6": true
+  }
+}

tests-read-only/e2e/app.spec.js

@@ -9,22 +9,24 @@ test.describe('Pagina interraciones', () => {
   const getItempropValues = async (page, property) => {
     const liElements = await page.$$(liSelector);
     const values = await Promise.all(liElements.map(async li => {
+      // const html = await li.innerHTML();
+      // console.log(html);
       const value = await li.$eval(`[itemprop=${property}]`, (el) => el.textContent);
       return value;
     }));
     return values;
   };
 
-  const getDataIds = (elements) => Promise.all(elements.map(async (el) => await el.getAttribute('data-id')));
+  const getDataIds = (elements) => Promise.all(elements.map(async (el) => await el.getAttribute('data-id')));  
 
   const getSortOptions = async (page) => {
-    const selectSortEl = await page.$('#select-sort');
-    let sortByProperty = await selectSortEl.getAttribute('name');
+    const selectSortEl = await page.getByTestId('select-sort')
+    let sortByProperty = await selectSortEl.getAttribute('name'); 
     const sortOrderEl = await page.$('[name="sort-order"]');
 
     if (!sortOrderEl) { // simple sort UI with just one type of sort
       const sortOrder = await selectSortEl.getAttribute('value');
-      return {
+      return { 
         selectSortEl,
         sortByProperty,
         sortOrderEl: selectSortEl,
@@ -34,9 +36,9 @@ test.describe('Pagina interraciones', () => {
 
     const sortOrder = await sortOrderEl.getAttribute('value');
     sortByProperty = await selectSortEl.getAttribute('name');
-    return {
+    return { 
       selectSortEl,
-      sortByProperty,
+      sortByProperty, 
       sortOrderEl,
       sortOrder
     }
@@ -58,15 +60,15 @@ test.describe('Pagina interraciones', () => {
   test.describe('sort', () => {
 
     let sortOrderEl, sortByProperty;
-
+  
     test.beforeEach(async ({ page }) => {
       await page.goto('http://localhost:3000/');
       ({ sortOrderEl, sortByProperty } = await getSortOptions(page));
     });
 
     test('de ascendente "asc" a descendente "desc"', async ({ page }) => {
       // await sortOrderEl.selectOption(sortOptions.asc);
-      await selectSortOrder(sortOrderEl,sortOptions.asc);
+      await selectSortOrder(sortOrderEl,sortOptions.asc); 
       const sortedValuesAsc = await getItempropValues(page, sortByProperty);
 
       await selectSortOrder(sortOrderEl,sortOptions.desc);
@@ -90,12 +92,11 @@ test.describe('Pagina interraciones', () => {
 
   test.describe('filter', () => {
 
-    let selectFilter, filterProperty;
+    let selectFilter;
 
     test.beforeEach(async ({ page }) => {
       await page.goto('http://localhost:3000/');
-      selectFilter = await page.$('#select-filter');
-      filterProperty = await selectFilter.getAttribute('name');
+      selectFilter = await page.getByTestId('select-filter');
     });
 
     test(`cuando elige un filter a otro los resultados se cambian`, async ({ page }) => {
@@ -117,7 +118,7 @@ test.describe('Pagina interraciones', () => {
     test.beforeEach(async ({ page }) => {
       await page.goto('http://localhost:3000/');
 
-      selectFilter = await page.$('#select-filter');
+      selectFilter = await page.getByTestId('select-filter');
       ({ sortOrderEl, sortByProperty } = await getSortOptions(page));
     });
 
@@ -126,11 +127,11 @@ test.describe('Pagina interraciones', () => {
 
       // sacamos los valores de propiedad en el orden que ocurre en la pagina
       // sin sort
-      const valuesNoSorted = await getItempropValues(page, sortByProperty);
+      const valuesNoSorted = await getItempropValues(page, sortByProperty);  
 
       await selectSortOrder(sortOrderEl,sortOptions.asc);
       const valuesSortedAsc = await getItempropValues(page, sortByProperty);
-
+  
       // await sortOrderEl.selectOption(sortOptions.desc);
       await selectSortOrder(sortOrderEl,sortOptions.desc);
       const valuesSortedDesc = await getItempropValues(page, sortByProperty);
@@ -139,15 +140,15 @@ test.describe('Pagina interraciones', () => {
       expect(valuesSortedDesc).toEqual([...valuesNoSorted].sort().reverse());
     });
 
-    test('el button "button-reset" limpia los filtros y sort, volvemos a los resultados original', async ({ page }) => {
+    test('el button "button-clear" limpia los filtros y sort, volvemos a los resultados original', async ({ page }) => {
       await page.goto('http://localhost:3000/');
       const originalLis = await page.$$(liSelector);
-      const select = await page.$('#select-filter');
+      const select = await page.getByTestId('select-filter');
       await select.selectOption({ index: 1 });
       const liElements = await page.$$(liSelector);
       expect(liElements.length).not.toEqual(originalLis.length); // probar si no hay mismo cantidad elementos
 
-      const buttonReset = await page.$('#button-reset');
+      const buttonReset = await page.getByTestId('button-clear');
       await buttonReset.click();
       const clearLiElements = await page.$$(liSelector);
       expect(clearLiElements.length).toEqual(originalLis.length);