@iamproperty/components 5.7.1-beta6 → 6.1.0--beta

package/assets/ts/components/video-card/video-card.component.ts

@@ -0,0 +1,227 @@
+// @ts-nocheck
+import {trackComponent, trackComponentRegistered} from "../_global";
+import {cardHTML,setupCard} from "../../modules/card.module";
+
+trackComponentRegistered("iam-video-card");
+
+class iamVideoCard extends HTMLElement {
+
+  constructor(){
+    super();
+    this.attachShadow({ mode: 'open'});
+
+    const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';
+    const loadCSS = `@import "${assetLocation}/css/components/video-card.component.css";`;
+    
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    
+    ${loadCSS}
+    </style>
+    ${cardHTML}
+    <dialog>
+      <div class="embed"></div>
+    </dialog>
+    `;
+
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+	async connectedCallback() {
+
+    const cardComponent = this;
+    const cardHead =  cardComponent.shadowRoot.querySelector('.card__head');
+
+    const randLetter = String.fromCharCode(65 + Math.floor(Math.random() * 26));
+    const link_id = randLetter + Date.now();
+
+    let dialog;
+    let embed;
+
+    setupCard(cardComponent);
+
+    // Check if youtube or vimeo video link is present
+    if(cardComponent.querySelector('[data-youtube]'))
+      cardComponent.setAttribute('data-youtube',cardComponent.querySelector('[data-youtube]').getAttribute('data-youtube'));
+
+    if(cardComponent.querySelector('[data-vimeo]'))
+      cardComponent.setAttribute('data-vimeo',cardComponent.querySelector('[data-vimeo]').getAttribute('data-vimeo'));
+
+    // General dialog stuff
+    if(cardComponent.hasAttribute('data-youtube') || cardComponent.hasAttribute('data-vimeo')){
+
+      cardHead.setAttribute('tabindex','0');
+
+      // Add dialog to page
+      if(!document.getElementById(`${link_id}-dialog`)){
+        document.body.insertAdjacentHTML('beforeend', `<dialog id="${link_id}-dialog"><div class="embed" id="${link_id}"></div></dialog>`);
+      }
+
+      dialog = document.getElementById(`${link_id}-dialog`);
+      embed = document.getElementById(link_id);
+    }
+
+    // Youtube
+    if(cardComponent.hasAttribute('data-youtube')){
+
+      // Load the scripts only once
+      if(!document.body.classList.contains('youtubeLoaded')){
+        let loaded = await this.loadYouTubeScripts();
+      }
+      cardHead.addEventListener('click',function(){
+
+        const customEvent = new CustomEvent("play-video", { detail: { 'Video Type': 'YoutTube', 'ID': cardComponent.getAttribute('data-youtube') } });
+        cardComponent.dispatchEvent(customEvent);
+
+        cardComponent.createYoutTubeVideo(embed);
+        dialog.showModal();
+      });
+
+      dialog.addEventListener("close", (event) => {
+
+        if(window.player[embed.getAttribute('id')] && typeof window.player[embed.getAttribute('id')].pauseVideo == "function"){
+
+          window.player[embed.getAttribute('id')].pauseVideo();
+        }
+
+        
+        const customEvent = new CustomEvent("close-video", { detail: { 'Video Type': 'YoutTube', 'ID': cardComponent.getAttribute('data-youtube') } });
+        cardComponent.dispatchEvent(customEvent);
+      });
+
+    }
+    else if(cardComponent.hasAttribute('data-vimeo')){ // Vimeo
+
+      cardHead.addEventListener('click',function(){
+
+        const videoId = cardComponent.getAttribute('data-vimeo');
+
+        const customEvent = new CustomEvent("play-video", { detail: { 'Video Type': 'Vimeo', 'ID': videoId } });
+        cardComponent.dispatchEvent(customEvent);
+
+        if(!embed.querySelector('iframe'))
+          embed.innerHTML = `<iframe src="https://player.vimeo.com/video/${videoId}?autoplay=1" width="100%" height="100%" frameborder="0" allow="autoplay; encrypted-media" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>`
+
+        dialog.showModal();
+      });
+
+      dialog.addEventListener("close", (event) => {
+        
+        embed.innerHTML = ``; // Remove the video since we cant pause it
+
+        const customEvent = new CustomEvent("close-video", { detail: { 'Video Type': 'Vimeo', 'ID': cardComponent.getAttribute('data-vimeo') } });
+        cardComponent.dispatchEvent(customEvent);
+      });
+    }
+
+    trackComponent(cardComponent,"iam-video-card",['play-video','close-video']);
+  }
+
+  loadYouTubeScripts(){
+
+    return new Promise((resolve, reject) => {
+
+      const image = new Image();
+      image.onload = function(){
+
+        // This code loads the IFrame Player API code asynchronously.
+        var tag = document.createElement('script');
+        tag.src = "https://www.youtube.com/iframe_api";
+        var firstScriptTag = document.getElementsByTagName('script')[0];
+        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+        document.body.classList.add('youtubeLoaded');
+        resolve(true);
+      };
+      image.onerror = function(){
+        reject(false);
+      };
+      image.src = "https://youtube.com/favicon.ico";
+    });
+
+  }
+
+  createYoutTubeVideo(target){
+
+    if(typeof window.player == "undefined"){
+      window.player = [];
+    }
+
+    var link_id = target.getAttribute('id');
+    var video_id = this.getAttribute('data-youtube');
+
+    console.log(window.player)
+
+    if(typeof window.player[link_id] != 'undefined' && typeof window.player[link_id].pauseVideo == "function"){
+      
+      window.player[link_id].playVideo();
+
+      return false;
+    }
+
+    // This function creates an <iframe> (and YouTube player) after the API code downloads.
+    //function onYouTubeIframeAPIReady() {
+
+      window.player[link_id] = new YT.Player(link_id, {
+        height: '100%',
+        width: '100%',
+        videoId: video_id,
+        playerVars: {
+          'modestbranding': 1,
+          'playsinline': 1,
+          'rel': 0,
+          'showinfo': 0
+        },
+        events: {
+          'onReady': onPlayerReady,
+          'onStateChange': onPlayerStateChange
+        }
+      });
+    //}
+    //onYouTubeIframeAPIReady();
+
+    // The API will call this function when the video player is ready.
+    function onPlayerReady(event) {
+      // Play the video straight away
+      event.target.playVideo();
+    }
+
+    // The API calls this function when the player's state changes.
+    // The function indicates that when playing a video (state=1)
+    var done = false;
+    function onPlayerStateChange(event) {
+
+      if (event.data == YT.PlayerState.PLAYING && !done) {
+
+        var link = document.getElementById(link_id);
+        link.classList.add('player-ready');
+
+        done = true;
+      }
+    }
+  }
+
+  static get observedAttributes() {
+    return ["data-image"];
+  }
+  
+  attributeChangedCallback(attrName, oldVal, newVal) {
+    switch (attrName) {
+      case "data-image": {
+
+        if(oldVal != newVal){
+
+          const cardHeadImg = this.shadowRoot.querySelector('.card__head img');
+
+          if(cardHeadImg)
+            cardHeadImg.setAttribute('src',newVal);
+        }
+        break;
+      }
+    }
+
+  }
+}
+
+export default iamVideoCard;

package/assets/ts/components.ts

@@ -0,0 +1,38 @@
+// @ts-nocheck
+const components = ["accordion","header","table","tabs",'card','filter-card','video-card','record-card',"filterlist",'applied-filters','pagination','notification','actionbar','nav','collapsible-side','address-lookup','fileupload','search','inline-edit','multiselect','slider','carousel','marketing','barchart'];
+
+const prefix = "iam"
+const options = {
+  rootMargin: '50px',
+  threshold: 0.1
+}
+const componentExt = ".component.min.js";
+
+// Load components - Each component will load once the first of its type has been loaded
+components.forEach((component) => {
+
+  if(document.getElementsByTagName(`${prefix}-${component}`).length === 0)
+    return;
+
+  let callback = (entries:any) => {
+    entries.forEach((entry:any) => {
+      
+      if(entry.intersectionRatio > 0){
+
+        console.log(component)
+        
+        import(`./components/${component}/${component}${componentExt}`).then(module => {
+          if (!window.customElements.get(`${prefix}-${component}`))
+            window.customElements.define(`${prefix}-${component}`, module.default);
+        }).catch((err) => {
+          console.log(err.message);
+        });  
+
+        intObserver.unobserve(entry.target);
+      }
+    });
+  };
+
+  const intObserver = new IntersectionObserver(callback, options);
+  intObserver.observe(document.getElementsByTagName(`${prefix}-${component}`)[0]);
+});

package/assets/ts/modules/card.module.ts

@@ -0,0 +1,43 @@
+export const cardHTML = `<div class="card__head" part="head">
+  <slot name="head"></slot>
+</div>
+<div class="card__badges"><slot name="badges"></slot></div>
+<slot name="checkbox" class="activate-prevent-hover"></slot>
+<div class="card__body" part="body">
+  <slot></slot>
+  <slot name="secondary" part="secondary"></slot>
+</div>
+<div class="card__details" part="details">
+  <slot name="details"></slot>
+</div>
+<div class="card__footer" part="footer">
+  <slot name="footer"></slot>
+</div>`;
+
+
+export const setupCard = (cardComponent:any) => {
+
+  cardComponent.classList.add('card');
+  const cardHead =  cardComponent.shadowRoot.querySelector('.card__head');
+  const cardBody =  cardComponent.shadowRoot.querySelector('.card__body');
+
+  if(cardComponent.hasAttribute('data-image')){
+
+    cardHead.innerHTML += `<img src="${cardComponent.getAttribute('data-image')}" alt="" loading="lazy" part="image" />`;
+  }
+
+
+  // Inset the HTML for the data total or icon fallback
+  if(cardComponent.hasAttribute('data-total')){
+
+    cardBody.insertAdjacentHTML('beforeend', `<div class="card__total">${cardComponent.getAttribute('data-total')}</div>`);
+  }
+  else if(cardComponent.querySelector('[slot="total-icon"]')){
+    
+    cardBody.insertAdjacentHTML('beforeend', `<div class="card__total"><slot name="total-icon"></slot></div>`);
+  }
+
+  if(!cardComponent.querySelector('[slot="badges"]')){
+    cardComponent.shadowRoot.querySelector('.card__badges').remove();
+  }
+}

package/assets/ts/modules/chart.module.ts

@@ -1,4 +1,3 @@
-import { numberOfDays } from './helpers'
 
 // #region Functions that setup and trigger other functions 
 
@@ -41,20 +40,18 @@ export const setupChart = (chartElement:any,chartOuter:any,tableElement:any) =>
   Array.from(chartOuter.querySelectorAll(':scope > input[type="checkbox"],:scope > input[type="radio"]')).map((element: any) => { element.remove(); })
   // #endregion
 
-  let {xaxis} = getChartData(chartElement,chartOuter);
+  let {xaxis} = getChartData(chartElement);
 
-  setCellData(chartElement,chartOuter,tableElement);
+  setCellData(chartElement,tableElement);
 
   createChartKey(chartOuter,tableElement,chartKey);
-  createChartGuidelines(chartElement,chartOuter,chartGuidelines);
-  createChartYaxis(chartElement,chartOuter,chartYaxis);
+  createChartGuidelines(chartElement,chartGuidelines);
+  createChartYaxis(chartElement,chartYaxis);
 
   if(xaxis){
-    createXaxis(chartElement,chartOuter,xaxis);
+    createXaxis(chartOuter);
   }
 
-
-  
   return true;
 };
 // #endregion
@@ -115,7 +112,7 @@ export const setEventListener = function(chartElement:any, chartOuter:any) {
 
     
     shadowTable.innerHTML = table.innerHTML;
-    setCellData(chartElement,chartOuter,shadowTable);
+    setCellData(chartElement,shadowTable);
 
   });
 }
@@ -132,7 +129,7 @@ export const setEventObservers = function(chartElement:any,chartOuter:any) {
 
     for (const mutation of mutationList) {
 
-      if(mutation.attributeName == 'class' || (mutation.type === 'attributes' && mutation.attributeName === 'data-total') || mutation.type === 'attributes') {
+      if(mutation.attributeName == 'class' || (mutation.type === 'attributes') || mutation.type === 'attributes') {
 
         shadowTable.innerHTML = table.innerHTML;
         setupChart(chartElement,chartOuter,shadowTable);
@@ -173,29 +170,29 @@ export const setEventObservers = function(chartElement:any,chartOuter:any) {
 // #endregion
 
 // #region GET functions
-export const getChartData = function(chartElement:any,chartOuter:any){
+export const getChartData = function(chartElement:any){
 
 
-  let table = chartOuter.querySelector('.chart__wrapper table');
+  let table = chartElement.shadowRoot.querySelector('.chart__wrapper table');
 
   let min:any = chartElement.hasAttribute('data-min') ? chartElement.getAttribute('data-min') : 0;
   let max:any = chartElement.hasAttribute('data-max') ? chartElement.getAttribute('data-max') : getLargestValue(chartElement,table);
-  let type:string = chartElement.hasAttribute('data-type') ? chartElement.getAttribute('data-type') : 'column';
+  //let type:string = chartElement.hasAttribute('data-type') ? chartElement.getAttribute('data-type') : 'column';
   let yaxis:any = chartElement.hasAttribute('data-yaxis') ? chartElement.getAttribute('data-yaxis').split(',') : [];
   let guidelines:any = chartElement.hasAttribute('data-guidelines') ? chartElement.getAttribute('data-guidelines').split(',') : [];
-  let targets:any = chartElement.hasAttribute('data-targets') ? JSON.parse(chartElement.getAttribute('data-targets')) : null;
-  let events:any = chartElement.hasAttribute('data-events') ? JSON.parse(chartElement.getAttribute('data-events')) : null;
+  //let targets:any = chartElement.hasAttribute('data-targets') ? JSON.parse(chartElement.getAttribute('data-targets')) : null;
+  //let events:any = chartElement.hasAttribute('data-events') ? JSON.parse(chartElement.getAttribute('data-events')) : null;
   let xaxis:any = chartElement.hasAttribute('data-xaxis') ? chartElement.getAttribute('data-xaxis').split(',') : null;
-  let increment = chartElement.hasAttribute('data-increment') ? chartElement.getAttribute('data-increment'): null;
+  //let increment = chartElement.hasAttribute('data-increment') ? chartElement.getAttribute('data-increment'): null;
   
-  let start:any = chartElement.hasAttribute('data-start') ? chartElement.getAttribute('data-start') : 0;
-  let end:any = chartElement.hasAttribute('data-end') ? chartElement.getAttribute('data-end') : getLargestValue(chartElement,table); // TODO - get largest value from the data-xaxis
+  //let start:any = chartElement.hasAttribute('data-start') ? chartElement.getAttribute('data-start') : 0;
+  //let end:any = chartElement.hasAttribute('data-end') ? chartElement.getAttribute('data-end') : getLargestValue(chartElement,table); // TODO - get largest value from the data-xaxis
 
 
-  let slope:any = chartElement.hasAttribute('data-slope') ? chartElement.getAttribute('data-slope') : null;
-  let yInt:any = chartElement.hasAttribute('data-yint') ? chartElement.getAttribute('data-yint') : null;
+  //let slope:any = chartElement.hasAttribute('data-slope') ? chartElement.getAttribute('data-slope') : null;
+  //let yInt:any = chartElement.hasAttribute('data-yint') ? chartElement.getAttribute('data-yint') : null;
 
-  return {min,max,type,yaxis,targets,events,xaxis,increment,start,end,slope,yInt,guidelines};
+  return {min,max,yaxis,xaxis,guidelines};
 }
 
 function getLargestValue(chartElement:any,table:any){
@@ -252,7 +249,7 @@ const getValues = function(value:number,min:any,max:any,start?:number){
 // #endregion
 
 // #region SET functions - set data attributes and classes
-export const setCellData = function(chartElement:any,chartOuter:any,table:any){
+export const setCellData = function(chartElement:any,table:any){
   
   Array.from(table.querySelectorAll('tbody tr')).forEach((tr:any) => {
 
@@ -274,7 +271,7 @@ export const setCellData = function(chartElement:any,chartOuter:any,table:any){
     tr.setAttribute('data-numeric',rowValue);
   });
 
-  let {min, max} = getChartData(chartElement,chartOuter);
+  let {min, max} = getChartData(chartElement);
   
   Array.from(table.querySelectorAll('tbody tr')).forEach((tr:any, index) => {
 
@@ -299,19 +296,6 @@ export const setCellData = function(chartElement:any,chartOuter:any,table:any){
         td.setAttribute('data-label',table.querySelectorAll('thead th')[index].textContent);
     });
 
-    /*
-    if(tr.querySelector('[data-label="Total"]')){
-      tr.setAttribute('data-total',tr.querySelector('[data-label="Total"][data-numeric]').getAttribute('data-numeric'));
-    }
-
-    if(tr.querySelector('[data-label="Min"]')){
-      tr.setAttribute('data-min',tr.querySelector('[data-label="Min"][data-numeric]').getAttribute('data-numeric'));
-    }
-    if(tr.querySelector('[data-label="Max"]')){
-      tr.setAttribute('data-max',tr.querySelector('[data-label="Max"][data-numeric]').getAttribute('data-numeric'));
-    }
-
-      */
 
     let rowMin = tr.hasAttribute('data-min') ? tr.getAttribute('data-min') : min;
     let rowMax = tr.hasAttribute('data-max') ? tr.getAttribute('data-max') : max;
@@ -437,20 +421,13 @@ function createChartKeyItem(chartID:string,index:number,text:Array<string>,chart
   return previousInput;
 }
 
-export const createChartGuidelines = function(chartElement:any,chartOuter:any,chartGuidelines:any){
+export const createChartGuidelines = function(chartElement:any,chartGuidelines:any){
 
-  let {min, max, yaxis, increment, guidelines} = getChartData(chartElement,chartOuter);
+  let {min, max, yaxis, guidelines} = getChartData(chartElement);
 
   if(!guidelines.length)
     guidelines = yaxis;
 
-
-  if(increment == "days"){
-    
-    max = numberOfDays(min,max);
-    min = 0;
-  }
-
   chartGuidelines.innerHTML = '';
   for (var i = 0; i < guidelines.length; i++) {
 
@@ -463,56 +440,30 @@ export const createChartGuidelines = function(chartElement:any,chartOuter:any,ch
   }
 }
 
-export const createChartYaxis = function(chartElement:any,chartOuter:any,chartYaxis:any){
-
-  let {min, max, yaxis, increment} = getChartData(chartElement,chartOuter);
-
-  let startDay = min;
-
-  if(increment == "days"){
-
-    max = numberOfDays(min,max);
-    min = 0;
-  }
+export const createChartYaxis = function(chartElement:any,chartYaxis:any){
 
+  let {min, max, yaxis} = getChartData(chartElement);
 
   chartYaxis.innerHTML = '';
   for (var i = 0; i < yaxis.length; i++) {
 
     let value = parseFloat(yaxis[i].replace('£','').replace('%',''));
 
-    if(increment == "days"){
-
-        value = numberOfDays(startDay,yaxis[i]);
-      
-    }
-
     let { axis } = getValues(value,min,max);
     chartYaxis.innerHTML += `<div class="axis__point" style="--percent:${axis}%;"><span>${yaxis[i]}</span></div>`;
   }
 }
 
-export const createXaxis = function(chartElement:any,chartOuter:any,xaxis:any){
+export const createXaxis = function(chartOuter:any){
 
   const chart = chartOuter.querySelector('.chart');
   let chartXaxis = chartOuter.querySelector('.chart__xaxis');
 
-  let {increment,start,end} = getChartData(chartElement,chartOuter);
-
   if(!chartXaxis){
     chartXaxis = document.createElement('div');
     chartXaxis.setAttribute('class','chart__xaxis');
   }
-  if(increment && start && end){
-    chartXaxis.innerHTML = '';
-    for (var i = 0; i < xaxis.length; i++) {
 
-      let value = parseFloat(xaxis[i].replace('£','').replace('%',''));
-      let position = ((value - start)/(end - start)) * 100;
-
-      chartXaxis.innerHTML += `<div class="axis__point" style="--percent:${position}%;"><span>${xaxis[i]}</span></div>`;
-    }
-  }
   chart.prepend(chartXaxis);
 }
 

package/assets/ts/modules/dialogs.ts

@@ -1,6 +1,4 @@
 // @ts-nocheck
-import { createEmbed } from "./youtubevideo"; 
-
 const extendDialogs = (body) => {
 
   Array.from(body.querySelectorAll('dialog[open]')).forEach((dialog, index) => {
@@ -231,12 +229,6 @@ const extendDialogs = (body) => {
 
 export const createDialog = (dialog) => { 
 
-  // Create the video embed
-  let videoButton = dialog.querySelector('.youtube-embed a');
-  if (videoButton){
-    createEmbed(videoButton)
-  }
-
   // Multi dialog
   if(dialog.classList.contains('dialog--multi') && !dialog.querySelector(':scope > .steps')) {
     createMultiFormDialog(dialog);

package/assets/ts/modules/table.ts

@@ -758,7 +758,7 @@ export const filterTable = (table, form, wrapper) => {
   });
 
   // Work out what to display after pagination
-  Array.from(table.querySelectorAll('tbody tr:not(.filtered')).forEach((row, index) => {
+  Array.from(table.querySelectorAll('tbody tr:not(.filtered)')).forEach((row, index) => {
 
     matched++;
 

package/assets/ts/scripts.ts

@@ -0,0 +1,22 @@
+// @ts-nocheck
+// Modules
+import * as helpers from '../js/modules/helpers'
+import extendDialogs from '../js/modules/dialogs'
+import createDataLayer from '../js/modules/data-layer'
+import extendInputs from '../js/modules/inputs';
+import createDynamicEvents from '../js/modules/dynamicEvents'
+
+// Attach classes to dom elements
+document.addEventListener("DOMContentLoaded", function() {
+
+  createDataLayer();
+  createDynamicEvents();
+  
+  // Global stuff
+  helpers.addBodyClasses(document.body);
+  helpers.addGlobalEvents(document.body);
+  
+  extendDialogs(document.body);
+  extendInputs(document.body);
+
+});

package/assets/ts/tests/chart.spec.ts

@@ -0,0 +1,77 @@
+// @ts-nocheck
+import '@testing-library/jest-dom'
+import {getChartData} from "../modules/chart.module";
+import puppeteer from 'puppeteer';
+import "expect-puppeteer";
+
+
+import iamBarChart from "../components/barchart/barchart.component";
+
+describe('The bar chart component', () => {
+
+  if (!window.customElements.get(`iam-barchart`))
+    window.customElements.define(`iam-barchart`, iamBarChart);
+
+document.body.innerHTML = `
+<iam-barchart>
+<table>
+  <thead>
+    <tr>
+      <th>Items</th>
+      <th>Value</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Item 1</td>
+      <td>300</td>
+    </tr>
+    <tr>
+      <td>Item 2</td>
+      <td>150</td>
+    </tr>
+    <tr>
+      <td>Item 3</td>
+      <td>100</td>
+    </tr>
+  </tbody>
+</table>
+</iam-barchart>`;
+
+  test('should create the min attribute as 0', () => {
+
+    let component = document.querySelector('iam-barchart');
+    let {min} = getChartData(component);
+
+    expect(min).toEqual(0);
+  });
+
+  test('should equal the largest single value', () => {
+
+    let component = document.querySelector('iam-barchart');
+    let {max} = getChartData(component);
+
+    expect(max).toEqual(300);
+  });
+
+  test('should equal the largest single value', () => {
+
+    let component = document.querySelector('iam-barchart');
+    let {max} = getChartData(component);
+
+    expect(max).toEqual(300);
+  });
+
+  test('should have the class of .chart--fit-content added as there is less than 10 bars', () => {
+
+    let component = document.querySelector('iam-barchart');
+    expect(component.classList).toContain("chart--fit-content");
+  });
+
+  test('should have the class of .chart--no-scale added as there is less than 5 bars', () => {
+
+    let component = document.querySelector('iam-barchart');
+    expect(component.classList).toContain("chart--no-scale");
+  });
+
+});

package/assets/ts/tests/filterlist.spec.ts

@@ -24,6 +24,6 @@ describe('addDataAttributes', () => {
   test('should add a class of d-none to each item except the one containing Lucas Myers', () => {
 
     expect(list.querySelectorAll('li:not(.d-none)').length).toEqual(1);
-    expect(list.querySelector('li:not(.d-none').textContent).toEqual('Lucas Myers');
+    expect(list.querySelector('li:not(.d-none)').textContent).toEqual('Lucas Myers');
   });
 });