generators/javascript-css/src/__tests__/__snapshots__/createGenerator-test.js.snap from rofrischmann/elodin

generators/javascript-css/src/__tests__/__snapshots__/createGenerator-test.js.snap
Summary

Maintainability

Test Coverage

Issues
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Generating files using @elodin/generator-javascript should add reset class names 1`] = `
Object {
  "Button.elo.css": "._diyf7s {
  padding-left: 10px;
  padding-right: var(--right)
}

@media (min-width: 1024px) {
  ._diyf7s {
    padding-left: 20px;
    padding-right: var(--right)
  }
}

._diyf7s_0-0 {
  padding-top: 10px;
  padding-bottom: var(--bottom)
}",
  "Button.elo.js": "import { getClassNameFromVariantMap } from \\"@elodin/runtime\\"
require(\\"./Button.elo.css\\")

const variantClassNameMap = {
  \\"\\": {},
  \\"_0-0\\": {
    \\"Mode\\": \\"Dark\\"
  }
}

export function Button(props = {}) {
  return \\"elo \\" + getClassNameFromVariantMap('_diyf7s', variantClassNameMap, props)

};",
  "ButtonText.elo.css": "._1hjhowh {
  color: red
}",
  "ButtonText.elo.js": "require(\\"./ButtonText.elo.css\\")

export function ButtonText(props = {}) {
  return \\"elo _1hjhowh\\"
};",
  "style.elo.js": "import { Button } from './Button.elo.js'
import { ButtonText } from './ButtonText.elo.js'

export {
  Button,
  ButtonText
}",
}
`;

exports[`Generating files using @elodin/generator-javascript should generate css and js files for each style 1`] = `
Object {
  "Button.elo.css": "._diyf7s {
  padding-left: 10px;
  padding-right: var(--right)
}

@media (min-width: 1024px) {
  ._diyf7s {
    padding-left: 20px;
    padding-right: var(--right)
  }
}

._diyf7s_0-0 {
  padding-top: 10px;
  padding-bottom: var(--bottom)
}",
  "Button.elo.js": "import { getClassNameFromVariantMap } from \\"@elodin/runtime\\"
require(\\"./Button.elo.css\\")

const variantClassNameMap = {
  \\"\\": {},
  \\"_0-0\\": {
    \\"Mode\\": \\"Dark\\"
  }
}

export function Button(props = {}) {
  return getClassNameFromVariantMap('_diyf7s', variantClassNameMap, props)

};",
  "ButtonText.elo.css": "._1hjhowh {
  color: red
}",
  "ButtonText.elo.js": "require(\\"./ButtonText.elo.css\\")

export function ButtonText(props = {}) {
  return \\"_1hjhowh\\"
};",
  "style.elo.js": "import { Button } from './Button.elo.js'
import { ButtonText } from './ButtonText.elo.js'

export {
  Button,
  ButtonText
}",
}
`;

exports[`Generating files using @elodin/generator-javascript should generate readable classnames in devMode 1`] = `
Object {
  "Button.elo.css": ".Button_diyf7s {
  padding-left: 10px;
  padding-right: var(--right)
}

@media (min-width: 1024px) {
  .Button_diyf7s {
    padding-left: 20px;
    padding-right: var(--right)
  }
}

.Button_diyf7s__Mode-Dark {
  padding-top: 10px;
  padding-bottom: var(--bottom)
}",
  "Button.elo.js": "import { getClassNameFromVariantMap } from \\"@elodin/runtime\\"
require(\\"./Button.elo.css\\")

const variantClassNameMap = {
  \\"\\": {},
  \\"__Mode-Dark\\": {
    \\"Mode\\": \\"Dark\\"
  }
}

export function Button(props = {}) {
  return getClassNameFromVariantMap('Button_diyf7s', variantClassNameMap, props)

};",
  "ButtonText.elo.css": ".ButtonText_1hjhowh {
  color: red
}",
  "ButtonText.elo.js": "require(\\"./ButtonText.elo.css\\")

export function ButtonText(props = {}) {
  return \\"ButtonText_1hjhowh\\"
};",
  "style.elo.js": "import { Button } from './Button.elo.js'
import { ButtonText } from './ButtonText.elo.js'

export {
  Button,
  ButtonText
}",
}
`;

exports[`Generating files using @elodin/generator-javascript should only generate js files 1`] = `
Object {
  "Button.elo.css": "._diyf7s {
  padding-left: 10px;
  padding-right: var(--right)
}

@media (min-width: 1024px) {
  ._diyf7s {
    padding-left: 20px;
    padding-right: var(--right)
  }
}

