kempo-css 1.1.0 → 1.1.2

package/tests/buttons.browser-test.js

@@ -0,0 +1,223 @@
+const getStyle = (el, prop) => getComputedStyle(el)[prop];
+
+export const beforeAll = async () => {
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.href = '/src/kempo.css';
+  document.head.appendChild(link);
+  await new Promise(resolve => link.onload = resolve);
+};
+
+export default {
+  'should style button element': ({pass, fail}) => {
+    const btn = document.createElement('button');
+    btn.textContent = 'Test';
+    document.body.appendChild(btn);
+    const display = getStyle(btn, 'display');
+    const cursor = getStyle(btn, 'cursor');
+    const borderRadius = parseFloat(getStyle(btn, 'borderRadius'));
+    btn.remove();
+    if(display === 'inline-block' && cursor === 'pointer' && borderRadius > 0){
+      pass('Button has correct base styling');
+    } else {
+      fail(`Expected inline-block/pointer/radius, got display: ${display}, cursor: ${cursor}, radius: ${borderRadius}`);
+    }
+  },
+
+  'should style .btn class': ({pass, fail}) => {
+    const el = document.createElement('a');
+    el.className = 'btn';
+    document.body.appendChild(el);
+    const display = getStyle(el, 'display');
+    const cursor = getStyle(el, 'cursor');
+    el.remove();
+    if(display === 'inline-block' && cursor === 'pointer'){
+      pass('.btn class applies button styling');
+    } else {
+      fail(`Expected inline-block/pointer, got ${display}/${cursor}`);
+    }
+  },
+
+  'should style input[type="button"]': ({pass, fail}) => {
+    const input = document.createElement('input');
+    input.type = 'button';
+    input.value = 'Test';
+    document.body.appendChild(input);
+    const cursor = getStyle(input, 'cursor');
+    input.remove();
+    if(cursor === 'pointer'){
+      pass('input[type="button"] has pointer cursor');
+    } else {
+      fail(`Expected pointer, got ${cursor}`);
+    }
+  },
+
+  'should style input[type="submit"]': ({pass, fail}) => {
+    const input = document.createElement('input');
+    input.type = 'submit';
+    document.body.appendChild(input);
+    const cursor = getStyle(input, 'cursor');
+    input.remove();
+    if(cursor === 'pointer'){
+      pass('input[type="submit"] has pointer cursor');
+    } else {
+      fail(`Expected pointer, got ${cursor}`);
+    }
+  },
+
+  'should apply .primary button style': ({pass, fail}) => {
+    const btn = document.createElement('button');
+    btn.className = 'primary';
+    document.body.appendChild(btn);
+    const bg = getStyle(btn, 'backgroundColor');
+    btn.remove();
+    if(bg && bg !== 'rgba(0, 0, 0, 0)'){
+      pass(`.primary button has background: ${bg}`);
+    } else {
+      fail('Primary button should have background color');
+    }
+  },
+
+  'should apply .secondary button style': ({pass, fail}) => {
+    const btn = document.createElement('button');
+    btn.className = 'secondary';
+    document.body.appendChild(btn);
+    const bg = getStyle(btn, 'backgroundColor');
+    btn.remove();
+    if(bg && bg !== 'rgba(0, 0, 0, 0)'){
+      pass(`.secondary button has background: ${bg}`);
+    } else {
+      fail('Secondary button should have background color');
+    }
+  },
+
+  'should apply .success button style': ({pass, fail}) => {
+    const btn = document.createElement('button');
+    btn.className = 'success';
+    document.body.appendChild(btn);
+    const bg = getStyle(btn, 'backgroundColor');
+    btn.remove();
+    if(bg && bg.includes('0, 1') || bg.includes('rgb(0')){
+      pass(`.success button has green background: ${bg}`);
+    } else {
+      fail(`Expected green, got ${bg}`);
+    }
+  },
+
+  'should apply .warning button style': ({pass, fail}) => {
+    const btn = document.createElement('button');
+    btn.className = 'warning';
+    document.body.appendChild(btn);
+    const bg = getStyle(btn, 'backgroundColor');
+    btn.remove();
+    if(bg && bg !== 'rgba(0, 0, 0, 0)'){
+      pass(`.warning button has background: ${bg}`);
+    } else {
+      fail('Warning button should have background color');
+    }
+  },
+
+  'should apply .danger button style': ({pass, fail}) => {
+    const btn = document.createElement('button');
+    btn.className = 'danger';
+    document.body.appendChild(btn);
+    const bg = getStyle(btn, 'backgroundColor');
+    btn.remove();
+    if(bg && bg !== 'rgba(0, 0, 0, 0)'){
+      pass(`.danger button has background: ${bg}`);
+    } else {
+      fail('Danger button should have background color');
+    }
+  },
+
+  'should apply .link button style': ({pass, fail}) => {
+    const btn = document.createElement('button');
+    btn.className = 'link';
+    document.body.appendChild(btn);
+    const bg = getStyle(btn, 'backgroundColor');
+    const border = getStyle(btn, 'borderStyle');
+    btn.remove();
+    if(bg === 'rgba(0, 0, 0, 0)' || bg === 'transparent'){
+      pass('.link button has transparent background');
+    } else {
+      fail(`Expected transparent, got ${bg}`);
+    }
+  },
+
+  'should reduce opacity on disabled button': ({pass, fail}) => {
+    const btn = document.createElement('button');
+    btn.disabled = true;
+    document.body.appendChild(btn);
+    const opacity = parseFloat(getStyle(btn, 'opacity'));
+    btn.remove();
+    if(opacity < 1){
+      pass(`Disabled button has reduced opacity: ${opacity}`);
+    } else {
+      fail(`Expected opacity < 1, got ${opacity}`);
+    }
+  },
+
+  'should style .btn-grp as inline-flex': ({pass, fail}) => {
+    const grp = document.createElement('div');
+    grp.className = 'btn-grp';
+    document.body.appendChild(grp);
+    const display = getStyle(grp, 'display');
+    grp.remove();
+    if(display === 'inline-flex'){
+      pass('.btn-grp displays as inline-flex');
+    } else {
+      fail(`Expected inline-flex, got ${display}`);
+    }
+  },
+
+  'should remove border radius on middle buttons in .btn-grp': ({pass, fail}) => {
+    const grp = document.createElement('div');
+    grp.className = 'btn-grp';
+    const btn1 = document.createElement('button');
+    const btn2 = document.createElement('button');
+    const btn3 = document.createElement('button');
+    grp.appendChild(btn1);
+    grp.appendChild(btn2);
+    grp.appendChild(btn3);
+    document.body.appendChild(grp);
+    const btn2TLRadius = parseFloat(getStyle(btn2, 'borderTopLeftRadius'));
+    const btn2TRRadius = parseFloat(getStyle(btn2, 'borderTopRightRadius'));
+    grp.remove();
+    if(btn2TLRadius === 0 && btn2TRRadius === 0){
+      pass('Middle button in .btn-grp has no border radius');
+    } else {
+      fail(`Expected 0 radius, got TL: ${btn2TLRadius}, TR: ${btn2TRRadius}`);
+    }
+  },
+
+  'should style .no-btn as unstyled button': ({pass, fail}) => {
+    const btn = document.createElement('button');
+    btn.className = 'no-btn';
+    document.body.appendChild(btn);
+    const bg = getStyle(btn, 'backgroundColor');
+    const border = getStyle(btn, 'borderStyle');
+    btn.remove();
+    if((bg === 'rgba(0, 0, 0, 0)' || bg === 'transparent') && border === 'none'){
+      pass('.no-btn removes button styling');
+    } else {
+      fail(`Expected transparent/none, got bg: ${bg}, border: ${border}`);
+    }
+  },
+
+  'should apply .full class for full width': ({pass, fail}) => {
+    const container = document.createElement('div');
+    container.style.width = '500px';
+    const btn = document.createElement('button');
+    btn.className = 'full';
+    container.appendChild(btn);
+    document.body.appendChild(container);
+    const btnWidth = parseFloat(getStyle(btn, 'width'));
+    container.remove();
+    // .full should make the button take full container width
+    if(btnWidth >= 490){
+      pass(`.full makes button full width: ${btnWidth}px`);
+    } else {
+      fail(`Expected ~500px width, got ${btnWidth}px`);
+    }
+  }
+};

