@bootstrap-styled/css-utils/src/tests/background.test.js

Bootstrap mixins and utilities in javascript for bootstrap-styled.

import { defaultProps, getBackgroundUtilities, bgFaded, bgPrimary, bgSuccess, bgInfo, bgWarning, bgDanger, bgInverse } from '../background';

describe('bootstrap background utility', () => {
  it('getBackgroundUtilities should return a list of css utilities', () => {
    const css = getBackgroundUtilities(
      defaultProps['$enable-hover-media-query'],
      defaultProps['$brand-primary'],
      defaultProps['$brand-success'],
      defaultProps['$brand-info'],
      defaultProps['$brand-warning'],
      defaultProps['$brand-danger'],
      defaultProps['$brand-inverse'],
      defaultProps['$gray-lightest'],
    );
    expect(css).not.toContain('undefined');
    expect(css).not.toContain('null');
    expect(css).toContain('.bg-primary {');
    expect(css).toContain('background-color: #0275d8 !important;');
    expect(css).toContain('a.bg-primary {');
    expect(css).toContain('&:focus,');
    expect(css).toContain('&.focus,');
    expect(css).toContain('&:hover,');
    expect(css).toContain('&.hover {');
    expect(css).toContain('background-color: rgb(2, 94, 173) !important;');
    expect(css).toContain('.bg-success {');
    expect(css).toContain('background-color: #5cb85c !important;');
    expect(css).toContain('a.bg-success {');
    expect(css).toContain('&:focus,');
    expect(css).toContain('&.focus,');
    expect(css).toContain('&:hover,');
    expect(css).toContain('&.hover {');
    expect(css).toContain('background-color: rgb(67, 154, 67) !important;');
    expect(css).toContain('.bg-info {');
    expect(css).toContain('background-color: #5bc0de !important;');
    expect(css).toContain('a.bg-info {');
    expect(css).toContain('&:focus,');
    expect(css).toContain('&.focus,');
    expect(css).toContain('&:hover,');
    expect(css).toContain('&.hover {');
    expect(css).toContain('background-color: rgb(42, 170, 209) !important;');
    expect(css).toContain('.bg-warning {');
    expect(css).toContain('background-color: #f0ad4e !important;');
    expect(css).toContain('a.bg-warning {');
    expect(css).toContain('&:focus,');
    expect(css).toContain('&.focus,');
    expect(css).toContain('&:hover,');
    expect(css).toContain('&.hover {');
    expect(css).toContain('background-color: rgb(235, 146, 20) !important;');
    expect(css).toContain('.bg-danger {');
    expect(css).toContain('background-color: #d9543f !important;');
    expect(css).toContain('a.bg-danger {');
    expect(css).toContain('&:focus,');
    expect(css).toContain('&.focus,');
    expect(css).toContain('&:hover,');
    expect(css).toContain('&.hover {');
    expect(css).toContain('background-color: rgb(187, 58, 37) !important;');
    expect(css).toContain('.bg-inverse {');
    expect(css).toContain('background-color: #373a3c !important;');
    expect(css).toContain('a.bg-inverse {');
    expect(css).toContain('&:focus,');
    expect(css).toContain('&.focus,');
    expect(css).toContain('&:hover,');
    expect(css).toContain('&.hover {');
    expect(css).toContain('background-color: rgb(44, 46, 48) !important;');
    expect(css).toContain('.bg-faded {');
    expect(css).toContain('background-color: #f7f7f9 !important;');
    expect(css).toContain('a.bg-faded {');
    expect(css).toContain('&:focus,');
    expect(css).toContain('&.focus,');
    expect(css).toContain('&:hover,');
    expect(css).toContain('&.hover {');
    expect(css).toContain('background-color: rgb(190, 190, 207) !important;');
  });
  it('getBackgroundUtilities should have arguments', () => {
    const css = getBackgroundUtilities();
    expect(css).not.toContain('undefined');
    expect(css).not.toContain('null');
    expect(css).toContain('.bg-primary {');
    expect(css).toContain('background-color: #0275d8 !important;');
    expect(css).toContain('a.bg-primary {');
    expect(css).toContain('&:focus,');
    expect(css).toContain('&.focus,');
    expect(css).toContain('&:hover,');
    expect(css).toContain('&.hover {');
    expect(css).toContain('background-color: rgb(2, 94, 173) !important;');
    expect(css).toContain('.bg-success {');
    expect(css).toContain('background-color: #5cb85c !important;');
    expect(css).toContain('a.bg-success {');
    expect(css).toContain('&:focus,');
    expect(css).toContain('&.focus,');
    expect(css).toContain('&:hover,');
    expect(css).toContain('&.hover {');
    expect(css).toContain('background-color: rgb(67, 154, 67) !important;');
    expect(css).toContain('.bg-info {');
    expect(css).toContain('background-color: #5bc0de !important;');
    expect(css).toContain('a.bg-info {');
    expect(css).toContain('&:focus,');
    expect(css).toContain('&.focus,');
    expect(css).toContain('&:hover,');
    expect(css).toContain('&.hover {');
    expect(css).toContain('background-color: rgb(42, 170, 209) !important;');
    expect(css).toContain('.bg-warning {');
    expect(css).toContain('background-color: #f0ad4e !important;');
    expect(css).toContain('a.bg-warning {');
    expect(css).toContain('&:focus,');
    expect(css).toContain('&.focus,');
    expect(css).toContain('&:hover,');
    expect(css).toContain('&.hover {');
    expect(css).toContain('background-color: rgb(235, 146, 20) !important;');
    expect(css).toContain('.bg-danger {');
    expect(css).toContain('background-color: #d9543f !important;');
    expect(css).toContain('a.bg-danger {');
    expect(css).toContain('&:focus,');
    expect(css).toContain('&.focus,');
    expect(css).toContain('&:hover,');
    expect(css).toContain('&.hover {');
    expect(css).toContain('background-color: rgb(187, 58, 37) !important;');
    expect(css).toContain('.bg-inverse {');
    expect(css).toContain('background-color: #373a3c !important;');
    expect(css).toContain('a.bg-inverse {');
    expect(css).toContain('&:focus,');
    expect(css).toContain('&.focus,');
    expect(css).toContain('&:hover,');
    expect(css).toContain('&.hover {');
    expect(css).toContain('background-color: rgb(44, 46, 48) !important;');
    expect(css).toContain('.bg-faded {');
    expect(css).toContain('background-color: #f7f7f9 !important;');
    expect(css).toContain('a.bg-faded {');
    expect(css).toContain('&:focus,');
    expect(css).toContain('&.focus,');
    expect(css).toContain('&:hover,');
    expect(css).toContain('&.hover {');
    expect(css).toContain('background-color: rgb(190, 190, 207) !important;');
  });
  it('bgFaded should return a css', () => {
    const css = bgFaded(defaultProps['$enable-hover-media-query'], defaultProps['$body-bg']);
    expect(css).not.toContain('undefined');
    expect(css).not.toContain('null');
    expect(css).toContain('.bg-faded {');
    expect(css).toContain('background-color: #f7f7f9 !important;');
    expect(css).toContain('a.bg-faded {');
    expect(css).toContain('&:focus,');
    expect(css).toContain('&.focus,');
    expect(css).toContain('&:hover,');
    expect(css).toContain('&.hover {');
    expect(css).toContain('background-color: rgb(190, 190, 207) !important;');
  });
  it('bgPrimary should return a css', () => {
    const css = bgPrimary(defaultProps['$enable-hover-media-query'], defaultProps['$brand-primary']);
    expect(css).not.toContain('undefined');
    expect(css).not.toContain('null');
    expect(css).toContain('.bg-primary {');
    expect(css).toContain('background-color: #0275d8 !important;');
    expect(css).toContain('}');
    expect(css).toContain('a.bg-primary {');
    expect(css).toContain('');
    expect(css).toContain('&:focus,');
    expect(css).toContain('&.focus,');
    expect(css).toContain('&:hover,');
    expect(css).toContain('&.hover {');
    expect(css).toContain('background-color: rgb(2, 94, 173) !important;');
    expect(css).toContain('}');
  });
  it('bgSuccess should return a css', () => {
    const css = bgSuccess(defaultProps['$enable-hover-media-query'], defaultProps['$brand-success']);
    expect(css).not.toContain('undefined');
    expect(css).not.toContain('null');
    expect(css).toContain('.bg-success {');
    expect(css).toContain('background-color: #5cb85c !important;');
    expect(css).toContain('}');
    expect(css).toContain('a.bg-success {');
    expect(css).toContain('');
    expect(css).toContain('&:focus,');
    expect(css).toContain('&.focus,');
    expect(css).toContain('&:hover,');
    expect(css).toContain('&.hover {');
    expect(css).toContain('background-color: rgb(67, 154, 67) !important;');
    expect(css).toContain('}');
  });
  it('bgInfo should return a css', () => {
    const css = bgInfo(defaultProps['$enable-hover-media-query'], defaultProps['$brand-info']);
    expect(css).not.toContain('undefined');
    expect(css).not.toContain('null');
    expect(css).toContain('.bg-info {');
    expect(css).toContain('background-color: #5bc0de !important;');
    expect(css).toContain('}');
    expect(css).toContain('a.bg-info {');
    expect(css).toContain('');
    expect(css).toContain('&:focus,');
    expect(css).toContain('&.focus,');
    expect(css).toContain('&:hover,');
    expect(css).toContain('&.hover {');
    expect(css).toContain('background-color: rgb(42, 170, 209) !important;');
    expect(css).toContain('}');
  });
  it('bgWarning should return a css', () => {
    const css = bgWarning(defaultProps['$enable-hover-media-query'], defaultProps['$brand-warning']);
    expect(css).not.toContain('undefined');
    expect(css).not.toContain('null');
    expect(css).toContain('.bg-warning {');
    expect(css).toContain('background-color: #f0ad4e !important;');
    expect(css).toContain('}');
    expect(css).toContain('a.bg-warning {');
    expect(css).toContain('');
    expect(css).toContain('&:focus,');
    expect(css).toContain('&.focus,');
    expect(css).toContain('&:hover,');
    expect(css).toContain('&.hover {');
    expect(css).toContain('background-color: rgb(235, 146, 20) !important;');
    expect(css).toContain('}');
  });
  it('bgDanger should return a css', () => {
    const css = bgDanger(defaultProps['$enable-hover-media-query'], defaultProps['$brand-danger']);
    expect(css).not.toContain('undefined');
    expect(css).not.toContain('null');
    expect(css).toContain('.bg-danger {');
    expect(css).toContain('background-color: #d9543f !important;');
    expect(css).toContain('}');
    expect(css).toContain('a.bg-danger {');
    expect(css).toContain('');
    expect(css).toContain('&:focus,');
    expect(css).toContain('&.focus,');
    expect(css).toContain('&:hover,');
    expect(css).toContain('&.hover {');
    expect(css).toContain('background-color: rgb(187, 58, 37) !important;');
    expect(css).toContain('}');
  });
  it('bgInverse should return a css', () => {
    const css = bgInverse(defaultProps['$enable-hover-media-query'], defaultProps['$brand-inverse']);
    expect(css).not.toContain('undefined');
    expect(css).not.toContain('null');
    expect(css).toContain('.bg-inverse {');
    expect(css).toContain('background-color: #373a3c !important;');
    expect(css).toContain('a.bg-inverse {');
    expect(css).toContain('&:focus,');
    expect(css).toContain('&.focus,');
    expect(css).toContain('&:hover,');
    expect(css).toContain('&.hover {');
    expect(css).toContain('background-color: rgb(44, 46, 48) !important;');
  });
  it('bgFaded should have a parameter', () => {
    const css = bgFaded();
    expect(css).not.toContain('undefined');
    expect(css).not.toContain('null');
    expect(css).toContain('.bg-faded {');
    expect(css).toContain('background-color: #f7f7f9 !important;');
    expect(css).toContain('a.bg-faded {');
    expect(css).toContain('&:focus,');
    expect(css).toContain('&.focus,');
    expect(css).toContain('&:hover,');
    expect(css).toContain('&.hover {');
    expect(css).toContain('background-color: rgb(190, 190, 207) !important;');
  });
  it('bgFaded should have a parameter', () => {
    const css = bgPrimary();
    expect(css).not.toContain('undefined');
    expect(css).not.toContain('null');
    expect(css).toContain('.bg-primary {');
    expect(css).toContain('background-color: #0275d8 !important;');
    expect(css).toContain('a.bg-primary {');
    expect(css).toContain('&:focus,');
    expect(css).toContain('&.focus,');
    expect(css).toContain('&:hover,');
    expect(css).toContain('&.hover {');
    expect(css).toContain('background-color: rgb(2, 94, 173) !important;');
  });
  it('bgFaded should have a parameter', () => {
    const css = bgSuccess();
    expect(css).not.toContain('undefined');
    expect(css).not.toContain('null');
    expect(css).toContain('.bg-success {');
    expect(css).toContain('background-color: #5cb85c !important;');
    expect(css).toContain('a.bg-success {');
    expect(css).toContain('&:focus,');
    expect(css).toContain('&.focus,');
    expect(css).toContain('&:hover,');
    expect(css).toContain('&.hover {');
    expect(css).toContain('background-color: rgb(67, 154, 67) !important;');
  });
  it('bgFaded should have a parameter', () => {
    const css = bgInfo();
    expect(css).not.toContain('undefined');
    expect(css).not.toContain('null');
    expect(css).toContain('.bg-info {');
    expect(css).toContain('background-color: #5bc0de !important;');
    expect(css).toContain('a.bg-info {');
    expect(css).toContain('&:focus,');
    expect(css).toContain('&.focus,');
    expect(css).toContain('&:hover,');
    expect(css).toContain('&.hover {');
    expect(css).toContain('background-color: rgb(42, 170, 209) !important;');
  });
  it('bgFaded should have a parameter', () => {
    const css = bgWarning();
    expect(css).not.toContain('undefined');
    expect(css).not.toContain('null');
    expect(css).toContain('.bg-warning {');
    expect(css).toContain('background-color: #f0ad4e !important;');
    expect(css).toContain('a.bg-warning {');
    expect(css).toContain('&:focus,');
    expect(css).toContain('&.focus,');
    expect(css).toContain('&:hover,');
    expect(css).toContain('&.hover {');
    expect(css).toContain('background-color: rgb(235, 146, 20) !important;');
  });
  it('bgFaded should have a parameter', () => {
    const css = bgDanger();
    expect(css).not.toContain('undefined');
    expect(css).not.toContain('null');
    expect(css).toContain('.bg-danger {');
    expect(css).toContain('background-color: #d9543f !important;');
    expect(css).toContain('a.bg-danger {');
    expect(css).toContain('&:focus,');
    expect(css).toContain('&.focus,');
    expect(css).toContain('&:hover,');
    expect(css).toContain('&.hover {');
    expect(css).toContain('background-color: rgb(187, 58, 37) !important;');
    expect(css).toContain('}');
  });
  it('bgFaded should have a parameter', () => {
    const css = bgInverse();
    expect(css).not.toContain('undefined');
    expect(css).not.toContain('null');
    expect(css).toContain('.bg-inverse {');
    expect(css).toContain('background-color: #373a3c !important;');
    expect(css).toContain('a.bg-inverse {');
    expect(css).toContain('&:focus,');
    expect(css).toContain('&.focus,');
    expect(css).toContain('&:hover,');
    expect(css).toContain('&.hover {');
    expect(css).toContain('background-color: rgb(44, 46, 48) !important;');
  });
});