._diyf7s_0-0 {
  padding-top: 10px;
  padding-bottom: var(--bottom)
}",
  "Button.elo.js": "import { getClassNameFromVariantMap } from \\"@elodin/runtime\\"
require(\\"./Button.elo.css\\")

const variantClassNameMap = {
  \\"\\": {},
  \\"_0-0\\": {
    \\"Mode\\": \\"Dark\\"
  }
}

export function Button(props = {}) {
  return getClassNameFromVariantMap('_diyf7s', variantClassNameMap, props)

};",
  "ButtonText.elo.css": "._1hjhowh {
  color: red
}",
  "ButtonText.elo.js": "require(\\"./ButtonText.elo.css\\")

export function ButtonText(props = {}) {
  return \\"_1hjhowh\\"
};",
  "style.elo.js": "import { Button } from './Button.elo.js'
import { ButtonText } from './ButtonText.elo.js'

export {
  Button,
  ButtonText
}",
}
`;

exports[`Generating files using @elodin/generator-javascript should only generate js files with baseClassName 1`] = `
Object {
  "Button.elo.css": "._diyf7s {
  padding-left: 10px;
  padding-right: var(--right)
}

@media (min-width: 1024px) {
  ._diyf7s {
    padding-left: 20px;
    padding-right: var(--right)
  }
}

._diyf7s_0-0 {
  padding-top: 10px;
  padding-bottom: var(--bottom)
}",
  "Button.elo.js": "import { getClassNameFromVariantMap } from \\"@elodin/runtime\\"
require(\\"./Button.elo.css\\")

const variantClassNameMap = {
  \\"\\": {},
  \\"_0-0\\": {
    \\"Mode\\": \\"Dark\\"
  }
}

export function Button(props = {}) {
  return \\"elo \\" + getClassNameFromVariantMap('_diyf7s', variantClassNameMap, props)

};",
  "ButtonText.elo.css": "._1hjhowh {
  color: red
}",
  "ButtonText.elo.js": "require(\\"./ButtonText.elo.css\\")

export function ButtonText(props = {}) {
  return \\"elo _1hjhowh\\"
};",
  "style.elo.js": "import { Button } from './Button.elo.js'
import { ButtonText } from './ButtonText.elo.js'

export {
  Button,
  ButtonText
}",
}
`;

exports[`Generating files using @elodin/generator-javascript should use a custom style name 1`] = `
Object {
  "Button.elo.css": "._diyf7s {
  padding-left: 10px;
  padding-right: var(--right)
}

@media (min-width: 1024px) {
  ._diyf7s {
    padding-left: 20px;
    padding-right: var(--right)
  }
}

._diyf7s_0-0 {
  padding-top: 10px;
  padding-bottom: var(--bottom)
}",
  "Button.elo.js": "import { getClassNameFromVariantMap } from \\"@elodin/runtime\\"
require(\\"./Button.elo.css\\")

const variantClassNameMap = {
  \\"\\": {},
  \\"_0-0\\": {
    \\"Mode\\": \\"Dark\\"
  }
}

export function ButtonStyle(props = {}) {
  return getClassNameFromVariantMap('_diyf7s', variantClassNameMap, props)

};",
  "ButtonText.elo.css": "._1hjhowh {
  color: red
}",
  "ButtonText.elo.js": "require(\\"./ButtonText.elo.css\\")

export function ButtonTextStyle(props = {}) {
  return \\"_1hjhowh\\"
};",
  "style.elo.js": "import { ButtonStyle } from './Button.elo.js'
import { ButtonTextStyle } from './ButtonText.elo.js'

export {
  ButtonStyle,
  ButtonTextStyle
}",
}
`;

exports[`Generating files using @elodin/generator-javascript should use custom css file names 1`] = `
Object {
  "BUTTON.elo.css": "._diyf7s {
  padding-left: 10px;
  padding-right: var(--right)
}

@media (min-width: 1024px) {
  ._diyf7s {
    padding-left: 20px;
    padding-right: var(--right)
  }
}

._diyf7s_0-0 {
  padding-top: 10px;
  padding-bottom: var(--bottom)
}",
  "BUTTONTEXT.elo.css": "._1hjhowh {
  color: red
}",
  "Button.elo.js": "import { getClassNameFromVariantMap } from \\"@elodin/runtime\\"
require(\\"./BUTTON.elo.css\\")

const variantClassNameMap = {
  \\"\\": {},
  \\"_0-0\\": {
    \\"Mode\\": \\"Dark\\"
  }
}

