OKta sign-in widget test

[raghuvarbisht]

login.vue-

  `

    

  
`

<script>

import OktaSignIn from '@okta/okta-signin-widget';
import constants from '@/config';
import { $http } from '@/utility/$http';
const http = new $http();

export default {
  name: "login",
   data: function () {
    return {
      authenticated: false
    }
  },
  created () { 
    this.isAuthenticated();
  },
  methods: {
    async isAuthenticated () {
      this.authenticated = await this.$auth.isAuthenticated()

      if(this.authenticated){
        this.$router.push(this.constants.landingPageUrl);
      }
    }
  },
  mounted: function () {
    this.$nextTick(function () {
      this.widget = new OktaSignIn({
        /**
         * Note: when using the Sign-In Widget for an OIDC flow, it still
         * needs to be configured with the base URL for your Okta Org. Here
         * we derive it from the given issuer for convenience.
         */
        baseUrl: constants.oidc.issuer.split('/oauth2')[0],
        clientId: constants.oidc.clientId,
        redirectUri: constants.oidc.redirectUri,
        logo: require("@/assets/img/intient-logo.svg"),
        i18n: {
          en: {
            'primaryauth.title': 'Test'
          }
        },
        authParams: {
          pkce: true,
          issuer: constants.oidc.issuer,
          display: 'page',
          scopes: constants.oidc.scopes
        }
      })
      this.widget.renderEl(
        { el: '#okta-signin-container' },
        () => {
          /**
           * In this flow, the success handler will not be called because we redirect
           * to the Okta org for the authentication workflow.
           */
        },
        (err) => {
          throw err
        }
      )
    })
  },
  destroyed () {
    // Remove the widget from the DOM on path change
    this.widget.remove()
  },
  watch: {
    // Everytime the route changes, check for auth status
    '$route': 'isAuthenticated'
  },
};
</script>

Login.spec.js -

import { shallowMount ,createLocalVue} from "@vue/test-utils";
import Login from "@/components/login/login";
import VueRouter from 'vue-router';

const localVue = createLocalVue();
localVue.use(VueRouter);


const routes = [
    {
        path: '/',
        component: Login,
    }
];
const auth = {
    isAuthenticated: function(){ return true;}
  };
describe('login page component tests', () => {
  // Now mount the component and you have the wrapper
  
  
  it('login should match the snapshot', () => {
    let wrapper = shallowMount(Login,{
        localVue,
        mocks:{
            $auth: {isAuthenticated: function(){ return true;}}
        }
      });  
    expect(wrapper.html()).toMatchSnapshot();
    wrapper = null;
  });

  it('find the login-widget element', () => {
    let wrapper = shallowMount(Login,{
        localVue,
        mocks:{
            $auth: {isAuthenticated: function(){ return false;}}
        }
      });  
    
    expect(wrapper.classes()).toContain('login-widget');
    wrapper = null;
  });

  
  it('should execute destroyed hooks', done => {
    let wrapper = shallowMount(Login,{
        localVue,
        mocks:{
            $widget:{remove: function(){}}
        }
      });
    wrapper.destroy();
    done();
  })
  
  
 
})

after running test case I am getting below error please help how we can fix this issue.

i am getting below error

[raghuvarbisht]

Can you please let me know how i can write test for oktawidget using jest in vue with 100%coverage?

[swiftone]

@raghuvarbisht - That's somewhat outside the scope of our support. As a general piece of advice, you don't want to be testing third party libraries in unit tests. I suggest excluding the widget from your coverage amount and mock out the widget/library interface to confirm that your code passes the correct parameters to out.