Unit tests and storybook for widgets

trodriguez30 · November 10, 2022, 3:10pm

Is it possible to create unit tests for widgets? I’ve been looking for some examples in the documentation and in some lightning repositories but I couldn’t find any information about it. Another question I have is related to the creation of stories on storybook for this kind of widgets, The same thing happens that I mentioned before

chiefcll · November 12, 2022, 2:44pm

You’re in luck - check out GitHub - rdkcentral/Lightning-UI-Components: Lightning UI components for both storybook and tests on individual widgets.

Chris

trodriguez30 · November 15, 2022, 7:30pm

Hi, I really appreciate your answer. I know this repository, it is one of my references, but, I haven’t been able to find a test or story for router widgets, so my question is, is it possible to test or create a story for this kind of widgets? Because all the examples I’ve found are for regular components but not for router widgets(e.g. a modal)

chiefcll · November 15, 2022, 8:27pm

Yes, you should be able to do all kinds of widgets. For a router widget you may just want documentation like we did here:

https://rdkcentral.github.io/Lightning-UI-Components/?path=/docs/mixins-withannouncer--basic

As it’s hard to create an example and you’ll have to build up the whole application from scratch (since most components live inside a page). There are also tests for it which don’t use the lightning-test-render as we need it at the App level:

github.com

rdkcentral/Lightning-UI-Components/blob/develop/mixins/withAnnouncer/withAnnouncer.test.js

/**
 * Copyright 2021 Comcast Cable Communications Management, LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * SPDX-License-Identifier: Apache-2.0
 */

import Announcer from '.';
import FocusManager from '../../layout/FocusManager';

This file has been truncated. show original

You should be able to do something similar with testing a Router.

For Modal, that would exist inside a page so you could test that like a normal component.

chiefcll · November 15, 2022, 8:35pm

Also, if you’re using the SDK router (recommended) - you can test that like so:

github.com

ComcastSamples/lightning-ui-tmdb/blob/main/test/routes.test.js

import { Router } from '@lightningjs/sdk';
import App from 'src/';
import settings from '../settings.json';

const app = App({
  stage: { ...settings['appSettings'].stage, useImageWorker: false, debug: false },
  debug: false
}, settings['platformSettings']);

describe('routes', () => {
  it('should have a browse route', (done) => {
    Router.navigate('browse');
    setTimeout(() => {
      expect(Router.getActivePage().constructor.name).toBe('Browse');
      done();
    }, 20);
  });

  it('should have a movie route', (done) => {
    Router.navigate('movie/1234');

This file has been truncated. show original

Topic		Replies	Views
Lightningjs3 UI components Get Help	0	105	April 26, 2024
Release of Lightning UI Components with Theming (2.0)! News	4	1291	April 4, 2023
UI components release News	4	629	March 7, 2023
How to do automation testing of lightningJS app using Jest? Get Help	1	34	July 19, 2024
Colors plugin with storybook Get Help	0	272	August 29, 2022

Unit tests and storybook for widgets

Related topics