export function Button(props = {}) {
  return getClassNameFromVariantMap('_diyf7s', variantClassNameMap, props)

};",
  "ButtonText.elo.js": "require(\\"./BUTTONTEXT.elo.css\\")

export function ButtonText(props = {}) {
  return \\"_1hjhowh\\"
};",
  "style.elo.js": "import { Button } from './Button.elo.js'
import { ButtonText } from './ButtonText.elo.js'

export {
  Button,
  ButtonText
}",
}
`;

exports[`Generating files using @elodin/generator-javascript should use custom js file names 1`] = `
Object {
  "BUTTON.elo.js": "import { getClassNameFromVariantMap } from \\"@elodin/runtime\\"
require(\\"./Button.elo.css\\")

const variantClassNameMap = {
  \\"\\": {},
  \\"_0-0\\": {
    \\"Mode\\": \\"Dark\\"
  }
}

export function Button(props = {}) {
  return getClassNameFromVariantMap('_diyf7s', variantClassNameMap, props)

};",
  "BUTTONTEXT.elo.js": "require(\\"./ButtonText.elo.css\\")

export function ButtonText(props = {}) {
  return \\"_1hjhowh\\"
};",
  "Button.elo.css": "._diyf7s {
  padding-left: 10px;
  padding-right: var(--right)
}

@media (min-width: 1024px) {
  ._diyf7s {
    padding-left: 20px;
    padding-right: var(--right)
  }
}

._diyf7s_0-0 {
  padding-top: 10px;
  padding-bottom: var(--bottom)
}",
  "ButtonText.elo.css": "._1hjhowh {
  color: red
}",
  "style.elo.js": "import { Button } from './BUTTON.elo.js'
import { ButtonText } from './BUTTONTEXT.elo.js'

export {
  Button,
  ButtonText
}",
}
`;

exports[`Generating files using @elodin/generator-javascript should use dynamic imports 1`] = `
Object {
  "Button.elo.css": "._diyf7s {
  padding-left: 10px;
  padding-right: var(--right)
}

@media (min-width: 1024px) {
  ._diyf7s {
    padding-left: 20px;
    padding-right: var(--right)
  }
}

._diyf7s_0-0 {
  padding-top: 10px;
  padding-bottom: var(--bottom)
}",
  "Button.elo.js": "import { getClassNameFromVariantMap } from \\"@elodin/runtime\\"
const variantClassNameMap = {
  \\"\\": {},
  \\"_0-0\\": {
    \\"Mode\\": \\"Dark\\"
  }
}

export function Button(props = {}) {
  import(\\"./Button.elo.css\\")

  return getClassNameFromVariantMap('_diyf7s', variantClassNameMap, props)

};",
  "ButtonText.elo.css": "._1hjhowh {
  color: red
}",
  "ButtonText.elo.js": "export function ButtonText(props = {}) {
  import(\\"./ButtonText.elo.css\\")

  return \\"_1hjhowh\\"
};",
  "style.elo.js": "import { Button } from './Button.elo.js'
import { ButtonText } from './ButtonText.elo.js'

export {
  Button,
  ButtonText
}",
}
`;

exports[`Generating files using @elodin/generator-javascript should work with all options combined 1`] = `
Object {
  "BUTTON.elo.css": ".Button_diyf7s {
  padding-left: 10px;
  padding-right: var(--right)
}

@media (min-width: 1024px) {
  .Button_diyf7s {
    padding-left: 20px;
    padding-right: var(--right)
  }
}

.Button_diyf7s__Mode-Dark {
  padding-top: 10px;
  padding-bottom: var(--bottom)
}",
  "BUTTON.elo.js": "import { getClassNameFromVariantMap } from \\"@elodin/runtime\\"
const variantClassNameMap = {
  \\"\\": {},
  \\"__Mode-Dark\\": {
    \\"Mode\\": \\"Dark\\"
  }
}

export function Button(props = {}) {
  import(\\"./BUTTON.elo.css\\")

  return \\"elo \\" + getClassNameFromVariantMap('Button_diyf7s', variantClassNameMap, props)

};",
  "BUTTONTEXT.elo.css": ".ButtonText_1hjhowh {
  color: red
}",
  "BUTTONTEXT.elo.js": "export function ButtonText(props = {}) {
  import(\\"./BUTTONTEXT.elo.css\\")

  return \\"elo ButtonText_1hjhowh\\"
};",
  "style.elo.js": "import { Button } from './BUTTON.elo.js'
import { ButtonText } from './BUTTONTEXT.elo.js'

export {
  Button,
  ButtonText
}",
}
`;