From c13032dc69ec5a31ee1621a08e03baa465f6e45b Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Thu, 20 Oct 2022 08:43:20 -0400 Subject: [PATCH] =?UTF-8?q?sync=20upcoming=20events=20component=20with=20A?= =?UTF-8?q?PI=20and=20hack=20work=20around=20for=20apos=E2=80=A6=20(#46)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * sync upcoming events component with API and hack work around for apostrophes in JSON * track hack work around --- src/components/upcoming-events/mock-events.js | 27 +++++++----- .../upcoming-events/upcoming-events.js | 21 ++++----- .../upcoming-events/upcoming-events.spec.js | 43 +++++++++++++------ .../upcoming-events.stories.js | 6 +-- 4 files changed, 58 insertions(+), 39 deletions(-) diff --git a/src/components/upcoming-events/mock-events.js b/src/components/upcoming-events/mock-events.js index 54a367c..cd694ad 100644 --- a/src/components/upcoming-events/mock-events.js +++ b/src/components/upcoming-events/mock-events.js @@ -1,30 +1,35 @@ const SINGLE_EVENT = [{ - title: 'Tuesdays Tunes Season 3 - Premier!', - timestamp: Date.now() + 300000, + title: 'Tuesday\'s Tunes Season 3 - Premier!', + startTime: Date.now() + 300000, + description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elite.', link: 'http://www.facebook.com/' }]; // includes testing for multiple months, events list "overflow", and out of order events const MULTIPLE_EVENTS = [{ - title: 'Tuesdays Tunes Season 3 - Episode 1', - timestamp: SINGLE_EVENT[0].timestamp + (86400000 * 15), + title: 'Tuesday\'s Tunes Season 3 - Episode 1', + startTime: SINGLE_EVENT[0].startTime + (86400000 * 15), + description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elite.', link: 'http://www.facebook.com/' }, { ...SINGLE_EVENT[0] }, { - title: 'Tuesdays Tunes Season 3 - Episode 2', - timestamp: SINGLE_EVENT[0].timestamp + (86400000 * 30), + title: 'Tuesday\'s Tunes Season 3 - Episode 2', + startTime: SINGLE_EVENT[0].startTime + (86400000 * 30), + description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elite.', link: 'http://www.facebook.com/' }, { - title: 'Tuesdays Tunes Season 3 - Teaser Trailer', - timestamp: SINGLE_EVENT[0].timestamp - (86400000 * 5), + title: 'Tuesday\'s Tunes Season 3 - Teaser Trailer', + startTime: SINGLE_EVENT[0].startTime - (86400000 * 5), + description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elite.', link: 'http://www.facebook.com/' }, { - title: 'Tuesdays Tunes Season 3 - Episode 3', - timestamp: SINGLE_EVENT[0].timestamp + (86400000 * 45), + title: 'Tuesday\'s Tunes Season 3 - Episode 3', + startTime: SINGLE_EVENT[0].startTime + (86400000 * 45), + description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elite.', link: 'http://www.facebook.com/' }]; const NO_EVENTS = []; -export { SINGLE_EVENT, MULTIPLE_EVENTS, NO_EVENTS }; +export { SINGLE_EVENT, MULTIPLE_EVENTS, NO_EVENTS }; \ No newline at end of file diff --git a/src/components/upcoming-events/upcoming-events.js b/src/components/upcoming-events/upcoming-events.js index 6fb1560..c051b57 100644 --- a/src/components/upcoming-events/upcoming-events.js +++ b/src/components/upcoming-events/upcoming-events.js @@ -19,7 +19,7 @@ export default class UpcomingEvents extends HTMLElement { const events = (JSON.parse(this.getAttribute('events')) || []) .filter((event) => { // filter out old events except ones that are also in the current month - const { timestamp } = event; + const { startTime } = event; const now = new Date(); // set to be the beginning of the current month @@ -27,18 +27,18 @@ export default class UpcomingEvents extends HTMLElement { now.setFullYear(now.getFullYear()); now.setMonth(now.getMonth()); - const isInCurrentMonth = timestamp >= now.getTime(); + const isInCurrentMonth = startTime >= now.getTime(); - return event.timestamp >= now.getTime() || isInCurrentMonth; + return startTime >= now.getTime() || isInCurrentMonth; }) - .sort((a, b) => a.timestamp < b.timestamp ? -1 : 1); // sort newest to latest + .sort((a, b) => a.startTime < b.startTime ? -1 : 1); // sort newest to latest const noEvents = events.length === 0 ? '

No Upcoming Events

' : ''; // group events by month events.forEach((event) => { - const time = new Date(event.timestamp); + const time = new Date(event.startTime); const month = time.getMonth(); const monthKey = MONTH_INDEX_MAPPER[month]; @@ -66,11 +66,12 @@ export default class UpcomingEvents extends HTMLElement { ${eventsByMonth[month].map((event) => { - const { link, timestamp, title } = event; - const time = new Date(timestamp); + const { link, startTime, title } = event; + const time = new Date(startTime); + const formattedTitle = title.replace(/"/g, '\''); // TODO https://github.com/AnalogStudiosRI/www.tuesdaystunes.tv/issues/47 const date = time.getDate(); const hour = time.getHours() - 12; // here we assume an 8pm (e.g. afternoon) start time - + return `

