'개발/jquery'에 해당되는 글 3건

  1. 2018.02.14 Javascript 테스트
  2. 2018.01.10 Javascript 로 파일 다운로드 구현하기
  3. 2017.11.28 table rowspan 동적 적용 1

Javascript 테스트

개발/jquery 2018. 2. 14. 22:41

  1. qunit 소개

    • 링크
    • javascript 단위테스트 프레임워크 이다
    • javascript 뿐만 아니라 jQuery, jQuery UI, jQuery Mobile 에서도 사용이 가능하다
    • 장점:
      • UI 제공
      • report 제공

  2. qunit 을 이용한 test

    • 샘플을 통한 구조 이해
    •   <!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>QUnit Example</title>
    <link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.5.0.css">
  </head>
  <body>
    <div id="qunit"></div>
    <div id="qunit-fixture"></div>
    <script src="https://code.jquery.com/qunit/qunit-2.5.0.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/qunit-reporter-junit@1.1.1/qunit-reporter-junit.min.js"></script>
    <script>
        <!-- TEST CASE -->
      QUnit.test( "hello test", function( assert ) {
        assert.ok( 1 == "1", "Passed!" );
      });
        <!-- TEST REPORT -->
      QUnit.jUnitReport = function(report) {
        if (typeof console !== 'undefined') {
          console.log(report.xml);
        }
      };
    </script>
  </body>
  </html>
      • 샘플 html 호출 결과

  3. qunit 와 phantomjs 를 활용한 js test 구성하기

     html 코드에 필요한 JS function test 만 넣어도 테스트에는 문제가 없지만
 CI 서버에 연동하여 자동배포의 한 단계로 추가하고 싶다면 ...
 step.1 test 결과를 남기고
 step.2 결과를 분석해야 한다
    • pre-requisites:
        # yum install fontconfig freetype freetype-devel fontconfig-devel libstdc++
    • 필요한 패키지 다운로드 및 압축해제
        $ wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-x86_64.tar.bz2
  $ bunzip2 phantomjs-2.1.1-linux-x86_64.tar.bz2
  $ tar xvf phantomjs-2.1.1-linux-x86_64.tar
    • 실행 명령어 샘플
        # runner.js 다운로드
  $ wget https://github.com/jonkemp/qunit-phantomjs-runner/blob/master/runner.js
  # test 실행
  $ /{{phantomjs 압축 해제한 폴더}}/bin/phantomjs runner.js {{테스트 할 html 파일}}

    • 실행 예제

        $ /{{phantomjs 압축 해제한 폴더}}/bin/phantomjs runner.js QunitTest.html
  <?xml version="1.0" encoding="UTF-8"?>
  <testsuites name="file://{{QunitTest_PATH}}/QunitTest.html" tests="2" failures="0" errors="0" time="0.008">
      <testsuite id="0" name="" hostname="localhost" tests="1" failures="0" errors="0" time="0.004" timestamp="2018-01-31T07:50:38Z">
          <testcase name="hello test" time="0.002" timestamp="2018-01-31T07:50:38Z">
          </testcase>
      </testsuite>
  </testsuites>

  Took 8ms to run 2 tests. 2 passed, 0 failed.
  $


'개발 > jquery' 카테고리의 다른 글

Javascript 로 파일 다운로드 구현하기  (0) 2018.01.10
table rowspan 동적 적용  (1) 2017.11.28
Posted by 감각적신사
,

Javascript 로 파일 다운로드 구현하기

개발/jquery 2018. 1. 10. 23:23

Javascript 로 파일 다운로드 구현하기

  1. 목적
    • 임시로 필요한 파일에 대한 다운로드를 구현하고자 한다
    • 서버에 있는 파일을 읽어서 다운로드 시켜주는 것이 아니라 js 단에서 파일을 만들어 다운로드 시켜준다
    • 서버의 불필요한 리소스를 사용하지 않는다
  2. 구현
    • HTML
        <button id="file_download">click</button>
  <a id="download" download="" href=""></a>
    • Javascript
        var abc = {};
  abc['aaa'] = 'bbb';
  $("#file_download").on("click", function (e) {
      $("a#download").attr({
          "download": "download.json",
          "href": "data:application/json;charset=utf8;base64," + window.btoa(JSON.stringify(abc))
      }).get(0).click();
  });
  3. 구현예제


'개발 > jquery' 카테고리의 다른 글

Javascript 테스트  (0) 2018.02.14
table rowspan 동적 적용  (1) 2017.11.28
Posted by 감각적신사
,

table rowspan 동적 적용

개발/jquery 2017. 11. 28. 00:37

JQuery

  1. 소스

    • <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rowspan Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
<div>
<button onclick="set_rowspan()">rowspan</button>
<table id="table-rowspan" class="table table-striped table-hover">
  <thead>
      <tr class="info">
          <th>컬럼1</th>
          <th>컬럼2</th>
          <th>컬럼3</th>
      </tr>
  </thead>
  <tbody>
      <tr class="gubun" id='0'>
          <td>0</td>
          <td>0</td>
          <td>0</td>
      </tr>
      <tr class="gubun" id='1'>
          <td>1</td>
          <td>2</td>
          <td>2</td>
      </tr>
      <tr class="gubun" id='2'>
          <td>1</td>
          <td>3</td>
          <td>3</td>
      </tr>
  </tbody>
</table>
</div>
<script>
$(document).ready(function() {
  console.log('load')
  tableRowSpanning("#table-rowspan", 0);
});

// 동일한 이름을 가진 열의 값을 통합한다
function table_row_spanning(table, spanning_row_index) {
    var rowspan_td = false;
    var rowspan_column_name = false;
    var rowspan_count = 0;
    var rows = $('tr', table);

    $.each(rows, function () {
        var This = $('td', this)[spanning_row_index];
        var text = $(This).text();

        if (rowspan_td == false) {
            rowspan_td = This;
            rowspan_column_name = text;
            rowspan_count = 1;
        }
        else if (rowspan_column_name != text) {
            $(rowspan_td).attr('rowSpan', rowspan_count);

            rowspan_td = This;
            rowspan_column_name = text;
            rowspan_count = 1;
        }
        else {
            $(This).remove();
            rowspan_count++;
        }
    });

    // 반복 종료 후 마지막 rowspan 적용
    $(rowspan_td).attr('rowSpan', rowspan_count);
}
</script>
</body>
</html>
  2. 화면


'개발 > jquery' 카테고리의 다른 글

Javascript 테스트  (0) 2018.02.14
Javascript 로 파일 다운로드 구현하기  (0) 2018.01.10
Posted by 감각적신사
,

티스토리툴바