package/tests/colors.browser-test.js

@@ -0,0 +1,221 @@
+const getStyle = (el, prop) => getComputedStyle(el)[prop];
+
+export const beforeAll = async () => {
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.href = '/src/kempo.css';
+  document.head.appendChild(link);
+  await new Promise(resolve => link.onload = resolve);
+};
+
+export default {
+  'should apply .bg-default': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'bg-default';
+    document.body.appendChild(el);
+    const bg = getStyle(el, 'backgroundColor');
+    el.remove();
+    if(bg && bg !== 'rgba(0, 0, 0, 0)'){
+      pass(`.bg-default applies background: ${bg}`);
+    } else {
+      fail('bg-default should apply background');
+    }
+  },
+
+  'should apply .bg-alt': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'bg-alt';
+    document.body.appendChild(el);
+    const bg = getStyle(el, 'backgroundColor');
+    el.remove();
+    if(bg && bg !== 'rgba(0, 0, 0, 0)'){
+      pass(`.bg-alt applies background: ${bg}`);
+    } else {
+      fail('bg-alt should apply background');
+    }
+  },
+
+  'should apply .bg-inv with inverted colors': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'bg-inv';
+    document.body.appendChild(el);
+    const bg = getStyle(el, 'backgroundColor');
+    const color = getStyle(el, 'color');
+    el.remove();
+    if(bg && bg !== 'rgba(0, 0, 0, 0)'){
+      pass(`.bg-inv applies inverted background: ${bg}`);
+    } else {
+      fail('bg-inv should apply background');
+    }
+  },
+
+  'should apply .bg-primary': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'bg-primary';
+    document.body.appendChild(el);
+    const bg = getStyle(el, 'backgroundColor');
+    el.remove();
+    if(bg && bg.includes('51') && bg.includes('102') && bg.includes('255')){
+      pass(`.bg-primary applies primary color: ${bg}`);
+    } else {
+      fail(`Expected primary blue, got ${bg}`);
+    }
+  },
+
+  'should apply .bg-secondary': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'bg-secondary';
+    document.body.appendChild(el);
+    const bg = getStyle(el, 'backgroundColor');
+    el.remove();
+    if(bg && bg.includes('153') && bg.includes('51') && bg.includes('255')){
+      pass(`.bg-secondary applies secondary color: ${bg}`);
+    } else {
+      fail(`Expected secondary purple, got ${bg}`);
+    }
+  },
+
+  'should apply .bg-success': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'bg-success';
+    document.body.appendChild(el);
+    const bg = getStyle(el, 'backgroundColor');
+    el.remove();
+    if(bg && bg.includes('136') && bg.includes('0')){
+      pass(`.bg-success applies green: ${bg}`);
+    } else {
+      fail(`Expected green, got ${bg}`);
+    }
+  },
+
+  'should apply .bg-warning': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'bg-warning';
+    document.body.appendChild(el);
+    const bg = getStyle(el, 'backgroundColor');
+    el.remove();
+    if(bg && bg.includes('255') && bg.includes('102')){
+      pass(`.bg-warning applies orange: ${bg}`);
+    } else {
+      fail(`Expected orange, got ${bg}`);
+    }
+  },
+
+  'should apply .bg-danger': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'bg-danger';
+    document.body.appendChild(el);
+    const bg = getStyle(el, 'backgroundColor');
+    el.remove();
+    if(bg && bg.includes('255') && bg.includes('51')){
+      pass(`.bg-danger applies red: ${bg}`);
+    } else {
+      fail(`Expected red, got ${bg}`);
+    }
+  },
+
+  'should apply .tc-default': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'tc-default';
+    document.body.appendChild(el);
+    const color = getStyle(el, 'color');
+    el.remove();
+    if(color && color !== 'rgba(0, 0, 0, 0)'){
+      pass(`.tc-default applies color: ${color}`);
+    } else {
+      fail('tc-default should apply color');
+    }
+  },
+
+  'should apply .tc-primary': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'tc-primary';
+    document.body.appendChild(el);
+    const color = getStyle(el, 'color');
+    el.remove();
+    if(color && color !== 'rgba(0, 0, 0, 0)'){
+      pass(`.tc-primary applies color: ${color}`);
+    } else {
+      fail('tc-primary should apply color');
+    }
+  },
+
+  'should apply .tc-secondary': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'tc-secondary';
+    document.body.appendChild(el);
+    const color = getStyle(el, 'color');
+    el.remove();
+    if(color && color !== 'rgba(0, 0, 0, 0)'){
+      pass(`.tc-secondary applies color: ${color}`);
+    } else {
+      fail('tc-secondary should apply color');
+    }
+  },
+
+  'should apply .tc-success': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'tc-success';
+    document.body.appendChild(el);
+    const color = getStyle(el, 'color');
+    el.remove();
+    if(color && color !== 'rgba(0, 0, 0, 0)'){
+      pass(`.tc-success applies color: ${color}`);
+    } else {
+      fail('tc-success should apply color');
+    }
+  },
+
+  'should apply .tc-warning': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'tc-warning';
+    document.body.appendChild(el);
+    const color = getStyle(el, 'color');
+    el.remove();
+    if(color && color !== 'rgba(0, 0, 0, 0)'){
+      pass(`.tc-warning applies color: ${color}`);
+    } else {
+      fail('tc-warning should apply color');
+    }
+  },
+
+  'should apply .tc-danger': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'tc-danger';
+    document.body.appendChild(el);
+    const color = getStyle(el, 'color');
+    el.remove();
+    if(color && color !== 'rgba(0, 0, 0, 0)'){
+      pass(`.tc-danger applies color: ${color}`);
+    } else {
+      fail('tc-danger should apply color');
+    }
+  },
+
+  'should apply .tc-muted': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'tc-muted';
+    document.body.appendChild(el);
+    const color = getStyle(el, 'color');
+    el.remove();
+    if(color && color.includes('0.5')){
+      pass(`.tc-muted applies muted color: ${color}`);
+    } else {
+      fail(`Expected muted (50% opacity), got ${color}`);
+    }
+  },
+
+  'should set text color on .bg-primary': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'bg-primary';
+    el.textContent = 'Test';
+    document.body.appendChild(el);
+    const color = getStyle(el, 'color');
+    el.remove();
+    if(color && color.includes('255')){
+      pass(`.bg-primary sets light text color: ${color}`);
+    } else {
+      fail(`Expected light text, got ${color}`);
+    }
+  }
+};

