No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. aislan
    A
    • Profile
    • Following 0
    • Followers 0
    • Topics 4
    • Posts 13
    • Best 2
    • Groups 0

    aislan

    @aislan

    4
    Reputation
    4
    Profile views
    13
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    aislan Follow

    Best posts made by aislan

    • Help to get @quasar/testing Jest with coverage setup with Typescript

      I’ve just installed @quasar/testing with Jest, Cypress and Lighthouse chosen as my tools for testing.
      What I did was to run: quasar ext add @quasar/testing and select the tools above without any additional stuff.
      We are using Typescript in this project, with a bunch of interfaces, classes, types and whatever.
      The problem here is that running quasar run @quasar/testing test --unit=jest that by default runs coverage as well, is not recognizing my Typescript syntax in my files and return errors related to syntax and errors related to export. One of them is:

      Add @babel/plugin-proposal-export-default-from (https://git.io/vb4yH) to the 'plugins' section of your Babel config to enable transformation.
      STACK: SyntaxError: /home/aislan/Projetos/Vue/MyProject/quasar_test/atlas-front/src/models/userInformation.ts: Support for the experimental syntax 'exportDefaultFrom' isn't currently enabled (1:8):
      
      > 1 | export interface UserInformationModel {
          |        ^
        2 |   id?: string;
        3 |   password: string;
        4 |   user_id: string;
      

      And here is config files without any modification from what Quasar brings to us:

      babel.conf.js:

      const fs = require('fs-extra');
      let extend = undefined;
      
      /**
       * The .babelrc file has been created to assist Jest for transpiling.
       * You should keep your application's babel rules in this file.
       */
      
      if (fs.existsSync('./.babelrc')) {
        extend = './.babelrc';
      }
      
      module.exports = {
        presets: ['@quasar/babel-preset-app'],
        extends: extend
      };
      

      .babelrc:

      {
        "plugins": ["@babel/plugin-syntax-dynamic-import"],
        "env": {
          "test": {
            "plugins": ["dynamic-import-node"],
            "presets": [
              [
                "@babel/preset-env",
                {
                  "modules": "commonjs",
                  "targets": {
                    "node": "current"
                  }
                }
              ]
            ]
          }
        }
      }
      

      jest.conf.js:

      module.exports = {
        globals: {
          __DEV__: true
        },
        setupFilesAfterEnv: ['<rootDir>/test/jest/jest.setup.ts'],
        // noStackTrace: true,
        // bail: true,
        // cache: false,
        // verbose: true,
        // watch: true,
        collectCoverage: true,
        coverageDirectory: '<rootDir>/test/jest/coverage',
        collectCoverageFrom: [
          '<rootDir>/src/**/*.vue',
          '<rootDir>/src/**/*.js',
          '<rootDir>/src/**/*.ts',
          '<rootDir>/src/**/*.jsx'
        ],
        coverageThreshold: {
          global: {
            //  branches: 50,
            //  functions: 50,
            //  lines: 50,
            //  statements: 50
          }
        },
        testMatch: [
          '<rootDir>/test/jest/__tests__/**/*.spec.js',
          '<rootDir>/test/jest/__tests__/**/*.test.js',
          '<rootDir>/src/**/__tests__/*_jest.spec.js',
          '<rootDir>/src/**/*.spec.ts'
        ],
        moduleFileExtensions: ['vue', 'js', 'jsx', 'json', 'ts', 'tsx'],
        moduleNameMapper: {
          '^vue$': '<rootDir>/node_modules/vue/dist/vue.common.js',
          '^test-utils$':
            '<rootDir>/node_modules/@vue/test-utils/dist/vue-test-utils.js',
          '^quasar$': '<rootDir>/node_modules/quasar/dist/quasar.common.js',
          '^~/(.*)$': '<rootDir>/$1',
          '^src/(.*)$': '<rootDir>/src/$1',
          '.*css$': '<rootDir>/test/jest/utils/stub.css'
        },
        transform: {
          '.*\\.vue$': 'vue-jest',
          '.*\\.js$': 'babel-jest',
          '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
            'jest-transform-stub'
          // use these if NPM is being flaky
          // '.*\\.vue$': '<rootDir>/node_modules/@quasar/quasar-app-extension-testing-unit-jest/node_modules/vue-jest',
          // '.*\\.js$': '<rootDir>/node_modules/@quasar/quasar-app-extension-testing-unit-jest/node_modules/babel-jest'
        },
        transformIgnorePatterns: ['<rootDir>/node_modules/(?!quasar/lang)'],
        snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue']
      };
      
      

      I have tried to add @babel/plugin-proposal-export-default-from in .babelrc and babel.conf.js to get rid of export error, but no success.
      Any help I’ll be really grateful.

      posted in Help
      A
      aislan
    • RE: QTable footer with total count for each column visible

      @cmanique if this work with local pagination, it’s fine.
      But with this bottom-row I can follow the columns and each q-td get hidden together when toggling the visible cols (the respective q-td of the tbody and q-th for header?

      posted in Framework
      A
      aislan

    Latest posts made by aislan

    • RE: Sentry + Quasar

      @rld how do you populate those variable process.env.VUE_APP_COMMITHASH and process.env.VUE_APP_BRANCH.

      I think that could be something dynamically, but how ?

      And what this thing “upload-sourcemaps” you mentioned in the RUN command ?

      Since in Quasar projects we don’t have the file webpack.config.js will necessary to install @sentry/webpack-plugin ?

      posted in Framework
      A
      aislan
    • RE: How to add Cypress reports with Quasar and typescript enabled?

      @dobbel yeah, and this documentation doesn’t mention about configuring the plugins with Cypress, etc.
      It is kind of simplistic at most.

      posted in Framework
      A
      aislan
    • RE: Unknown command "build" CircleCI

      For me it’s happening the same problem.
      “yarn install” doesn’t fix it to me.

      quasar/cli installed is “1.1.2”

      posted in Help
      A
      aislan
    • How to add Cypress reports with Quasar and typescript enabled?

      I’m trying to configure Cypress reports in my Quasar project, but I’m not sure where to put my configs because Quasar projects are different than Vue cli projects and all tutorials I’ve encountered is only presented with Vue cli config.
      So I did follow some of them but my reports can’t detect my Vue component files to analyse the tests coverage on my codebase.

      Any help will be appreciated!!! Thanks!

      posted in Framework
      A
      aislan
    • RE: Quasar v2 teaser in a Codepen

      Can we use Quasar v2 with Vite ???

      posted in Announcements
      A
      aislan
    • RE: Web workers - how to use in Quasar

      Right now I’m just struggling with Quasar to place my worker files in another place not in statics folder.
      I would like to put them next my actions folder, etc.

      Someone knows how to achieve it?

      And related to workerize-loader, how could we test them with Jest, for example ?

      posted in Useful Tips (NEW)
      A
      aislan
    • RE: Web workers - how to use in Quasar

      @qyloxe and what about testing with Jest, for example??
      This solution workerize-loader will work out-of-box with unit test ? If it won’t, how to make it work in a testing scenario ?
      Sometime we forget about testing and complexities the solutions for our code brings when testing the codebase.

      posted in Useful Tips (NEW)
      A
      aislan
    • RE: QTable footer with total count for each column visible

      @cmanique if this work with local pagination, it’s fine.
      But with this bottom-row I can follow the columns and each q-td get hidden together when toggling the visible cols (the respective q-td of the tbody and q-th for header?

      posted in Framework
      A
      aislan
    • QTable footer with total count for each column visible

      Re: qtable summary footer

      As this topic above, I’m looking for this feature as well. The QTable doesn’t have a footer by default?
      I wasn’t expecting that a component like the table shouldn’t have a basic feature like that. We have so many options, but this doesn’t exist in the docs 😕

      What kind of footer I’m trying to do is like in this design below, just only a footer row that have for each columns a total count. This total count should appear and disappear with the column itself, of course.

      Captura de Tela_Área de Seleção_20200309104623.png

      Would be great if we have this footer sticky as well.

      Anyone knows how to accomplish that ? In advance, many thanks for this awesome framework!! 💕

      posted in Framework
      A
      aislan
    • Help to get @quasar/testing Jest with coverage setup with Typescript

      I’ve just installed @quasar/testing with Jest, Cypress and Lighthouse chosen as my tools for testing.
      What I did was to run: quasar ext add @quasar/testing and select the tools above without any additional stuff.
      We are using Typescript in this project, with a bunch of interfaces, classes, types and whatever.
      The problem here is that running quasar run @quasar/testing test --unit=jest that by default runs coverage as well, is not recognizing my Typescript syntax in my files and return errors related to syntax and errors related to export. One of them is:

      Add @babel/plugin-proposal-export-default-from (https://git.io/vb4yH) to the 'plugins' section of your Babel config to enable transformation.
      STACK: SyntaxError: /home/aislan/Projetos/Vue/MyProject/quasar_test/atlas-front/src/models/userInformation.ts: Support for the experimental syntax 'exportDefaultFrom' isn't currently enabled (1:8):
      
      > 1 | export interface UserInformationModel {
          |        ^
        2 |   id?: string;
        3 |   password: string;
        4 |   user_id: string;
      

      And here is config files without any modification from what Quasar brings to us:

      babel.conf.js:

      const fs = require('fs-extra');
      let extend = undefined;
      
      /**
       * The .babelrc file has been created to assist Jest for transpiling.
       * You should keep your application's babel rules in this file.
       */
      
      if (fs.existsSync('./.babelrc')) {
        extend = './.babelrc';
      }
      
      module.exports = {
        presets: ['@quasar/babel-preset-app'],
        extends: extend
      };
      

      .babelrc:

      {
        "plugins": ["@babel/plugin-syntax-dynamic-import"],
        "env": {
          "test": {
            "plugins": ["dynamic-import-node"],
            "presets": [
              [
                "@babel/preset-env",
                {
                  "modules": "commonjs",
                  "targets": {
                    "node": "current"
                  }
                }
              ]
            ]
          }
        }
      }
      

      jest.conf.js:

      module.exports = {
        globals: {
          __DEV__: true
        },
        setupFilesAfterEnv: ['<rootDir>/test/jest/jest.setup.ts'],
        // noStackTrace: true,
        // bail: true,
        // cache: false,
        // verbose: true,
        // watch: true,
        collectCoverage: true,
        coverageDirectory: '<rootDir>/test/jest/coverage',
        collectCoverageFrom: [
          '<rootDir>/src/**/*.vue',
          '<rootDir>/src/**/*.js',
          '<rootDir>/src/**/*.ts',
          '<rootDir>/src/**/*.jsx'
        ],
        coverageThreshold: {
          global: {
            //  branches: 50,
            //  functions: 50,
            //  lines: 50,
            //  statements: 50
          }
        },
        testMatch: [
          '<rootDir>/test/jest/__tests__/**/*.spec.js',
          '<rootDir>/test/jest/__tests__/**/*.test.js',
          '<rootDir>/src/**/__tests__/*_jest.spec.js',
          '<rootDir>/src/**/*.spec.ts'
        ],
        moduleFileExtensions: ['vue', 'js', 'jsx', 'json', 'ts', 'tsx'],
        moduleNameMapper: {
          '^vue$': '<rootDir>/node_modules/vue/dist/vue.common.js',
          '^test-utils$':
            '<rootDir>/node_modules/@vue/test-utils/dist/vue-test-utils.js',
          '^quasar$': '<rootDir>/node_modules/quasar/dist/quasar.common.js',
          '^~/(.*)$': '<rootDir>/$1',
          '^src/(.*)$': '<rootDir>/src/$1',
          '.*css$': '<rootDir>/test/jest/utils/stub.css'
        },
        transform: {
          '.*\\.vue$': 'vue-jest',
          '.*\\.js$': 'babel-jest',
          '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
            'jest-transform-stub'
          // use these if NPM is being flaky
          // '.*\\.vue$': '<rootDir>/node_modules/@quasar/quasar-app-extension-testing-unit-jest/node_modules/vue-jest',
          // '.*\\.js$': '<rootDir>/node_modules/@quasar/quasar-app-extension-testing-unit-jest/node_modules/babel-jest'
        },
        transformIgnorePatterns: ['<rootDir>/node_modules/(?!quasar/lang)'],
        snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue']
      };
      
      

      I have tried to add @babel/plugin-proposal-export-default-from in .babelrc and babel.conf.js to get rid of export error, but no success.
      Any help I’ll be really grateful.

      posted in Help
      A
      aislan