- ${title} @ ${hour}pm + ${formattedTitle} @ ${hour}pm

diff --git a/src/components/upcoming-events/upcoming-events.spec.js b/src/components/upcoming-events/upcoming-events.spec.js index b1b7f60..ca34399 100644 --- a/src/components/upcoming-events/upcoming-events.spec.js +++ b/src/components/upcoming-events/upcoming-events.spec.js @@ -54,7 +54,7 @@ describe('Components/Upcoming Events', () => { it('should display the correct month heading', () => { const headings = events.querySelectorAll('h2'); - const time = new Date(SINGLE_EVENT[0].timestamp); + const time = new Date(SINGLE_EVENT[0].startTime); const month = time.getMonth(); const monthLabel = MONTH_INDEX_MAPPER[month]; @@ -62,9 +62,9 @@ describe('Components/Upcoming Events', () => { }); it('should display the correct date details', () => { - const { title, timestamp } = SINGLE_EVENT[0]; + const { title, startTime } = SINGLE_EVENT[0]; const headings = events.querySelectorAll('h3'); - const time = new Date(timestamp); + const time = new Date(startTime); const date = time.getDate(); const hour = time.getHours() - 12; const display = `${date}${title}@${hour}pm`.replace(/ /g, ''); @@ -101,26 +101,26 @@ describe('Components/Upcoming Events', () => { it('should not display the no upcoming events text', () => { const headings = events.querySelectorAll('h2'); - expect(headings.length).to.equal(2); + expect(headings.length).to.greaterThanOrEqual(2); // sometimes events will spread over three months expect(headings[0].textContent).to.not.equal('No Upcoming Events'); }); it('should display the correct month heading', () => { const headings = events.querySelectorAll('h2'); - const eventsByMonth = {}; + const eventsByMonth = []; - MULTIPLE_EVENTS.forEach((event) => { - const time = new Date(event.timestamp); + ORDERED_EVENTS.forEach((event) => { + const time = new Date(event.startTime); const month = time.getMonth(); const monthKey = MONTH_INDEX_MAPPER[month]; - if (!eventsByMonth[monthKey]) { - eventsByMonth[monthKey] = true; + if (!eventsByMonth.includes(monthKey)) { + eventsByMonth.push(monthKey); } }); - + headings.forEach((heading, idx) => { - expect(heading.textContent).to.contain(Object.keys(eventsByMonth)[idx]); + expect(heading.textContent).to.contain(eventsByMonth[idx]); }); }); @@ -128,8 +128,8 @@ describe('Components/Upcoming Events', () => { const headings = events.querySelectorAll('h3'); headings.forEach((heading, idx) => { - const { title, timestamp } = ORDERED_EVENTS[idx]; - const time = new Date(timestamp); + const { title, startTime } = ORDERED_EVENTS[idx]; + const time = new Date(startTime); const date = time.getDate(); const hour = time.getHours() - 12; const display = `${date}${title}@${hour}pm`.replace(/ /g, ''); @@ -157,6 +157,23 @@ describe('Components/Upcoming Events', () => { }); }); + describe('No events attribute', () => { + before(async () => { + events = document.createElement('tt-upcoming-events'); + + document.body.appendChild(events); + + await events.updateComplete; + }); + + it('should only display the no upcoming events text', () => { + const headings = events.querySelectorAll('h2'); + + expect(headings.length).to.equal(1); + expect(headings[0].textContent).to.equal('No Upcoming Events'); + }); + }); + after(() => { events.remove(); events = null; diff --git a/src/components/upcoming-events/upcoming-events.stories.js b/src/components/upcoming-events/upcoming-events.stories.js index 8cd639c..aa7128e 100644 --- a/src/components/upcoming-events/upcoming-events.stories.js +++ b/src/components/upcoming-events/upcoming-events.stories.js @@ -6,11 +6,7 @@ export default { title: 'Components/Upcoming Events' }; -// TODO mock data with an apostrophe will not work here, e.g. 'Tuesday\'s Tunes Season 3 - Premier!' -// If I use double quote everything stops at the first double quote, e.g. `[{` -// If I use single quote, it stops at the first single quote, e.g. `[{"title":"Tuesday` -// works fine when using `setAttribute` and the DOM 🤷 -const Template = ({ events }) => ``; +const Template = ({ events }) => ``; export const Primary = Template.bind({});