package/tests/components.browser-test.js

@@ -0,0 +1,144 @@
+const getStyle = (el, prop) => getComputedStyle(el)[prop];
+
+export const beforeAll = async () => {
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.href = '/src/kempo.css';
+  document.head.appendChild(link);
+  await new Promise(resolve => link.onload = resolve);
+};
+
+export default {
+  'should style .card with border': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'card';
+    document.body.appendChild(el);
+    const border = parseFloat(getStyle(el, 'borderWidth'));
+    el.remove();
+    if(border > 0){
+      pass(`.card has border: ${border}px`);
+    } else {
+      fail('card should have border');
+    }
+  },
+
+  'should style .card with border radius': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'card';
+    document.body.appendChild(el);
+    const radius = parseFloat(getStyle(el, 'borderRadius'));
+    el.remove();
+    if(radius > 0){
+      pass(`.card has border-radius: ${radius}px`);
+    } else {
+      fail('card should have border radius');
+    }
+  },
+
+  'should style .card with padding': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'card';
+    document.body.appendChild(el);
+    const paddingTop = parseFloat(getStyle(el, 'paddingTop'));
+    const paddingLeft = parseFloat(getStyle(el, 'paddingLeft'));
+    const paddingRight = parseFloat(getStyle(el, 'paddingRight'));
+    el.remove();
+    if(paddingTop > 0 && paddingLeft > 0 && paddingRight > 0){
+      pass('.card has padding on top, left, and right');
+    } else {
+      fail(`Expected padding, got top: ${paddingTop}, left: ${paddingLeft}, right: ${paddingRight}`);
+    }
+  },
+
+  'should style .card with margin-bottom': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'card';
+    document.body.appendChild(el);
+    const marginBottom = parseFloat(getStyle(el, 'marginBottom'));
+    el.remove();
+    if(marginBottom > 0){
+      pass(`.card has margin-bottom: ${marginBottom}px`);
+    } else {
+      fail('card should have margin-bottom');
+    }
+  },
+
+  'should have .drop-shadow class that sets box-shadow': ({pass, fail}) => {
+    const el = document.createElement('div');
+    el.className = 'drop-shadow';
+    document.body.appendChild(el);
+    const shadow = getStyle(el, 'boxShadow');
+    el.remove();
+    if(shadow && shadow !== 'none'){
+      pass(`.drop-shadow has box-shadow: ${shadow}`);
+    } else {
+      fail(`Expected box-shadow, got ${shadow}`);
+    }
+  },
+
+  'should style .icon as inline-block': ({pass, fail}) => {
+    const el = document.createElement('span');
+    el.className = 'icon';
+    document.body.appendChild(el);
+    const display = getStyle(el, 'display');
+    el.remove();
+    if(display === 'inline-block'){
+      pass('.icon displays as inline-block');
+    } else {
+      fail(`Expected inline-block, got ${display}`);
+    }
+  },
+
+  'should style .icon with width': ({pass, fail}) => {
+    const el = document.createElement('span');
+    el.className = 'icon';
+    document.body.appendChild(el);
+    const width = getStyle(el, 'width');
+    el.remove();
+    if(width && width !== 'auto'){
+      pass(`.icon has width: ${width}`);
+    } else {
+      fail('icon should have width');
+    }
+  },
+
+  'should style .icon with vertical-align top': ({pass, fail}) => {
+    const el = document.createElement('span');
+    el.className = 'icon';
+    document.body.appendChild(el);
+    const verticalAlign = getStyle(el, 'verticalAlign');
+    el.remove();
+    if(verticalAlign === 'top'){
+      pass('.icon has vertical-align: top');
+    } else {
+      fail(`Expected top, got ${verticalAlign}`);
+    }
+  },
+
+  'should remove iframe border': ({pass, fail}) => {
+    const iframe = document.createElement('iframe');
+    document.body.appendChild(iframe);
+    const border = getStyle(iframe, 'borderStyle');
+    iframe.remove();
+    if(border === 'none'){
+      pass('iframe has no border');
+    } else {
+      fail(`Expected none, got ${border}`);
+    }
+  },
+
+  'should make iframe full width': ({pass, fail}) => {
+    const container = document.createElement('div');
+    container.style.width = '500px';
+    const iframe = document.createElement('iframe');
+    container.appendChild(iframe);
+    document.body.appendChild(container);
+    const width = getStyle(iframe, 'width');
+    container.remove();
+    if(width === '100%' || parseFloat(width) >= 490){
+      pass(`iframe has full width: ${width}`);
+    } else {
+      fail(`Expected 100%, got ${width}`);
+    }
+  }
+};