Fixed country flag and added more tests

package.json

@@ -1,6 +1,6 @@
 {
   "name": "formulaone-card",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Frontend card for hass-formulaoneapi",
   "main": "index.js",
   "scripts": {

src/cards/driver-standings.ts

@@ -1,9 +1,8 @@
 import { HomeAssistant } from "custom-card-helpers";
 import { html, HTMLTemplateResult } from "lit-html";
 import { DriverStanding, FormulaOneCardConfig } from "../types/formulaone-card-types";
-import { getCountryFlagUrl, getDriverName } from "../utils";
+import { getCountryFlagByNationality, getDriverName } from "../utils";
 import { BaseCard } from "./base-card";
-import * as countries from '../data/countries.json';
 
 export default class DriverStandings extends BaseCard {
     defaultTranslations = {
@@ -25,18 +24,12 @@ export default class DriverStandings extends BaseCard {
 
         return (data.length == 0 ? 1 : data.length / 2 ) + 1;
     }  
-
-    getCountryFlag = (nationality: string) => {
-        const country = countries.filter(x => x.Nationality === nationality)[0];
-
-        return getCountryFlagUrl(country.Code);
-    }
 
     renderStandingRow(standing: DriverStanding): HTMLTemplateResult {
         return html`
             <tr>
                 <td class="width-40 text-center">${standing.position}</td>
-                <td>${(this.config.standings?.show_flag ? html`<img height="10" width="20" src="${this.getCountryFlag(standing.Driver.nationality)}">&nbsp;` : '')}${standing.Driver.code}</td>
+                <td>${(this.config.standings?.show_flag ? html`<img height="10" width="20" src="${getCountryFlagByNationality(standing.Driver.nationality)}">&nbsp;` : '')}${standing.Driver.code}</td>
                 <td>${getDriverName(standing.Driver, this.config)}</td>
                 ${(this.config.standings?.show_team ? html`<td>${standing.Constructors[0].name}</td>` : '')}
                 <td class="width-60 text-center">${standing.points}</td>

src/cards/last-result.ts

@@ -1,7 +1,7 @@
 import { HomeAssistant } from "custom-card-helpers";
 import { html, HTMLTemplateResult } from "lit-html";
 import { FormulaOneCardConfig, Race, Result } from "../types/formulaone-card-types";
-import { getCircuitName, getCountryFlagUrl, getDriverName } from "../utils";
+import { getCircuitName, getCountryFlagByName, getDriverName } from "../utils";
 import { BaseCard } from "./base-card";
 
 export default class LastResult extends BaseCard {
@@ -46,7 +46,7 @@ export default class LastResult extends BaseCard {
         const imageHtml = html`<img width="100%" src="https://www.formula1.com/content/dam/fom-website/2018-redesign-assets/Circuit%20maps%2016x9/${circuitName}_Circuit.png.transform/7col/image.png">`;
         const imageWithLinkHtml = this.config.image_clickable ? html`<a target="_new" href="${data.Circuit.url}">${imageHtml}</a>` : imageHtml;
 
-        return html`<h2><img height="25" src="${getCountryFlagUrl(data.Circuit.Location.country)}">&nbsp;  ${data.round} :  ${data.raceName}</h2>${imageWithLinkHtml}<br> `
+        return html`<h2><img height="25" src="${getCountryFlagByName(data.Circuit.Location.country)}">&nbsp;  ${data.round} :  ${data.raceName}</h2>${imageWithLinkHtml}<br> `
     }
 
     render() : HTMLTemplateResult {

src/cards/next-race.ts

@@ -3,7 +3,7 @@ import { html, HTMLTemplateResult } from "lit-html";
 import { formatDateNumeric } from "../lib/format_date";
 import { formatDateTimeRaceInfo } from "../lib/format_date_time";
 import { FormulaOneCardConfig, Race } from "../types/formulaone-card-types";
-import { getCircuitName, getCountryFlagUrl } from "../utils";
+import { getCircuitName, getCountryFlagByName } from "../utils";
 import { BaseCard } from "./base-card";
 
 export default class NextRace extends BaseCard {
@@ -50,7 +50,7 @@ export default class NextRace extends BaseCard {
         const imageHtml = html`<img width="100%" src="https://www.formula1.com/content/dam/fom-website/2018-redesign-assets/Circuit%20maps%2016x9/${circuitName}_Circuit.png.transform/7col/image.png">`;
         const imageWithLinkHtml = this.config.image_clickable ? html`<a target="_new" href="${this.next_race.Circuit.url}">${imageHtml}</a>` : imageHtml;
 
-        return html`<h2><img height="25" src="${getCountryFlagUrl(this.next_race.Circuit.Location.country)}">&nbsp;  ${this.next_race.round} :  ${this.next_race.raceName}</h2>${imageWithLinkHtml}<br> `
+        return html`<h2><img height="25" src="${getCountryFlagByName(this.next_race.Circuit.Location.country)}">&nbsp;  ${this.next_race.round} :  ${this.next_race.raceName}</h2>${imageWithLinkHtml}<br> `
     }
 
     renderSeasonEnded(): HTMLTemplateResult {

src/utils.ts

@@ -1,6 +1,7 @@
 import { HomeAssistant } from "custom-card-helpers";
 import { PropertyValues } from "lit";
 import { Driver, FormulaOneCardConfig } from "./types/formulaone-card-types";
+import * as countries from './data/countries.json';
 
 export const hasConfigOrEntitiesChanged = (node: FormulaOneCardConfig, changedProps: PropertyValues) => {
     if (changedProps.has('config')) {
@@ -14,6 +15,18 @@ export const hasConfigOrEntitiesChanged = (node: FormulaOneCardConfig, changedPr
     return false;
 };
 
+export const getCountryFlagByNationality = (nationality: string) => {
+    const country = countries.filter(x => x.Nationality === nationality)[0];
+
+    return getCountryFlagUrl(country.Code);
+}
+
+export const getCountryFlagByName = (countryName: string) => {
+    const country = countries.filter(x => x.Country === countryName)[0];
+
+    return getCountryFlagUrl(country.Code);
+}
+
 export const checkConfig = (config: FormulaOneCardConfig) => {
     if (config.card_type === undefined) {
         throw new Error('Please define FormulaOne card type (card_type).');

tests/cards/last-result.test.ts

@@ -40,7 +40,7 @@ describe('Testing last-result file', () => {
         const result = card.render();
         const htmlResult = getRenderString(result);
 
-        expect(htmlResult).toMatch('<table> <tr> <td><h2><img height="25" src="https://flagcdn.com/w40/singapore.png">&nbsp; 17 : Singapore Grand Prix</h2><img width="100%" src="https://www.formula1.com/content/dam/fom-website/2018-redesign-assets/Circuit%20maps%2016x9/Singapore_Circuit.png.transform/7col/image.png"><br> </td> </tr> </table> <table> <thead> <tr> <th>&nbsp;</th> <th>Driver</th> <th class="text-center">Grid</th> <th class="text-ccenter">Points</th> <th>Status</th> </tr> </thead> <tbody> <tr> <td class="width-50 text-center">1</td> <td>Sergio Pérez</td> <td>2</td> <td class="width-60 text-center">25</td> <td class="width-50 text-center">Finished</td> </tr> <tr> <td class="width-50 text-center">2</td> <td>Charles Leclerc</td> <td>1</td> <td class="width-60 text-center">18</td> <td class="width-50 text-center">Finished</td> </tr> <tr> <td class="width-50 text-center">3</td> <td>Carlos Sainz</td> <td>4</td> <td class="width-60 text-center">15</td> <td class="width-50 text-center">Finished</td> </tr> <tr> <td class="width-50 text-center">4</td> <td>Lando Norris</td> <td>6</td> <td class="width-60 text-center">12</td> <td class="width-50 text-center">Finished</td> </tr> <tr> <td class="width-50 text-center">5</td> <td>Daniel Ricciardo</td> <td>16</td> <td class="width-60 text-center">10</td> <td class="width-50 text-center">Finished</td> </tr> <tr> <td class="width-50 text-center">6</td> <td>Lance Stroll</td> <td>11</td> <td class="width-60 text-center">8</td> <td class="width-50 text-center">Finished</td> </tr> <tr> <td class="width-50 text-center">7</td> <td>Max Verstappen</td> <td>8</td> <td class="width-60 text-center">6</td> <td class="width-50 text-center">Finished</td> </tr> <tr> <td class="width-50 text-center">8</td> <td>Sebastian Vettel</td> <td>13</td> <td class="width-60 text-center">4</td> <td class="width-50 text-center">Finished</td> </tr> <tr> <td class="width-50 text-center">9</td> <td>Lewis Hamilton</td> <td>3</td> <td class="width-60 text-center">2</td> <td class="width-50 text-center">Finished</td> </tr> <tr> <td class="width-50 text-center">10</td> <td>Pierre Gasly</td> <td>7</td> <td class="width-60 text-center">1</td> <td class="width-50 text-center">Finished</td> </tr> <tr> <td class="width-50 text-center">11</td> <td>Valtteri Bottas</td> <td>15</td> <td class="width-60 text-center">0</td> <td class="width-50 text-center">Finished</td> </tr> <tr> <td class="width-50 text-center">12</td> <td>Kevin Magnussen</td> <td>9</td> <td class="width-60 text-center">0</td> <td class="width-50 text-center">Finished</td> </tr> <tr> <td class="width-50 text-center">13</td> <td>Mick Schumacher</td> <td>12</td> <td class="width-60 text-center">0</td> <td class="width-50 text-center">+1 Lap</td> </tr> <tr> <td class="width-50 text-center">14</td> <td>George Russell</td> <td>0</td> <td class="width-60 text-center">0</td> <td class="width-50 text-center">+2 Laps</td> </tr> <tr> <td class="width-50 text-center">15</td> <td>Yuki Tsunoda</td> <td>10</td> <td class="width-60 text-center">0</td> <td class="width-50 text-center">Accident</td> </tr> <tr> <td class="width-50 text-center">16</td> <td>Esteban Ocon</td> <td>17</td> <td class="width-60 text-center">0</td> <td class="width-50 text-center">Engine</td> </tr> <tr> <td class="width-50 text-center">17</td> <td>Alexander Albon</td> <td>18</td> <td class="width-60 text-center">0</td> <td class="width-50 text-center">Collision damage</td> </tr> <tr> <td class="width-50 text-center">18</td> <td>Fernando Alonso</td> <td>5</td> <td class="width-60 text-center">0</td> <td class="width-50 text-center">Engine</td> </tr> <tr> <td class="width-50 text-center">19</td> <td>Nicholas Latifi</td> <td>19</td> <td class="width-60 text-center">0</td> <td class="width-50 text-center">Collision damage</td> </tr> <tr> <td class="width-50 text-center">20</td> <td>Guanyu Zhou</td> <td>14</td> <td class="width-60 text-center">0</td> <td class="width-50 text-center">Collision</td> </tr> </tbody> </table>');
+        expect(htmlResult).toMatch('<table> <tr> <td><h2><img height="25" src="https://flagcdn.com/w40/sg.png">&nbsp; 17 : Singapore Grand Prix</h2><img width="100%" src="https://www.formula1.com/content/dam/fom-website/2018-redesign-assets/Circuit%20maps%2016x9/Singapore_Circuit.png.transform/7col/image.png"><br> </td> </tr> </table> <table> <thead> <tr> <th>&nbsp;</th> <th>Driver</th> <th class="text-center">Grid</th> <th class="text-ccenter">Points</th> <th>Status</th> </tr> </thead> <tbody> <tr> <td class="width-50 text-center">1</td> <td>Sergio Pérez</td> <td>2</td> <td class="width-60 text-center">25</td> <td class="width-50 text-center">Finished</td> </tr> <tr> <td class="width-50 text-center">2</td> <td>Charles Leclerc</td> <td>1</td> <td class="width-60 text-center">18</td> <td class="width-50 text-center">Finished</td> </tr> <tr> <td class="width-50 text-center">3</td> <td>Carlos Sainz</td> <td>4</td> <td class="width-60 text-center">15</td> <td class="width-50 text-center">Finished</td> </tr> <tr> <td class="width-50 text-center">4</td> <td>Lando Norris</td> <td>6</td> <td class="width-60 text-center">12</td> <td class="width-50 text-center">Finished</td> </tr> <tr> <td class="width-50 text-center">5</td> <td>Daniel Ricciardo</td> <td>16</td> <td class="width-60 text-center">10</td> <td class="width-50 text-center">Finished</td> </tr> <tr> <td class="width-50 text-center">6</td> <td>Lance Stroll</td> <td>11</td> <td class="width-60 text-center">8</td> <td class="width-50 text-center">Finished</td> </tr> <tr> <td class="width-50 text-center">7</td> <td>Max Verstappen</td> <td>8</td> <td class="width-60 text-center">6</td> <td class="width-50 text-center">Finished</td> </tr> <tr> <td class="width-50 text-center">8</td> <td>Sebastian Vettel</td> <td>13</td> <td class="width-60 text-center">4</td> <td class="width-50 text-center">Finished</td> </tr> <tr> <td class="width-50 text-center">9</td> <td>Lewis Hamilton</td> <td>3</td> <td class="width-60 text-center">2</td> <td class="width-50 text-center">Finished</td> </tr> <tr> <td class="width-50 text-center">10</td> <td>Pierre Gasly</td> <td>7</td> <td class="width-60 text-center">1</td> <td class="width-50 text-center">Finished</td> </tr> <tr> <td class="width-50 text-center">11</td> <td>Valtteri Bottas</td> <td>15</td> <td class="width-60 text-center">0</td> <td class="width-50 text-center">Finished</td> </tr> <tr> <td class="width-50 text-center">12</td> <td>Kevin Magnussen</td> <td>9</td> <td class="width-60 text-center">0</td> <td class="width-50 text-center">Finished</td> </tr> <tr> <td class="width-50 text-center">13</td> <td>Mick Schumacher</td> <td>12</td> <td class="width-60 text-center">0</td> <td class="width-50 text-center">+1 Lap</td> </tr> <tr> <td class="width-50 text-center">14</td> <td>George Russell</td> <td>0</td> <td class="width-60 text-center">0</td> <td class="width-50 text-center">+2 Laps</td> </tr> <tr> <td class="width-50 text-center">15</td> <td>Yuki Tsunoda</td> <td>10</td> <td class="width-60 text-center">0</td> <td class="width-50 text-center">Accident</td> </tr> <tr> <td class="width-50 text-center">16</td> <td>Esteban Ocon</td> <td>17</td> <td class="width-60 text-center">0</td> <td class="width-50 text-center">Engine</td> </tr> <tr> <td class="width-50 text-center">17</td> <td>Alexander Albon</td> <td>18</td> <td class="width-60 text-center">0</td> <td class="width-50 text-center">Collision damage</td> </tr> <tr> <td class="width-50 text-center">18</td> <td>Fernando Alonso</td> <td>5</td> <td class="width-60 text-center">0</td> <td class="width-50 text-center">Engine</td> </tr> <tr> <td class="width-50 text-center">19</td> <td>Nicholas Latifi</td> <td>19</td> <td class="width-60 text-center">0</td> <td class="width-50 text-center">Collision damage</td> </tr> <tr> <td class="width-50 text-center">20</td> <td>Guanyu Zhou</td> <td>14</td> <td class="width-60 text-center">0</td> <td class="width-50 text-center">Collision</td> </tr> </tbody> </table>');
     }),
     test('Calling renderHeader with hass and wrong sensor', () => { 
         hass.states = {
@@ -53,7 +53,7 @@ describe('Testing last-result file', () => {
         const result = card.renderHeader();
         const htmlResult = getRenderString(result);
 
-        expect(htmlResult).toMatch('<h2><img height="25" src="https://flagcdn.com/w40/singapore.png">&nbsp; 17 : Singapore Grand Prix</h2><img width="100%" src="https://www.formula1.com/content/dam/fom-website/2018-redesign-assets/Circuit%20maps%2016x9/Singapore_Circuit.png.transform/7col/image.png"><br>');
+        expect(htmlResult).toMatch('<h2><img height="25" src="https://flagcdn.com/w40/sg.png">&nbsp; 17 : Singapore Grand Prix</h2><img width="100%" src="https://www.formula1.com/content/dam/fom-website/2018-redesign-assets/Circuit%20maps%2016x9/Singapore_Circuit.png.transform/7col/image.png"><br>');
     }),
     test('Calling renderHeader clickable image with hass and wrong sensor', () => { 
         hass.states = {
@@ -66,7 +66,7 @@ describe('Testing last-result file', () => {
         const result = card.renderHeader();
         const htmlResult = getRenderString(result);
 
-        expect(htmlResult).toMatch('<h2><img height="25" src="https://flagcdn.com/w40/singapore.png">&nbsp; 17 : Singapore Grand Prix</h2><a target="_new" href="http://en.wikipedia.org/wiki/Marina_Bay_Street_Circuit"><img width="100%" src="https://www.formula1.com/content/dam/fom-website/2018-redesign-assets/Circuit%20maps%2016x9/Singapore_Circuit.png.transform/7col/image.png"></a><br>');
+        expect(htmlResult).toMatch('<h2><img height="25" src="https://flagcdn.com/w40/sg.png">&nbsp; 17 : Singapore Grand Prix</h2><a target="_new" href="http://en.wikipedia.org/wiki/Marina_Bay_Street_Circuit"><img width="100%" src="https://www.formula1.com/content/dam/fom-website/2018-redesign-assets/Circuit%20maps%2016x9/Singapore_Circuit.png.transform/7col/image.png"></a><br>');
     }),
     test('Calling cardSize with hass and sensor', () => {