a basic test for CSS variable and property setting

tests.js

import { html } from 'lit';
import { fixture, expect } from '@open-wc/testing';

import '../src/app.js';

describe('A Science card', () => {
  let element;
  beforeEach(async () => {
    element = await fixture(html`<learning-card class="two" type="science"></learning-card>`);
  });
  it('renders CTA as science', () => {
    const el = element.shadowRoot.querySelector('cta-button');
    expect(el).to.exist;
    // see if the css variable is set correctly
    // getComputedStyle is the interpretation of CSS and JS
    // to give you the exact styles that are being applied to the
    // object in question
    // read styles off of our element which is the cta-button
    let elStyles = getComputedStyle(el);
    // console log so we can debug locally
    console.log(elStyles.getPropertyValue("--psu-background-color"));
    // expect that the background color is darkorange because
    // the element changes this variable based on type
    expect(elStyles.getPropertyValue("--psu-background-color")).to.equal("darkorange");
    expect(el.title).to.equal('science');
  });
});

describe('A Math card', () => {
  let element;

  beforeEach(async () => {
    element = await fixture(html`<learning-card class="two" type="math"></learning-card>`);
  });
  it('renders CTA as math', () => {
    const el = element.shadowRoot.querySelector('cta-button');
    expect(el).to.exist;
    // see if the css variable is set correctly
    // getComputedStyle is the interpretation of CSS and JS
    // to give you the exact styles that are being applied to the
    // object in question
    // read styles off of our element which is the cta-button
    let elStyles = getComputedStyle(el);
    // console log so we can debug locally
    console.log(elStyles.getPropertyValue("--psu-background-color"));
    // expect that the background color is darkorange because
    // the element changes this variable based on type
    expect(elStyles.getPropertyValue("--psu-background-color")).to.equal("purple");
    expect(el.title).to.equal('math');
  });
});